/* =====================================================================
   DESIGN TOKENS
   ===================================================================== */
:root {
    --mist:          #f1efe9;
    --ink:           #2e2e2e;
    --indigo:        #6b3e4d;
    --sage:          #81b29a;
    --clay:          #e07a5f;
    --wheat:         #f2cc8f;
    --earth:         #3d3635;
    --signal:        #e05f5f;
    --soft:          #eaeaea;
    --gold:          #f4b819;
    --sea:           #4a6a61;
    --wine:          #8c2832;
    --ember:         #ff863d;
    --deep:          #2a3d39;
    --night:         #1f1e23;
    --paper:         #f4efe7;
    --paper-strong:  #fbf7f0;
    --soft-text: rgba(232, 232, 232, 0.76);
    --muted-text: rgba(232, 232, 232, 0.58);

    --border:        rgba(232, 232, 232, 0.14);
    --border-dark:   rgba(46, 46, 46, 0.12);
    --soft-panel:    rgba(255, 255, 255, 0.56);
    --soft-tag:      rgba(107, 62, 77, 0.08);
    --shadow:        0 24px 80px rgba(0, 0, 0, 0.18);

    /* ── Fluid type scale (Minor Third × viewport) ── */
    --font-size-sm:  clamp(0.800rem,  0.78rem + 0.10vw, 0.875rem);
    --font-size-md:  1rem;
    --font-size-lg:  clamp(1.250rem,  1.20rem + 0.25vw, 1.330rem);
    --font-size-xl:  clamp(1.563rem,  1.45rem + 0.50vw, 1.777rem);
    --font-size-2xl: clamp(1.953rem,  1.75rem + 1.00vw, 2.369rem);
    --font-size-3xl: clamp(2.441rem,  2.10rem + 1.70vw, 3.157rem);
    --font-size-4xl: clamp(3.052rem,  2.50rem + 2.80vw, 4.209rem);
}


/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-md);
    color: var(--mist);
    overflow-x: hidden;
    background:
            radial-gradient(circle at top left,  rgba(242, 204, 143, 0.12), transparent 28%),
            radial-gradient(circle at 85% 12%, rgba(129, 178, 154, 0.12), transparent 24%),
            linear-gradient(160deg, #191c23 0%, #093035 42%, #3d3635 100%);
}

a   { color: inherit; text-decoration: none; }
img { display: block; }

h1 { margin: 0; font-size: var(--font-size-4xl); line-height: 1.1; max-width: 13ch; }
h2 { font-size: var(--font-size-3xl); line-height: 1.2; }
h3 { font-size: var(--font-size-2xl); line-height: 1.3; }
h4 { font-size: var(--font-size-xl);  }
h5 { font-size: var(--font-size-lg);  }
h6 { font-size: var(--font-size-md);  font-weight: bold; }

p, li, blockquote { font-size: var(--font-size-md); line-height: 1.5; }
small { font-size: var(--font-size-sm); }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    color: var(--wheat);
}
.eyebrow::before {
    content: "";
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, var(--clay), var(--gold));
}

.white-wrapper {
    position: relative;
    color: var(--ink);
    background: linear-gradient(180deg, var(--paper-strong), var(--paper));
}

.white-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at top right, rgba(224, 122, 95, 0.08), transparent 24%),
            radial-gradient(circle at 15% 22%, rgba(129, 178, 154, 0.08), transparent 20%);
    pointer-events: none;
    z-index: 0;
}

.white-wrapper .eyebrow {
    color: var(--clay);
}

#mission, #gentium, #news {
    padding: 4.5rem 0;
}

/* =====================================================================
   NAV
   ===================================================================== */
.navbar-inner {
    position: relative;
    margin-top: 1.5rem;
    border-radius: 10rem;
    background: rgba(23, 22, 26, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.navbar-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
            radial-gradient(circle at 18% 26%, rgba(242, 204, 143, 0.08), transparent 20%),
            radial-gradient(circle at 82% 72%, rgba(224, 122, 95,  0.08), transparent 20%),
            linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%, transparent 60%);
    pointer-events: none;
}

.nav-wrapper,
.collapse { container-type: inline-size; }

