/* ============================================================================
   PAGE-INDEX.CSS
   ----------------------------------------------------------------------------
   Načítá se na homepage; includes/header.php ho přibaluje ještě k /bonusy
   a /live, takže tady nesmí být nic, co by sáhlo na cizí markup. Všechno
   pod .idx-* je výhradně homepage.

   Stránka je rozcestník, ne katalog, a proto má šest bloků a ŠEST různých
   rozvržení. Dřív byly tři sekce postavené na jedno kopyto (nadpis, odstavec,
   mřížka), takže se stránka četla jako jeden dlouhý seznam:

     hrdina    dělený, text na liště a fotografie s přesahem k pravé hraně okna
     pult      pás tvrdých čísel přes celou šířku, vlasové linky místo karty
     nabídky   mřížka karet, hlavička nad ní, odkaz dál jako široká linka pod ní
     klipy     dva sloupce, fotografie na celou výšku vlevo, řádky klipů vpravo
     videa     široký pás, který ignoruje lištu 1200 px a jde skoro k okrajům
     soutěže   sdílená hlavička sekce, odsazený odstavec vpravo, mřížka karet

   POZOR NA POŘADÍ KASKÁDY: tenhle soubor se načítá na ř. 268 header.php,
   kdežto kick-skin.css (279), karty.css (281) a skin.css (301) až za ním.
   Selektory tady proto musí mít vyšší specifičnost, ne jen pozdější pořadí:
     h2 > span     obarvuje skin.css, podtrhává kick-skin.css. Zvýrazněné
                   slovo v nadpisu si proto beru přes .idx-h2 > span:not([class]).
     .jl-container šířku 1200 px a boční 30 px drží karty.css s !important
     section       svislé odsazení 60 px drží tamtéž, taky s !important
     section       base.css z něj dělá flex row, takže sekce se dvěma dětmi
                   potřebuje display:block
   V souboru není ani jeden !important.

   Pohyb: jen :hover a :active na transform a opacity. Žádný náběh při
   scrollu, majitel si ho výslovně nepřál.
   ============================================================================ */

/* ─── Obal stránky ───
   .main-content je flex column s align-items:center, takže přímý potomek
   bez šířky by se smrskl na max-content. */
.index-page {
    width: 100%;
    align-self: stretch;
}


/* ============================================================================
   1) HRDINA
   Dělená kompozice: vlevo nadpis, jedna věta, stav vysílání a nejvýš dvě
   akce, vpravo fotografie. Čtyři textové prvky, nic víc. Tvrdá čísla stojí
   až pod ním ve vlastním pásu, do hrdiny nepatří.
   ============================================================================ */

.idx-hero {
    position: relative;
    /* Fotografie přesahuje z lišty k pravé hraně okna; bez tohohle by přesah
       vyrobil vodorovný posuvník celé stránky. */
    overflow: hidden;
    padding-block: clamp(26px, 3.6vw, 52px) clamp(30px, 4vw, 58px);
}

.idx-hero__in {
    display: grid;
    /* Sloupec textu je širší než sloupec fotografie, ale fotografie mu to
       vrací přesahem za lištu. Šířka 640 px je ta, ve které se nadpis vejde
       na DVA řádky; užší sloupec ho láme na tři a hrdina přeteče okno. */
    grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(22px, 3.4vw, 52px);
}

.idx-hero__h {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.032em;
    /* base.css sází VŠECHNY nadpisy verzálkami; web je má smíšené. */
    text-transform: none;
    color: var(--paper);
    text-wrap: balance;
}
/* Zvýrazněné slovo splývá s nadpisem; zelená znamená jen „klikni sem"
   a nadpis není akce. Důraz nese váha 900, ne barva. */
.idx-hero__h > span:not([class]) {
    color: inherit;
    text-decoration: none;
}

.idx-hero__lead {
    margin: 15px 0 0;
    max-width: 44ch;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    color: var(--paper-2);
}

.idx-hero__live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 20px;
}
/* Kanál a jeho stav bez oddělovací tečky: dvě pilulky vedle sebe by daly
   dvě prostřední tečky na jeden řádek. */
