/* ==========================================================================
   ORWAK – Blogbejegyzés
   Figma: node 678:2989 (1440 × 5441)
   style.css → pages.css → ez a fájl

   Az oldal váza a közös .phero / .psec / .split / .container. Ami itt van, az
   kizárólag a cikktörzs: a tervben a szövegblokkok NEM a .prose ritmusát
   követik (18/25, 22px köz, 900px sáv), hanem sűrűbbek és a teljes 1274px-es
   tartalomoszlopot kitöltik — 18/24-es sortávval és 50px-es blokk-közökkel.
   Ezért kapott saját .art__* réteget, nem a .prose felülírását.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero

   A geometria a .phero alapértéke (fotó 0→571, panel 327-től 428 magas), a
   panelben viszont CSAK a cím van — se bevezető, se gomb.

   A cím szövegdoboza a tervben 751px (678:2992), a .phero__title alap korlátja
   734px. Effrával mérve a különbség nem elhanyagolható: 734-en a törés
   „…hatékonyabb a / vállalati hulladékkezelésért", 751-en a tervbeli
   „…hatékonyabb a vállalati / hulladékkezelésért". Mindkettő három sor, tehát
   a magasság ugyanaz — de a sortörés csak a tervbeli dobozszélességgel egyezik,
   ezért itt pontosan a Figma 751px-e van beállítva. */
.phero--post .phero__title { max-width: 751px; }

/* --------------------------------------------------------------------------
   2. Cikktörzs — függőleges ritmus

   A terv y-koordinátáiból: két blokk között 50px, egy cím és a hozzá tartozó
   szöveg között 20px, a hero és a törzs, illetve a törzs és a footer között
   78px (ez utóbbi a .psec alapértéke, nem kell felülírni).
   -------------------------------------------------------------------------- */
.article > .container > * + * { margin-top: 50px; }
/* A cím alatti térköz 20 helyett 17: a címsor sortávja a magyar ékezetek miatt
   24 helyett 27px (lásd lentebb), és ez a 3px a doboz tetejére-aljára oszlik.
   17px-cel a következő blokk TETEJE pontosan a tervbeli 44px-re kerül a címsor
   tetejétől, a látható rés pedig változatlan marad. */
.article .art__h2 + *         { margin-top: 17px; }
/* A képes-szöveges sorokban a terv sűrűbb ritmust használ: 30px, cím után 30
   helyett 24 (ugyanaz a kétsoros címsor +6px-es korrekciója). */
.article .split__body > * + *          { margin-top: 30px; }
.article .split__body > .art__h2 + *   { margin-top: 24px; }

/* --------------------------------------------------------------------------
   3. Cikktörzs — tipográfia

   A tervben a törzsszöveg Effra Regular (400), nem Light (300), mint a .prose
   máshol. A sortáv fix 24px, a szín a közös --text.

   A címsorok a tervben 24px/24px-esek, azaz 1.0 sortávval. Magyar szövegben ez
   levágná az Ő és Ű kettős ékezetét, ezért 27px (1.125) — ez a brief 1.12-es
   padlója fölött van, és soronként csak 3px-et ad hozzá.
   -------------------------------------------------------------------------- */
.art__lede,
.art__p,
.art__t { max-width: var(--w, none); }

.art__p,
.art__t {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
}

.art__h2 {
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
}

/* Egy .art__t egyetlen Figma-szövegdoboz: a bekezdései ott sortörések, nem
   külön blokkok — ezért alapból NINCS köztük térköz. Ahol a tervben üres sor
   áll, ott az .is-sep ad pontosan egy sornyit (24px). */
.art__t > * + *      { margin-top: 0; }
.art__t > .is-sep    { margin-top: 24px; }

/* A felsorolásjel a tervben 5×5px-es pötty, a szövegoszloptól 17px-re balra,
   a sor tetejétől 13px-re (mérve: a Figma-render 94..98 / 1692..1696, a
   szövegoszlop 111). A böngésző `list-style: disc` jele 18px-es törzsön 7px és
   5px-cel balrább ül, ezért saját jel. A `padding-left` változatlan: a szöveg
   és a folytatósorok behúzása így marad a tervbeli 111 / 138 értéken. */
.art__t ul {
  list-style: none;
  padding-left: 27px;
}
.art__t li { position: relative; }
.art__t li::before {
  content: '';
  position: absolute;
  left: -16.5px;
  top: 10.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
/* A szolgáltatás-felsorolás a tervben egy szinttel beljebb ül (54px). */
.art__t ul.art__list--indent { padding-left: 54px; }

/* A tervben a hivatkozás a törzsszöveg színét viszi, aláhúzva. */
.art__t a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.art__t a:hover { color: var(--orange); }

/* --------------------------------------------------------------------------
   4. Képek

   A két széles kép a tervben 1275 × 408, a két oszlopos 625/626 × 408. A
   Figma kivágása (object-fit: cover, középre) bele van sütve az exportált
   fájlokba, itt csak az arányt kell tartani.
   -------------------------------------------------------------------------- */
.art__fig {
  margin: 0;
  background: #ddd;
}
.art__fig--wide { aspect-ratio: 1275 / 408; }
.art__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A képes-szöveges sor első előfordulásában a tervben a szövegoszlop és a kép
   ALJA van egy vonalban (mindkettő 3401-nél végződik), nem a közepük. */
.split--end { align-items: end; }

/* A második képes-szöveges sorban a szövegdoboz a tervben NEM tölti ki a
   625px-es oszlopot: a Figma-node (678:3013) 598px széles, a fölötte lévő
   címsoré (678:3006) viszont a teljes 625. 598-on a törzs pontosan a tervbeli
   16 sorra tördel (ugyanaz a 384px), de a sortörések is egyeznek — 625-ön
   három sor máshol törik. */
.article .split--media-first .art__t { max-width: 598px; }

/* --------------------------------------------------------------------------
   5. Reszponzív
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .article > .container > * + * { margin-top: 40px; }
  /* Egy oszlopban a kép a teljes szélességet kapja; a 598px-es tervbeli
     szövegsáv itt már csak indokolatlanul keskeny hasábot adna mellé. */
  .article .split--media-first .art__t { max-width: none; }
}

@media (max-width: 900px) {
  /* Folyó hero: a cím a panel teljes szélességét kapja. */
  .phero--post .phero__title { max-width: none; }
}

@media (max-width: 768px) {
  .art__p,
  .art__t { font-size: 17px; }

  .art__h2 { font-size: 20px; line-height: 1.25; }
  /* A tervbeli kézi sortörés a címben itt már csak csonka sort adna. A <br>
     előtt szóköz áll a markupban, így elrejtve sem tapad össze a két mondat
     („…hozzáállás:„A bálázás…"). */
  .art__h2 br { display: none; }

  /* 375px-en a 1275/408-as arány 105px magas szeletre zsugorodna, amiben a
     fotóból semmi nem látszik — mobilon 16:9-re vált, a kivágást az
     object-fit: cover intézi. */
  .art__fig--wide { aspect-ratio: 16 / 9; }

  .art__t ul.art__list--indent { padding-left: 27px; }

  /* A tervbeli fix szövegsáv-szélességek (pl. 744px) mobilon nem korlátoznak. */
  .art__lede,
  .art__p,
  .art__t { max-width: none; }
}