.navbar-brand strong,
.navbar-brand span { font-size: clamp(0.8rem, 0.95vw, 1.2rem); }

.nav-link {
    padding: 0.55rem 0.15rem;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-size: clamp(0.8rem, 0.55vw, 1.2rem);
    letter-spacing: 0.02rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}
.gentium-link {
    background: transparent;
    color: var(--wheat);
    border-bottom: 1px solid transparent;
}
.nav-link:hover {
    background: transparent;
    border-color: rgba(242, 204, 143, 0.34);
    color: var(--wheat);
}
.gentium-link:hover {
    background: transparent;
    color: var(--clay);
    border-color: var(--clay);
}
.navbar-toggler { outline: none; box-shadow: none; }

/* Collapsed nav drawer (narrow viewports — Bootstrap's .navbar-collapse) */
.navbar-collapse {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.2rem;
    background: linear-gradient(145deg, rgba(20,20,24,0.96), rgba(28,28,34,0.92));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Hide the drawer style once there's enough horizontal room */
@media (min-width: 1200px) {
    .navbar-collapse {
        position: static;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
}

.dropdown-menu.show {
    background: rgba(23, 22, 26, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    color: var(--soft);
    padding-left: 3%;
}


/* =====================================================================
   HERO — fluid-first
   ===================================================================== */
.hero {
    position: relative;
    padding: 8.2rem 0 2rem;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 18% 16rem, rgba(242, 204, 143, 0.14), transparent 16%),
            radial-gradient(circle at 81% 32rem, rgba(224, 122, 95,  0.14), transparent 20%),
            radial-gradient(circle at 62% 78rem, rgba(129, 178, 154, 0.12), transparent 16%);
    pointer-events: none;
}

.hero-layout, .mission-layout, .gentium-layout, .news-layout {
    position: relative;
    z-index: 1;
    padding-inline: 1.25rem;
}

.hero-stage {
    position: relative;
    display: grid;
    gap: 1.6rem;
}

.hero-copy-stack {
    display: grid;
    gap: 1.4rem;
    align-content: start;
}

.hero-kicker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

.hero-manifesto { margin: 0; }
.hero-manifesto h1 { margin: 0; white-space: nowrap }
.highlight {
    color: var(--clay);
    white-space: nowrap;
}


/* ── Logo watermark ── */
/*
 * Mobile (default): geographically centred, large, very faint.
 * Widens progressively as the viewport grows.
 */
.hero-center-logo {
    position: absolute;
    z-index: 1;
    /* centred horizontally at narrow widths */
    left: 50%;
    top: 28rem;
    transform: translate(-50%, -50%);
    width: clamp(12rem, 80vw, 22rem);
    opacity: 0.22;
    filter:
            drop-shadow(0 32px 56px rgba(0, 0, 0, 0.34))
            drop-shadow(0 0 42px rgba(242, 204, 143, 0.14));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* SM+: slightly smaller, shifted right */
@media (min-width: 576px) {
    .hero-center-logo {
        right: -5%;
        left: auto;
        top: 22%;
        transform: translateY(-50%);
        width: clamp(18rem, 50vw, 22rem);
        opacity: 0.28;
    }
}

/* MD+: settle into right-side position */
@media (min-width: 768px) {
    .hero-center-logo {
        right: clamp(1rem, 8vw, 2.5rem);
        left: auto;
        top: 14rem;
        transform: translateY(-50%);
        width: clamp(13rem, 28vw, 22rem);
        opacity: 0.33;
    }
}

/* ── Socials ── */
.socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-left: auto;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.6rem;
    height: 2.6rem;

    border-radius: 50%;
    border: 1px solid var(--border);

    background: rgba(232, 232, 232, 0.06);
    color: var(--wheat);

    transition:
            transform 180ms ease,
            background 180ms ease,
            border-color 180ms ease;
}
.social-link:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(242, 204, 143, 0.35);
    background: rgba(232, 232, 232, 0.12);
}
.social-link i {
    font-size: 1.1rem;
    color: var(--wheat);
}

.social-link:hover .fa-facebook-f { color: #1877f2; }
.social-link:hover .fa-instagram  { color: #e4405f; }
.social-link:hover .fa-youtube    { color: #ff0000; }
.social-link:hover .fa-envelope   { color: #EA4335; }

/*
 * LG range: tight, hide subtitle and compress.
 * We hide .social-copy span (subtitle) from MD and only show it again on XL.
 */
@media (max-width: 1199.98px) {
    .social-copy span { display: none; }
}

/* MD only: also hide the label text, show icon only */
@media (max-width: 991.98px) {
    .social-copy strong { display: none; }
    .social-icon { margin-left: 10%; }
    .socials {
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
}


/* ── Divider ── */
.hero-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(242, 204, 143, 0.38), transparent);
    margin: 0.25rem 0 0.15rem;
}


/* =====================================================================
   HERO INFO PANEL — fluid-first
   ===================================================================== */

/*
 * Default (mobile → ~767px): stacked column layout.
 * clip-path and margin tricks are disabled — clean, readable cards.
 */
.hero-info-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.35rem;
    isolation: isolate;
}

.hero-info-item {
    position: relative;
    flex: none;
    width: 100%;
    color: var(--mist);
    font: inherit;
    text-align: left;
    padding: 3%;
    min-height: 10rem;
    border-radius: 1rem;
    clip-path: none;
    margin-left: 0;
    background:
            linear-gradient(145deg,
            rgba(242, 204, 143, 0.08),
            rgba(232, 232, 232, 0.035) 36%,
            rgba(224, 122, 95, 0.08)
            ),
            rgba(22, 22, 26, 0.58);
    border: 1px solid rgba(242, 204, 143, 0.11);
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateZ(0);
    will-change: transform, opacity;
    transition:
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 280ms ease,
            background 220ms ease,
            border-color 220ms ease,
            box-shadow 220ms ease;
}
.hero-info-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 28% 26%, rgba(244, 184, 25, 0.16), transparent 34%);
    opacity: 0;
    transition: opacity 220ms ease;
}
.hero-info-item:hover::before,
.hero-info-item.active::before {
    opacity: 1;
}
.hero-info-item:hover { transform: translateY(-2px); }
.hero-info-item.active::before,
.hero-info-item:hover::before { opacity: 1; }

.hero-info-item.active {
    border-color: rgba(242, 204, 143, 0.28);
    background:
            linear-gradient(145deg, rgba(45, 43, 42, 0.92), rgba(61, 54, 53, 0.78)),
            rgba(22, 22, 26, 0.82);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

/* Inactive items when panel has a selection */
.hero-info-container.has-active .hero-info-item:not(.active) {
    background: rgba(30, 28, 28, 0.74);
}

/* ── Title ── */
.hero-info-title {
    font-weight: bold;
    display: block;
    color: var(--wheat);
    line-height: 1.15;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
}

/* ── Short description (visible when collapsed) ── */
.hero-info-description {
    display: block;
    max-width: 18rem;
    margin-top: 0.55rem;
    color: rgba(232, 232, 232, 0.7);
    line-height: 1.5;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease, transform 200ms ease;
}
.hero-info-item.active .hero-info-description {
    opacity: 0;
    transform: translateY(-0.3rem);
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ── Full description (visible when expanded) ── */
.hero-info-full-description {
    display: block;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    max-width: 60rem;
    margin-top: 0.8rem;
    color: rgba(232, 232, 232, 0.78);
    line-height: 1.72;
    transition:
            opacity 300ms ease,
            transform 300ms ease;
}
.hero-info-item.active .hero-info-full-description {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 60rem;  /* generous: column layout has no height constraint */
    overflow: auto;
    padding-right: 0.45rem;
}
.hero-info-full-description::-webkit-scrollbar { width: 6px; }
.hero-info-full-description::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(242, 204, 143, 0.28);
}

/* Hide description text on non-active items when something IS active */
.hero-info-container.has-active .hero-info-item:not(.active) .hero-info-description,
.hero-info-container.has-active .hero-info-item:not(.active) .hero-info-full-description {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
}


/*
 * LG+ (≥ 992px): switch to the horizontal accordion layout.
 * clip-path, margin-left trick, and vertical title rotation kick in here.
 */
@media (min-width: 992px) {
    .hero-info-container {
        flex-direction: row;
        align-items: stretch;
        min-height: 18rem;
        padding: 0.35rem;
        gap: 0;
    }

    .hero-info-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 18rem;
        padding: 0;         /* padding-inline set per variant below */
        border-radius: 0;
        margin-left: -1.2rem;
        clip-path: polygon(1.8rem 0%, 100% 0%, calc(100% - 1.8rem) 100%, 0% 100%);
    }

    /* First item: no left indent, left border-radius only */
    .hero-info-item:first-child {
        margin-left: 0;
        clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1.8rem) 100%, 0% 100%);
        border-radius: 1rem 0 0 1rem;
        padding-left: 1%;
    }
    .hero-info-item:not(:first-child):not(:last-child) {
        padding-left: 3%;
    }
    /* Last item: right border-radius, no right slant */
    .hero-info-item:last-child {
        clip-path: polygon(1.8rem 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 0 1rem 1rem 0;
        padding-left: 3%;
    }

    /* Active item: expand */
    .hero-info-item.active {
        flex: 6 1 0;
        z-index: 2;
    }
    .hero-info-item.active:first-child          { padding-left: 3%; }
    .hero-info-item.active:not(:first-child)    { padding-left: 5%; }

    /* Inactive items when something is expanded: squish */
    .hero-info-container.has-active .hero-info-item:not(.active) {
        flex: 0.42 1 0;
        padding-inline: 0.9rem;
    }

    /* Rotate title vertically on inactive items */
    .hero-info-container.has-active .hero-info-item:not(.active) .hero-info-title {
        position: absolute;
        top: 1.5rem;
        left: 50%;
        width: 1.3rem;
        color: var(--ember);
        font-size: 0.92rem;
        line-height: 1.05;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: translateX(-50%) rotate(186deg);
        padding-right: 2%;
    }

    /* Clamp the scrollable area in horizontal mode */
    .hero-info-item.active .hero-info-full-description {
        max-height: 11.5rem;
    }
}