.idx-hero__live .jl-live__txt b {
    font-weight: 800;
}

.idx-hero__act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 22px;
}

/* Fotografie má vlastní tvar: roh karty, přesah k pravé hraně okna a spodní
   hrana, která se ztrácí v ploše stránky. Bez toho přechodu by pod snímkem
   končil obraz useknutý o hranu. */
.idx-hero__shot {
    position: relative;
    margin: 0;
    /* Snímek dřív přetékal až k pravé hraně okna. Nic nejde úplně po okraj:
       fotka drží lištu obsahu jako všechno ostatní, symetricky k textu. */
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--lift);
}
.idx-hero__shot img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    /* Pult je v pravé části snímku, ořez ho drží v obraze i v úzkém sloupci. */
    object-position: 58% 50%;
}
.idx-hero__shot::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(10, 11, 10, 0) 0%,
        rgba(10, 11, 10, .55) 62%,
        var(--bg) 100%);
}


/* ============================================================================
   2) PULT TVRDÝCH ČÍSEL
   Ne karta se stínem jako sdílená .jl-stats, ale pás přes celou šířku
   s vlasovými linkami. Čísla jsou zarovnaná vlevo, takže první z nich
   stojí přesně pod začátkem nadpisu nad ním.
   ============================================================================ */

/* Pás čísel je deska v liště obsahu, ne pruh od okraje k okraji. Sedí tak
   do rytmu ostrovů: lišta nahoře, deska čísel, lišta nabídky dole. */
.idx-tally { background: none; border: 0; }

.idx-tally__in {
    display: flex;
    flex-wrap: wrap;
    background: var(--band);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    padding: 2px 28px;
}

.idx-fig {
    /* Šířku dává obsah, ne zbytek pásu. S `flex: 1 1 180px` si dvě položky
       rozdělily celých 1200 px napůl, takže mezi „6 NABÍDEK V SOUPISU" a
       „12 SOUTĚŽÍ BĚŽÍ TEĎ" zůstalo 550 px prázdna a dělicí linka stála
       uprostřed ničeho. Kolik položek pás má, závisí na zapnutých funkcích
       (coiny a odměny jsou dnes vypnuté), takže se rozvržení nesmí spoléhat
       na to, že jich bude pět. */
    flex: 0 1 auto;
    min-width: 0;
    padding: 18px 30px 17px 0;
}
/* Dělicí linka patří až druhé položce, jinak by pás začínal svislou čárou. */
.idx-fig + .idx-fig {
    padding-left: 30px;
    border-left: 1px solid var(--rail);
}

.idx-fig__n {
    display: block;
    font-family: var(--font-display);
    /* Dvě poctivá čísla jsou to nejtvrdší, co web má; ať mluví nahlas.
       Monumentální měřítko je jediná věc, kterou comp uměl a stavba ne. */
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.idx-fig__n--coin { color: var(--coin); }

.idx-fig__l {
    display: block;
    margin-top: 9px;
    font-family: var(--font-code);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-3);
}


/* ============================================================================
   3) DROBNOSTI SPOLEČNÉ VÍC SEKCÍM
   Nadpis, oční linka, čip s počtem a odkaz „všechny …". Rozvržení se sekce
   od sekce liší, tyhle stavební kameny ne.
   ============================================================================ */

.idx-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(25px, 2.9vw, 35px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.03em;
    /* base.css sází VŠECHNY nadpisy verzálkami; web je má smíšené. */
    text-transform: none;
    color: var(--paper);
}
.idx-h2 > span:not([class]) {
    color: inherit;
    text-decoration: none;
}

/* .idx-eyebrow { odešel: oční linky nad nadpisy jsou zakázané a markup je pryč. */

.idx-chip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--r-chip);
    background: var(--raise);
    font-family: var(--font-code);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--paper-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Odkaz dál není drobný text v pravém horním rohu, ale široká linka pod
   obsahem. Šipka sedí u protějšího okraje, takže celý řádek čte jako
   „tudy dál". */
