/* ═══════════════════════════════════════════════════════════════════════════
   MAGAZÍNOVÝ VÝPIS PORADNY — 21. 8. 2026 · Michaela Knapová + Jarvis
   VERZE 2 — přepsáno čistě. Verze 1 měla tři vrstvy oprav, které se navzájem
   přebíjely (stará pravidla s vyšší specificitou vyhrávala nad opravou).
   Tenhle soubor je jediná verze pravdy.

   Struktura podle editorial reference (vogue.cz):
   · hlavní článek = velký vizuál + bílý blok vystupující zdola
   · trojice = vizuály STEJNÉ velikosti, bílý pás s kategorií uvnitř dole,
     titulek a údaje pod vizuálem na pozadí stránky

   ⚠️ POMĚR STRAN DRŽÍ `padding-bottom`, NIKDY `aspect-ratio`.
   `aspect-ratio` na flex/grid itemu Safari vyhodnocuje jinak než Chrome —
   poslední karta se nafoukla na dvojnásobek. Nevracet zpět.

   Linkuje se PO poradna.css. Paleta a písma se dědí.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LABEL KATEGORIE ──────────────────────────────────────────────────────*/
.mag-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #7A5F2B;
  margin: 0 0 18px;
}
.mag-label::before,
.mag-label::after {
  content: "";
  width: 34px; height: 1px;
  background: #C6A75E;
  flex: none;
}

/* ═══ VIZUÁL ══════════════════════════════════════════════════════════════
   Dokud není fotka, drží místo brandová plocha se zlatým znakem. Fotka se
   vloží jako <img class="mag-photo"> a plochu překryje.                    */
.mag-visual {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(198,167,94,0.30) 0%, rgba(198,167,94,0) 58%),
    linear-gradient(145deg, #2A3855 0%, #1F2A44 52%, #18202F 100%);
}
.mag-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mag-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,42,68,0.10) 0%, rgba(31,42,68,0.42) 100%);
}
.mag-glyph {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  color: #C6A75E;
  line-height: 1;
  opacity: 0.92;
  user-select: none;
}
.mag-visual-note {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 2;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250,246,238,0.62);
}