/* =====================================================================
   MISSION — fluid-first
   ===================================================================== */

.mission-world {
    position: relative;
    min-height: 38rem;
    padding: clamp(1.1rem, 2vw, 1.6rem);
    border-radius: 1.4rem;
    overflow: hidden;
    border: 1px solid rgba(232, 232, 232, 0.14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    color: #fff8f0;
    isolation: isolate;
}

.mission-world::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 54%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.36), transparent 58%),
            radial-gradient(circle at 76% 45%, rgba(255, 255, 255, 0.14), transparent 24%);
    pointer-events: none;
}

.mission-world::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 4rem 4rem;
    opacity: 0.34;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
    pointer-events: none;
}

/* ── Animated backgrounds ── */
.mission-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 650ms ease, transform 900ms ease;
    pointer-events: none;
}

.mission-bg.torjonut {
    background:
            radial-gradient(ellipse 40% 50% at 50% 85%, #c4622a 0%, #8b3a1a 35%, transparent 70%),
            radial-gradient(ellipse 60% 50% at 50% 35%, #1e3a45 0%, transparent 70%),
            radial-gradient(circle at center, #152830 0%, #0d1b1f 60%, #080e10 100%);
}

.mission-bg.kozosseg {
    background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 40%),
            radial-gradient(circle at top left, rgba(242, 204, 143, 0.18), transparent 28%),
            radial-gradient(circle at 88% 16%, rgba(224, 122, 95, 0.16), transparent 24%),
            linear-gradient(160deg, var(--night), var(--deep), var(--sea));
}

.mission-bg.k3 {
    background: linear-gradient(
            to bottom,
            #1a1a2e 0%, #2e2e50 25%, #3d3060 45%,
            #6b3060 65%, #a03050 80%, #c04050 100%
    );
}

.mission-world[data-active="torjonut"] .mission-bg.torjonut,
.mission-world[data-active="kozosseg"] .mission-bg.kozosseg,
.mission-world[data-active="k3"]      .mission-bg.k3 {
    opacity: 1;
    transform: scale(1);
}

/* ── Stage layout — fluid-first ── */
.mission-stage {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (min-width: 1000px) {
    .mission-stage {
        grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.28fr);
    }
}


/* ── Switcher ── */
.mission-switcher {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@media (min-width: 1000px) {
    .mission-switcher {
        align-self: center;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.75rem;
    }
}


/* ── Thumb cards ── */
.mission-thumb {
    position: relative;
    display: block;
    width: 100%;
    min-height: 5rem;
    padding: 0;
    overflow: hidden;
    border-radius: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff8f0;
    text-align: left;
    cursor: pointer;
    opacity: 0.72;
    transform: scale(0.96);
    transition: opacity 220ms ease, transform 300ms ease, border-color 300ms ease;
}

@media (min-width: 768px) {
    .mission-thumb {
        min-height: 6.4rem;
    }
}

.mission-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.58), transparent 70%);
}

