/* ═══════════════════════════════════════════════════════════════════
   ACTIVITIES.CSS — جمعية إرث وحضارة بالقريات
   Premium Editorial Activities Archive
   Unified Event Presentation System — Heritage · Identity · Culture
═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
    --color-parchment:      #faf6ed;
    --color-parchment-mid:  #f5ede0;
    --color-parchment-deep: #ede3cf;
    --color-ink-dark:       #1e1610;
    --color-ink:            #3a2a1c;
    --color-ink-mid:        #4f3822;
    --color-ink-soft:       #5c4430;
    --color-ink-muted:      #6b4f35;
    --color-gold-bright:    #c09a62;
    --color-gold:           #b28a5a;
    --color-gold-deep:      #9c6e38;
    --color-gold-pale:      #e0c896;
    --color-gold-faint:     #cbae86;
    --color-amber:          #a07848;
    --color-amber-light:    #b07a3c;
    --color-canvas:         rgba(253, 250, 240, 0.70);
    --color-canvas-strong:  rgba(245, 237, 224, 0.88);
    --radius-card:          16px;
    --radius-pill:          100px;
    --shadow-soft:          0 4px 18px -5px rgba(40, 25, 8, 0.10);
    --shadow-deep:          0 14px 36px -10px rgba(40, 25, 8, 0.16);
    --transition-smooth:    cubic-bezier(0.22, 1, 0.36, 1);
    --font-arabic:          'Almarai', sans-serif;
    --font-latin:           'Montserrat', sans-serif;
    /* Unified gallery system */
    --gallery-gap:          1.2rem;
    --gallery-max:          960px;
    --img-aspect-primary:   16 / 11;
    --img-aspect-secondary: 16 / 11;
    --img-aspect-support:   4 / 3;
    --img-aspect-featured:  4 / 5;
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--color-parchment);
    font-family: var(--font-arabic);
    color: var(--color-ink);
    line-height: 1.5;
    overflow-x: hidden;
    direction: rtl;
}

/* Heritage paper texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200" opacity="0.05"><path fill="none" stroke="%23b28b5e" stroke-width="1.2" d="M200 150 L250 120 L300 150 L350 120 L400 150 L450 120 L500 150 L550 120 L600 150 M150 350 L200 320 L250 350 L300 320 L350 350 L400 320 L450 350 M100 550 L150 520 L200 550 L250 520 L300 550 L350 520 L400 550 M180 750 L230 720 L280 750 L330 720 L380 750 L430 720 L480 750 M220 950 L270 920 L320 950 L370 920 L420 950 L470 920 L520 950 M500 180 L540 150 L580 180 L620 150 L660 180 L700 150 M600 380 L640 350 L680 380 L720 350 L760 380 M550 580 L590 550 L630 580 L670 550 L710 580 M580 780 L620 750 L660 780 L700 750 L740 780 M620 1000 L660 970 L700 1000 L740 970"/><circle cx="400" cy="500" r="25" stroke="%239c7a4b" fill="none" stroke-width="1.2"/></svg>');
    background-repeat: repeat;
    background-size: 160px;
    pointer-events: none;
    z-index: 0;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT SHELL
═══════════════════════════════════════════════════════════════ */
.site-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 2.5rem 0;
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════════ */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.8rem 0 1.5rem;
    border-bottom: 1px solid rgba(175, 145, 100, 0.25);
    margin-bottom: 2.5rem;
}

.logo-area-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo-emblem {
    font-size: 1.9rem;
    color: #b48a5c;
}

.association-name-nav {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-ink-mid);
    letter-spacing: -0.3px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.nav-links a {
    color: var(--color-ink-soft);
    font-weight: 500;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    font-size: 0.93rem;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-amber-light);
    border-bottom-color: var(--color-gold-faint);
}

.nav-links a.active {
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER TABS
═══════════════════════════════════════════════════════════════ */
.acts-filter-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(192, 154, 98, 0.15);
}

.acts-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid rgba(178, 138, 88, 0.32);
    padding: 0.48rem 1.3rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-soft);
    font-family: var(--font-arabic);
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
}

