/* ── Hero (avalehe bännris) ───────────────────────────────── */

/* Pildi alaserv on ANKUR: musta kasti (.page-banner) alaserv peab olema täpselt
   0.5rem pildi alt. Grid-rea kõrguse annab pikem tulp, ja pildi kuvasuhtest
   tulenev kõrgus ei klapi kunagi täpselt infotulba tekstikõrgusega — seega
   align-self: end (kirjutab üle .design-line align-items: start), mis hoiab
   pildi alaserva ALATI rea alumisel joonel. Nii on 0.5rem bänneri servani
   garanteeritud, sõltumata sellest kumb tulp pikem on, ja pilti ei lõigata
   ega venitata. Kui infotulp on pildist pikem, jääb pildi ÜLEserv pealkirjast
   allapoole — see on teadlik kompromiss (vt .hero__info). */
.hero__visual {
    align-self: end;
}

.hero__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

.hero__info {
    /* padding: 0 — püst 0 (pealkiri joondub pildi ülaservaga, kui pilt on
       pikem tulp — vt .hero__visual align-self: end) JA horisontaalne 0,
       et tühistada design-line__right vaike-gutter (3rem). Gutteri annavad lapsed
       ise (hero__title / hero__services / hero__highlights padding-left). */
    padding: 0;
    line-height: var(--line-height-tight);
}

.hero__title {
    padding: 0 var(--block-padding-x);
}

/* Kaks tekstikasti: kõrvuti kui ruumi jätkub, muidu üksteise all (flex-wrap).
   Kummalgi 3rem külgpadding → kõrvuti tekib 6rem vahe iseenesest. */
.hero__columns {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--paragraph-spacing);
    /* Pealkirja ja esimese teksti vahe. Bänneris pole globaalset tüpograafia-
       rütmi (see kehtib ainult .content-box'is), seega oli siin vahe 0 — plokk
       kannab selle ise. */
    margin-top: var(--paragraph-spacing);
}

.hero__services {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--block-padding-x);
    list-style: none;
}

.hero__services li {
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.2);
    color: var(--color-on-dark-muted);
    padding-bottom: var(--paragraph-spacing);   /* sama rütm nagu lõikude vahel */
}

.hero__highlights {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--block-padding-x);
}

/* ── Intro ────────────────────────────────────────────────── */

.intro {
    /* Vasak tulp algab tutvustustekstiga (pole otsest pealkirja) → kannab ise
       tulba 3rem ülamargini, et joonduda parema tulba pealkirjaga. */
    margin-top: var(--heading-margin-top);
}

.intro > :first-child {
    margin-top: 0;
}


/* ── Responsive ───────────────────────────────────────────── */

/* Murdepunkt 78rem = aste-1 murdepunkt (vt steps.css: 72rem + 2×3rem).
   See arv PEAB ühtima steps.css aste-1 murdepunktiga — muudad seal, muuda ka siin.
   Sellest kitsamaks ei mahu sisu enam täismõõdus → mähime kokkupressimise asemel. */
@media (max-width: 78rem) {
    /* Üks tulp → iga plokk on oma rida, seega .hero__visual align-self: end
       on siin niikuinii mõjuta (rea kõrgus = pildi kõrgus). Jäetakse alles. */
    /* Pildi all olles joonduvad tekstid pildi servadega — kõrvuti-paigutuse
       jaoks lastele lükatud külgpadding pole siin enam vajalik. */
    .hero__title,
    .hero__services,
    .hero__highlights {
        padding-left: 0;
        padding-right: 0;
    }
    /* Servapadding kadus → tekstikastide vahe taastatakse konteineris:
       teenused vasakusse, kontaktid paremasse äärde.
       nowrap: flex murrab read flex-basis'e (max-content) järgi, nii et
       veerud hüppaksid üksteise alla juba siis, kui nende KOKKUSURUMATA
       laius ei mahu — kuigi nad mahuksid kokkusurutuna kõrvuti. Keelame
       murdmise; astmel 4 (≤44rem) virnastab need allpool olev reegel. */
    .hero__columns {
        flex-wrap: nowrap;
        justify-content: space-between;
        column-gap: var(--block-padding-x);
    }
    /* Pildi all on ruumi → kaks plokki võrdselt pooleks. Sisupõhine laius
       (flex: 0 1 auto) tegi need ebaühtlaseks: pikk keelte-lõik venitas parema
       laiaks ja surus teenused kitsaks. flex-basis 0 → mõlemad kasvavad võrdselt. */
    .hero__services,
    .hero__highlights {
        flex: 1 1 0;
    }
}

/* Murdepunkt 44rem = aste-4 murdepunkt (vt steps.css: 3→4).
   Sellest astmest alates ei mahu teenused ja highlights enam kõrvuti →
   üksteise alla. Kogu hero-info jääb vasakule joondatuks (mitte tsentreeritud,
   et pikk keelte-lõik ei nihutaks lühemaid tekste paigast). */
@media (max-width: 44rem) {
    /* plokid üksteise alla, täislaiusele (align-items: stretch vaikimisi) →
       teenuste alljooned ulatuvad lõpuni; tekst jääb vasakule */
    .hero__columns {
        flex-direction: column;
    }
}