.mission-thumb.torjonut {
    background:
            radial-gradient(ellipse 42% 48% at 50% 86%, #c4622a 0%, #8b3a1a 35%, transparent 70%),
            radial-gradient(ellipse 60% 50% at 50% 35%, #1e3a45 0%, transparent 70%),
            radial-gradient(circle at center, #152830 0%, #0d1b1f 60%, #080e10 100%);
}

.mission-thumb.kozosseg {
    background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 40%),
            radial-gradient(circle at top left, rgba(242, 204, 143, 0.2), transparent 28%),
            radial-gradient(circle at 88% 16%, rgba(224, 122, 95, 0.18), transparent 24%),
            linear-gradient(160deg, var(--night), var(--deep), var(--sea));
}

.mission-thumb.k3 {
    background: linear-gradient(
            to bottom,
            #1a1a2e 0%, #2e2e50 25%, #3d3060 45%,
            #6b3060 65%, #a03050 80%, #c04050 100%
    );
}

.mission-thumb span {
    position: absolute;
    left: 0.55rem;
    right: 0.85rem;
    bottom: 0.8rem;
    z-index: 1;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(0.75rem, 1.3vw, 0.93rem);
    font-weight: 800;
    line-height: 1.1;
}

.mission-thumb[aria-selected="true"] {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(242, 204, 143, 0.62);
    box-shadow: 0 0 0 1px rgba(242, 204, 143, 0.2);
}


/* ── Detail stack ── */
.mission-detail-stack {
    position: relative;
    min-height: 35rem;
}

.mission-detail {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: clamp(1rem, 2.6vw, 2.2rem);
    padding-bottom: 1rem;
    opacity: 0;
    transform: translateY(1rem) scale(0.985);
    transition: opacity 420ms ease, transform 650ms ease;
    pointer-events: none;
    overflow-y: auto;
}

.mission-detail.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition-delay: 120ms;
}

.mission-kicker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

.mission-brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 2.2rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 248, 240, 0.86);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.25;
}