.acts-filter-btn:hover,
.acts-filter-btn.active {
    background: var(--color-ink-dark);
    border-color: var(--color-ink-dark);
    color: rgba(240, 225, 195, 0.95);
    transform: translateY(-2px);
}

.acts-filter-btn .btn-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-gold-bright);
    opacity: 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.acts-filter-btn.active .btn-dot {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION SHARED ATOMS
═══════════════════════════════════════════════════════════════ */

/* ── Eyebrow rule ── */
.sec-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}

.sec-eyebrow {
    font-family: var(--font-latin);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-amber);
    white-space: nowrap;
    flex-shrink: 0;
}

.sec-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(192, 154, 98, 0.45), transparent);
}

.sec-diamond {
    width: 5px;
    height: 5px;
    background: var(--color-gold-bright);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ── Activity block spacing ── */
.activity-block {
    margin-bottom: 5.5rem;
    position: relative;
}

.activity-block:last-child {
    margin-bottom: 3rem;
}

/* Hairline between sections */
.activity-block::after {
    content: "";
    position: absolute;
    bottom: -2.8rem;
    right: 10%;
    left: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(192, 154, 98, 0.18) 25%,
        rgba(192, 154, 98, 0.35) 50%,
        rgba(192, 154, 98, 0.18) 75%,
        transparent 100%);
}

.activity-block:last-child::after {
    display: none;
}

/* ── Activity Tag ── */
.act-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-latin);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-bottom: 1.1rem;
}

.act-tag::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--color-gold-bright);
    flex-shrink: 0;
}

/* ── Activity Title ── */
.act-title {
    font-size: clamp(1.75rem, 2.6vw, 2.6rem);
    font-weight: 800;
    color: var(--color-ink-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.2rem;
}

.act-title::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gold-bright), var(--color-gold-pale));
    margin-top: 1rem;
}

/* ── Activity Title subtitle ── */
.act-title-sub {
    display: block;
    font-size: 0.52em;
    font-weight: 400;
    color: var(--color-gold-deep);
    letter-spacing: 0.01em;
    margin-top: 0.35rem;
}

/* ── Activity Body Text ── */
.act-body {
    font-size: 0.97rem;
    line-height: 2.05;
    color: var(--color-ink-muted);
    font-weight: 300;
    max-width: 58ch;
}

.act-body p + p {
    margin-top: 0.9em;
}

/* ── Panel ornament ── */
.act-ornament {
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0.42;
}

.act-ornament::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--color-gold-bright);
}

.act-ornament-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold-bright);
}

.act-ornament::after {
    content: "";
    width: 12px;
    height: 1px;
    background: var(--color-gold-bright);
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE FRAME — UNIVERSAL
   All images use this. Aspect-ratio is set per-variant class.
═══════════════════════════════════════════════════════════════ */
.act-img-frame {
    position: relative;
    overflow: hidden;
    background: var(--color-ink-dark);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-card);
    width: 100%;
    display: block;
    transition:
        transform  0.55s var(--transition-smooth),
        box-shadow 0.55s var(--transition-smooth);
}

.act-img-frame:hover {
    transform: translateY(-4px) scale(1.004);
    box-shadow: var(--shadow-deep);
}

/* Images fill the container — intrinsic size never influences layout */
.act-img-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s var(--transition-smooth);
}

.act-img-frame:hover img {
    transform: scale(1.045);
}

/* Vignette */
.act-img-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(20, 12, 4, 0.24) 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s;
}

.act-img-frame:hover::after {
    opacity: 0.65;
}

/* Inner gold inset border */
.act-img-frame.has-border::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(192, 154, 98, 0.20);
    border-radius: calc(var(--radius-card) - 4px);
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.4s;
}

.act-img-frame.has-border:hover::before {
    border-color: rgba(192, 154, 98, 0.42);
}

/* Floating number pill */
.act-img-number {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 4;
    font-family: var(--font-latin);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: rgba(240, 220, 180, 0.72);
    background: rgba(20, 12, 4, 0.38);
    backdrop-filter: blur(6px);
    padding: 0.28rem 0.65rem;
    border-radius: 40px;
    border: 1px solid rgba(192, 154, 98, 0.18);
}

