/* ==========================================================================
   Feramat – statická hero sekce
   Vizuální styl podle brand manuálu: https://c-energy.visualbook.pro/feramat
   Písmo:  Barlow – řezy 400, 400 italic, 700 (jiné brand manuál neuvádí)
   Barvy:  pouze paleta skupiny C-energy (C-modrá #1b3280, C-zelená #72bd44)
   Bez videa a bez rastrové grafiky – celé pozadí je CSS + inline SVG.
   ========================================================================== */

:root {
    /* Modrá (paleta C-energy) */
    --fe-blue-100: #060a1a;
    --fe-blue-90:  #0b1432;
    --fe-blue-80:  #0f1c45;
    --fe-blue-70:  #172964;
    --fe-blue-60:  #1b3280; /* C-modrá */
    --fe-blue-30:  #8c9ac9;
    --fe-blue-20:  #c2c9e4;

    /* Zelená (paleta C-energy) */
    --fe-green-70: #5b9529;
    --fe-green-60: #72bd44; /* C-zelená */
    --fe-green-20: #d7f0c0;

    --fe-font: "Barlow", Calibri, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------- struktura */

.fe-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--fe-font);
    background:
        radial-gradient(120% 90% at 82% 18%, rgba(27, 50, 128, .75) 0%, rgba(6, 10, 26, 0) 60%),
        linear-gradient(158deg, var(--fe-blue-100) 0%, var(--fe-blue-80) 52%, var(--fe-blue-70) 100%);
}

/* na krátkých / mobilních displejích neplýtvat výškou */
@media (max-width: 900px), (max-height: 680px) {
    .fe-hero { min-height: auto; }
}

/* Jemná „síťová“ textura – odkaz na energetiku, bez fotografie.
   Dvojice linek v C-zelené na velmi nízké průhlednosti. */
.fe-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(114, 189, 68, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(114, 189, 68, .07) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(100% 80% at 70% 30%, #000 10%, transparent 75%);
    -webkit-mask-image: radial-gradient(100% 80% at 70% 30%, #000 10%, transparent 75%);
    pointer-events: none;
}

/* Symbol značky – leží NAD mřížkou.
   Přes značku přejíždí světlo: postupně ji z jedné strany rozsvítí až na
   plnou neprůhlednost (v tu chvíli přes ni mřížka vůbec neprosvítá)
   a zase pohasne. Běží ve smyčce.

   Maska je 5× širší než prvek: krajní části mají alfu 0.10 (klidový
   vodoznak), uprostřed je plató s alfou 1. Posouváním masky projede
   plató přes celý prvek. */
.fe-hero__mark {
    position: absolute;
    z-index: 1;
    right: 6vw;
    top: 44%;
    transform: translateY(-50%);
    width: min(26vw, 340px);
    height: auto;
    opacity: 1;
    pointer-events: none;
    user-select: none;

    --fe-gleam-floor: rgba(0, 0, 0, .1);
    -webkit-mask-image: linear-gradient(100deg,
        var(--fe-gleam-floor) 0%,
        var(--fe-gleam-floor) 26%,
        rgba(0, 0, 0, 1) 36%,
        rgba(0, 0, 0, 1) 64%,
        var(--fe-gleam-floor) 74%,
        var(--fe-gleam-floor) 100%);
            mask-image: linear-gradient(100deg,
        var(--fe-gleam-floor) 0%,
        var(--fe-gleam-floor) 26%,
        rgba(0, 0, 0, 1) 36%,
        rgba(0, 0, 0, 1) 64%,
        var(--fe-gleam-floor) 74%,
        var(--fe-gleam-floor) 100%);
    -webkit-mask-size: 500% 100%;
            mask-size: 500% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    animation: fe-gleam 8s ease-in-out infinite;
}

@keyframes fe-gleam {
    0%,
    15% {
        -webkit-mask-position: 100% 0;
                mask-position: 100% 0;
    }
    85%,
    100% {
        -webkit-mask-position: 0% 0;
                mask-position: 0% 0;
    }
}

@media (max-width: 1000px) {
    .fe-hero__mark {
        right: -18vw;
        width: 72vw;
        opacity: .07;
    }
}

/* ------------------------------------------------------------------- obsah */

.fe-hero__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 40px 0 24px;
}

@media (max-width: 1000px) {
    .fe-hero__body { padding: 48px 0 64px; }
}

.fe-hero__inner {
    max-width: 880px;
}

/* Eyebrow – příslušnost ke skupině */
.fe-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fe-green-60);
}