.mission-detail h2 {
    margin: 0;
    max-width: 11ch;
    line-height: 0.9;
    letter-spacing: 0;
    flex-shrink: 0;
}

.mission-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
    padding-bottom: 2.4rem;
}



/* Scrollbar styling */
.mission-body::-webkit-scrollbar { width: 4px; }
.mission-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(242, 204, 143, 0.3);
}

.mission-detail p {
    margin: 0.6rem 0 0;
    max-width: 36rem;
    color: rgba(255, 248, 240, 0.76);
    line-height: 1.60;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.mission-detail .cta-line {
    margin-top: 1.4rem;
    color: #f2cc8f;
    margin-bottom: 5rem;
}

/* =====================================================================
   GENTIUM — fluid-first
   ===================================================================== */

/* ── Progress container ── */
.progress-container {
    position: relative;
    margin: 0 0 2rem;
    padding: clamp(1rem, 2.4vw, 2rem);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
            radial-gradient(circle at 18% 18%, rgba(242, 204, 143, 0.13), transparent 30%),
            radial-gradient(circle at 88% 20%, rgba(224, 122, 95, 0.12),  transparent 28%),
            rgba(15, 18, 30, 0.48);
    box-shadow:
            0 26px 60px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

/*
 * Default (mobil): egymás alatt — körgyűrű felül, mérföldkövek alul.
 * MD+ (≥ 768px): egymás mellett.
 */
.gentium-progress-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 768px) {
    .gentium-progress-layout {
        grid-template-columns: 1fr 1fr;
    }
}


/* ── Circular progress ── */
.circular-donation-progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 1rem;
}

