/* ── SWANN — Global Styles ── */

:root {
    --brand-red: #d44533;
    --brand-gold: #c8a44d;
    --brand-charcoal: #4a4540;
    --brand-dark: #3f454d;
    --cream: #f8f4ed;
    --sand: #fcfaf7;
    --terracotta: #e07a2f;
    --mauve: #b96a72;
    --sage: #a8b39a;
    --salmon: #d67a6a;
    --sage-light: #b9c6b2;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', sans-serif;
    color: var(--brand-charcoal);
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.font-serif { font-family: 'DM Sans', sans-serif; }

/* ── Shared UI ── */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

.card-modern {
    background: #fff;
    box-shadow: 0 10px 30px rgba(63,43,35,.07);
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s ease;
}
.card-modern:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(212,69,51,0.13), 0 8px 16px rgba(0,0,0,0.06);
}

.btn-brand {
    background: var(--brand-red);
    color: #fff;
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.btn-brand:hover {
    background: #b83929;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212,69,51,0.38);
}

.btn-outline-brand {
    border: 2px solid var(--brand-red);
    color: var(--brand-red);
    transition: all 0.3s;
}
.btn-outline-brand:hover {
    background: var(--brand-red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,69,51,0.25);
}


/* ── Section headings — consistent across the page ── */
.section-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-red);
    margin-bottom: 0.75rem;
}
.section-heading {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--brand-dark);
}
.section-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-gold));
}
.section-heading.text-center::after { margin-inline: auto; }
.section-sub {
    max-width: 560px;
    margin-top: 1rem;
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    color: var(--brand-charcoal);
}
.section-sub.mx-auto { margin-inline: auto; }

/* ── Carousel ── */
.carousel-track { display: flex; min-width: 0; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
/* Pinned to exactly one column: with only min-width the item can still be
   stretched by a wide child, which pushes the track past its clipping box and
   crops the right-hand edge of every slide. */
.carousel-slide { flex: 0 0 100%; min-width: 100%; max-width: 100%; }

/* The arrows are a fixed-size block; the dots take whatever is left and wrap
   inside it, so the row can never grow wider than its column. */
.carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.carousel-arrows { flex: 0 0 auto; }
#carousel-dots { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: rgba(212,69,51,0.25); transition: all 0.3s; }
.dot.active { background: var(--brand-red); width: 24px; border-radius: 4px; }

/* ── Viewport-fit sections — each section fills one screen ── */
.section-viewport {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* These containers carry `mx-auto`, and auto inline margins opt a flex item out
   of stretching: the box is sized shrink-to-fit instead, which floors it at the
   width of the widest thing inside (the carousel's row of slides, the team
   strip). That floor can exceed the screen, and the section's overflow clipping
   then crops the right-hand edge — a cut-off layout rather than a scrollbar.
   An explicit width removes the shrink-to-fit sizing while leaving each
   container's own `max-w-*` cap to govern the desktop width. The selector is
   qualified with `section` so it outranks Tailwind's utilities, which the CDN
   injects after this stylesheet. */
section.section-viewport > * {
    width: 100%;
    min-width: 0;
}

/* ── Recent events slide layout ── */
.event-slide-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.event-slide-info .event-meta {
    flex: 1;
    min-width: 0;
}

/* Recent-event photo grid.
   Defined as real CSS (not Tailwind utilities) so a slide injected by the CMS
   after page load lays out identically to the static markup. */
.event-slide-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    height: 340px;
}
@media (min-width: 769px) {
    .event-slide-grid { height: 360px; }
}
.event-slide-main {
    grid-column: span 3 / span 3;
    border-radius: 0.75rem;
    overflow: hidden;
    min-height: 0;
}
/* One photo fills the row instead of leaving empty frames. */
.event-slide-grid.is-single .event-slide-main { grid-column: span 5 / span 5; }
.event-slide-side {
    grid-column: span 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}
.event-slide-frame {
    flex: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    min-height: 0;
}
.event-slide-grid img { width: 100%; height: 100%; object-fit: cover; }

/* Upcoming-event card.
   The card is a column flexbox so every card in a grid row is the same height
   and the "Learn More" button always sits on the same baseline, no matter how
   long the summary entered in the admin panel is. */
.upcoming-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.upcoming-card-media {
    flex: 0 0 11rem;
    height: 11rem;
    overflow: hidden;
}
.upcoming-card-media img,
.upcoming-card-media > div { width: 100%; height: 100%; object-fit: cover; }
.upcoming-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 245px;
    padding: 1.5rem;
}
.upcoming-card-summary {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--brand-charcoal);
}
.upcoming-card-body .event-card-actions { margin-top: auto; align-self: flex-end; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ── Nav ── */
.nav-link { position: relative; font-weight: 600; letter-spacing: 0.01em; transition: color 0.3s; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--brand-red); transition: width 0.38s cubic-bezier(0.4,0,0.2,1); }
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--brand-red); }