.fe-hero__eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--fe-green-60);
}

/* Headline – Barlow Bold 700 */
.fe-hero__title {
    /* prebiji globalni h1 v index.css (65px / 400 / width:100% / mb:50px) */
    width: auto;
    text-align: left;
    text-wrap: pretty;
    margin: 0 0 22px;
    font-weight: 700;
    font-size: clamp(2.375rem, 5vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -.022em;
    color: #fff;
}

.fe-hero__title em {
    font-style: normal;
    color: var(--fe-green-60);
}

/* Oficiální brandová linka – Barlow Regular Italic, C-zelená */
.fe-hero__tagline {
    margin: 0 0 20px;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.0625rem, 1.9vw, 1.5rem);
    letter-spacing: .01em;
    color: var(--fe-green-60);
}

.fe-hero__lead {
    margin: 0 0 32px;
    max-width: 58ch;
    font-weight: 400;
    font-size: clamp(1rem, 1.35vw, 1.1875rem);
    line-height: 1.62;
    color: var(--fe-blue-20);
}

/* -------------------------------------------------------------------- CTA */

.fe-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 40px;
}

.fe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 2px solid transparent;
    border-radius: 2px;
    font-family: var(--fe-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s ease;
}

.fe-btn:focus-visible {
    outline: 3px solid var(--fe-green-20);
    outline-offset: 3px;
}

.fe-btn--primary {
    background: var(--fe-green-60);
    border-color: var(--fe-green-60);
    color: var(--fe-blue-90);
}

.fe-btn--primary:hover,
.fe-btn--primary:focus {
    background: var(--fe-green-70);
    border-color: var(--fe-green-70);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.fe-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

.fe-btn--ghost:hover,
.fe-btn--ghost:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------ čísla */

.fe-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 40px;
    max-width: 780px;
    margin: 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(194, 201, 228, .18);
    list-style: none;
}

@media (max-width: 720px) {
    .fe-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .fe-hero__stats {
        grid-template-columns: 1fr;
    }
}

.fe-hero__stat dt {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #fff;
    white-space: nowrap;
}

.fe-hero__stat dt span {
    color: var(--fe-green-60);
}

.fe-hero__stat dd {
    margin: 0;
    max-width: none;
    font-weight: 400;
    font-size: .75rem;
    letter-spacing: .06em;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--fe-blue-30);
}

/* ------------------------------------------------------------- scroll cue */

.fe-hero__scroll {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    padding-bottom: 32px;
}

.fe-hero__scroll a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fe-blue-30);
    transition: color .18s ease;
}

.fe-hero__scroll a:hover,
.fe-hero__scroll a:focus {
    color: var(--fe-green-60);
    text-decoration: none;
}

.fe-hero__scroll svg {
    width: 22px;
    height: 22px;
    animation: fe-nudge 2.1s ease-in-out infinite;
}

@media (max-width: 1000px) {
    .fe-hero__scroll { display: none; }
}

@keyframes fe-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* Na uzkych displejich stejne siroka tlacitka */
@media (max-width: 480px) {
    .fe-hero__actions { display: grid; grid-template-columns: 1fr; }
    .fe-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fe-hero__scroll svg { animation: none; }
    .fe-hero__mark {
        animation: none;
        -webkit-mask-image: none;
                mask-image: none;
        opacity: .10;
    }
    .fe-btn { transition: none; }
    .fe-btn:hover, .fe-btn:focus { transform: none; }
}

/* ------------------------------------------------- navigace v hero sekci */
/* Stávající .fixed-menu zůstává funkční (JS toggluje .header .menu.show),
   tady jen zajistíme, že sedí nad pozadím hero sekce. */
