/* ============================================================ BLOK: hero
   Pun plavi blok. Header je preko njega providan, pa gornji razmak mora sam
   da otvori mesto za njega.
   ========================================================================= */

.stf-hero {
    padding-top: calc(var(--header-h) + var(--sp-2xl));
    padding-bottom: var(--sp-3xl);
    /* Bez overflow:hidden — rep grede namerno visi ispod ivice sekcije.
       Horizontalni skrol seče body (§3 u stamford.css). */
}

.stf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}

/* Bez kartice i bez slike naslov ne sme da ostane u koloni od 7/11 širine —
   desna polovina bi bila prazno plavo polje. */
.stf-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.stf-hero__grid--solo .stf-display { max-width: 20ch; }

.stf-hero__lead    { margin-block: var(--sp-lg) var(--sp-xl); }
.stf-hero__actions { gap: var(--sp-sm); }

/* Displej u heroju ide preko cele kolone i lomi se sam. text-wrap: balance iz
   sistema ovde smeta — pri četiri reda pravi merdevine umesto punog bloka. */
.stf-hero .stf-display { text-wrap: pretty; max-width: 15ch; }

/* Greda sedi na donjoj ivici, a rep pada u sekciju ispod. Zato je apsolutna:
   u normalnom toku bi je padding-bottom sekcije podigao u sredinu plavog. */
.stf-hero__deck {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
}

@media (max-width: 1024px) {
    .stf-hero__grid { grid-template-columns: 1fr; gap: var(--sp-xl); align-items: start; }
    .stf-hero .stf-display { max-width: 18ch; }
}
@media (max-width: 560px) {
    .stf-hero { padding-top: calc(var(--header-h) + var(--sp-lg)); }
    .stf-hero__actions .stf-btn { width: 100%; }
    .stf-hero .stf-display { max-width: none; }
}

/* --- Kartica „Plan rada”. Bela ploča na plavoj — jedina bela površina u
   heroju, pa joj ne treba ni okvir ni senka da bi se odvojila.

   Kartica u markupu nosi .stf-theme-white i odatle čita uloge (§4). Bez toga
   bi morala da imenuje --stf-ink i --stf-line direktno, što blokovima nije
   dozvoljeno: u trenutku kad hero postane npr. noć, kartica bi ostala jedina
   stvar koja ne zna da se površina promenila. */
.stf-slip {
    background: var(--stf-bg);
    color: var(--stf-fg-body);
    border-radius: var(--r-md);
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
.stf-slip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--stf-line-c);
}
.stf-slip__title {
    margin: 0;
    font-family: var(--stf-font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--stf-fg-muted);
}

.stf-slip__list { margin: 0; }
.stf-slip__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--sp-sm);
    padding-block: var(--sp-xs);
    border-bottom: 1px solid var(--stf-line-c);
    font-size: var(--fs-small);
}
.stf-slip__row dt { color: var(--stf-fg-muted); }
.stf-slip__row dd { margin: 0; color: var(--stf-fg); font-weight: 500; }

.stf-slip__foot {
    margin: var(--sp-sm) 0 0;
    font-size: var(--fs-tiny);
    line-height: 1.5;
    color: var(--stf-fg-muted);
}