/* ── Team strip ── */
/* Uses a universal child selector so CMS-rendered cards size identically to the
   static markup regardless of which element the renderer emits. */
.team-strip > * { min-width: 240px; flex: 0 0 240px; scroll-snap-align: start; }
.team-strip::-webkit-scrollbar { height: 8px; }
.team-strip::-webkit-scrollbar-thumb { background: var(--brand-red); border-radius: 999px; }
.team-strip { scrollbar-width: thin; scrollbar-color: var(--brand-red) var(--sand); }

/* Modern team card */
.team-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(63,43,35,0.05);
    transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease;
}
.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px rgba(212,69,51,0.10), 0 8px 16px rgba(0,0,0,0.04);
}
.team-card .team-card-img {
    position: relative;
    height: 280px;
    overflow: hidden;
}
.team-card .team-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.6s ease;
}
.team-card:hover .team-card-img img { transform: scale(1.05); }
.team-card-body {
    position: relative;
    padding: 1.25rem 1.25rem 1.4rem;
    text-align: center;
    background: #fff;
    border-top: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, var(--brand-red), var(--brand-gold));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.team-card-body h3 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: -0.01em;
}
.team-card-body p {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-charcoal);
    margin-top: 0.3rem;
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.3s ease;
    /* The role is optional. An empty line box collapses to zero height, which
       would sit the accent rule higher on those cards than on the rest, so the
       line's height is reserved whether or not a role was entered. */
    line-height: 1.4;
    min-height: calc(0.7rem * 1.4);
}
.team-card:hover .team-card-body p {
    color: var(--brand-red);
    opacity: 1;
}
.team-card-accent {
    display: block;
    width: 28px;
    height: 3px;
    margin: 0.75rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-gold));
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.team-card:hover .team-card-accent {
    opacity: 1;
    transform: scaleX(1);
}

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.img-zoom:hover img { transform: scale(1.06); }

.badge-rooted { background: linear-gradient(135deg, var(--brand-red), var(--terracotta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

h1 { font-size: clamp(3.25rem, 7.2vw, 5.8rem) !important; }

/* ── Fixed header base ── */
#main-header {
    background: linear-gradient(180deg, rgba(255,250,246,0.78), transparent);
    transition:
        background      0.42s cubic-bezier(0.4,0,0.2,1),
        backdrop-filter 0.42s cubic-bezier(0.4,0,0.2,1),
        box-shadow      0.42s cubic-bezier(0.4,0,0.2,1),
        padding-top     0.32s ease,
        padding-bottom  0.32s ease;
}
#main-header .nav-link                       { color: var(--brand-charcoal); }
#main-header [data-template-id="nav-brand"]  { color: var(--brand-red); }
#main-header #mobile-toggle                  { color: var(--brand-dark); }
#main-header:not(.scrolled) .nav-link { text-shadow: 0 1px 12px rgba(255,250,246,0.92); }
#main-header:not(.scrolled) .nav-link:hover { color: var(--brand-red); }
#main-header:not(.scrolled) .btn-brand {
    background: var(--brand-red);
    box-shadow: 0 8px 24px rgba(212,69,51,0.25);
}
#main-header:not(.scrolled) .btn-brand:hover { background: #b83929; }

.nav-brand-word {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 14px rgba(255,250,246,0.9);
}
.hero-logo-shell {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 1px solid rgba(212,69,51,0.2);
    border-radius: 999px;
    /* Matches the logo's own white backdrop, so the artwork's square edges are
       invisible against the circle. */
    background: #fff;
    box-shadow: 0 8px 30px rgba(212,69,51,0.13);
    /* Keeps the artwork's square backdrop from poking out past the curve. */
    overflow: hidden;
}

/* The markup sizes this with `h-full`, but a percentage height does not resolve
   against a centred grid area, so the image ignored `object-fit` and overflowed
   the circle — which cropped the arc beneath the mark. An explicit box gives
   `contain` something to letterbox into. The artwork is taller than it is wide,
   and a tall rectangle's corners exit a circle before its edges do, so this is
   sized to clear the curve rather than the bounding box. */
.hero-logo-shell img {
    width: 2.85rem;
    height: 2.85rem;
    object-fit: contain;
}

/* Scrolled state */
#main-header.scrolled {
    background: rgba(252,250,247,0.96);
    backdrop-filter: saturate(180%) blur(26px);
    -webkit-backdrop-filter: saturate(180%) blur(26px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 36px rgba(63,43,35,0.10);
    padding-top:    0.5rem !important;
    padding-bottom: 0.5rem !important;
}
#main-header.scrolled .nav-link { color: var(--brand-dark) !important; }
#main-header.scrolled [data-template-id="nav-brand"] { color: var(--brand-red) !important; }
#main-header.scrolled .nav-link::after   { background: var(--brand-red); }
#main-header.scrolled .nav-link:hover    { color: var(--brand-red) !important; }
#main-header.scrolled #mobile-toggle     { color: var(--brand-dark) !important; }
#main-header.scrolled .btn-brand         { box-shadow: 0 4px 16px rgba(212,69,51,0.28); }

/* ── Hero ── */
.hero-overlay {
    background:
        linear-gradient(90deg, rgba(255,250,245,0.52) 0%, rgba(255,250,245,0.18) 47%, transparent 68%),
        linear-gradient(180deg, rgba(255,250,245,0.15) 0%, transparent 34%, rgba(200,164,77,0.08) 100%);
}
.hero-swann {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(5.75rem, 9.2vw, 8.2rem) !important;
    font-weight: 600;
    letter-spacing: -0.055em;
    color: var(--brand-red);
    background: linear-gradient(105deg, #b83929 0%, var(--brand-red) 72%, var(--mauve) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 34px rgba(212,69,51,0.15);
    line-height: 0.92;
}
.hero-tagline {
    display: inline-flex;
    align-items: center;
    font-size: clamp(0.6rem, 1vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-dark);
    text-shadow: 0 1px 14px rgba(255,250,246,0.94);
    padding: 6px 16px 6px 0;
    border-radius: 0;
}
.hero-tagline::before {
    content: '';
    flex: 0 0 42px;
    width: 42px;
    height: 2px;
    margin-right: 1rem;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-gold));
    box-shadow: 0 0 14px rgba(212,69,51,0.2);
    border-radius: 2px;
}
.hero-sub {
    max-width: 520px;
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    line-height: 1.85;
    color: var(--brand-charcoal);
    font-weight: 400;
    text-shadow: 0 2px 18px rgba(255,250,246,0.98);
    letter-spacing: 0.01em;
}
.hero-copy {
    position: relative;
    width: min(100%, 720px);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding-right: 2rem;
}

