/* ==================================================================
   HERO – Férová hra (homepage slovenskozalohuje.sk)
   Nahrádza pôvodný "Hero CSS" blok. Layout:
     riadok 1: nadpis (vľavo)  +  obrázok fera (vpravo)
     riadok 2: logá partnerov (vľavo)  +  meno (vpravo)
   ================================================================== */

#hero {
    position: relative;
    padding: 56px 0 48px 0;
    background: #08B0A1;
    overflow: hidden;
}

/* homepage: klikateľný odkaz cez celý banner (prekrytie nad obsahom).
   Na stránke súťaže sa nepoužíva – existuje len ak je .szs-hero-link
   v markupe, takže pravidlo je tam neaktívne. */
#hero .szs-hero-link {
    position: relative;
    inset: 0;
    z-index: 2;
    text-decoration: none;
    display: grid;  /* aby sa dal kliknúť aj na prázdne miesto vľavo od obrázka */
}

#hero .hero-wrapper {
    margin: 0 auto;
    align-items: flex-start;
}

#hero h1 {
    color: #FFF;
    font-size: 48px;     /* menšie, aby sa dlhý nadpis zmestil do ľavého stĺpca */
    font-style: normal;
    font-weight: 700;
    line-height: normal !important;
    margin-left: 100px;  /* odsadenie podľa dizajnu */
    margin-top: 40px !important;
}

/* ak je "Ferovej hre!" odkaz, prebiť default štýl odkazov z témy
   (modrá + podčiarknutie) – žltá ako zvyšok akcentu, bez dekorácie */
#hero h1 a,
#hero h1 a:link,
#hero h1 a:visited,
#hero h1 a:hover,
#hero h1 a:focus,
#hero h1 a:active {
    color: #EDF2A9 !important;
    text-decoration: none !important;
}

/* jednoliaty nadpis – len "Ferovej hre!" žltou, zvyšok biely.
   font-size zámerne neuvádzame – span dedí veľkosť z h1, takže sa
   korektne zmenšuje aj v responzívnych media queries nižšie. */
#hero h1 span {
    color: #EDF2A9;
    display: inline;
    white-space: nowrap;   /* "Ferovej hre!" sa nezalomí medzi slovami */
}

#hero .image-wrapper {
    text-align: center;
}

/* nový obrázok fera má iný pomer strán – necháme škálovať */
#hero .image-wrapper img,
#hero img.main-image {
    width: 100%;
    max-width: 540px;
    height: auto;
}

/* ---- ľavý stĺpec pod nadpisom: meno → "Vecné ceny..." → logá ---- */

/* meno pod nadpisom, zarovnané s ním (rovnaký margin-left ako h1) */
#hero .person-name {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    margin: 14px 0 0 100px;
}

/* text nad pásom s logami */
#hero .sponsors-caption {
    color: #FFF;
    font-size: 15px;
    font-weight: 400;
    margin: 28px 0 12px 100px;
}

#hero .hero-sponsors {
    display: flex;
    align-items: center;
    gap: 28px;
    background: #fff;          /* biele pozadie kvôli čitateľnosti log na tyrkysovej */
    border-radius: 12px;
    padding: 18px 28px;
    margin-left: 100px;        /* zarovnanie pod nadpis */
    max-width: 440px;
}

#hero .hero-sponsors img {
    height: 46px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Birell má širší pomer strán – menší podľa dizajnu */
#hero .hero-sponsors img[alt="Birell"] {
    height: 26px;
}

/* ---- responzivita ---- */
@media (max-width: 991px) {
    #hero { padding: 36px 0 32px; }

    /* poradie na mobile: nadpis → meno → obrázok → text → logá.
       hero-wrapper aj title-wrapper cez display:contents, aby sa obrázok
       (iný stĺpec) dal vložiť medzi meno a pás s logami */
    #hero .container { display: flex; flex-direction: column; }
    #hero .hero-wrapper,
    #hero .title-wrapper { display: contents; }

    #hero h1 {
        order: 1;
        margin-left: 0;
        margin-top: 0;
        font-size: 40px;
        text-align: left;      /* nadpis zarovnaný doľava */
    }
    #hero h1 span { font-size: 40px; }

    #hero .person-name {
        order: 2;
        margin: 6px 0 0;       /* doľava, bez odsadenia */
        text-align: left;
    }

    #hero .image-wrapper {
        order: 3;
        margin-top: 24px;
        text-align: center;
    }
    #hero .image-wrapper img,
    #hero img.main-image { max-width: 320px; }

    #hero .sponsors-caption {
        order: 4;
        margin: 28px 0 12px;
        text-align: center;    /* nad vycentrovanými logami */
    }

    #hero .hero-sponsors {
        order: 5;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 28px;
    }
}

@media only screen and (max-width: 600px) {
    #hero img { margin-top: 16px !important;  /* menej medzery nad obrázkom na malých mobiloch */}
}

@media (max-width: 480px) {
    #hero h1 { font-size: 32px !important; }
    #hero h1 span { font-size: 32px !important; }
    #hero .hero-sponsors img { height: 36px; }
    #hero .hero-sponsors img[alt="Birell"] { height: 24px; }
}