/* ==========================================================================
   HOME.CSS
   Homepage-only sections. Shared tokens, resets, buttons, nav, and footer
   live in global.css (loaded before this file). Each section's mobile
   override sits directly below that section's base rules, instead of in
   one big breakpoint block at the end — easier to find when editing.
   ========================================================================== */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
    position: relative;
    min-height: clamp(650px, 90vh, 900px);
    background-image: url('Bareback.jpg');
    background-size: cover;
    /* Was "center top" — nudged the horizontal anchor toward the right so
       the rider sits further right in the frame, leaving less dead space
       on the far right and less crowding against the text block. This is
       a starting guess since I can't see the actual photo — adjust the
       75% up/down once you check it against the live image; a lower
       number moves the visible subject left, a higher one moves it right. */
    background-position: 75% top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-2xl) 0;
    overflow: hidden;
    color: var(--text-inverse);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to right,
            rgba(20, 12, 8, 0.85) 0%,
            rgba(20, 12, 8, 0.6) 35%,
            rgba(20, 12, 8, 0.15) 65%,
            rgba(20, 12, 8, 0) 85%
        ),
        linear-gradient(
            to top,
            rgba(20, 12, 8, 0.75) 0%,
            rgba(20, 12, 8, 0.3) 30%,
            rgba(20, 12, 8, 0) 55%
        );
    z-index: 1;
}

.hero-inner {
    position: relative;
    z-index: 2;
    /* Trimmed from min(560px, 46vw) — a little narrower so the text block
       sits further from the rider rather than crowding toward her, per
       feedback. Fine-tune alongside the background-position above. */
    max-width: min(520px, 42vw);
    margin-left: var(--space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: left;
}

.hero-inner h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.2vw + 1.25rem, 3.6rem);
    line-height: 1.15;
    color: var(--color-off-white);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.45);
}