/* Held in CSS rather than inline styles so the mobile rules below can override
   the padding and alignment. */
.hero-content {
    min-height: 100svh;
    justify-content: center;
    padding-top: 96px;
    padding-bottom: 48px;
}

.join-grid { max-height: 600px; }
/* `1fr` tracks floor at the content's minimum width, so the single mobile
   column was being held open by the widest unbreakable row inside it. */
.join-grid,
.join-grid > * { min-width: 0; }
/* Three pill buttons in a row need ~388px. That fits a 440px screen but not a
   402px one, which is why the section aligned correctly on a Pro Max and
   cropped on a Pro. */
.social-links { flex-wrap: wrap; }

/* ── Parallax ── */
.hero-parallax {
    pointer-events: none;
    isolation: isolate;
    contain: layout paint;
}
.hero-parallax-plane {
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, 0);
    transform-origin: center;
    backface-visibility: hidden;
}
/* Promote the animating layers to their own compositor layer for the duration of
   the reveal, then release them. Without this the browser repaints them on the
   main thread and the first frames visibly flicker. */
.hero-parallax.is-ready .hero-parallax-subject { will-change: transform, opacity; }
.hero-parallax.is-revealed .hero-parallax-subject { will-change: auto; }

.hero-parallax-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform-origin: center;
}
.hero-parallax-upper,
.hero-parallax-lower,
.hero-parallax-ribbon {
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-parallax-upper-art,
.hero-parallax-lower-art,
.hero-parallax-ribbon-art {
    object-fit: cover;
    object-position: center bottom;
}
/* Single-image hero: the admin panel turned the layered effect off, so only the
   background plane is kept and the animated subject layers are removed. */
.hero-parallax.is-static .hero-parallax-ribbon,
.hero-parallax.is-static .hero-parallax-lower,
.hero-parallax.is-static .hero-parallax-upper { display: none; }

.hero-parallax-background { z-index: 0; }
.hero-parallax-ribbon { z-index: 1; }
.hero-parallax-upper { z-index: 2; }
.hero-parallax-lower { z-index: 3; }
.hero-parallax-subject {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}
@keyframes heroParallaxReveal {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* `both` rather than `forwards`: during the delay the layer holds the keyframe's
   start state instead of falling back to its own styles, which removes the jump
   at the moment each animation begins. */
.hero-parallax.is-ready .hero-parallax-lower-art {
    animation: heroParallaxReveal 650ms cubic-bezier(0.22,1,0.36,1) 150ms both;
}
.hero-parallax.is-ready .hero-parallax-upper-art {
    animation: heroParallaxReveal 650ms cubic-bezier(0.22,1,0.36,1) 500ms both;
}

/* ── Hero entrance ── */
@keyframes heroSlideIn {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hero-enter {
    opacity: 0;
    animation: heroSlideIn 0.72s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-enter-1 { animation-delay: 0.08s; }
.hero-enter-2 { animation-delay: 0.22s; }
.hero-enter-3 { animation-delay: 0.38s; }

/* ── About / Vision preview ── */
.about-preview {
    isolation: isolate;
    background:
        radial-gradient(circle at 8% 12%, rgba(212,69,51,0.09), transparent 25%),
        radial-gradient(circle at 92% 86%, rgba(200,164,77,0.13), transparent 26%),
        var(--cream);
}
.about-lokta-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.12;
    pointer-events: none;
}
.about-lokta-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}
.about-vision-block {
    max-width: 780px;
    margin: 0 auto 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(200,164,77,0.28);
    text-align: center;
}
.about-vision-copy {
    max-width: 680px;
    margin: 1rem auto 0;
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    line-height: 1.65;
    color: var(--brand-charcoal);
}
.about-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
.about-photo-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 320px;
    overflow: hidden;
    border: 1px solid rgba(212,69,51,0.16);
    border-radius: 24px;
    background: var(--sand);
    box-shadow: 0 22px 55px rgba(74,69,64,0.15);
}
.about-photo-frame::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-gold), var(--terracotta));
}
.about-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.about-kicker {
    margin: 0 0 0.75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brand-red);
}
.about-summary {
    margin: 1rem 0 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--brand-charcoal);
}
.about-learn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 1.25rem;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    color: #fff;
    background: var(--brand-red);
    box-shadow: 0 10px 26px rgba(212,69,51,0.24);
    font-size: .88rem;
    font-weight: 700;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.about-learn-more::after { content: '\2192'; margin-left: .65rem; transition: transform .25s ease; }
