/* Gallery page — Hero section
 *
 * Full-width brand-gradient hero band with a centered, layered headline stack
 * and a primary CTA. Uses the project brand palette (#3b82f6 blue, #10b981
 * green, #f59e0b amber accent) and the Gallery page fonts (Inter headings /
 * Roboto body). Scoped under .gallery-hero so nothing leaks into the header nav.
 *
 * Motion is CSS-only (moderate: a gentle fade/rise on load) and fully disabled
 * under prefers-reduced-motion.
 */

.gallery-hero {
    --gallery-hero-blue: #3b82f6;
    --gallery-hero-green: #10b981;
    --gallery-hero-amber: #f59e0b;

    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 9vw, 6.5rem) 1.25rem;
    background:
        radial-gradient(circle at 82% 18%, rgba(16, 185, 129, 0.35), transparent 45%),
        radial-gradient(circle at 12% 90%, rgba(245, 158, 11, 0.28), transparent 42%),
        linear-gradient(135deg, #1e3a8a 0%, var(--gallery-hero-blue) 55%, #2563eb 100%);
    color: #ffffff;
    text-align: center;
}

/* Subtle diagonal texture so the band never reads flat. */
.gallery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px);
    pointer-events: none;
}

.gallery-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.gallery-hero__eyebrow {
    margin: 0 0 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.gallery-hero__title {
    margin: 0 0 1.15rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(2.35rem, 6vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.gallery-hero__subtitle {
    margin: 0 auto 2rem;
    max-width: 620px;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: clamp(1.02rem, 2.2vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.gallery-hero__cta {
    display: inline-block;
    padding: 0.95rem 2.1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #10321f;
    text-decoration: none;
    background: var(--gallery-hero-green);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35);
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.gallery-hero__cta:hover,
.gallery-hero__cta:focus-visible {
    background: #34d399;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(16, 185, 129, 0.45);
}

.gallery-hero__cta:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* ── Motion: gentle reveal on load ──────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .gallery-hero__inner > * {
        opacity: 0;
        transform: translateY(16px);
        animation: gallery-hero-reveal 620ms ease forwards;
    }

    .gallery-hero__eyebrow  { animation-delay: 60ms; }
    .gallery-hero__title    { animation-delay: 150ms; }
    .gallery-hero__subtitle { animation-delay: 240ms; }
    .gallery-hero__cta      { animation-delay: 330ms; }
}

@keyframes gallery-hero-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}