/* ------------------------------------------------------------------
       Study-abroad hub.

       This page is a landing page, not an index: its job is to make going
       abroad feel possible. It deliberately uses a different rhythm from the
       country pages - full-bleed hero, a horizontal journey rail, one large
       swappable destination panel - so the two surfaces never feel like the
       same stacked card grid.

       Motion tokens match the country page so the section reads as one piece.
       ------------------------------------------------------------------ */
    .sa-hub {
        --sa-accent: #D4405A;
        --sa-duration-sm: 150ms;
        --sa-duration-md: 220ms;
        --sa-duration-lg: 320ms;
        --sa-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    }

    /* --- Hero ------------------------------------------------------------
       A dark, full-bleed stage. Where a destination has no photograph yet the
       layered gradients still read as intentional rather than as a missing
       image, which is what lets the page ship before the photography does. */
    .sa-hero {
        position: relative;
        isolation: isolate;
        background-color: #0b1220;
    }
    .sa-hero__media {
        position: absolute;
        inset: 0;
        z-index: -2;
        background-size: cover;
        background-position: center;
        opacity: .42;
    }
    .sa-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(70% 90% at 12% 0%, rgba(212, 64, 90, .40) 0%, transparent 60%),
            radial-gradient(60% 80% at 92% 12%, rgba(56, 132, 255, .28) 0%, transparent 62%),
            linear-gradient(180deg, rgba(11, 18, 32, .60) 0%, rgba(11, 18, 32, .93) 78%);
    }

    /* Flag chooser: pick a destination inside the hero itself. */
    .sa-flag {
        transition: transform var(--sa-duration-md) var(--sa-ease-standard),
                    background-color var(--sa-duration-md) var(--sa-ease-standard),
                    border-color var(--sa-duration-md) var(--sa-ease-standard);
    }
    .sa-flag:hover { transform: translateY(-2px); }
    .sa-flag[aria-selected="true"] {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .55);
    }

    /* --- Journey rail ----------------------------------------------------
       Five steps on one connected line. The connector is drawn behind the
       markers with a single pseudo-element rather than per-step borders, so
       the line stays continuous when the steps wrap. */
    .sa-rail-h { position: relative; }
    @media (min-width: 768px) {
        .sa-rail-h::before {
            content: '';
            position: absolute;
            left: 0; right: 0; top: 27px;
            height: 2px;
            background: linear-gradient(90deg,
                rgba(212, 64, 90, .15) 0%,
                rgba(212, 64, 90, .55) 12%,
                rgba(212, 64, 90, .55) 88%,
                rgba(212, 64, 90, .15) 100%);
        }
    }
    .sa-step__dot {
        transition: transform var(--sa-duration-md) var(--sa-ease-standard),
                    box-shadow var(--sa-duration-md) var(--sa-ease-standard);
    }
    .sa-step:hover .sa-step__dot {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -12px rgba(212, 64, 90, .65);
    }

    /* --- Destination panel ----------------------------------------------- */
    .sa-panel[hidden] { display: none; }
    .sa-panel { animation: saPanelIn var(--sa-duration-lg) var(--sa-ease-standard) both; }
    @keyframes saPanelIn {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }

    .sa-pick {
        transition: background-color var(--sa-duration-sm) var(--sa-ease-standard),
                    border-color var(--sa-duration-sm) var(--sa-ease-standard),
                    color var(--sa-duration-sm) var(--sa-ease-standard);
    }
    .sa-pick[aria-selected="true"] {
        background: var(--sa-accent);
        border-color: var(--sa-accent);
        color: #fff;
    }

    .sa-card {
        transition: transform var(--sa-duration-lg) var(--sa-ease-standard),
                    box-shadow var(--sa-duration-lg) var(--sa-ease-standard);
    }
    .sa-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .28);
    }

    /* --- City / story rails ---------------------------------------------
       Horizontal scroll with snap points. On a hub full of vertical stacks
       this is the section that breaks the rhythm. */
    .sa-scroller {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(255px, 1fr);
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        scrollbar-width: thin;
    }
    .sa-scroller > * { scroll-snap-align: start; }
    @media (min-width: 1024px) {
        .sa-scroller { grid-auto-columns: minmax(300px, 1fr); }
    }

    /* Scroll-reveal. Elements start hidden only when the script is running,
       so with JS disabled everything is visible from the start. */
    .js-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity var(--sa-duration-lg) var(--sa-ease-standard),
                    transform var(--sa-duration-lg) var(--sa-ease-standard);
    }
    .js-reveal [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .sa-card, .sa-chip, .sa-flag, .sa-step__dot, .sa-pick { transition: none; }
        .sa-card:hover, .sa-flag:hover { transform: none; }
        .sa-step:hover .sa-step__dot { transform: none; }
        .sa-panel { animation: none; }
        .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    }

/* --- Destination wall ---------------------------------------------------
   Six cards on the hero itself. The old design showed one destination at a
   time in a large swap panel, which worked at four and hides most of the
   offering at six.

   Each card carries its own accent through the --sa-accent variable set
   inline, so the motif, the cost figure and the arrow all pick up the
   destination colour without a class per country. */
.sa-dest {
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, .04);
    transition: transform var(--sa-duration-md) var(--sa-ease-standard),
                background-color var(--sa-duration-md) var(--sa-ease-standard),
                border-color var(--sa-duration-md) var(--sa-ease-standard);
}
.sa-dest:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .08);
    border-color: color-mix(in srgb, var(--sa-accent) 55%, transparent);
}

/* A photograph when one exists, dimmed so the text stays readable. Without
   one the card still reads as intentional rather than as a missing image. */
.sa-dest__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    opacity: .28;
    transition: opacity var(--sa-duration-lg) var(--sa-ease-standard);
}
.sa-dest:hover .sa-dest__photo { opacity: .4; }

/* The country motif, large and faint in the corner. */
.sa-card__motif {
    position: absolute;
    right: -14%;
    bottom: -18%;
    width: 62%;
    height: auto;
    color: var(--sa-accent);
    opacity: .18;
    z-index: -1;
    pointer-events: none;
    transition: opacity var(--sa-duration-lg) var(--sa-ease-standard),
                transform var(--sa-duration-lg) var(--sa-ease-standard);
}
.sa-dest:hover .sa-card__motif {
    opacity: .3;
    transform: translateY(-6px);
}

.sa-dest__cost { color: color-mix(in srgb, var(--sa-accent) 70%, #ffffff); }

.sa-dest__cta {
    color: color-mix(in srgb, var(--sa-accent) 60%, #ffffff);
    transition: gap var(--sa-duration-md) var(--sa-ease-standard);
}
.sa-dest:hover .sa-dest__cta { gap: .85rem; }

@media (prefers-reduced-motion: reduce) {
    .sa-dest, .sa-dest__photo, .sa-card__motif, .sa-dest__cta { transition: none; }
    .sa-dest:hover { transform: none; }
    .sa-dest:hover .sa-card__motif { transform: none; }
}