.about-learn-more:hover {
    color: #fff;
    background: var(--terracotta);
    box-shadow: 0 13px 30px rgba(224,122,47,0.25);
    transform: translateY(-2px);
}
.about-learn-more:hover::after { transform: translateX(4px); }
.about-learn-more:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 4px; }

/* About reveal sequence */
.about-sequence-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.about-preview.about-reveal-pending .about-sequence-item { opacity: 0; }
.about-preview.about-reveal-pending .about-sequence-vision-heading { transform: translate3d(-40px, 0, 0); }
.about-preview.about-reveal-pending .about-sequence-vision-copy,
.about-preview.about-reveal-pending .about-sequence-about-copy { transform: translate3d(0, 14px, 0); }
.about-preview.about-reveal-pending .about-sequence-about-heading { transform: translate3d(40px, 0, 0); }
.about-preview.about-reveal-pending .about-sequence-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ── Event "Learn More" button ── */
.event-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1.2rem;
    border: 2px solid var(--brand-red);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-red);
    background: transparent;
    transition: all 0.25s ease;
    text-decoration: none;
}
.event-learn-more:hover {
    background: var(--brand-red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212,69,51,0.25);
}
.event-learn-more::after {
    content: '\2192';
    transition: transform 0.25s ease;
}
.event-learn-more:hover::after { transform: translateX(4px); }

