/**
 * Kalkulatory — jeden arkusz zamiast ośmiu powielonych.
 *
 * Kolory i kroje pobieramy ze zmiennych motywu, z wartościami zapasowymi na
 * wypadek użycia wtyczki gdzie indziej. Dzięki temu kalkulatory zmieniają się
 * razem z paletą portalu, w tym w trybie ciemnym, i nie wymagają osobnej
 * pielęgnacji.
 */

.poze-calc{
  --c-surface: var(--surface, #fff);
  --c-paper:   var(--paper, #F0F2EF);
  --c-ink:     var(--ink, #14181A);
  --c-ink-2:   var(--ink-2, #3D474A);
  --c-ink-3:   var(--ink-3, #6C7A7D);
  --c-rule:    var(--rule, #D8DCD6);
  --c-accent:  var(--green, #0F7D4A);
  --c-dark:    var(--grid, #0E1518);
  --c-mono:    var(--mono, ui-monospace, monospace);

  margin: 2.4em 0;
}

/* ── nagłówek ── */
.poze-calc-head{margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--c-ink)}
.poze-calc-head .eyebrow{
  display:block;font-family:var(--c-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-ink-3);margin-bottom:8px;
}
.poze-calc-head h2{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px;line-height:1.18}
.poze-calc-head p{font-size:15px;line-height:1.55;color:var(--c-ink-2);margin:0;max-width:62ch}

/* ── formularz ── */
.poze-calc .calculator-container{
  background:var(--c-surface);border:1px solid var(--c-rule);border-radius:2px;padding:22px;
}
.poze-calc .input-section{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.poze-calc .input-group{display:flex;flex-direction:column;min-width:0}
.poze-calc .input-group label{
  font-size:13px;font-weight:600;color:var(--c-ink-2);margin-bottom:6px;
}
.poze-calc select,
.poze-calc input[type="number"],
.poze-calc input[type="text"]{
  width:100%;padding:10px 12px;font:inherit;font-size:15px;
  background:var(--c-paper);border:1px solid var(--c-rule);border-radius:2px;
  color:var(--c-ink);outline:none;
}
.poze-calc select:focus,
.poze-calc input:focus{border-color:var(--c-accent)}

/* Pola wyboru bywają dłuższymi zdaniami — wtedy potrzebują pełnej szerokości. */
.poze-calc .input-group.wide,
.poze-calc .input-group:has(input[type="checkbox"]){grid-column:1/-1}

.poze-calc input[type="checkbox"]{width:auto;margin-right:8px;accent-color:var(--c-accent)}
.poze-calc .input-group label:has(input[type="checkbox"]){
  flex-direction:row;align-items:center;font-weight:400;font-size:14px;
}

/* ── suwaki ── */
.poze-calc .slider-container{display:flex;align-items:center;gap:12px;margin-top:8px}
.poze-calc .slider{
  -webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;
  background:var(--c-rule);outline:none;
}
.poze-calc .slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--c-accent);cursor:pointer;
}
.poze-calc .slider::-moz-range-thumb{
  width:16px;height:16px;border:none;border-radius:50%;background:var(--c-accent);cursor:pointer;
}
.poze-calc .slider-value{
  font-family:var(--c-mono);font-size:13px;font-weight:600;color:var(--c-ink);
  min-width:70px;text-align:right;
}

/* ── przycisk ── */
.poze-calc .calculate-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:20px;padding:13px 28px;border:0;border-radius:2px;cursor:pointer;
  background:var(--c-accent);color:#fff;font:inherit;font-size:15px;font-weight:700;
  transition:background .15s;
}
.poze-calc .calculate-btn:hover{filter:brightness(1.1)}

/* ── wyniki ──
   Ciemne tło znaczy w tym portalu „odczyt”, nie „materiał redakcyjny” —
   ta sama reguła obowiązuje w paśmie danych na stronie głównej. */
.poze-calc .results-section{
  display:none;   /* skrypt pokazuje je po obliczeniu */
  margin-top:22px;padding:20px;border-radius:2px;
  background:var(--c-dark);color:#E8EDEA;
}
.poze-calc .results-section h3{
  font-size:13px;font-weight:700;color:#fff;margin:0 0 16px;letter-spacing:-.01em;
}
.poze-calc .results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px}
.poze-calc .result-item{min-width:0}
.poze-calc .result-item > span:first-child,
.poze-calc .result-label{display:block;font-size:12px;color:#8FA3A6;margin-bottom:6px}
.poze-calc .result-value{
  font-family:var(--c-mono);font-size:26px;font-weight:600;letter-spacing:-.03em;
  color:#fff;line-height:1;
}
.poze-calc .result-unit{font-family:var(--c-mono);font-size:11px;color:#8FA3A6;margin-left:4px}

.poze-calc .results-section p,
.poze-calc .results-section li{font-size:14px;line-height:1.6;color:#B9C6C2}
.poze-calc .results-section strong{color:#fff}
.poze-calc .results-section a{color:#35C77E}

.poze-calc-note{
  font-family:var(--c-mono);font-size:10.5px;line-height:1.55;
  color:var(--c-ink-3);margin-top:12px;
}

/* ══════════════════════════════════════════════════════════════
   SPIS KALKULATORÓW
   ══════════════════════════════════════════════════════════════ */
.poze-calc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:2em 0;
}
.poze-calc-tile{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:22px;cursor:pointer;font:inherit;
  background:var(--surface,#fff);border:1px solid var(--rule,#D8DCD6);border-radius:2px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.poze-calc-tile:hover{
  border-color:var(--rule-2,#C3C9C1);
  box-shadow:0 6px 22px rgba(20,24,26,.09);
  transform:translateY(-2px);
}
.poze-calc-tile:focus-visible{outline:2.5px solid var(--green,#0F7D4A);outline-offset:2px}

.tile-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;margin-bottom:14px;border-radius:2px;
  background:rgba(15,125,74,.09);
  color:var(--green,#0F7D4A);
  transition:background .15s,color .15s;
}
.tile-icon .calc-icon{width:20px;height:20px;display:block}
.poze-calc-tile:hover .tile-icon{background:rgba(15,125,74,.16)}

/* Ciemny motyw: delikatniejsze tło, jaśniejszy odcień zieleni. */
[data-theme="dark"] .tile-icon{background:rgba(53,199,126,.12);color:var(--green-br,#35C77E)}
[data-theme="dark"] .poze-calc-tile:hover .tile-icon{background:rgba(53,199,126,.2)}

.tile-tag{
  font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3,#6C7A7D);margin-bottom:8px;
}
.tile-title{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink,#14181A);margin-bottom:8px;line-height:1.25}
.tile-desc{font-size:13.5px;line-height:1.5;color:var(--ink-2,#3D474A);margin-bottom:16px}
.tile-more{margin-top:auto;font-size:13px;font-weight:600;color:var(--green,#0F7D4A)}

/* ══════════════════════════════════════════════════════════════
   NAKŁADKA
   ══════════════════════════════════════════════════════════════ */
body.poze-calc-open{overflow:hidden}

.poze-calc-overlay{
  position:fixed;inset:0;z-index:9000;
  background:var(--surface,#fff);
  display:flex;flex-direction:column;
  animation:pozeCalcIn .18s ease-out;
}
.poze-calc-overlay[hidden]{display:none}
@keyframes pozeCalcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.overlay-bar{
  flex:0 0 auto;border-bottom:1px solid var(--rule,#D8DCD6);
  background:var(--surface,#fff);
}
.overlay-wrap{max-width:900px;margin:0 auto;padding:0 24px;width:100%}
.overlay-bar .overlay-wrap{display:flex;align-items:center;gap:16px;height:60px}

.overlay-title{
  font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink,#14181A);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.overlay-close{
  margin-left:auto;flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule,#D8DCD6);color:var(--ink-2,#3D474A);
  transition:background .15s,color .15s,border-color .15s;
}
.overlay-close svg{width:18px;height:18px}
.overlay-close:hover{background:var(--grid,#0E1518);border-color:var(--grid,#0E1518);color:#fff}

.overlay-body{flex:1 1 auto;overflow-y:auto;padding:26px 0 60px;-webkit-overflow-scrolling:touch}
.panel-desc{
  font-size:15px;line-height:1.6;color:var(--ink-2,#3D474A);
  margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--rule,#D8DCD6);
}
.poze-calc-panel[hidden]{display:none}
.poze-calc-panel .poze-calc{margin:0}
.poze-calc-panel .calculator-container{border:0;padding:0;background:none}

@media (max-width:900px){
  .poze-calc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .poze-calc .input-section{grid-template-columns:1fr}
  .poze-calc .calculator-container{padding:16px}
  .poze-calc .calculate-btn{width:100%}
  .poze-calc .result-value{font-size:22px}
}

@media (max-width:640px){
  .poze-calc-grid{grid-template-columns:1fr;gap:14px}
  .poze-calc-tile{padding:18px}
  .overlay-wrap{padding:0 16px}
  .overlay-bar .overlay-wrap{height:54px}
  .overlay-body{padding:20px 0 48px}
}