@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* ---- základ = MOBILNÍ zobrazení (lišty pod sebou) -------------- */
.fgc-hp-wrap{ display: flex; flex-direction: column; position: relative; } /* kotva pro absolutní lištu logo+menu */
/* Sekce „Firma jako organismus." – vlastní pozadí (= pozadí stránky),
   aby pod její horní část neprosvítal béžový beach z hero.
   Na PC jsou boxy vytaženy do hero záporným marginem, což tuhle sekci
   posune nahoru a její horní okraj by jinak ležel na beach pozadí
   (text „mezi" dvěma podklady). Tímto text vždy sedí na čistém podkladu
   a pruh beache pod boxy je konzistentní. */
.fgc-text-panel{ position: relative; z-index: 1; background: #f6f6f8; }
.fgc-promo{
    position: relative;
    z-index: 5;
    margin: 0;              /* žádné bílé mezery – lišty na těsno k hero (Raptor) */
    order: -1;              /* MOBIL: promo lišty ÚPLNĚ NAHOŘE (nad hero) */
    padding-top: 6rem;      /* místo nahoře jen pro logo+menu (≈ výška lišty), bez bílé mezery navíc */
    font-family: "Manrope", sans-serif;
}

.fgc-hp-wrap.promo-hidden .fgc-promo {
    display: none;
}

.fgc-hp-wrap.promo-hidden .video-wrapper .video-text
{
    padding-bottom: auto !important;
}
@media (max-width: 992px) {
    .fgc-hp-wrap.promo-hidden header.hp .video-wrapper .video-text {
        top: 45% !important;
    }
}

.fgc-promo *{ font-family: "Manrope", sans-serif; }
.fgc-promo .container{ max-width: none; padding-left: 0; padding-right: 0; }  /* MOBIL: lišty na celou šířku (full-bleed) */
.fgc-promo__grid{
    display: flex;
    flex-direction: column;     /* mobil: lišty pod sebou, NA TĚSNO (bez mezery) */
    gap: 0;
}
.fgc-promo__item{
    --fgc-accent: #00B3A7;
    /* MOBIL (nový návrh dle Figmy): velký nadpis nahoře, pod ním [play|podtitul]
       a [kalendář | datum,čas ........ tlačítko]. Grid: ikona | text | tlačítko.
       .fgc-promo__body má display:contents, takže title/meta/cta vstupují do gridu lišty. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 5px;            /* mezera ikona → text (dle Figmy: text na ~55px) */
    row-gap: 6px;
    background: var(--fgc-accent);   /* plná barevná lišta */
    color: #fff;
    border-radius: 0;           /* MOBIL: hranaté rohy jako ve Figmě */
    padding: 8px 16px 16px;     /* nahoře 8px (nadpis t8 dle Figmy), po stranách + dole 16px */
    box-shadow: none;           /* lišty jsou na těsno, bez stínu */
    text-align: left;
}
.fgc-promo__item--teal { --fgc-accent: #00B3A7; }
.fgc-promo__item--coral{ --fgc-accent: #FF5319; }
.fgc-promo__item--amber{ --fgc-accent: #FF9743; }

.fgc-promo__headline{                  /* velký nadpis nahoře (jen mobil) */
    grid-column: 1 / -1;
    margin: 0;
    font-weight: 800;             /* Manrope ExtraBold */
    font-size: 15px;              /* nadpis 15px (dle Figmy) */
    line-height: 1.2;
    text-align: left;             /* nadpis vlevo (dle Figmy), ne na střed */
    color: #fff;
}
.fgc-promo__body{ display: contents; } /* title/meta/cta vstupují do gridu lišty */
.fgc-promo__eyebrow{                   /* na mobilu schované (nahrazuje ho velký nadpis), styl drží pro PC */
    display: none;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}

.fgc-promo__icon{                      /* PLAY: bílý prstenec + bílá šipka */
    grid-column: 1; grid-row: 2;
    margin-left: 8px;                  /* play odsazené od nadpisu (l24 dle Figmy) */
    width: 26px; height: 26px;         /* play kolečko 26px (dle Figmy) */
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: #fff;
}
.fgc-promo__icon .fgc-ico-m{ display: block; width: 100%; height: 100%; fill: currentColor; }  /* mobil: přesná Figma ikona (prstenec + šipka v jednom SVG) */
.fgc-promo__icon .fgc-ico-d{ display: none; }                                                  /* PC trojúhelník na mobilu schovaný */

.fgc-promo__icon--cal{                 /* KALENDÁŘ: bílý obrys, bez prstence */
    grid-column: 1; grid-row: 3;
    justify-self: start;
    margin-left: 11px;                 /* kalendář vystředěný pod play (l28 dle Figmy) */
    width: auto; height: auto;
    border: none; background: transparent;
}
.fgc-promo__icon--cal svg{ width: auto; height: 21px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }  /* přesná Figma ikona kalendáře (21×23, stroke 2) */

.fgc-promo__title{
    grid-column: 2 / -1; grid-row: 2;
    font-weight: 500;             /* Manrope Medium */
    font-size: 13px;              /* podtitul 13px / lh 15 (dle Figmy) */
    line-height: 1.18;
    color: #fff;
}
.fgc-promo__meta{
    grid-column: 2; grid-row: 3;
    font-weight: 800;             /* Manrope ExtraBold (dle Figmy) */
    font-size: 10px;              /* datum + čas 10px (dle Figmy) */
    line-height: 1.25;
    color: #fff;
}
.fgc-promo__date, .fgc-promo__time{ display: inline; }
.fgc-promo__time{ white-space: nowrap; }   /* „10:00 – 11:15" drží pohromadě na jednom řádku */
.fgc-promo__date::after{ content: ", "; }   /* datum + čas do jedné věty */
.fgc-promo__meta svg{ width: auto; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.fgc-promo__date svg, .fgc-promo__time svg{ display: none; } /* malé inline ikonky pryč (vlevo je velký kalendář) */
.fgc-promo__sep{ display: none; }

.fgc-promo__cta{
    grid-column: 3; grid-row: 3;
    justify-self: end; align-self: center;
    display: inline-block;
    background: #fff;               /* bílé tlačítko, barevný text */
    color: var(--fgc-accent);
    font-weight: 800;             /* Manrope ExtraBold */
    font-size: 10px;              /* tlačítko 10px (dle Figmy) */
    line-height: 1.2;
    padding: 4px 28px;            /* širší tlačítko ~156px (dle Figmy, box 116 textu + ~20px padding) */
    border-radius: 0;             /* tlačítko bez zaoblení (hranaté, dle Figmy) */
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.fgc-promo__cta:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); color: var(--fgc-accent); }

/* ÚZKÉ TELEFONY: datum + tlačítko se vedle sebe nevejdou → tlačítko POD datum.
   (Figma návrh je na širším rámci ~590px; na reálném telefonu by se datum
   jinak drtilo slovo po slově.) */
@media (max-width: 340px){
    .fgc-promo__meta{ grid-column: 2 / -1; }        /* datum/čas přes celou šířku vpravo od ikony */
    .fgc-promo__cta{
        grid-column: 2 / -1; grid-row: 4;            /* tlačítko na vlastní řádek pod datum */
        justify-self: start;
        margin-top: 6px;
    }
}

/* ---- PC (>= 993px) = přepnutí na 3 BOXY vedle sebe ------------- */
@media (min-width: 993px) {
    /* 1:1 s předlohou (jen PC):
       - hero zkrácené na výšku obrazovky
       - nadpis na svislý střed (mírně nad středem)
       - boxy hned pod nadpisem ve spodní části hero
       => vše viditelné bez scrollování */

    header.hp .video-wrapper {
        height: 90vh;
        min-height: 620px;
        max-height: 1000px; /* hero (beach) prodloužené, ať orámuje boxy i zespodu */
    }

    header.hp .video-wrapper .video-text {
        bottom: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 0rem !important;
    }



    .fgc-promo{
        margin-top: -13rem;         /* PC: boxy ve spodní části hero, bez překryvu nadpisu */
        margin-bottom: 3rem;
        order: 0;                   /* PC: boxy zpět pod hero (do hero přes záporný margin) */
        padding-top: 0;
    }
    .fgc-promo .container{ max-width: 1400px; }   /* širší kontejner, ať boxy vyplní šířku jako ve Figmě */
    .fgc-promo__grid{
        flex-direction: row;
        justify-content: center;    /* boxy vycentrované jako ve Figmě */
        gap: 22px;                  /* mezera mezi boxy */
    }
    .fgc-promo__item{
        /* boxy zvětšené (~1.25×), ať na širokém monitoru vyplní šířku jako ve Figmě
           – škáluje se celý box (ikona, mezery i text), nadpis hero zůstává beze změny */
        flex: 0 1 425px;
        max-width: 425px;
        align-items: flex-start;    /* ikona nahoře vlevo */
        gap: 45px;                  /* kolečko + mezera => obsah odsazen jako ve Figmě */
        background: #fff;           /* PC: bílá karta s barevnými akcenty */
        color: #1c1c1c;
        border-radius: 25px;
        padding: 20px;
        box-shadow: 0 20px 42px rgba(0,0,0,.14);
    }
    .fgc-promo__icon{
        width: 50px; height: 50px;  /* kolečko play (zvětšené úměrně) */
        background: color-mix(in srgb, var(--fgc-accent) 20%, transparent); /* kolečko = akcent @ 20 % (Figma fill-opacity 0.2) */
        color: var(--fgc-accent);                                    /* šipka v akcentu */
    }
    .fgc-promo__body{ gap: 0; }
    .fgc-promo__eyebrow{ color: var(--fgc-accent); font-size: 25px; }
    .fgc-promo__title{
        margin-top: 16px;           /* mezera „WEBINÁŘ ZDARMA" → titulek */
        color: #1c1c1c;
        font-size: 20px;
        line-height: 27px;
        max-width: 268px;          /* titulek se láme jako ve Figmě */
    }
    .fgc-promo__meta{
        margin-top: 11px;           /* mezera titulek → datum/čas */
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 1rem;
        font-size: 15px;
        color: #4f4f4f;
    }
    .fgc-promo__date{ flex: 0 1 auto; min-width: 0; }
    .fgc-promo__time{ flex: 0 0 auto; }
    .fgc-promo__meta svg{ stroke: #808080; height: 20px; }   /* šedé obrysové ikonky (#808080) */
    .fgc-promo__sep{ display: block; flex: 0 0 1px; align-self: stretch; background: #dcdcdc; } /* svislý oddělovač */
    .fgc-promo__cta{
        align-self: flex-start;     /* tlačítko NE na celou šířku – hug obsahu, vlevo (dle Figmy) */
        margin-top: 19px;           /* mezera datum → tlačítko */
        text-align: center;
        background: var(--fgc-accent);  /* barevné tlačítko, bílý text */
        color: #fff;
        font-size: 20px;
        padding: 8px 20px;          /* tlačítko vyšší úměrně */
    }
    .fgc-promo__cta:hover{ color: #fff; }

    /* --- PC: zruš mobilní grid přestavbu, vrať PŮVODNÍ box (beze změny vzhledu) --- */
    .fgc-promo__item{ display: flex; }
    .fgc-promo__headline{ display: none; }       /* velký nadpis jen na mobilu */
    .fgc-promo__icon--cal{ display: none; }       /* samostatný kalendář jen na mobilu */
    .fgc-promo__body{ display: flex; flex-direction: column; }
    .fgc-promo__eyebrow{ display: block; }
    .fgc-promo__icon{ border: none; margin-left: 0; }   /* PC: plné tónované kolečko, bez obrysu, bez mobilního odsazení */
    .fgc-promo__icon svg{ fill: currentColor; width: 100%; height: 100%; }
    .fgc-promo__icon .fgc-ico-m{ display: none; }   /* PC: mobilní Figma ikona (prstenec) schovaná */
    .fgc-promo__icon .fgc-ico-d{ display: block; }  /* PC: trojúhelník v tónovaném kolečku */
    .fgc-promo__title{ font-weight: 600; }
    .fgc-promo__meta{ display: flex; font-weight: 600; line-height: 1.2; }
    .fgc-promo__date, .fgc-promo__time{ display: inline-flex; align-items: flex-start; gap: .4rem; }
    .fgc-promo__date::after{ content: none; }     /* PC: bez spojovací čárky (datum | čas se svislým oddělovačem) */
    .fgc-promo__date svg, .fgc-promo__time svg{ display: inline-block; }
    .fgc-promo__cta{ border-radius: 10px; line-height: 20px; }
}

/* Vysoké PC displeje: hero má dost místa => nadpis posuneme výš
   a boxy nadzvedneme, aby pod nimi byl vidět pruh beache (orámování),
   a zároveň se NEPŘEKRÝVALY s nadpisem. */
@media (min-width: 993px) and (min-height: 800px){
    header.hp .video-wrapper .video-text{ padding-bottom: 22rem !important; } /* méně = nadpis níž (blíž středu, dle Figmy) */
    .fgc-promo{ margin-top: -19rem; }                                         /* méně záporné = boxy níž (blíž spodku hero, dle Figmy) */
}

/* ============================================================
   HERO + POHYBLIVÉ (plovoucí) LOGO A MENU  — doplněno 26.6.2026
   - hero: beach má vždy výšku + teplý fallback (čitelný bílý nadpis i offline)
   - logo + hamburger: zůstávají fixní a stále viditelné při scrollu
   ============================================================ */

/* --- MOBIL: hero (beach + nadpis) --- */
@media (max-width: 992px){
    header.hp .video-wrapper{
        position: relative;        /* aby se absolutní .video-text ukotvil DO hero (ne přes promo) */
        min-height: 78vh;
        /* teplé pískové pozadí jako fallback za beach poster/video */
        background: linear-gradient(160deg, #ef9d77 0%, #f4b78c 45%, #f3e2c6 100%);
    }
    header.hp .video-wrapper video{
        min-height: 78vh;
        height: 78vh;
    }
    /* nadpis svisle na střed hero (jako na live) */
    header.hp .video-wrapper .video-text{
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        padding: 0 1.25rem;
    }
    header.hp .video-wrapper .video-text h1{
        font-size: 2rem !important;
        line-height: 2.45rem;
    }
    header.hp .video-wrapper .video-text div.h-line{
        margin-top: 1.6rem;
        max-width: 82%;
    }
}

/* --- LOGO + MENU --- */
/* PC (≥993px): lišta zůstává připnutá nahoře (jako na live). */
header.hp .navbar.fixed-top{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1080;                 /* nad hero i boxy */
}
/* logo nikdy neschovávat (JS jinak po 2s přidá .hidden) */
header.hp .logo,
header.hp .logo.hidden{
    opacity: 1 !important;
    transition: opacity .4s ease;
}
@media (max-width: 992px){
    /* MOBIL: lišta (logo+menu) je úplně NAHOŘE (nad promo lištami), ale
       NENÍ připnutá – s obsahem ODSCROLLUJE PRYČ (position:absolute, ne fixed).
       Kotví se k .fgc-hp-wrap (vršek stránky), takže nikdy nepřekrývá obsah. */
    header.hp .navbar.fixed-top{
        position: absolute;
        top: 0; left: 0; right: 0;
    }
    /* hamburger: větší teal kolečko jako na live (ikona = lokální SVG image/icon-menu-open.svg) */
    header.hp span.navbar-icon{
        width: 46px;
        height: 46px;
    }
}