/* ── Varianty plochy — bez fotek by šest navy ploch pod sebou bylo nudných */
.mag-visual--warm {
  background:
    radial-gradient(120% 90% at 22% 14%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(145deg, #EFE3CC 0%, #E8DCC8 55%, #DED0B6 100%);
}
.mag-visual--warm .mag-glyph { color: #A8894A; opacity: 1; }
.mag-visual--warm .mag-visual-note { color: rgba(31,42,68,0.52); }
.mag-visual--warm .mag-overlay {
  background: linear-gradient(180deg, rgba(31,42,68,0) 0%, rgba(31,42,68,0.10) 100%);
}
.mag-visual--light {
  background:
    radial-gradient(120% 90% at 78% 16%, rgba(198,167,94,0.20) 0%, rgba(198,167,94,0) 62%),
    linear-gradient(145deg, #FFFDF8 0%, #FAF6EE 60%, #F4EEE2 100%);
  border: 1px solid rgba(198,167,94,0.28);
}
.mag-visual--light .mag-glyph { color: #1F2A44; opacity: 0.9; }
.mag-visual--light .mag-visual-note { color: rgba(31,42,68,0.46); }
.mag-visual--light .mag-overlay {
  background: linear-gradient(180deg, rgba(31,42,68,0) 0%, rgba(31,42,68,0.06) 100%);
}

/* ═══ HLAVNÍ ČLÁNEK ═══════════════════════════════════════════════════════*/
.mag-lead { margin: 0 0 78px; }
.mag-lead .mag-visual { height: 460px; }
.mag-lead .mag-glyph { font-size: 128px; }
.mag-lead-body {
  position: relative;
  z-index: 3;
  width: min(700px, 76%);
  margin: -46px auto 0;
  padding: 40px 48px 34px;
  background: #FFFDF8;
  text-align: center;
  box-shadow: 0 30px 70px -40px rgba(31,42,68,0.42);
}
.mag-lead-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: #1F2A44;
  margin: 0 0 20px;
}
.mag-lead-title a { color: inherit; text-decoration: none; }
.mag-lead-title a:hover { color: #3D4C6F; }
.mag-lead-perex {
  font-size: 15.5px;
  line-height: 1.68;
  color: #4A5163;
  max-width: 58ch;
  margin: 0 auto 26px;
}

/* ═══ ÚDAJE O ČLÁNKU (autorka · datum · čas čtení) ════════════════════════*/
.mag-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
}
.mag-meta img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.mag-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mag-author {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1F2A44;
  white-space: nowrap;
}
.mag-date {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  color: #7A7466;
  white-space: nowrap;
}
.mag-sep { color: #C6A75E; }

/* ═══ TROJICE ČLÁNKŮ ══════════════════════════════════════════════════════*/
.mag-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 20px;
}
.mag-trio .mag-item { display: block; }

/* Poměr 3 : 4 přes padding — viz varování v hlavičce souboru. */
.mag-trio .mag-visual {
  height: 0;
  padding-bottom: 133.333%;
}
.mag-trio .mag-glyph { font-size: 76px; }

/* Bílý pás s kategorií uvnitř vizuálu, dole na střed. */
.mag-visual-tag {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 30px 11px;
  background: #FFFDF8;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7A5F2B;
  white-space: nowrap;
  max-width: 88%;
}
.mag-visual-tag::before,
.mag-visual-tag::after {
  content: "";
  width: 20px; height: 1px;
  background: #C6A75E;
  flex: none;
}

/* Titulek a údaje pod vizuálem, na pozadí stránky. */
.mag-item-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.28;
  color: #1F2A44;
  text-align: center;
  margin: 24px 0 14px;
  padding: 0 6px;
}
.mag-item-title a { color: inherit; text-decoration: none; }
.mag-item-title a:hover { color: #3D4C6F; }
.mag-trio .mag-meta { flex-direction: column; gap: 7px; }
.mag-trio .mag-meta img { width: 24px; height: 24px; }
.mag-trio .mag-date { font-size: 12px; }

/* ═══ ODDĚLOVAČ SEKCÍ ═════════════════════════════════════════════════════*/
.mag-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 46px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7A5F2B;
}
.mag-divider::before,
.mag-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 210px;
  background: linear-gradient(90deg, rgba(198,167,94,0) 0%, #C6A75E 100%);
}
.mag-divider::after {
  background: linear-gradient(90deg, #C6A75E 0%, rgba(198,167,94,0) 100%);
}

/* ═══ TABLET ══════════════════════════════════════════════════════════════*/
@media (max-width: 980px) {
  .mag-trio { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .mag-lead .mag-visual { height: 360px; }
  .mag-lead-title { font-size: 34px; }
  .mag-lead-body { width: min(620px, 84%); padding: 34px 36px 30px; margin-top: -42px; }
  .mag-item-title { font-size: 20px; }
}

/* ═══ MOBIL ═══════════════════════════════════════════════════════════════*/
@media (max-width: 640px) {
  .mag-lead { margin-bottom: 54px; }
  .mag-lead .mag-visual { height: 240px; }
  .mag-lead .mag-glyph { font-size: 82px; }
  .mag-lead-body { width: 92%; margin-top: -34px; padding: 26px 22px 22px; }
  .mag-lead-title { font-size: 26px; margin-bottom: 14px; }
  .mag-lead-perex { font-size: 14.5px; margin-bottom: 20px; }
  .mag-lead .mag-meta { flex-wrap: wrap; row-gap: 6px; column-gap: 8px; }

  .mag-trio { grid-template-columns: 1fr; gap: 34px; }
  .mag-trio .mag-visual { padding-bottom: 75%; }
  .mag-trio .mag-glyph { font-size: 64px; }
  .mag-item-title { font-size: 19px; margin: 22px 0 12px; }

  .mag-visual-tag { padding: 11px 22px 9px; font-size: 9px; letter-spacing: 0.18em; }
  .mag-divider { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 32px; }
  .mag-divider::before, .mag-divider::after { max-width: 60px; }
  .mag-label { font-size: 9.5px; letter-spacing: 0.2em; }
}

/* ── FOTKA PŘEBÍJÍ BRANDOVOU PLOCHU ───────────────────────────────────────
   Když je ve vizuálu <img class="mag-photo">, zlatý znak i popisek plochy
   se skryjí. Bez tohohle zůstal znak nad fotkou a působil jako vodoznak.
   Sourozenecký selektor = nemusí se nic mazat z HTML, stačí fotku vložit
   nebo odebrat a zbytek se přepne sám.                                    */
.mag-photo ~ .mag-glyph,
.mag-photo ~ .mag-visual-note { display: none; }

/* Fotka je pestřejší než plocha, takže pás s kategorií potřebuje nad sebou
   trochu ztmavení, aby na něj text nenaskakoval bez oddělení. */
.mag-photo ~ .mag-overlay {
  background: linear-gradient(180deg, rgba(31,42,68,0.06) 0%, rgba(31,42,68,0.30) 78%, rgba(31,42,68,0.46) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOPLNĚK PRO OSTRÝ PROVOZ — 14. 9. 2026 · Jarvis (nasazení návrhu poradna-v1)
   1) Mobil: vizuály v trojici zůstávají 3:4 i na telefonu. Míšiny grafiky
      nesou text v dolní třetině — ořez 4:3 (výše 75 %) ho na 390 px uřízl
      a pás s kategorií mu ležel přes první řádek. Stačí smazat = zpět 4:3.
   2) Hlavní článek na mobilu: text grafiky je vlevo, fotka se kotví vlevo,
      ať se neuřízne první písmeno (box 240 px vysoký ořezává z obou stran).
   3) Náhradní ořez, když má hlavní článek jen portrét (server doplní třídu
      --from-portrait): kotva k dolní třetině, kde má Míšina šablona text.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .mag-trio .mag-visual { padding-bottom: 133.333%; }
  .mag-lead .mag-photo { object-position: left center; }
}
.mag-photo--from-portrait { object-position: center 78%; }