/* Hover-reveal caption */
.act-img-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 4;
    padding: 2.8rem 1.5rem 1.4rem;
    background: linear-gradient(to top, rgba(12, 7, 2, 0.78) 0%, transparent 100%);
    transform: translateY(100%);
    transition: transform 0.42s var(--transition-smooth);
}

.act-img-frame:hover .act-img-caption {
    transform: translateY(0);
}

.act-img-caption-text {
    font-size: 0.8rem;
    color: rgba(235, 215, 180, 0.9);
    line-height: 1.55;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED STAMP (Salt Museum + Nortona)
═══════════════════════════════════════════════════════════════ */
.featured-stamp {
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 5;
    background: var(--color-canvas-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(192, 154, 98, 0.30);
    border-radius: 10px;
    padding: 0.65rem 1rem;
    max-width: 175px;
}

.stamp-icon {
    font-size: 1rem;
    color: var(--color-amber-light);
    margin-bottom: 0.3rem;
}

.stamp-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-ink-dark);
    line-height: 1.3;
    margin-bottom: 2px;
}

.stamp-sub {
    font-size: 0.6rem;
    color: var(--color-amber);
    font-family: var(--font-latin);
    letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════
   ████  UNIFIED EVENT HEADER  ████
   Always rendered above the gallery — consistent across all events.
═══════════════════════════════════════════════════════════════ */
.ev-header {
    max-width: 680px;
    margin-bottom: 2.6rem;
}

/* Row containing date badge + ornament */
.ev-meta-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

/* ── Date badge ── */
.ev-date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.8rem 1.3rem;
    background: rgba(245, 237, 224, 0.52);
    border: 1px solid rgba(192, 154, 98, 0.26);
    border-radius: 12px;
    min-width: 88px;
}

.ev-date-num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-ink-dark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.ev-date-month {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-gold-deep);
}

.ev-date-note {
    font-family: var(--font-latin);
    font-size: 0.52rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ████  UNIFIED GALLERY SYSTEM  ████
   .ev-gallery — outer wrapper (max-width constrained)
   .ev-gallery-duo  — 2-image system
   .ev-gallery-trio — 3-image system (featured + pair)
═══════════════════════════════════════════════════════════════ */
.ev-gallery {
    max-width: var(--gallery-max);
    margin-bottom: 0;
}

/* ──────────────────────────────────────────────────────────────
   DUO LAYOUT  (2 images — Founding Day, Flag Day, Nortona)
   Desktop: two equal columns, both 16/11 aspect ratio.
   Mobile:  stacked single column.
────────────────────────────────────────────────────────────── */
.ev-gallery-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gallery-gap);
    align-items: start;
}

/* Primary image — slightly taller */
.ev-img-primary {
    aspect-ratio: 4 / 3;
    max-height: 360px;
}

/* Secondary image — same height for visual balance */
.ev-img-secondary {
    aspect-ratio: 4 / 3;
    max-height: 360px;
    /* Subtle vertical offset creates gentle editorial stagger */
    margin-top: 1.6rem;
}

/* ──────────────────────────────────────────────────────────────
   TRIO LAYOUT  (3 images — Salt Museum)
   Desktop: featured left (taller) + two support stacked right.
   Mobile:  featured full-width, then two side-by-side below.
────────────────────────────────────────────────────────────── */
.ev-gallery-trio {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--gallery-gap);
    align-items: start;
}

/* Featured image — spans full column height */
.ev-trio-featured {
    aspect-ratio: 3 / 4;
    max-height: 440px;
}

/* Right-column pair container */
.ev-trio-pair {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--gallery-gap);
    /* Align pair height with featured image */
    align-self: stretch;
}

/* Each support image fills half the pair height */
.ev-trio-support {
    aspect-ratio: 4 / 3;
    /* No max-height — the pair grid controls height proportionally */
}

/* ═══════════════════════════════════════════════════════════════
   ████  EVENT QUOTE  ████
   Appears below the gallery. Replaces all pull-quote variants.
═══════════════════════════════════════════════════════════════ */
.ev-quote {
    margin-top: 2rem;
    padding: 1.3rem 1.6rem 1.3rem 0;
    border-right: 2px solid rgba(192, 154, 98, 0.55);
    background: rgba(245, 237, 224, 0.42);
    backdrop-filter: blur(4px);
    border-radius: 0 12px 12px 0;
    max-width: 580px;
}

