/* ============================================================
   ANTIVIRAL — produkty.css
   Stylopis podstránky Produkty. Načítá ho jen produkty.html, za
   sdílenou trojicí tokens.css / base.css / sections.css.

   Proč vlastní soubor a ne přírůstek do sections.css: tyhle tři
   komponenty nemá kde jinde použít. Kdyby seděly ve sdíleném
   stylopisu, nesl by je i ucinnost.html, aniž by je kdy vykreslila.

   Co odsud odešlo do sections.css kap. 13: hero s číslovanými
   kotvami, hlavička číslované sekce, mřížka s vlásečnicemi, odkaz
   uvnitř věty a odkazová karta. Účinnost je převzala, takže přestaly
   být komponentami jedné stránky — přesně jak to předepisuje
   DESIGN.md. S přesunem padl i prefix `.p-`.

   Žádný syrový hex ani nová velikostní řada — všechno z tokens.css.
   Zbylé třídy si prefix `.p-` drží, aby se nepotkaly se sdílenými.

   Dva přenosy z referencí, které tu zůstaly:
     · diptych dvou produktů se spec řádky pod sebou  [seed.com/approach]
     · tmavý pás s jednou větou přes mlžinu           [2ag.com/pages/science]
     · letterbox obraz nahoře, text ve dvou sloupcích [seed.com/approach]
   ============================================================ */


/* ============================================================
   1 · DIPTYCH GEL | LIQUID  [Seed — obraz nese sekci]
   AS-02 a AS-03 jsou nafocené ve stejné scéně, na stejných
   soklech a se stejným světlem. Vedle sebe čtou jako jeden snímek
   rozstřižený napůl — proto srovnání vedle sebe, ne pod sebou.
   ============================================================ */
.p-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);}
.p-duo-col{display:flex;flex-direction:column;gap:var(--sp-5);}
.p-duo-col .slot{background:var(--ph-bg);}
/* contain, ne cover: řada balení se nesmí oříznout přes lahvičky. */
.p-duo-col .slot > img{object-fit:contain;}

.p-duo-name{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:var(--s-h3);font-weight:600;letter-spacing:-.02em;
}
.p-duo-name span{color:var(--text-tertiary);font-weight:400;}
.p-duo-col p{color:var(--text-secondary);font-size:var(--s-small);max-width:44ch;}

/* Mono řádky pod popisem — data, ne štítky. Vlásečnice mezi nimi
   dělá tutéž práci jako .spec, jen v úžeji nastaveném sloupci.
   margin-top:auto drží obě tabulky na stejné lince i když je jeden
   popis o řádek delší — jinak se první vlásečnice rozejdou a sloupce
   přestanou číst jako dvojice. */
.p-facts{
  display:flex;flex-direction:column;margin-top:auto;
  font:400 var(--s-mono)/1.5 var(--f-mono);
}
.p-facts div{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-3);border-top:1px solid var(--border);
}
.p-facts dt,.p-facts b{
  font-weight:400;color:var(--text-tertiary);
  letter-spacing:.06em;text-transform:uppercase;
}
.p-facts dd,.p-facts i{
  margin:0;font-style:normal;color:var(--text-primary);text-align:right;
}


/* ============================================================
   2 · TMAVÝ PÁS S JEDNOU VĚTOU  [2AG]
   Mlžina AS-04 leží na grafitu v režimu screen: světlé částice
   projdou, tmavé pozadí fotky zmizí do pole. Snímek se posadí
   doprava (object-position), aby text vlevo stál na čistém grafitu
   a nešel přes nejsvětlejší místo mlžiny.

   Tohle je jediné tmavé pole na produkty.html — a protože ucinnost.html
   svůj jeden grafitový moment utrácí za sekci „Kdo to testuje",
   komponenta zůstává tady. Viz DESIGN.md, pravidlo 1.
   ============================================================ */
.p-band{
  position:relative;overflow:hidden;
  background:var(--field-dark);color:var(--text-on-dark);
  padding-block:clamp(88px,10vw,150px);
}
.p-band-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.p-band-bg img{
  width:100%;height:100%;object-fit:cover;object-position:right center;
  mix-blend-mode:screen;opacity:.42;filter:grayscale(1) contrast(1.05);
}
/* Scrim zleva — pojistka čitelnosti, kdyby se mlžina na užší
   obrazovce posunula pod text. */
.p-band-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--field-dark) 0%,
    color-mix(in srgb,var(--field-dark) 72%,transparent) 42%,
    transparent 72%);
}
.p-band > .wrap{position:relative;z-index:1;}
/* ch se počítá v písmu elementu — na h2 je jeden znak přes 30 px,
   takže 22ch by tu byla čtyři slova na řádek. Míra v px. */
