/* =============================================================================
   SECTIONS/PORTAL.CSS — tmavý pás „Novinky"
   -----------------------------------------------------------------------------
   Blok je karusel: novinky leží na sobě v jedné buňce mřížky a střídají se
   prolnutím s jemným posunem do strany. Proto tu není žádné `overflow: hidden`
   — stíny rámečku ani modrý přesvit kolem obrázku se nemají o co ořezat
   a výška pásu se drží podle nejvyšší novinky, takže při přepnutí nepodskočí.

   Blok si řídí odsazení sám → v registru sekcí má 'raw'.
   Skript: js/sections/portal.js
   ========================================================================== */

.portal-band {
    position: relative;
    overflow: hidden;
    background: var(--surface-dark);
    box-shadow: 0 24px 60px rgba(13, 43, 75, .18);
}

/* Světelný přesvit v pravém horním rohu */
.portal-band::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -110px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(59, 154, 225, .28) 0%, rgba(59, 154, 225, 0) 70%);
    pointer-events: none;
}

.portal-band-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: clamp(2.25rem, 5vw, 3.25rem) var(--container-pad);
}


/* =============================================================================
   KARUSEL — přepínání novinek
   ========================================================================== */

.portal-carousel {
    position: relative;
    /* Délka otáčení tu už není. Časový ukazatel v tečce kreslí přímo
       js/sections/portal.js podle skutečně zbývajícího času, takže by
       druhá hodnota v CSS jen svedla k rozejití obou údajů. */
}

/* Všechny novinky sdílí jednu buňku mřížky → leží na sobě a výšku
   pásu určuje ta nejvyšší z nich. */
.portal-track {
    display: grid;
    grid-template-columns: 1fr;
}

.portal-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);

    opacity: 0;
    visibility: hidden;
    transform: translateX(34px);
    transition:
        opacity   .45s var(--ease),
        transform .45s var(--ease),
        visibility 0s linear .45s;
}

/* Novinka, která je na řadě */
.portal-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity   .45s var(--ease),
        transform .45s var(--ease),
        visibility 0s;
}

/* Novinka, která právě odchází — musí zůstat vidět, dokud nedojede */
.portal-slide.is-leaving {
    visibility: visible;
    opacity: 0;
    transform: translateX(-34px);
    transition:
        opacity   .45s var(--ease),
        transform .45s var(--ease);
}

/* Při kroku zpět se směr obrátí, aby posun odpovídal stisknuté šipce */
.portal-carousel[data-dir="prev"] .portal-slide           { transform: translateX(-34px); }
.portal-carousel[data-dir="prev"] .portal-slide.is-active { transform: none; }
.portal-carousel[data-dir="prev"] .portal-slide.is-leaving { transform: translateX(34px); }

/* Jediná novinka v poli = žádné přepínání, blok vypadá jako dřív.
   (Když se skript nenačte, zůstane vidět první novinka — třídu
   `is-active` na ní vypisuje už samotná šablona.) */
.portal-carousel--single .portal-slide {
    opacity: 1;
    visibility: visible;
    transform: none;
}


/* =============================================================================
   LEVÝ SLOUPEC — text
   ========================================================================== */

.portal-text { flex: 1 1 auto; min-width: 0; }

.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--c-highlight);
    box-shadow: 0 4px 12px rgba(232, 121, 42, .28);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1;
    color: #fff;
}

.portal-badge .material-icons { font-size: 18px; line-height: 1; color: #fff; }

.portal-title {
    max-width: 620px;
    margin-top: var(--sp-5);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    text-align: left;
    color: #fff;
}

.portal-title .portal-accent {
    font-weight: 900;
    font-size: 1.1em;
    color: #fff;
}

.portal-title .portal-sub { color: var(--c-blue-500); }

.portal-perex {
    max-width: 520px;
    margin-top: var(--sp-4);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    text-align: left;
    color: #B9CDE0;
}

.portal-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

.portal-benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-body);
    line-height: 1.45;
    color: #E6EEF6;
}

.portal-benefit::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    background: #3B9AE1;
    transform: rotate(45deg);
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
}

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-navy-800);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease);
}