.hero-subtitle {
    font-size: var(--size-body-xl);
    font-weight: var(--weight-medium);
    color: var(--color-tan-light);
    max-width: 550px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-award-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding: var(--space-2xs) var(--space-md);
    background: rgba(166, 58, 45, 0.25);
    border: 1px solid rgba(232, 217, 192, 0.35);
    border-radius: 999px;
    font-size: var(--size-body-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-off-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero-award-badge-icon {
    font-size: 1.1em;
}

.hero-actions {
    margin-top: var(--space-xl);
    display: flex;
    gap: var(--space-lg);
}

.hero-actions .btn-primary,
.hero-actions .btn-outline {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--size-body-lg);
    border-radius: var(--radius-lg);
}

.hero-actions .btn-outline {
    border-color: var(--color-off-white);
    color: var(--color-off-white);
}

.hero-actions .btn-outline:hover {
    background: var(--color-off-white);
    color: var(--color-saddle-brown);
}

.stats-row {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
    background: rgba(20, 12, 8, 0.78);
    border: 1px solid rgba(232, 217, 192, 0.15);
    border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-2xl);
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: start;
    align-items: start;
    gap: var(--space-2xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat + .stat {
    border-left: 1px solid rgba(232, 217, 192, 0.2);
    padding-left: var(--space-2xl);
}

.stat-number {
    font-size: 2.4rem;
    font-weight: var(--weight-bold);
    color: var(--color-off-white);
    line-height: 1;
}

.stat-label {
    font-size: var(--size-body-sm);
    color: var(--color-tan-light);
    opacity: 0.95;
    margin-top: var(--space-2xs);
    white-space: nowrap;
}

/* Hero mobile breakpoints */
@media (max-width: 768px) {
    .hero-inner {
        max-width: 90%;
        margin-left: var(--space-lg);
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    .stats-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        margin-left: var(--space-lg);
        padding: var(--space-md) var(--space-lg);
    }

    .stat + .stat {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(232, 217, 192, 0.2);
        padding-top: var(--space-md);
    }
}

@media (max-width: 480px) {
    .hero-inner {
        margin-left: var(--space-md);
    }

    .stats-row {
        margin-left: var(--space-md);
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   CONTAINER & SECTIONS STRUCTURAL LAYOUT
   (Consolidated — this used to be defined twice in the original stylesheet,
   with the second copy silently overriding .sponsors' max-width to "none".
   Kept the effective end result: feature-cards/upcoming-shows stay capped
   at --frame-width, sponsors runs full width.)
   ========================================================================== */

.feature-cards,
.upcoming-shows {
    max-width: var(--frame-width);
    margin: var(--space-xl) auto;
    padding: 0 var(--space-xl);
}

.sponsors {
    max-width: none;
    margin: var(--space-xl) auto;
    padding: 0 var(--space-xl);
}

/* ==========================================================================
   FEATURE CARDS STYLING (3-Column Layout)
   ========================================================================== */

.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin: 3rem auto;
}

.feature-card {
    border: 6px solid var(--color-brick-red);
    border-radius: 12px;
    background: linear-gradient(#f5e6d0, #f0d8b8);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.feature-card-header {
    background-color: #4a2a1a;
    color: #fff;
    font-family: 'Rye', serif;
    font-size: 1.4rem;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid var(--color-brick-red);
}

.feature-card-body {
    /* Was 1.5rem — a bit more breathing room around the card contents */
    padding: 2rem;
}

.feature-card-body h2 {
    /* This heading had NO dedicated rule before, so it fell back to the
       generic h1–h4 base style with no font-size set at all — meaning it
       rendered at basically the same size as the paragraph below it. */
    font-size: 1.35rem;
    font-weight: var(--weight-bold);
    color: var(--color-secondary-brown);
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.feature-card-body p {
    /* Was unstyled (inherited 16px body text) — sized up per feedback */
    font-size: var(--size-body-lg);
    color: var(--color-text-dark);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-md);
}

.tag {
    display: inline-block;
    background-color: var(--color-brick-red);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    margin-bottom: var(--space-md);
}

.card-divider {
    border: none;
    border-top: 2px solid #c7b299;
    margin: 1.25rem 0;
}

.quick-links {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.quick-links li {
    margin-bottom: 0.75rem;
}

.quick-links a {
    color: #4a2a1a;
    font-weight: 500;
    text-decoration: none;
}

.quick-links a:hover {
    color: var(--color-brick-red);
}

.learn-more {
    display: inline-block;
    color: var(--color-brick-red);
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
}

.learn-more:hover {
    text-decoration: underline;
}

/* No dedicated mobile breakpoint for feature cards — the auto-fit grid
   already reflows to a single column on narrow screens on its own. */

/* ==========================================================================
   UPCOMING SHOWS STYLING (Data Grid + Absolute Badges)
   ========================================================================== */

.shows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.upcoming-shows h2 {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    color: var(--color-secondary-brown);
    padding: 0 var(--space-xl);
    margin-bottom: var(--space-xl);
}

.show-card {
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-brick-red);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.show-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(42, 31, 26, 0.15);
}

.date-badge {
    position: absolute;
    top: -14px;
    right: var(--space-lg);
    background-color: var(--color-brick-red);
    color: var(--text-inverse);
    font-family: var(--font-body);
    /* Was var(--size-body-sm) (14px) — sized up per feedback */
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.show-card h2 {
    /* Was var(--size-body-lg) (18px) — sized up per feedback */
    font-size: var(--size-body-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-dark);
    padding-right: var(--space-2xl);
    margin-bottom: var(--space-sm);
}

.show-card hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-xs) 0 var(--space-sm);
}

.show-time {
    /* Was var(--size-body-sm) (14px) — sized up per feedback */
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-saddle-brown);
    margin-bottom: var(--space-2xs);
}

.show-location {
    /* Was var(--size-body-sm) (14px) — sized up per feedback */
    font-size: var(--size-body);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.show-link {
    color: var(--color-brick-red);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.show-link:hover {
    color: var(--color-brick-red-hover);
}

.upcoming-shows .view-more {
    display: block;
    width: max-content;
    margin: var(--space-lg) auto 0;
}

/* No dedicated mobile breakpoint for Upcoming Shows — the auto-fit grid
   already reflows to a single column on narrow screens on its own. */

/* ==========================================================================
   SPONSORS GRID STYLING (Uniform Grid Cards + Carousel Controls)
   ========================================================================== */

.sponsors-slider-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    /* Was max-width: var(--frame-width) (1440px) — that was capping the
       carousel to a narrower width than the .sponsors section around it,
       which is already set to max-width: none. Removed so the carousel
       actually stretches the full width and shows more cards at once. */
    max-width: none;
    margin: 0 auto;
    position: relative;
}

.sponsors-slider-wrapper::before,
.sponsors-slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    /* Explicit z-index so these fades paint below the arrow buttons below —
       without this, the buttons (in-flow/static) were getting painted
       *under* these absolutely-positioned fades by default, which is why
       they looked washed out/barely visible instead of solid. */
    z-index: 1;
}

.sponsors-slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #e8d9c0 70%, transparent);
}

.sponsors-slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #e8d9c0 70%, transparent);
}