.p-band-copy{max-width:min(620px,60%);display:flex;flex-direction:column;gap:var(--sp-5);}
.p-band h2{font-size:var(--s-h2);letter-spacing:-.03em;line-height:1.04;}
.p-band .mono-note{color:var(--text-on-dark-muted);}


/* ============================================================
   3 · POSTUP — pás pěti gest, pod ním povrchy v jiném měřítku
   Předchůdce (.p-strip + .p-below) měl nahoře dva letterboxy
   a pod nimi dva sloupce textu: fotky ukazovaly gesto obecně,
   samotný postup byl jen výčet vět. Pás pěti rámů ho ukazuje
   místo popisu — jednota ořezu a podkladu je tu důležitější než
   velikost jednotlivého snímku, proto malé rámy v řadě.
   Povrchy pak schválně v jiném měřítku (jeden široký rám), aby
   se táž mřížka neopakovala dvakrát pod sebou.
   ============================================================ */

/* Hlavička části, sdílí ji pás i povrchy — dřívější .p-below h3. */
.p-part-head{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--s-h4);margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);
}

.p-seq{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(32px,4vw,48px) clamp(12px,1.6vw,24px);
}
.p-seq-item{display:flex;flex-direction:column;gap:var(--sp-4);}
/* Vlásečnice až pod fotkou, ne nad ní — nad rámem by se srazila
   s linkou pod hlavičkou části. */
.p-seq-body{border-top:1px solid var(--border);padding-top:var(--sp-4);}
/* Index kroku, ne dekorace — proto mono, stejně jako .haircell-no. */
.p-seq-no{
  display:block;margin-bottom:var(--sp-3);
  font:500 var(--s-mono)/1 var(--f-mono);
  letter-spacing:.14em;color:var(--text-accent);
}
.p-seq-body b{display:block;font-size:var(--s-small);font-weight:600;margin-bottom:var(--sp-2);}
.p-seq-body p{color:var(--text-secondary);font-size:var(--s-small);line-height:1.45;}

.p-seq-note{margin-top:var(--sp-6);}

.p-surface{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(32px,5vw,72px);
  margin-top:calc(var(--sp-8) + 16px);
  align-items:start;
}
.p-surface-note{margin-top:var(--sp-5);}


/* ============================================================
   4 · PROČ NE ČISTÝ LÍH — výklad ve dvou sloupcích, bez tabulky
   Sekce tu dřív měla .spec se šesti řádky. Čtyři z nich stránka
   uváděla podruhé (koncentrace stojí i v .p-facts a v .p-band)
   a zbylé dva — forma a skladování — patří k technickým datům
   na ucinnost.html, kde je profesionál hledá. Zbyl výklad, takže
   sekce je čistě textová: po pěti fotkách postupu je klid vítaný.
   Text sedí pod pravým sloupcem .numhead, aby sekce držela osu.
   ============================================================ */
.p-essay{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);
}
.p-essay-body{
  grid-column:2;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4vw,56px);align-items:start;
}
/* O stupeň větší než běžný odstavec — je to jediný text sekce,
   takže nese její váhu sám. */
.p-essay-body p{font-size:var(--s-lead);line-height:1.55;color:var(--text-secondary);}
/* Pod oba sloupce, ne do pravého — je to servisní odkaz, ne půlka výkladu. */
.p-essay-note{grid-column:2;margin-top:var(--sp-6);}


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Pět rámů v řadě přestane být čitelných dřív než zbytek stránky —
   pod 1100 px z toho je 3 + 2, pod 640 px 2 + 2 + 1. Vodorovný scroll
   sem nepatří: u postupu nesmí být krok schovaný za okrajem. */
@media (max-width:1100px){
  .p-seq{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .p-surface{grid-template-columns:1fr;gap:var(--sp-7);}
  /* Odsazení pod .numhead padá se samotným .numhead (760 px), ale dva
     sloupce výkladu se rozejdou dřív — na 44 znaků to přestane číst. */
  .p-essay-body{grid-template-columns:1fr;gap:var(--sp-6);}
}
@media (max-width:760px){
  .p-essay{grid-template-columns:1fr;}
  .p-essay-body,.p-essay-note{grid-column:1;}
}
@media (max-width:760px){
  .p-duo{grid-template-columns:1fr;gap:var(--sp-8);}
  .p-band-copy{max-width:none;}
  /* Na mobilu je mlžina za textem přes celou šířku — scrim musí
     krýt shora dolů, ne zleva doprava. */
  .p-band-bg::after{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--field-dark) 82%,transparent) 0%,
      color-mix(in srgb,var(--field-dark) 62%,transparent) 100%);
  }
}
@media (max-width:640px){
  .p-seq{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .p-facts div{flex-direction:column;gap:2px;}
  .p-facts dd,.p-facts i{text-align:left;}
}