.portal-btn:hover { background: #E6EEF6; color: var(--c-navy-800); }
.portal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* =============================================================================
   PRAVÝ SLOUPEC — vizuál
   ========================================================================== */

.portal-visual {
    position: relative;
    flex: 0 1 560px;
    min-width: 0;
}

.portal-visual::before {
    content: "";
    position: absolute;
    inset: -40px -34px;
    background: radial-gradient(ellipse at center, rgba(59, 154, 225, .3) 0%, rgba(59, 154, 225, 0) 70%);
    pointer-events: none;
}

.portal-frame {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 34px 80px rgba(0, 0, 0, .42);
   
}

.portal-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(205deg, rgba(13, 43, 75, 0) 45%, rgba(13, 43, 75, .32) 100%);
    pointer-events: none;
}

.portal-frame img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}





/* =============================================================================
   OVLÁDÁNÍ — tečky a šipky
   ========================================================================== */

.portal-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ----- Tečky ----- */

.portal-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .26);
    cursor: pointer;
    transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* Dotykový cíl je větší než tečka sama. Tečka proto nesmí nic ořezávat —
   zaoblení si nese samotná výplň, ne obal. */
.portal-dot::before {
    content: "";
    position: absolute;
    inset: -13px -6px;
}

.portal-dot:hover { background: rgba(255, 255, 255, .45); }
.portal-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Aktivní tečka se protáhne a plní se podle toho, kolik času zbývá
   do přepnutí. Návštěvník tak vidí, že se blok za chvíli otočí. */
.portal-dot.is-active { width: 40px; }

/* -----------------------------------------------------------------------------
   VÝPLŇ (časový ukazatel)
   -----------------------------------------------------------------------------
   Dřív to byl pseudoprvek přes celou tečku zmenšený přes scaleX(). Jenže
   scaleX() zmáčkne i zaoblení rohů: při skoro prázdném ukazateli z levého
   oblouku zbyla svislá čára a hrana vypadala useknutě. Teď se místo měřítka
   mění šířka, takže poloměr zůstává celou dobu stejný a oba konce jsou
   zakulacené i při jednom procentu.

   Šířku nastavuje js/sections/portal.js podle skutečného zbývajícího času.
   Žádná CSS animace tu není schválně — běžela by po svém a s odpočtem se
   rozcházela (na začátku se ukazatel zasekával a rozjížděl se opožděně).
   -------------------------------------------------------------------------- */

.portal-dot__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--c-blue-500);
    pointer-events: none;
}

/* Po ručním přepnutí se už neotáčí samo → tečka je prostě plná */
.portal-carousel.is-manual .portal-dot.is-active .portal-dot__fill { width: 100%; }

/* ----- Šipky ----- */

.portal-arrows {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.portal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease),
        border-color     var(--dur) var(--ease),
        color            var(--dur) var(--ease);
}

.portal-arrow .material-icons { font-size: 24px; line-height: 1; }

.portal-arrow:hover {
    background: #fff;
    border-color: #fff;
    color: var(--c-navy-800);
}

.portal-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* =============================================================================
   OMEZENÝ POHYB
   -----------------------------------------------------------------------------
   Kdo má v systému vypnuté animace, dostane prosté prostřídání bez posunu
   a bez houpání. Automatické otáčení skript v tomhle režimu nespustí vůbec.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .portal-frame { animation: none; }

    .portal-slide,
    .portal-slide.is-active,
    .portal-slide.is-leaving {
        transform: none;
        transition: opacity .2s linear, visibility 0s;
    }

    /* Bez otáčení nemá odpočet co ukazovat — aktivní tečka je prostě plná. */
    .portal-dot.is-active .portal-dot__fill { width: 100%; }
}


/* =============================================================================
   RESPONZIVITA
   ========================================================================== */

@media (max-width: 920px) {
    .portal-slide {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-8);
    }

    .portal-visual { flex: 0 0 auto; width: 100%; }
    .portal-visual::before { inset: -24px -18px; }

    .portal-title { max-width: none; }
    .portal-perex { max-width: none; }

    /* Plovoucí animace na mobilu vypnutá — na malém displeji ruší
       a stojí výkon při scrollování. */
    .portal-frame { animation: none; }
}

@media (max-width: 560px) {
    .portal-controls {
        justify-content: center;
        gap: var(--sp-8);
    }
}

@media (max-width: 480px) {
    .portal-benefit { font-size: var(--fs-sm); }
    .portal-btn { width: 100%; }

    .portal-arrow { width: 42px; height: 42px; }
}