.idx-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--rail);
    font-family: var(--font-code);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-2);
    text-decoration: none;
    transition: color var(--t-fast);
}
.idx-more:hover,
.idx-more:focus-visible { color: var(--go); }
.idx-more svg {
    flex: none;
    transition: transform var(--t-fast);
}
.idx-more:hover svg { transform: translateX(4px); }


/* ============================================================================
   4) NABÍDKY
   Mřížku karet drží components/nabidka.css (.bonuses-list). Tady je jen
   hlavička nad ní: nadpis a čip na prvním řádku, věta pod nimi. Odkaz na
   všechny nabídky sedí až pod mřížkou.
   ============================================================================ */

/* Mřížka, ne flex: odstavec musí spadnout na VLASTNÍ řádek. Ve flexu ho
   max-width zkrátí natolik, že se vejde vedle nadpisu, a z hlavičky se
   stane zakázané „vlevo velký nadpis, vpravo drobný odstavec". */
.idx-offers__head {
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    justify-content: start;
    /* Čip je jinak roztažený na šířku sloupce, který mu nafoukl odstavec
       přes obě buňky pod ním. */
    justify-items: start;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 20px;
}
.idx-offers__lead {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.62;
    color: var(--paper-2);
}


/* ============================================================================
   5) KLIPY MĚSÍCE
   Dva sloupce: fotografie na celou výšku sekce vlevo, řádky klipů vpravo.
   Klip je pořadí a lajky, ne obálka na půl obrazovky, takže je to seznam
   řádků, ne třetí mřížka karet v pořadí.
   ============================================================================ */

.idx-clips__in {
    display: grid;
    grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 40px);
    align-items: stretch;
}

/* V DOM je fotografie AŽ ZA textem, aby na telefonu nestála před nadpisem.
   Na širokém displeji ji sem vrací mřížka. */
.idx-clips__shot {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-height: 100%;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--head);
}
.idx-clips__shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Snímek je barevný bokeh. Ztlumený a odbarvený drží stránku u jediné
       akční zelené; v plné sytosti by z jantarových skvrn byl druhý akcent. */
    opacity: .4;
    filter: saturate(.45);
}
.idx-clips__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(158deg, rgba(10, 11, 10, .35), rgba(10, 11, 10, .9));
}

.idx-clips__say {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}
.idx-clips__lead {
    margin: 11px 0 0;
    max-width: 56ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--paper-2);
}
/* Odkaz dál se drží dna sloupce, takže spodní hrana sedí na fotografii. */
.idx-clips__say .idx-more { margin-top: auto; }

.idx-clip-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.idx-clip {
    display: grid;
    grid-template-columns: 22px 116px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 10px;
    /* Řádek, ne karta, proto menší roh než --r-card. */
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    background: var(--panel);
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.idx-clip:hover {
    background: var(--panel-hi);
    border-color: var(--rail-2);
}

.idx-clip__n {
    font-family: var(--font-code);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--paper-3);
}

.idx-clip__media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-chip);
    overflow: hidden;
    background: #000;
}
.idx-clip__media img,
.idx-clip__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
    transition: opacity var(--t-fast);
}
.idx-clip:hover .idx-clip__media img,
.idx-clip:hover .idx-clip__media video { opacity: 1; }

/* Síť, kterou neumíme vložit (Kick, TikTok, Instagram): dlaždice s názvem. */
.idx-clip__net {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--raise);
    font-family: var(--font-code);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-3);
}

/* Bez min-width:0 by se sloupec roztáhl podle nejdelšího slova v titulku
   a ořez na dva řádky by nikdy nenastal. */
.idx-clip__body { min-width: 0; }

.idx-clip__t {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.34;
    color: var(--paper);
}
.idx-clip__m {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
    font-family: var(--font-code);
    font-size: 11.5px;
    color: var(--paper-3);
}
.idx-clip__likes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    /* Sytá --live má na panelu 4,1:1 a na text nestačí, světlejší odstín ano. */
    color: var(--live-hi);
}