.sponsors-grid {
    display: flex;
    gap: var(--space-lg);
    flex-grow: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
    background: linear-gradient(#f5e6d0, #e8d9c0);
    /* Hide the native browser scrollbar — the arrow buttons + snap behavior
       already communicate "scrollable", and the default gray scrollbar
       showing through underneath the cards looked unpolished. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sponsors-grid::-webkit-scrollbar {
    display: none;
}

.sponsor-card {
    flex: 0 0 220px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sponsor-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 12px rgba(42, 31, 26, 0.15);
    border-color: var(--color-saddle-brown);
}

.sponsor-card img {
    width: 100%;
    max-width: 160px;
    height: 100px;
    object-fit: contain;
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.sponsor-card:hover img {
    transform: scale(1.05);
}

.sponsor-card h4 {
    font-size: var(--size-body);
    font-weight: var(--weight-bold);
    color: var(--color-secondary-brown);
    margin-bottom: var(--space-2xs);
    text-transform: capitalize;
    min-height: calc(var(--size-body) * 1.2 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sponsor-card p {
    font-size: var(--size-body-sm);
    color: var(--text-muted);
    min-height: calc(var(--size-body-sm) * 1.2 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sponsor-card.featured {
    border-color: var(--color-brick-red);
    box-shadow: 0 0 12px rgba(166, 58, 45, 0.25);
}

.sponsor-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: var(--color-brick-red);
    color: var(--color-off-white);
    border: none;
    border-radius: 50%;
    font-size: var(--size-subtitle);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: background-color 0.2s ease, transform 0.2s ease;
    /* Above the wrapper's ::before/::after fade gradients — these are flex
       items, and flex items respect z-index even at position: static, so
       this alone is enough to bring them in front. */
    z-index: 2;
}

.sponsor-nav-btn:hover {
    background-color: var(--color-brick-red-hover);
    transform: scale(1.1);
}

.sponsor-nav-btn:active {
    transform: scale(0.95);
}

/* Sponsors mobile breakpoint */
@media (max-width: 640px) {
    .sponsors-slider-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
    }

    .sponsors-grid {
        order: 1;
    }

    .sponsor-nav-btn.prev { order: 2; }
    .sponsor-nav-btn.next { order: 3; }
}

/* ==========================================================================
   EXPLORE TILES SYSTEM (6-Column Dynamic Matrix)
   ========================================================================== */

.explore-section {
    margin: 4rem 0;
    text-align: center;
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center;
    gap: 2rem;
}