.circular-wrapper {
    position: relative;
    width: clamp(160px, 40vw, 260px);   /* mobilon kisebb, desktopon 260px */
    height: clamp(160px, 40vw, 260px);
}

.progress-ring-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.progress-ring-bg {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 12;
    fill: none;
}
.progress-ring-fill {
    stroke: url(#ringGradient);
    opacity: 0.9;
    fill: none;
    transition: stroke-dasharray 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.percentage-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 800;
    font-family: "Space Grotesk", monospace;
}
.percent-number {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    background: linear-gradient(135deg, #fff, #f2cc8f);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1;
}
.percent-symbol {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 600;
    color: #f2cc8f;
}

.raised-details {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    padding: 0.5rem 1rem;
    border-radius: 60px;
    text-align: center;
    font-weight: 500;
    font-size: 0.9rem;
    width: fit-content;
}
.raised-details span {
    font-weight: 800;
    color: #f76e47;
}


/* ── Milestones ── */
.milestones-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.milestone {
    position: relative;
    display: grid;
    gap: 0.28rem;
    padding: 0.95rem 1rem 0.95rem 3rem;
    border-radius: 1.05rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.milestone-value {
    color: #fff8f0;
    font-weight: 800;
}
.milestone-label {
    color: rgba(241, 239, 233, 0.58);
    font-size: 0.88rem;
}


/* ── Cards grid ── */
/*
 * Mobilon egymás alatt (1 col), SM+-on egymás mellett (2 col).
 */
.gentium-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 576px) {
    .gentium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gentium-card,
.gentium-note {
    position: relative;
    overflow: hidden;
    border-radius: 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
            radial-gradient(circle at 18% 18%, rgba(242, 204, 143, 0.13), transparent 30%),
            radial-gradient(circle at 88% 20%, rgba(224, 122, 95, 0.12),  transparent 28%),
            rgba(15, 18, 30, 0.48);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
}

.gentium-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: clamp(12rem, 25vw, 18rem);  /* mobilon kisebb */
    padding: 1.45rem;
}
.gentium-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #f76e47, #c084c6, #6a8dff);
}

.gentium-card h3,
.gentium-note h3 {
    margin: 0 0 0.7rem;
    color: #fff8f0;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.gentium-card p,
.gentium-note p {
    margin: 0 0 1rem;
    color: rgba(241, 239, 233, 0.68);
    line-height: 1.78;
}

.gentium-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0.82rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(242, 204, 143, 0.2);
    color: #f2cc8f;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.gentium-btn.primary {
    border-color: transparent;
    color: #fffaf4;
    background: linear-gradient(135deg, var(--clay), var(--ember));
    box-shadow: 0 14px 30px rgba(224, 122, 95, 0.18);
}
.gentium-btn:hover {
    background: rgba(242, 204, 143, 0.2);
    transform: translateY(-2px);
}
.gentium-btn.primary:hover {
    background: linear-gradient(135deg, #e06a4a, #ff9640);
}


/* ── Note panel ── */
.gentium-note {
    margin-top: 1rem;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    background:
            radial-gradient(circle at 94% 16%, rgba(129, 178, 154, 0.1), transparent 24%),
            rgba(255, 255, 255, 0.06);
}

/* =====================================================================
   NEWS — fluid-first
   ===================================================================== */

/*
 * Mobilon (default): normál vízszintes scroll, nincs animáció.
 * MD+ (≥ 768px): marquee animáció + fade széleken.
 */

.news-marquee {
    position: relative;
    width: 100%;
    overflow-x: auto;           /* mobilon kézzel görgethető */
    overflow-y: hidden;
    padding: 0.2rem 0 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    touch-action: pan-y;
}
.news-marquee::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
}

/* Fade csak MD+-on (ahol a marquee fut) */
.news-marquee::before,
.news-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(16vw, 11rem);
    z-index: 4;
    pointer-events: none;
    opacity: 0;                 /* mobilon láthatatlan */
    transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
    .news-marquee::before,
    .news-marquee::after {
        opacity: 1;
    }
}