/* ============================================================================
   6) POSLEDNÍ VIDEA
   Široký pás. Jediná sekce na stránce, která nedrží lištu 1200 px a jde
   skoro k okrajům okna. Náhledy jsou skutečné snímky z kanálu, žádná
   kreslená dlaždice.
   ============================================================================ */

/* base.css dělá z každé <section> flex row; tahle má dvě děti, tak block. */
.idx-vids { display: block; }

.idx-vids__head { margin-bottom: 20px; }

/* Pás začíná na levé hraně lišty, ale vpravo pokračuje až k okraji okna.
   Levé odsazení proto počítá totéž, co drží .jl-container: půlku volného
   místa vedle lišty plus jejích 30 px. */
.idx-vid-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    /* Pás drží lištu obsahu jako všechno ostatní. Dřív přetékal doprava až
       k okraji okna a byl jedinou sekcí s jinou šířkou; na přání majitele
       je stránka symetrická a nic nejde úplně po okraj. */
    max-width: var(--rail-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
/* Prázdný pás nezabírá místo, dokud ho nenaplní skript. */
.idx-vid-strip[data-empty="1"] { display: none; }

.idx-vid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-decoration: none;
}
.idx-vid-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    overflow: hidden;
    transition: border-color var(--t-fast);
}
.idx-vid:hover .idx-vid-thumb { border-color: var(--rail-2); }
.idx-vid-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .84;
    transition: opacity var(--t-fast);
}
.idx-vid:hover .idx-vid-thumb img { opacity: 1; }
.idx-vid-play {
    position: absolute;
    inset: 0;
    margin: auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill);
    background: rgba(7, 9, 10, .72);
    border: 1px solid var(--rail-2);
    color: var(--paper);
}
.idx-vid-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--paper-2);
}
.idx-vid:hover .idx-vid-title { color: var(--paper); }

/* Poslední dlaždice pásu je odkaz dál. Pás tím končí, místo aby se ztrácel
   v prázdnu za posledním náhledem. */
.idx-vid-more {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--rail);
    border-radius: var(--r-btn);
    background: var(--panel);
    font-family: var(--font-code);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-2);
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.idx-vid-more:hover,
.idx-vid-more:focus-visible {
    background: var(--panel-hi);
    border-color: var(--rail-2);
    color: var(--go);
}
.idx-vid-more svg { transition: transform var(--t-fast); }
.idx-vid-more:hover svg { transform: translateX(4px); }

/* Náhradní stav pásu: kanál zatím nevrátil video se skutečným náhledem.
   Odsazení je stejné jako u pásu, takže sekce nezmění tvar, jen zřídne.
   Fotografie leží naležato přes celou šířku pásu; skládané rozvržení
   (obraz nad textem) se na stránce nikde jinde neopakuje. */
.idx-vids__off {
    display: grid;
    gap: 18px;
    max-width: var(--rail-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.idx-vids__off[hidden] { display: none; }

.idx-vids__shot {
    position: relative;
    margin: 0;
    aspect-ratio: 1000 / 235;
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    overflow: hidden;
    background: #000;
}
.idx-vids__shot img {
    display: block;
    width: 100%;
    height: 100%;
    /* Rig stojí ve spodní třetině snímku, proto se ořez drží níž než na střed. */
    object-fit: cover;
    object-position: 50% 62%;
    opacity: .86;
}
/* Vpravo je na snímku prázdné pozadí ateliéru a ve tmavé stránce by svítilo
   jako plocha bez obsahu. Přechod ho utopí, stejně jako u hrdiny a u klipů. */
.idx-vids__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(96deg,
        rgba(10, 11, 10, .10) 0%,
        rgba(10, 11, 10, .48) 48%,
        rgba(10, 11, 10, .9) 100%);
}

.idx-vids__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}
.idx-vids__txt {
    margin: 0;
    max-width: 54ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--paper-2);
}


/* ============================================================================
   7) SOUTĚŽE
   Jediné místo na stránce se sdílenou hlavičkou .jl-section-label, takže
   idiom webu na homepage zůstává, ale nese celý rytmus. Věta pod hlavičkou
   je odsazená doprava, aby blok nebyl třetí levý sloupec v řadě.
   Mřížku .idx-gw-grid drží components/souteze.css.
   ============================================================================ */