.fe-hero .header-content {
    position: relative;   /* globalne je absolute -> prekryvalo by se s obsahem */
    flex: 0 0 auto;
}

.fe-hero .fixed-menu {
    position: relative;
    z-index: 5;
}

/* ==========================================================================
   Varianta hero pro podstránky (.fe-hero--sub)
   Stejný brandový základ, jen kompaktní – bez statistik, CTA a scroll cue.
   ========================================================================== */

.fe-hero--sub {
    min-height: 0;
}

.fe-hero--sub .fe-hero__body {
    padding: 64px 0 72px;
}

@media (max-width: 1000px) {
    .fe-hero--sub .fe-hero__body { padding: 40px 0 48px; }
}

.fe-hero--sub .fe-hero__inner {
    max-width: 820px;
}

/* Nadpis podstránky – Barlow Bold, ne kurzíva (brand manuál zná jen 400/400i/700) */
.fe-hero--sub .fe-hero__title {
    font-size: clamp(2.125rem, 4.2vw, 3.5rem);
    margin: 0 0 16px;
}

.fe-hero--sub .fe-hero__lead {
    margin: 0;
    max-width: 52ch;
}

/* Na podstránkách je značka menší a drží se u pravého okraje */
.fe-hero--sub .fe-hero__mark {
    width: min(20vw, 260px);
    top: 54%;
    right: 5vw;
}

@media (max-width: 1000px) {
    .fe-hero--sub .fe-hero__mark {
        right: -12vw;
        width: 54vw;
    }
}

/* Zpětný odkaz na detailních stránkách */
.fe-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-family: var(--fe-font);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fe-green-60);
    transition: color .18s ease;
}

.fe-hero__back:hover,
.fe-hero__back:focus {
    color: #fff;
    text-decoration: none;
}

.fe-hero__back svg {
    width: 16px;
    height: 16px;
}

/* Datum / meta řádek pod nadpisem detailu */
.fe-hero__meta {
    margin: 0;
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fe-blue-30);
}

/* --------------------------------------------------------------------------
   Přebití starých pravidel `body.subpage header` z pex.css / index.css.
   Ta nastavují pevnou výšku 412px, plné pozadí se znakem a šikmý bílý pás.
   -------------------------------------------------------------------------- */

body.subpage header.fe-hero,
body header.fe-hero {
    height: auto;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 82% 18%, rgba(27, 50, 128, .75) 0%, rgba(6, 10, 26, 0) 60%),
        linear-gradient(158deg, var(--fe-blue-100) 0%, var(--fe-blue-80) 52%, var(--fe-blue-70) 100%);
}

body.subpage header.fe-hero::after,
body header.fe-hero::after {
    content: none;
    display: none;
}

/* stará navigace se na podstránkách polohovala absolutně */
body.subpage header.fe-hero .header-content,
body header.fe-hero .header-content {
    position: relative;
}

/* starý scroll indikátor (myš) na podstránkách už nepoužíváme */
body.subpage header.fe-hero .scroll-bottom {
    display: none;
}

/* --------------------------------------------------------------------------
   Reset vytahování obsahu do staré pevně vysoké hlavičky.
   Původně: header 412px + margin-bottom 190px, obsah margin-top:-480px.
   Nová hero sekce má výšku podle obsahu, takže se tyto posuny ruší.
   (hero.css se načítá jen na stránkách s novou hero sekcí.)
   -------------------------------------------------------------------------- */

body.subpage .headerkk.fe-hero,
body .headerkk.fe-hero {
    height: auto;
    margin-bottom: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 82% 18%, rgba(27, 50, 128, .75) 0%, rgba(6, 10, 26, 0) 60%),
        linear-gradient(158deg, var(--fe-blue-100) 0%, var(--fe-blue-80) 52%, var(--fe-blue-70) 100%);
}

#news-section-main,
#portfolio-section-main {
    margin-top: 0;
    min-height: 0;
}

/* Starý nadpis a zpětný odkaz v obsahu nahradila hero sekce */
.fe-hero ~ * .title,
.fe-hero ~ .title {
    display: none;
}