.ev-quote-text {
    font-size: 0.97rem;
    line-height: 1.9;
    color: var(--color-ink-mid);
    font-weight: 600;
    padding-right: 1.4rem;
}

.ev-quote-cite {
    display: block;
    margin-top: 0.5rem;
    padding-right: 1.4rem;
    font-style: normal;
    font-family: var(--font-latin);
    font-size: 0.6rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--color-amber);
}

/* ═══════════════════════════════════════════════════════════════
   NORTONA META FOOTER (unique to Nortona section)
═══════════════════════════════════════════════════════════════ */
.nortona-meta-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-top: 2.2rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(192, 154, 98, 0.15);
    padding-top: 1.8rem;
}

.nortona-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2.2rem 0 0;
}

.nortona-meta-sep {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, transparent, rgba(192, 154, 98, 0.35), transparent);
    flex-shrink: 0;
    margin-left: 2.2rem;
}

.nortona-meta-label {
    font-family: var(--font-latin);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-amber);
}

.nortona-meta-val {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-ink-dark);
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */
[data-reveal] {
    opacity: 0;
    transition:
        opacity  0.8s var(--transition-smooth),
        transform 0.8s var(--transition-smooth);
}

[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="right"] { transform: translateX(-24px); }
[data-reveal="left"]  { transform: translateX(24px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(0.97); }

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="120"] { transition-delay: 0.12s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="240"] { transition-delay: 0.24s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════════════════════════
   CLOSING SECTION
═══════════════════════════════════════════════════════════════ */
.acts-closing {
    text-align: center;
    padding: 5rem 0 3rem;
    position: relative;
}

.acts-closing-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.acts-closing-line {
    width: 90px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 154, 98, 0.38));
}

.acts-closing-line-rev {
    background: linear-gradient(90deg, rgba(192, 154, 98, 0.38), transparent) !important;
}

.acts-closing-eyebrow {
    font-family: var(--font-latin);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-bottom: 1.6rem;
}

.acts-closing-title {
    font-size: clamp(1.7rem, 3.2vw, 2.8rem);
    font-weight: 800;
    color: var(--color-ink-dark);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 1.4rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.acts-closing-sub {
    display: block;
    color: var(--color-gold-deep);
    font-weight: 400;
    font-size: 0.63em;
    margin-top: 0.3rem;
}

.acts-closing-body {
    font-size: 0.97rem;
    line-height: 2.05;
    color: var(--color-ink-muted);
    font-weight: 300;
    max-width: 500px;
    margin: 0 auto 2.8rem;
}

.acts-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--color-ink-dark);
    color: rgba(235, 215, 180, 0.96);
    padding: 0.88rem 2.2rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-arabic);
    letter-spacing: 0.02em;
    transition: background 0.3s, transform 0.25s;
}

.acts-back-btn:hover {
    background: #5a3820;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.footer-premium {
    margin-top: 4.5rem;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(170, 135, 85, 0.28);
    text-align: center;
    font-size: 0.83rem;
    color: #a58660;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.footer-ornament-line {
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 154, 98, 0.38));
}

.footer-ornament-line.r {
    background: linear-gradient(90deg, rgba(192, 154, 98, 0.38), transparent);
}