/* ── Event "Register" button ── */
.event-register-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1.2rem;
    border: 2px solid var(--brand-red);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-red);
    transition: all 0.25s ease;
    text-decoration: none;
}
.event-register-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212,69,51,0.25);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
    .mobile-menu.open { transform: translateX(0); }
    h1 { font-size: clamp(2.9rem, 14vw, 4.1rem) !important; white-space: normal !important; }
    section { padding-left: 0; padding-right: 0; }
    /* Mobile shows only the lead photo. Targeted by class rather than
       :first-child/:last-child so a single-photo event still renders its one
       image instead of matching both selectors and hiding itself. */
    .event-slide-grid { display: block !important; height: auto !important; }
    .event-slide-main { height: 300px; }
    .event-slide-side { display: none; }
    .team-strip { margin-inline: -24px; padding-inline: 24px; }
    .team-strip > * { min-width: min(78vw, 280px); flex-basis: min(78vw, 280px); }
    .team-card .team-card-img { height: 240px; }

    .hero-parallax-art { object-position: center bottom; }
    .hero-copy { max-width: 100%; gap: 0.8rem; }
    .hero-swann { font-size: clamp(4.25rem, 21vw, 5.8rem) !important; }
    .hero-tagline { align-items: flex-start; letter-spacing: 0.14em; line-height: 1.55; font-size: 0.58rem; }
    .hero-tagline::before { flex-basis: 24px; width: 24px; margin-top: 0.68em; margin-right: 0.65rem; }
    .hero-sub { font-size: 0.82rem; line-height: 1.65; max-width: 100%; }

    /* Text sits in the upper half on a portrait screen, so the scrim is heaviest
       there and clears toward the bottom to keep the photography visible. */
    .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(255,250,245,0.92) 0%,
                rgba(255,250,245,0.78) 30%,
                rgba(255,250,245,0.42) 55%,
                rgba(255,250,245,0.12) 78%,
                rgba(255,250,245,0) 100%),
            linear-gradient(90deg, rgba(255,250,245,0.45), rgba(255,250,245,0.10));
    }
    /* Anchor the copy near the top rather than centring it, so it stays over the
       lightest part of the scrim instead of drifting onto the subjects. */
    .hero-content {
        justify-content: flex-start;
        padding-top: 108px;
        padding-bottom: 32px;
    }
    .hero-copy { padding-right: 0; }

    /* The desktop cap assumes two columns side by side. Stacked on mobile the
       same content is far taller, and clamping it pushed the form into the
       footer. */
    .join-grid { max-height: none; }

    /* ── Recent events, compact single-photo layout ──
       One photo, stacked text beneath it, and controls that always fit the
       screen. Nothing here may widen its column. */
    .carousel-slide,
    .event-slide-grid,
    .event-slide-info { max-width: 100%; }
    .carousel-slide { padding-inline: 0; }
    /* Height tracks the viewport rather than a fixed value, so the text and the
       controls beneath it stay above the fold on shorter phones. */
    .event-slide-main { height: clamp(140px, 23vh, 220px); border-radius: 14px; }

    .event-slide-info {
        display: block;
        margin-top: 0.9rem;
    }
    .event-meta { min-width: 0; }
    .event-meta h3 {
        font-size: 1.05rem !important;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    /* The heading's gradient underline adds ~2rem of height for decoration the
       compact layout has no room for. */
    .event-meta h3::after { display: none; }
    .event-meta p {
        margin-top: 0.3rem;
        font-size: 0.66rem;
        overflow-wrap: anywhere;
    }
    .event-slide-info .event-learn-more {
        margin-top: 0.8rem;
        padding: 0.45rem 1rem;
        font-size: 0.75rem;
    }

    /* Smaller arrows so the pair plus the dots always clear the viewport. */
    .carousel-controls { gap: 0.75rem; margin-top: 1.25rem !important; }
    .carousel-arrows { gap: 0.5rem; }
    #carousel-prev,
    #carousel-next { width: 34px; height: 34px; }

    .about-vision-block { margin-bottom: 2rem; padding-bottom: 2rem; }
    /* The headings slide in horizontally on desktop. There is no spare room for
       that on a phone, so the offset overhangs the screen and gets clipped —
       reveal them vertically instead. */
    .about-preview.about-reveal-pending .about-sequence-vision-heading,
    .about-preview.about-reveal-pending .about-sequence-about-heading {
        transform: translate3d(0, 14px, 0);
    }
    .about-preview-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-photo-frame { width: 100%; max-height: none; }
    .section-heading { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; }
}

/* Short phone viewports: the slideshow plus its heading and controls is taller
   than one screen, which pushes the next/prev buttons below the fold. Trim the
   section's chrome so the whole thing fits without scrolling. */
@media (max-width: 768px) and (max-height: 950px) {
    #events {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        justify-content: flex-start;
    }
    #events > .relative > .text-center { margin-bottom: 1rem; }
    #events .section-heading {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
        line-height: 1.15;
    }
    #events .section-heading::after { margin-top: 0.5rem; }
    #events .section-sub {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        line-height: 1.5;
    }
    #events .event-slide-main { height: clamp(130px, 20vh, 190px); }
    #events .carousel-controls { margin-top: 0.9rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-enter { opacity: 1; animation: none; transform: none; }
    .hero-parallax-plane { transform: none !important; }
    .hero-parallax-subject { transform: none; }
    .hero-parallax.is-ready .hero-parallax-subject {
        animation: heroParallaxReducedFade 180ms ease-out forwards;
    }
    .about-preview.about-reveal-pending .about-sequence-item {
        transform: none !important;
    }
}
@keyframes heroParallaxReducedFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}