.news-marquee::before {
    left: 0;
    background: linear-gradient(
            90deg,
            var(--paper-strong) 0%,
            rgba(244, 239, 231, 0.9) 34%,
            rgba(244, 239, 231, 0.48) 64%,
            transparent 100%
    );
}
.news-marquee::after {
    right: 0;
    background: linear-gradient(
            270deg,
            var(--paper-strong) 0%,
            rgba(244, 239, 231, 0.9) 34%,
            rgba(244, 239, 231, 0.48) 64%,
            transparent 100%
    );
}

/* Hover/focus pause csak MD+-on értelmes */
@media (min-width: 768px) {
    .news-marquee:hover .news-track,
    .news-marquee:focus-within .news-track {
        animation-play-state: paused;
    }
}

/* ── Track ── */
.news-track {
    display: flex;
    width: max-content;
    gap: 1rem;
    /* Mobilon nincs animáció */
    animation: none;
}

@media (min-width: 768px) {
    .news-marquee {
        overflow: hidden;       /* MD+-on a natív scroll tiltva, marquee fut */
    }
    .news-track {
        animation: newsMarquee 34s linear infinite;
    }
}

@keyframes newsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 0.5rem)); }
}

/* ── Grid (track belseje) ── */
.news-grid {
    display: flex;
    gap: 1rem;
}

/* ── Card ── */
.news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /*
     * Mobilon fix 80vw — kézzel görgethető, egy kártya majdnem kitölti a képernyőt.
     * MD+-on visszaáll a fluid clamp-re.
     */
    flex: 0 0 80vw;
    min-height: 100%;
    overflow: hidden;
    border-radius: 1.45rem;
    border: 1px solid rgba(46, 46, 46, 0.08);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 18px 40px rgba(30, 30, 30, 0.065);
}

@media (min-width: 576px) {
    .news-card {
        flex: 0 0 clamp(20rem, 45vw, 27rem);
    }
}

@media (min-width: 768px) {
    .news-card {
        flex: 0 0 clamp(20rem, 31vw, 27rem);
    }
}

.news-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--clay), var(--wine));
    z-index: 2;
}

/* ── Image ── */
.news-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(107, 62, 77, 0.08);
}
.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms ease;
}
.news-card:hover .news-image img {
    transform: scale(1.045);
}

.news-type {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.68rem;
    border-radius: 999px;
    background: rgba(25, 28, 35, 0.72);
    color: #fff8f0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ── Body ── */
.news-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem;
}
.news-meta {
    margin-bottom: 0.75rem;
    color: rgba(107, 62, 77, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    font-weight: 800;
}
.news-card h3 {
    margin: 0 0 0.7rem;
    color: var(--ink);
    font-size: 1.32rem;
}
.news-card p {
    margin: 0;
    line-height: 1.72;
    color: rgba(46, 46, 46, 0.68);
}
.news-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding-top: 1.15rem;
    color: var(--clay);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-link {
    margin-top: auto;
    padding: 0.82rem 1rem 1.5rem;
    color: var(--clay);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* =====================================================================
   FOOTER — fluid-first
   ===================================================================== */

.footer {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

/*
 * Mobilon: egymás alatt (1 col)
 * SM+: 2 col
 * LG+: 3 col
 */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

@media (min-width: 576px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.footer-card {
    padding: 0 0 1.15rem;
    border-bottom: 1px solid rgba(232, 232, 232, 0.14);
}

.footer-card p {
    margin: 0;
    color: rgba(232, 232, 232, 0.7);
    line-height: 1.7;
}

.footer-list,
.footer-meta {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list {
    display: grid;
    gap: 0.65rem;
    color: rgba(232, 232, 232, 0.72);
    line-height: 1.55;
}

.footer-list a,
.footer-meta a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 204, 143, 0.38);
}

.footer-list a:hover,
.footer-meta a:hover {
    color: var(--gold);
    border-bottom-color: currentColor;
}

.footer-list strong {
    color: var(--mist);
    font-weight: 700;
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(232, 232, 232, 0.1);
    color: rgba(232, 232, 232, 0.6);
    font-size: 0.88rem;
}

.legal-note {
    margin-top: 1rem;
    color: rgba(232, 232, 232, 0.58);
    line-height: 1.7;
}

/* **************************** FOOTER END **************************** */