/**
 * Članak bloga — geometrija iz `06a_Blog interno.pdf`.
 *
 * Zašto svoj fajl: pravila članka stoje u `sections.css`, a taj fajl drži
 * koordinator. Mjere iz dizajna zato idu ovdje, iza `sections.css` u redu
 * učitavanja, i tuku ga kod jednake specifičnosti.
 *
 * Mjereno na okviru 1512 x 2533 (`deploy/qa/pdf-json/06a-blog-interno.json`):
 *
 *   fotografija zaglavlja   x 113 → 1399, y 217 → 854   (1286 x 637)
 *   naslov                  x 221, 22 px SemiBold verzalom, jedan red
 *   tijelo                  x 221, 14 px Light, korak reda 22 px
 *
 * Fotografija NIJE puna širina, kako je stajalo u prvom opisu: široka je
 * 1286 px, dakle isti kontejner kao i sve ostalo na sajtu, i na 1512 px sama
 * ostavi 113 px sa svake strane. Visina je 637 px, ne 860. Zato je širinu
 * uzeo `.sec__inner--1286` u predlošku, a ovdje ostaje samo visina i razmak
 * do zaglavlja.
 *
 * U PDF-u desno od fotografije stoji jos jedan zapis slike (1399..1512), ali
 * to nije fotografija nego crna popuna do ruba stranice — 1180 piksela i
 * 2556 bajta. Dok se mjerio i on, „desni rub" dizajna je ispadao 1512 i
 * mjerenje je punu širinu potvrđivalo kao ispravnu.
 *
 * `sections.css` daje visinu 53,75rem (860 px); ovdje se ispravlja. Mobilni
 * prijelom mora biti PONOVLJEN, jer pravilo iz ovog fajla bez upita o širini
 * tuče i ono unutar `@media` u `sections.css`: ista specifičnost, a ovaj
 * fajl dolazi kasnije.
 *
 * @package smile-v2
 */

/* ---------- fotografija zaglavlja ---------- */

.post__hero { margin-top: 3.5625rem; }                       /* 57 px ispod zaglavlja */
.post__hero-img,
.post__hero--prazan::before { height: 39.8125rem; }          /* 637 */
/* Prazan okvir (članak bez fotografije) mora stati u istu širinu kao i sama
   fotografija; on se crta na `.post__hero`, dakle IZVAN kontejnera. */
.post__hero--prazan::before { max-width: 80.375rem; margin-inline: auto; }

/* ---------- naslov ---------- */

/* Od vrha glifova naslova do vrha glifova prvog reda tijela dizajn traži
   69,4 px; `sections.css` daje 23 px razmaka ispod naslova, što je 16,4 px
   premalo. Mjereno, ne procijenjeno. */
.post .post__title { margin-bottom: 2.4625rem; }             /* 39,4 */

/* ---------- tijelo članka ---------- */

/* Razmak pasusa u dizajnu je JEDAN PRAZAN RED (22 px), isto pravilo kao
   `.sec__text--spaced`; predložak zato nosi i tu klasu. Ovdje ostaju samo
   tri odstupanja od tog koraka koja dizajn stvarno ima. */

/* Naslov odjeljka unutar članka. U dizajnu nije ni krupniji ni deblji od
   tijela — jedina razlika je prazan red VIŠE iznad njega (66 px umjesto 22).
   Zato je pasus, a ne <h2>: <h2> bi ga digao na 22 px i podebljao, i članak
   bi se razišao s dizajnom za cijelu visinu jednog reda. */
.post .sec__text--long .post-h { margin-top: 4.125rem; }     /* 66 */

/* Podnaslov (Poppins Bold 14 px) stoji NEPOSREDNO iznad svog pasusa, bez
   praznog reda: u dizajnu je razmak između njih 22 px, dakle točno jedan red. */
.post .sec__text--long .post-sub { margin-bottom: 0; }

/* Nabrajanje bez oznaka i bez uvlake: u dizajnu tri stavke počinju na istom
   x 221 kao i tijelo, i nijedna nema znak nabrajanja.

   `width: max-content` nije ukras nego mjera. Stavke su blokovi, pa im okvir
   reda ide do ruba stupca; mjerenje uzima okvire redaka, ne glifova, i blok
   je ispadao 1070 px širok umjesto 496 — razlika od 574 px na mjestu gdje je
   raspored zapravo bio točan. S `max-content` je okvir širok koliko najduža
   stavka, a to je upravo ono što dizajn pokazuje. */
.post .sec__text--long .post-list {
  margin: 0 0 1.375rem;
  padding: 0;
  list-style: none;
  width: max-content;
  max-width: 100%;
}

@media (max-width: 1023px) {
  .post__hero { margin-top: 1.5rem; }
  .post__hero-img,
  .post__hero--prazan::before { height: 14rem; }
  .post .sec__text--long .post-h { margin-top: 2.75rem; }
}