/* =============================================================================
   SECTIONS/HERO.CSS — úvodní blok hlavní stránky
   -----------------------------------------------------------------------------
   Vrstvení uvnitř .mk-hero:
     -3  ::before  statická fotka (záloha, když video nehraje)
     -2  video     smyčka
     -1  ::after   tmavě modrý závoj
      0  __inner   obsah

   Hero má vlastní odsazení (proto .section--flush v registru sekcí).
   ========================================================================== */

.mk-hero {
    --mk-navy:      var(--c-navy-700);
    --mk-navy-dark: #0F2947;
    --mk-navy-soft: var(--c-navy-500);
    --mk-ink:       #1F2A37;
    --mk-muted:     var(--c-text-muted);
    --mk-gold:      var(--c-gold-400);

    /* Síla ztmavení. Nižší číslo = fotka výraznější. Rozumný rozsah .60–.86 */
    --mk-veil: .70;

    /* Cesta k záložní fotce */
    --mk-photo: url('/images/hero-poster.webp');

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.75rem) var(--container-pad) clamp(2.25rem, 5vw, 3.5rem);
    color: var(--mk-ink);
    line-height: var(--lh-body);
}

.mk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--mk-photo);
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.mk-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 72% 96% at 50% 52%,
            rgba(9, 24, 42, var(--mk-veil)) 0%,
            rgba(9, 24, 42, calc(var(--mk-veil) - .16)) 55%,
            rgba(10, 27, 47, calc(var(--mk-veil) - .44)) 100%),
        linear-gradient(180deg,
            rgba(9, 24, 42, .15) 0%,
            rgba(11, 30, 52, .05) 45%,
            rgba(13, 36, 62, .25) 100%);
}

/* Světlejší varianta */
.mk-hero--soft { --mk-veil: .82; }

.mk-hero__inner {
    position: relative;
    max-width: 1140px;
    margin-inline: auto;
}

.mk-hero .mk-ico {
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}


/* =============================================================================
   HLAVIČKA
   ========================================================================== */

.mk-hero__head {
    max-width: 800px;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
    text-align: center;
}

.mk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: 7px 16px 7px 12px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

.mk-hero__eyebrow .mk-ico { font-size: 18px; color: var(--mk-gold); }

.mk-hero__head h1 {
    margin-bottom: var(--sp-5);
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(6, 20, 36, .55);
}

.mk-hero__lead {
    max-width: 620px;
    margin-inline: auto;
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 10px rgba(6, 20, 36, .5);
    text-wrap: balance;
}


/* =============================================================================
   DVĚ KARTY
   ========================================================================== */

.mk-hero__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    align-items: stretch;
}

@media (min-width: 901px) {
    .mk-hero__split { grid-template-columns: 1.08fr .92fr; gap: var(--sp-5); }
}

.mk-hero .mk-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
}

.mk-hero .mk-card__label {
    margin-bottom: var(--sp-3);
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mk-hero .mk-card__text {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.mk-hero .mk-card__points {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: var(--sp-6);
    list-style: none;
}

.mk-hero .mk-card__points li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .9rem;
    line-height: 1.4;
}

.mk-card__points .mk-ico { flex-shrink: 0; font-size: 19px; }

.mk-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-top: auto;
}

.mk-card__note { font-size: var(--fs-xs); line-height: 1.4; }
.mk-card__note strong { font-weight: 700; }

/* --- levá karta: diagnostika ---------------------------------------------- */