.footer-ornament-center {
    width: 7px;
    height: 7px;
    border: 1.5px solid rgba(192, 154, 98, 0.48);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
   Gallery layouts adapt, header stays single-column above gallery.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .site-wrapper { padding: 1.5rem 1.8rem 0; }

    .nav-container { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nav-links { gap: 0.6rem 1.2rem; row-gap: 0.4rem; }
    .nav-links a { font-size: 0.88rem; }
    .association-name-nav { font-size: 1.15rem; }

    .acts-filter-row { margin-bottom: 3rem; }

    /* Header max-width relaxes on tablet */
    .ev-header { max-width: 100%; }

    /* DUO: side-by-side still works on tablet — just tweak gap and offset */
    .ev-gallery-duo { gap: 1rem; }
    .ev-img-primary  { max-height: 300px; }
    .ev-img-secondary { margin-top: 1rem; max-height: 300px; }

    /* TRIO: stack featured above, pair side-by-side below */
    .ev-gallery-trio {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ev-trio-featured {
        aspect-ratio: 16 / 9;
        max-height: 320px;
    }
    .ev-trio-pair {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .ev-trio-support {
        aspect-ratio: 4 / 3;
    }

    /* Quote */
    .ev-quote { max-width: 100%; }

    /* Section spacing */
    .activity-block { margin-bottom: 4.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 640px)
   Order: eyebrow → tag → title → description → gallery → quote.
   No side-by-side content. Single column everything.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Shell ── */
    .site-wrapper {
        padding: 1rem 1rem 0;
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ── Navigation ── */
    .nav-links { gap: 0.5rem 0.9rem; }
    .nav-links a { font-size: 0.8rem; }

    /* ── Filter tabs ── */
    .acts-filter-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.9rem;
        gap: 0.45rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 2.5rem;
    }
    .acts-filter-row::-webkit-scrollbar { display: none; }
    .acts-filter-btn { flex-shrink: 0; font-size: 0.8rem; padding: 0.45rem 1.1rem; }

    /* ── Section spacing ── */
    .activity-block { margin-bottom: 3.5rem; }
    .sec-eyebrow-row { margin-bottom: 1.8rem; }

    /* ── Typography ── */
    .act-title  { font-size: clamp(1.5rem, 6vw, 2rem); }
    .act-body   { max-width: 100%; font-size: 0.93rem; line-height: 2; }

    /* ── Event header ── */
    .ev-header { margin-bottom: 1.8rem; }
    .ev-meta-row { margin-top: 1.4rem; gap: 1.2rem; }

    /* ── DUO: single column on mobile ── */
    .ev-gallery-duo {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .ev-img-primary {
        aspect-ratio: 16 / 10;
        max-height: none;
    }
    .ev-img-secondary {
        aspect-ratio: 16 / 10;
        max-height: none;
        margin-top: 0; /* remove desktop stagger */
    }

    /* ── TRIO: single column on mobile ── */
    .ev-gallery-trio {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .ev-trio-featured {
        aspect-ratio: 16 / 10;
        max-height: none;
    }
    .ev-trio-pair {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    .ev-trio-support {
        aspect-ratio: 1 / 1; /* square thumbnails on phone */
    }

    /* ── Quote ── */
    .ev-quote {
        margin-top: 1.6rem;
        max-width: 100%;
    }

    /* ── Nortona meta ── */
    .nortona-meta-footer { flex-direction: column; gap: 1.2rem; padding-top: 1.4rem; }
    .nortona-meta-item { padding: 0; }
    .nortona-meta-sep { display: none; }

    /* ── Closing ── */
    .acts-closing { padding: 3rem 0 2rem; }
    .acts-closing-ornament { margin-bottom: 2.2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONES  (≤ 400px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

    .site-wrapper { padding: 0.8rem 0.85rem 0; }

    .act-title { font-size: clamp(1.35rem, 7.5vw, 1.7rem); }

    /* Trio pair: stack vertically on very small screens */
    .ev-trio-pair {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
    .ev-trio-support {
        aspect-ratio: 16 / 9;
    }

    .acts-filter-btn { font-size: 0.75rem; padding: 0.42rem 0.9rem; }
    .association-name-nav { font-size: 1rem; }
    .nav-links a { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE LETTER-SPACING  (≤ 768px)
   Reduces excessive letter-spacing on small screens without
   changing desktop appearance, colors, layout, or design style.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Eyebrow labels (section headers) */
    .sec-eyebrow          { letter-spacing: 0.13em; }

    /* Activity category tag */
    .act-tag              { letter-spacing: 0.10em; }

    /* Image overlay badge */
    .act-img-badge        { letter-spacing: 0.09em; }

    /* Stamp sub-label */
    .stamp-sub            { letter-spacing: 0.03em; }

    /* Date note inside event badge */
    .ev-date-note         { letter-spacing: 0.08em; }

    /* Quote citation */
    .ev-quote-cite        { letter-spacing: 0.08em; }

    /* Nortona meta labels */
    .nortona-meta-label   { letter-spacing: 0.09em; }

    /* Closing section eyebrow */
    .acts-closing-eyebrow { letter-spacing: 0.13em; }
}