.explore-card {
    background: -o-linear-gradient(#f5e6d0, #f0d8b8);
    border: 3px solid var(--color-brick-red);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}

.explore-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    background: linear-gradient(#f0d8b8, #e8cfa8);
}

.explore-icon-wrapper {
    background-color: #fff;
    border: 2px solid var(--color-brick-red);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.explore-icon {
    width: 40px;
    height: 40px;
    color: var(--color-brick-red);
}

.explore-card h2 {
    font-family: 'rye', serif;
    color: #4a2a1a;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.explore-card p {
    color: #3a2a1a;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.explore-divider {
    border: none;
    border-top: 2px solid #c7b299;
    width: 60%;
    margin: 1rem auto;
}

.explore-link {
    display: inline-block;
    color: var(--color-brick-red);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.explore-link:hover {
    color: #4a2a1a;
    transform: translateX(4px);
}

/* No dedicated mobile breakpoint for Explore tiles — the auto-fit grid
   already reflows on narrow screens on its own. */

/* ==========================================================================
   ABOUT SEMSCA PANEL STYLING (Top Dark Banner Row)
   ========================================================================== */

.about-semsca-section {
    position: relative;
    background: linear-gradient(155deg, var(--color-saddle-brown) 0%, var(--color-secondary-brown) 55%, #2a190f 100%);
    padding: var(--space-2xl) var(--space-xl);
    margin-bottom: var(--space-2xl);
    border-top: 4px solid var(--color-brick-red);
    box-shadow: inset 0 12px 20px -12px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.about-semsca-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.about-semsca-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('textures/leather-pattern.png');
    background-size: 320px;
    background-repeat: repeat;
    opacity: 0.16;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.about-semsca-container {
    position: relative;
    max-width: var(--frame-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.about-semsca-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 68%;
    width: 2px;
    height: 60%;
    background: url('assets/images/rope-segment.png') repeat-y;
    transform: translateY(-50%);
    opacity: 0.8;
}

.about-badge-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-highlight {
    background-color: var(--color-tan-light);
    color: var(--color-secondary-brown);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    display: inline-block;
    margin-bottom: var(--space-md);
}

.about-image-frame {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background-color: var(--color-tan-light);
}

.about-image-frame img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.about-cta-button {
    background-color: var(--color-brick-red);
    color: var(--color-off-white);
    font-weight: var(--weight-bold);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.about-cta-button:hover {
    background-color: transparent;
    border-color: var(--color-brick-red);
    color: var(--color-brick-red);
}

.about-text-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

.section-title-inverse {
    font-family: var(--font-display);
    font-size: calc(var(--size-subtitle) * 1.5);
    letter-spacing: 1px;
    color: var(--color-off-white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.about-body-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.about-body-text p {
    line-height: 1.7;
    max-width: 520px;
    color: var(--color-tan-light);
}

.about-highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 520px;
}

.about-highlights-list li {
    position: relative;
    padding-left: var(--space-lg);
    line-height: 1.6;
    color: var(--color-tan-light);
}

.about-highlights-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brick-red);
}

.community-circle-badge {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(107, 66, 38, 0.85), rgba(26, 16, 10, 0.95) 75%);
    border: 3px solid var(--color-tan-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.community-circle-badge::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        #d9b98a 0deg 9deg,
        #8a5a34 9deg 18deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.community-circle-badge::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px dashed rgba(232, 217, 192, 0.45);
    pointer-events: none;
}

.community-circle-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(232,217,192,0.35);
}

.badge-text-stack {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    text-align: center;
    color: var(--color-tan-light);
}

.badge-text-stack span:first-child {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--color-off-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.badge-text-stack span:first-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 2px;
    background: var(--color-brick-red);
    border-radius: 2px;
}

.badge-text-stack span:not(:first-child) {
    font-family: var(--font-body);
    font-size: var(--size-body-sm);
    font-weight: var(--weight-regular);
    font-style: italic;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

/* About SEMSCA mobile breakpoints */
@media (max-width: 1024px) {
    .about-semsca-container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .about-text-col {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .community-circle-badge {
        width: 200px;
        height: 200px;
    }

    .community-circle-badge::before {
        inset: -11px;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
    }

    .badge-text-stack span:first-child {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   PROGRAM & AWARDS MATRIX STYLING (Bottom Light Section Grid)
   ========================================================================== */

.programs-section {
    background-color: var(--bg-page);
    padding: var(--space-2xl) var(--space-xl);
    margin-bottom: var(--space-2xl);
    position: relative;
}

.programs-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(42, 31, 26, 0.15);
}

.programs-photo {
    position: relative;
    background: radial-gradient(circle at 30% 20%, var(--color-saddle-brown), var(--color-secondary-brown) 70%);
    height: 440px;
    color: var(--color-tan-light);
    font-family: var(--font-body);
    font-size: var(--size-body-sm);
    font-style: italic;
    display: flex;
    align-items: flex-end;
    padding: var(--space-md);
}

.programs-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.programs-content {
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title-display {
    /* This class had no base rule at all before — "Programs and awards" was
       rendering as plain 16px body text instead of a heading. Matches the
       display-font treatment already used by .section-title-inverse in the
       About section, just in the dark saddle-brown for a light background. */
    font-family: var(--font-display);
    font-size: var(--size-h2);
    color: var(--color-secondary-brown);
    letter-spacing: 1px;
}

.programs-content .section-title-display {
    text-align: left;
    margin-bottom: var(--space-xl);
}

.program-featured {
    border-left: 3px solid var(--color-brick-red);
    padding-left: var(--space-md);
    margin-bottom: var(--space-lg);
}

.program-featured h2 {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    /* Was var(--size-body-lg) (18px) — sized up per feedback */
    font-size: 1.5rem;
    color: var(--color-text-dark);
    margin-bottom: var(--space-2xs);
}

.program-featured p {
    /* Was var(--size-body-sm) (14px) — sized up per feedback */
    font-size: var(--size-body);
    color: var(--text-muted);
    line-height: var(--line-height-loose);
}

.program-list {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.program-list li {
    /* Was var(--size-body-sm) (14px) — sized up per feedback */
    font-size: var(--size-body);
    color: var(--color-text-dark);
    line-height: var(--line-height-loose);
}

.programs-cta {
    align-self: flex-start;
}

/* Programs mobile breakpoint */
@media (max-width: 1024px) {
    .programs-split {
        grid-template-columns: 1fr;
    }

    .programs-photo {
        min-height: 280px;
    }

    .programs-content {
        padding: var(--space-xl);
    }
}