.mk-card--primary {
    border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 12px 36px rgba(6, 20, 36, .28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mk-card--primary .mk-card__label      { color: var(--mk-navy-dark); }
.mk-card--primary .mk-card__text       { color: var(--mk-muted); }
.mk-card--primary .mk-card__points li  { color: var(--mk-ink); }
.mk-card--primary .mk-card__points .mk-ico { color: var(--mk-navy-soft); }
.mk-card--primary .mk-card__note       { color: var(--mk-muted); }
.mk-card--primary .mk-card__note strong { color: var(--mk-navy-dark); }

/* --- pravá karta: poradenství --------------------------------------------- */

.mk-card--secondary {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.mk-card--secondary .mk-card__label     { color: #fff; }
.mk-card--secondary .mk-card__text      { color: rgba(255, 255, 255, .8); }
.mk-card--secondary .mk-card__points li { color: rgba(255, 255, 255, .78); }
.mk-card--secondary .mk-card__points .mk-ico { color: rgba(255, 255, 255, .6); }
.mk-card--secondary .mk-card__note      { color: rgba(255, 255, 255, .76); }
.mk-card--secondary .mk-card__note strong { color: #fff; }


/* =============================================================================
   TLAČÍTKA V HERO
   ========================================================================== */

.mk-hero .mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.mk-hero .mk-btn .mk-ico { font-size: 20px; }

/* Pozor na sílu selektorů: základ výše je `.mk-hero .mk-btn` (dvě třídy)
   a nastavuje `border: 1px solid transparent`. Kdyby varianty byly psané
   jen jako `.mk-btn--ghost` (jedna třída), prohrály by a rámeček by se
   objevil až při najetí myší, kde selektor tři třídy má. */

.mk-hero .mk-btn--fill {
    background: var(--mk-navy);
    border-color: var(--mk-navy);
    color: #fff;
}
.mk-hero .mk-btn--fill:hover { background: var(--mk-navy-dark); border-color: var(--mk-navy-dark); color: #fff; }

.mk-hero .mk-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}
.mk-hero .mk-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.mk-hero .mk-btn:focus-visible { outline: 3px solid var(--mk-gold); outline-offset: 3px; }


/* =============================================================================
   PÁS DŮVĚRY
   ========================================================================== */

.mk-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3) var(--sp-8);
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.mk-hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 8px rgba(6, 20, 36, .5);
}

.mk-hero__trust .mk-ico { font-size: 18px; color: var(--mk-gold); }


/* =============================================================================
   NÁSTUP
   ========================================================================== */

.mk-hero__head,
.mk-hero .mk-card,
.mk-hero__trust { animation: mk-rise .55s var(--ease) backwards; }

.mk-hero .mk-card--primary   { animation-delay: .08s; }
.mk-hero .mk-card--secondary { animation-delay: .16s; }
.mk-hero__trust              { animation-delay: .24s; }

@keyframes mk-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


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

@media (max-width: 900px) {
    .mk-hero      { --mk-veil: .78; }
    .mk-hero--soft { --mk-veil: .88; }

    /* Druhá karta je na mobilu jen doplněk — odrážky se schovají,
       aby se dvě CTA vešla na jednu obrazovku bez scrollování. */
    .mk-card--secondary { background: rgba(255, 255, 255, .13); }
    .mk-card--secondary .mk-card__points { display: none; }
    .mk-card--secondary .mk-card__text { margin-bottom: var(--sp-4); }

    .mk-hero .mk-btn { width: 100%; }
    .mk-card__note { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .mk-hero__eyebrow { font-size: 12px; padding: 6px 13px 6px 10px; }
    .mk-hero__trust { gap: var(--sp-2) var(--sp-5); }
    .mk-hero__trust span { font-size: 12.5px; }
}

/* Fallback bez backdrop-filter (starší Firefox) */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .mk-card--secondary { background: rgba(20, 45, 74, .72); }
    .mk-hero__eyebrow   { background: rgba(20, 45, 74, .72); }
}


/* =============================================================================
   VIDEO POZADÍ — aktivuje se třídou .mk-hero--video
   ========================================================================== */

.mk-hero--video {
    --mk-photo: url('/images/hero-poster.webp');
    --mk-veil: .74;
}

.mk-hero--video::before { z-index: -3; }

.mk-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    border: 0;
    pointer-events: none;
}

@media (max-width: 900px) { .mk-hero--video { --mk-veil: .80; } }

/* Na mobilu video vypínáme — zůstane poster. Šetří data i baterii.
   Skript v js/sections/hero.js ho navíc rovnou odstraní z DOM,
   aby se vůbec nestahovalo. */
@media (max-width: 600px)          { .mk-hero__video { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-hero__video { display: none; } }