/* Odsazení není od oka: je to přesně levá hrana DRUHÉ karty v mřížce pod
   ním (tři sloupce, mezera 16 px), takže odstavec na něčem stojí. */
.idx-gw__lead {
    margin: 0 0 22px calc((100% - 32px) / 3 + 16px);
    max-width: 58ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--paper-2);
}

/* Prázdný stav je panel jako každý jiný: plocha, linka, roh, stín. */
.idx-gw-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    background: var(--panel);
    border: 1px solid var(--rail);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
}
.idx-gw-empty p {
    margin: 0;
    max-width: var(--ed-read, 68ch);
    font-size: 15px;
    line-height: 1.6;
    color: var(--paper-2);
}


/* ============================================================================
   8) RESPONZIVITA
   ============================================================================ */

@media (max-width: 1100px) {
    /* Mezi lištou a skládáním pod sebe by fotografii zbyl proužek: sloupec
       textu proto ustoupí dřív, než se hrdina zlomí na jeden sloupec. */
    .idx-hero__in { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }

    .idx-clips__in { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
    .idx-clip { grid-template-columns: 20px 100px minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* Hrdina se skládá pod sebe. Tlačítko zůstává nad fotografií, aby bylo
       vidět bez scrollování. */
    .idx-hero__in { grid-template-columns: minmax(0, 1fr); }
    .idx-hero__shot { margin-right: 0; }
    .idx-hero__shot img { aspect-ratio: 16 / 9; }

    /* Na výšku displeje se sloupce skládají pod sebe a fotografie otevírá
       sekci jako úzký pás. Pod seznamem klipů by stála až za odkazem dál
       a četla by se jako zapomenutý ocas. */
    .idx-clips__in { grid-template-columns: minmax(0, 1fr); }
    .idx-clips__shot,
    .idx-clips__say { grid-column: 1; }
    .idx-clips__shot {
        grid-row: 1;
        min-height: 0;
        aspect-ratio: 16 / 6;
        margin-bottom: 18px;
    }
    .idx-clips__say { grid-row: 2; }
    .idx-clips__say .idx-more { margin-top: 18px; }

    /* Mřížka soutěží je tady nejvýš dvousloupcová, odsazení na třetinu by
       odstavec posadilo doprostřed prvního sloupce. */
    .idx-gw__lead { margin-left: 0; }
}

@media (max-width: 700px) {
    /* Okraje pásu videí kopírují lištu webu, tu karty.css na téhle šířce
       zužuje na 18 px. Na telefonu se pás stejně nemá kam roztáhnout. */
    .idx-vid-strip,
    .idx-vids__off { padding-left: 18px; padding-right: 18px; }

    /* Naležato ležící snímek by na úzkém sloupci byl proužek. */
    .idx-vids__shot { aspect-ratio: 16 / 7; }

    .idx-fig { flex-basis: 140px; padding: 15px 16px 14px 0; }
    .idx-fig + .idx-fig { padding-left: 16px; }
}

@media (max-width: 560px) {
    .idx-hero__lead { margin-top: 12px; }
    .idx-hero__act { gap: 10px 16px; }

    /* Pořadí klipu ustupuje, na 320px sloupci je náhled a titulek důležitější. */
    .idx-clip { grid-template-columns: 92px minmax(0, 1fr); gap: 11px; }
    .idx-clip__n { display: none; }

    .idx-vid-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .idx-gw-empty { padding: 18px; }
}


/* ============================================================================
   9) POHYB
   Vypíná ho prefers-reduced-motion, bez výjimky. Na stránce se nic nehýbe
   samo od sebe, jediný pohyb je odpověď na najetí myší.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .idx-clip,
    .idx-clip__media img,
    .idx-clip__media video,
    .idx-vid-thumb,
    .idx-vid-thumb img,
    .idx-vid-more,
    .idx-more,
    .idx-more svg,
    .idx-vid-more svg {
        transition: none;
        transform: none;
    }
}