/* =========================================================================
   Curious Thinkers — per-block overrides and refinements
   Block-specific styles are appended here as each block is built.
   ========================================================================= */

/* ---- hero-slider-block ---- */
.hero-slider {
    background: var(--color-dark);
    color: var(--color-text-inverse);
    padding: 0;
    overflow: hidden;
    position: relative;
}
.hero-slider__swiper { position: relative; }

/* Slide is the canvas — image is full-bleed background, content overlays.
   Design height is 914px at 1920px wide (≈47.6%). Scale down on narrow screens. */
.hero-slider__slide {
    padding: 0;
    position: relative;
    min-height: 914px;
    overflow: hidden;
    background: var(--color-dark);
}
@media (max-width: 1400px) {
    .hero-slider__slide { min-height: 760px; }
}
@media (max-width: 1200px) {
    .hero-slider__slide { min-height: 680px; }
}
@media (max-width: 992px) {
    .hero-slider__slide { min-height: 600px; }
}
@media (max-width: 768px) {
    .hero-slider__slide { min-height: 480px; }
}

/* Full-bleed background image */
.hero-slider__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right; /* anchor brand visual to the right edge */
    display: block;
}
/* Video-backed hero slide — fills the same canvas as the image variant */
.hero-slider__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Dark gradient on the left for text contrast */
.hero-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(10, 10, 10, 0.85) 25%,
        rgba(10, 10, 10, 0.55) 45%,
        rgba(10, 10, 10, 0.15) 65%,
        rgba(10, 10, 10, 0) 80%
    );
    pointer-events: none;
}
@media (max-width: 768px) {
    .hero-slider__overlay {
        background: linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.85) 0%,
            rgba(10, 10, 10, 0.55) 50%,
            rgba(10, 10, 10, 0.85) 100%
        );
    }
}

/* Content sits above background + overlay. Match slide height so vertical
   centring works at every breakpoint. */
.hero-slider__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 914px;
    padding-top: 80px;
    padding-bottom: 80px;
}
@media (max-width: 1400px) {
    .hero-slider__inner { min-height: 760px; }
}
@media (max-width: 1200px) {
    .hero-slider__inner { min-height: 680px; }
}
@media (max-width: 992px) {
    .hero-slider__inner {
        min-height: 600px;
        padding-top: 56px;
        padding-bottom: 56px;
    }
}
@media (max-width: 768px) {
    .hero-slider__inner { min-height: 480px; }
}

.hero-slider__content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.hero-slider__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}
.hero-slider__title {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.05;
    font-weight: var(--font-weight-heavy);
    letter-spacing: -0.015em;
    text-transform: uppercase;
}
.hero-slider__body {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 480px;
}
.hero-slider__body p:last-child { margin-bottom: 0; }
.hero-slider__cta { align-self: flex-start; margin-top: 8px; }

/* Swiper overrides */
.hero-slider .swiper-pagination {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
}
.hero-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
    transition: background var(--transition), width var(--transition);
}
.hero-slider .swiper-pagination-bullet-active {
    background: var(--color-accent);
    width: 28px;
    border-radius: 5px;
}
.hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
    z-index: 5;
    cursor: pointer;
    transition: background var(--transition);
}
.hero-slider__nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.hero-slider__nav--prev { left: 24px; }
.hero-slider__nav--next { right: 24px; }
.hero-slider__nav::after {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
}
@media (max-width: 768px) {
    .hero-slider__nav { display: none; }
}

.hero-slider--empty {
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    text-align: center;
    padding: 80px 0;
    border: 2px dashed var(--color-border);
}

/* ---- about-block ---- */
.about-block {
    background: transparent;
    position: relative;
    z-index: 5;
}

/* Overlap variant — pulls the card up into the previous section (hero).
   Design spec: 132px overlap. Hero title/body/CTA must remain visible above. */
.about-block--overlap {
    margin-top: -130px;
    padding-top: 0;
}
@media (max-width: 1200px) {
    .about-block--overlap { margin-top: -100px; }
}
@media (max-width: 992px) {
    .about-block--overlap { margin-top: -80px; }
}
@media (max-width: 600px) {
    .about-block--overlap { margin-top: -50px; }
}

.about-block__card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.about-block--has-accent .about-block__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background: #e67425;
    z-index: 2;
    pointer-events: none;
}
.about-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 56px 64px;
}
.about-block--media-left .about-block__inner {
    grid-template-areas: "media content";
}
.about-block--media-left .about-block__media   { grid-area: media; }
.about-block--media-left .about-block__content { grid-area: content; }
@media (max-width: 768px) {
    .about-block__inner {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 32px;
        padding: 40px 32px;
    }
    .about-block--media-left .about-block__inner,
    .about-block--media-right .about-block__inner { grid-template-areas: none; }
}

.about-block__content { display: flex; flex-direction: column; gap: 20px; }
.about-block__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 2rem); /* 26-32px — Cuscal type scale */
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-dark);
}
.about-block__body {
    font-size: 16px;
    line-height: 1.55;
    color: #1A202C; /* matches Figma token */
}
.about-block__body p { margin: 0 0 1em; }
.about-block__body p:last-child { margin-bottom: 0; }
.about-block__body a {
    color: var(--color-accent);
    text-decoration: none; /* Sam 10/6/26: orange + bold body links, no underline */
    transition: color var(--transition);
}
.about-block__body a:hover { color: var(--color-accent-hover); }

.about-block__media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}
.about-block__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-block__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    pointer-events: none;
}
.about-block__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), color var(--transition);
    z-index: 2;
}
.about-block__play svg {
    width: 28px; height: 28px;
    margin-left: 4px; /* visual centring of play triangle */
}
.about-block__play:hover,
.about-block__play:focus-visible {
    background: var(--color-accent);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}
.about-block__media-frame iframe,
.about-block__media-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- posts-grid-block ---- */
.posts-grid { background: transparent; }
.posts-grid__header {
    margin: 0 0 40px;
}
.posts-grid__title {
    margin: 0;
    font-family: var(--font-display);
    /* Client feedback (4 Jun 2026): "H2: Too large" — stepped down from 32px
       (Cuscal H2) to 22px (Cuscal H3) so the posts-grid section heading
       reads more like a column heading than a top-of-page title. */
    font-size: clamp(1.25rem, 2.5vw, 1.375rem); /* up to 22px (H3 step) */
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--color-dark);
}

/* Anchor targets for deep-links from the Home "View all" buttons
   (feedback #8/#9) — scroll-margin keeps the section heading clear of the
   top edge after the jump. */
.posts-grid__anchor {
    display: block;
    scroll-margin-top: 32px;
}

.posts-grid__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Kay feedback #17 (matches Figma): 50px between rows, 32px between columns */
    gap: 50px 32px;
}
.posts-grid--cols-3 .posts-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.posts-grid--cols-2 .posts-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1200px) {
    .posts-grid__grid,
    .posts-grid--cols-3 .posts-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .posts-grid__grid,
    .posts-grid--cols-3 .posts-grid__grid,
    .posts-grid--cols-2 .posts-grid__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Card layout — height: 100% on each card + flex-grow on text wrapper
   means every card in the row matches the tallest card's height, and the
   CTA button sits flush at the bottom of every card. */
.posts-grid__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    min-width: 0;
    height: 100%;
}
.posts-grid__card-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex: 1; /* pushes the CTA to the bottom for equal-height rows */
}
.posts-grid__tag {
    font-size: 14px;
    line-height: 1.4;
    font-weight: var(--font-weight-bold);
    /* Lou feedback #7: tag colour #E67425 — that hex IS --color-accent
       (Cuscal Orange), so use the variable to stay on brand-token. Applies
       everywhere the card tag renders (home grids + articles-videos hub). */
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Card titles: one notch below H4 (18px) per Sam's "H4: Too large" review
   note — card titles should feel tighter than article-body H4. Max 3 lines,
   uniform height across the row. Line-clamp keeps long titles tidy;
   min-height reserves space for shorter titles so the excerpt + CTA line up. */
.posts-grid__card-title {
    margin: 0;
    font-size: 18px;          /* 18px — one step under the 20px H4 */
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* max 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Sam 25/6/26: removed `min-height: calc(1.3em * 3)` — when all titles
       in a row are 1 line, the reserved 3-line height left a big visual gap
       between title and excerpt. The excerpt's min-height below keeps the
       images + CTAs aligned across the row even with uneven title heights. */
}
.posts-grid__card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.posts-grid__card-title a:hover { color: var(--color-accent); }
.posts-grid__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* max 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.5em * 3); /* reserve 3 lines so rows align */
}
.posts-grid__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.posts-grid__meta-item {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-bg-light);
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
}

.posts-grid__media {
    display: block;
    width: 100%;
    aspect-ratio: 304 / 335;       /* ~square — for editor-uploaded card_thumbnail (1200x1200) */
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-bg-light);
}
.posts-grid__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.posts-grid__image--placeholder {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%) 0 0,
        linear-gradient(225deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%) 0 0,
        var(--color-bg-light);
    background-size: 24px 24px;
}

.posts-grid__card-cta {
    padding: 16px 28px;
    min-height: 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.posts-grid__footer {
    margin-top: 58px;
    display: flex;
}
.posts-grid__view-all {
    padding: 16px 28px;
    min-height: 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
}
.posts-grid__empty {
    color: var(--color-text-muted);
    font-size: 16px;
    margin: 0;
}

/* Filter chips + Reset + View more */
.posts-grid__filters {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 40px;
    flex-wrap: wrap;
}
.posts-grid__filters-label {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.posts-grid__filter-chips {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
/* Filter chips: Cuscal orange outline + text by default; filled when active */
.posts-grid__chip {
    padding: 8px 20px;
    min-height: 0;
    background: #fff;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.posts-grid__chip:hover {
    background: rgba(230, 116, 37, 0.08);
    border-color: var(--color-accent-hover);
}
.posts-grid__chip.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.posts-grid__reset {
    background: transparent;
    border: 0;
    padding: 8px 4px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.posts-grid__reset:hover { color: var(--color-accent); }

.posts-grid__footer--load-more {
    margin-top: 64px;
    justify-content: center;
}
/* View more (load-more) button: Cuscal orange text + arrow */
.posts-grid__view-more {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: transparent;
    border: 0;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: color var(--transition);
}
.posts-grid__view-more:hover { color: var(--color-accent-hover); }
.posts-grid__view-more svg { color: var(--color-accent); }
.posts-grid__view-more[disabled] { opacity: 0.5; cursor: wait; }
.posts-grid__view-more svg { display: block; }

/* ---- content-hub layout (wide body, no narrow constraint) ---- */
.content-hub__body { padding: 80px 0 120px; background: #fff; }
.content-hub__body .posts-grid { padding: 0; }
.content-hub__body .posts-grid + .posts-grid { padding-top: 80px; }

/* ============================================================
   ===  EVENT SINGLE  =========================================
   ============================================================ */
.event-single { background: #fff; }

/* Hero chips + CTA */
.event-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.event-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-inverse);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.event-hero__chip svg { display: block; }
.event-hero__cta {
    align-self: flex-start;
    margin-top: 24px;
    padding: 14px 32px;
    min-height: 0;
    font-size: 16px;
    border-radius: 8px;
}

/* Section primitives shared across event sections */
.event-section__header {
    margin: 0 0 32px;
    max-width: 880px;
}
.event-section__title-plain {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.2;
}
.event-section__title { margin: 0; line-height: 1; }
.event-section__pill {
    display: inline-block;
    padding: 8px 20px;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-radius: 999px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Agenda (matches Figma: curtain bg, white panel, orange header) ---- */
.event-agenda {
    position: relative;
    padding: 96px 0;
    background: var(--color-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}
/* Curtain background image — full-bleed, anchored right */
.event-agenda__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center right;
    opacity: 0.95;
}
/* Dark fade so orange pill + Download PDF + day headings stay readable */
.event-agenda--has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(10,10,10,0.96) 0%,
        rgba(10,10,10,0.88) 40%,
        rgba(10,10,10,0.65) 70%,
        rgba(10,10,10,0.3) 100%);
    pointer-events: none;
}
.event-agenda__container {
    position: relative;
    z-index: 2;
}
.event-agenda__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    max-width: none;
    margin-bottom: 32px;
}
/* Plain "Agenda" heading — white text on dark agenda bg */
.event-agenda__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 2rem); /* H2 32 max */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.event-agenda__pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    background: var(--color-accent);
    color: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background var(--transition);
}
.event-agenda__pdf:hover { background: var(--color-accent-hover); color: #fff; }
.event-agenda__pdf svg { flex-shrink: 0; }

/* White panel wraps the day tables — centered, wider to match Figma */
.event-agenda__panel {
    background: #fff;
    color: var(--color-text);
    border-radius: 12px;
    padding: 48px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .event-agenda__panel { padding: 24px; max-width: none; }
}
/* Agenda header (pill + Download PDF) also centered to align with the panel */
.event-agenda__header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.event-agenda__day { margin-bottom: 40px; }
.event-agenda__day:last-child { margin-bottom: 0; }
.event-agenda__day-heading {
    margin: 0 0 14px;
    font-size: 1.25rem; /* 20px — H4 */
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
}
.event-agenda__table-wrap {
    overflow-x: auto;
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0.06);
}
.event-agenda__table-wrap::-webkit-scrollbar { height: 6px; }
.event-agenda__table-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); border-radius: 3px; }
.event-agenda__table-wrap::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }
/* Mobile fade hint — only when the wrap actually scrolls (≤768px is when
   the 6-col table starts blowing past the viewport). Pseudo-element on
   the day card so the fade stays anchored to the visible right edge as
   the user swipes the inner wrap. */
@media (max-width: 768px) {
    .event-agenda__day { position: relative; }
    .event-agenda__day::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 28px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
        pointer-events: none;
        z-index: 2;
    }
    .event-agenda__table { min-width: 560px; }
}
.event-agenda__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    color: var(--color-text);
}
/* Orange header row — Cuscal accent. Cells share orange borders. */
.event-agenda__table thead {
    background: var(--color-accent);
    color: #fff;
}
.event-agenda__table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: #fff;
    border: 1px solid var(--color-accent);
    white-space: nowrap;
}
.event-agenda__table tbody tr { background: #ffffff; }
.event-agenda__table tbody tr:nth-child(even) { background: #fdf2e9; } /* faint peach tint */
.event-agenda__table td {
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.45;
    vertical-align: top;
    color: var(--color-dark);
    border: 1px solid var(--color-accent); /* orange grid lines */
}
.event-agenda__table td:first-child {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* ---- Speakers grid ---- */
.event-speakers { padding: 100px 0; background: #fff; }
.event-speakers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 1200px) { .event-speakers__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .event-speakers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .event-speakers__grid { grid-template-columns: 1fr; } }
/* Speakers card — name+title at TOP, photo in MIDDLE, bio+Read bio at BOTTOM
   (matches Figma — was previously all-text-at-top with face cut off) */
.event-speakers__card {
    position: relative;
    display: block;
    background: var(--color-dark);
    color: var(--color-text-inverse);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.event-speakers__photo { position: absolute; inset: 0; z-index: 0; }
.event-speakers__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%; /* keep face visible in upper-middle */
    display: block;
    opacity: 0.95;
}

/* Top text panel: name + title — sits on a downward dark gradient */
.event-speakers__head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px 20px 32px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-speakers__name {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2);
}
.event-speakers__role {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3); /* reserve 3 lines so cards align */
}

/* Bottom panel: bio + Read bio — sits on an upward dark gradient */
.event-speakers__foot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 32px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 50%, rgba(0,0,0,0.6) 85%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.event-speakers__bio {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.5em * 2); /* reserve 2 lines so cards align */
}
.event-speakers__more {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    align-self: flex-start;
    transition: color var(--transition);
}
.event-speakers__more:hover { color: var(--color-accent-hover); }

/* =========================================================================
   Speaker Bio dialog — clean reference-style layout
   Desktop: square photo on the left, name + role + bio on the right,
   "Close" text link in the top-right corner.
   Mobile (<700px): full-screen sheet, photo on top.
   ========================================================================= */
.speaker-bio {
    width: min(820px, 92vw);
    /* Height sizes to content. 90vh cap is a safety net for very long bios —
       in that case the text panel inside becomes scrollable. */
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: speakerBioIn 200ms ease-out;
}
@keyframes speakerBioIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.speaker-bio::backdrop {
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* "Close" text link, top-right of the dialog */
.speaker-bio__close {
    position: absolute;
    top: 20px;
    right: 24px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    color: var(--color-accent);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: color var(--transition);
}
.speaker-bio__close:hover { color: var(--color-accent-hover); text-decoration: underline; }

.speaker-bio__inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    /* Kay feedback #30a: cap the grid at the dialog's own max-height so a
       long bio CONSTRAINS the text column — that's what lets its
       overflow-y:auto actually engage. Without this cap the grid grew past
       90vh and the dialog's overflow:hidden clipped the copy with no way
       to scroll on short desktop screens. */
    max-height: 90vh;
}
.speaker-bio__photo {
    position: relative;
    background: #e8e6e2; /* warm light grey — matches reference photo background */
    overflow: hidden;
    /* Sensible minimum so the photo doesn't get squashed when the bio is one
       sentence — the text column will still drive height if it's larger. */
    min-height: 340px;
}
.speaker-bio__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    display: block;
    position: absolute;
    inset: 0;
}

.speaker-bio__text {
    padding: 28px 32px 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Cap the column DIRECTLY: max-height on the grid container doesn't
       shrink its row track (tracks size to content), so the reliable way to
       make a long bio scroll is capping the text column itself at the same
       90vh as the dialog. min-height:0 lets it shrink; touch + overscroll
       props keep the inner scroll smooth on iOS and stop it chaining to the
       page behind. The mobile media query overrides with its own layout. */
    max-height: 90vh;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.speaker-bio__name {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.2;
    /* Leave room so the title doesn't run under the "Close" link */
    padding-right: 72px;
}
.speaker-bio__role {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--color-dark);
    font-weight: var(--font-weight-bold);
    /* No orange, no caps — bold dark like the reference */
}
.speaker-bio__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
}
.speaker-bio__body p { margin: 0 0 1em; }
.speaker-bio__body p:last-child { margin-bottom: 0; }
.speaker-bio__body a {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    text-decoration: none; /* Sam 10/6/26: orange + bold body links, no underline */
}

/* Mobile: full-screen sheet, photo on top.
   Kay feedback #30b: 100vh on iOS includes the URL-bar zone, hiding the
   bottom of the bio behind Safari's chrome — 100dvh (dynamic viewport)
   tracks the real visible height; the 100vh lines stay as fallback for
   older browsers. minmax(0,1fr) lets the text row shrink below its content
   so its inner scrolling engages instead of the whole sheet overflowing. */
@media (max-width: 700px) {
    .speaker-bio {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .speaker-bio__inner {
        grid-template-columns: 1fr;
        grid-template-rows: 260px minmax(0, 1fr);
        height: 100%;
        max-height: none;
    }
    .speaker-bio__photo { height: 260px; min-height: 0; }
    /* Mobile: the sheet has a definite height (100dvh) so the minmax(0,1fr)
       row constrains the text — the desktop 90vh cap must not interfere. */
    .speaker-bio__text { padding: 24px 20px 40px; max-height: none; }
    .speaker-bio__name { padding-right: 84px; }
    /* Obvious exit affordance — solid white pill floating over the photo
       instead of the bare orange text that vanished against dark images. */
    .speaker-bio__close {
        top: 14px;
        right: 14px;
        padding: 10px 18px;
        background: #fff;
        color: var(--color-dark);
        border-radius: 999px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }
}

/* ---- Venues ---- */
.event-venues { padding: 100px 0; background: #fff; }
.event-venues__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 768px) { .event-venues__grid { grid-template-columns: 1fr; } }
.event-venues__card { display: flex; flex-direction: column; gap: 12px; }
.event-venues__day {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.event-venues__row {
    /* Compact horizontal card: text on left (60%), small landscape thumb on right (40%) */
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-light);
    min-height: 0;
}
@media (max-width: 600px) {
    .event-venues__row { grid-template-columns: 1fr; }
}
.event-venues__info {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.event-venues__name {
    margin: 0;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
}
.event-venues__address {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}
.event-venues__cta {
    align-self: flex-start;
    margin-top: 10px;
    padding: 10px 20px;
    min-height: 0;
    font-size: 14px;
    border-radius: 6px;
    text-transform: none; /* Kay feedback: "Get Directions", not GET DIRECTIONS */
}
.event-venues__media {
    /* Cap media to a compact landscape thumbnail so the card stays short */
    background: #000;
    height: 180px;
    overflow: hidden;
}
@media (max-width: 600px) {
    .event-venues__media { height: 200px; }
}
.event-venues__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%; /* upper-mid — keeps subject in frame for portrait photos */
    display: block;
}

/* ---- Gallery ---- */
.event-gallery { padding: 100px 0; background: var(--color-bg-light); }
.event-gallery__header { max-width: 720px; }
.event-gallery__intro { margin-top: 12px; color: var(--color-text); font-size: 16px; line-height: 1.6; }
.event-gallery__intro p { margin: 0 0 0.75em; }
.event-gallery__intro p:last-child { margin-bottom: 0; }
.event-gallery__img { object-position: 50% 40%; }
/* Gallery carousel (auto-rotating Swiper, peek pattern) */
.event-gallery__carousel {
    position: relative;
    margin-top: 32px;
    padding: 0;
    /* Clip to container — fractional slidesPerView creates the right-edge peek */
    overflow: hidden;
}
/* Soft fade on the right edge — makes the peeking 5th slide visually
   trail off into the section background, matching the Figma. */
.event-gallery__carousel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 140px;
    background: linear-gradient(to right, rgba(244,244,244,0) 0%, var(--color-bg-light) 75%, var(--color-bg-light) 100%);
    pointer-events: none;
    z-index: 4;
}
.event-gallery__item {
    height: auto !important; /* Swiper sets fixed height — let cards size to content */
}
.event-gallery__thumb {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    position: relative;
}
.event-gallery__thumb:hover .event-gallery__img,
.event-gallery__thumb:focus-visible .event-gallery__img {
    transform: scale(1.04);
}
.event-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 400ms ease;
}

/* Side navigation arrows — hidden by default, fade in on hover/focus */
.event-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    color: var(--color-dark);
    z-index: 6; /* above the right-edge fade */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 200ms ease, background var(--transition), color var(--transition);
}
.event-gallery__carousel:hover .event-gallery__nav,
.event-gallery__carousel:focus-within .event-gallery__nav { opacity: 1; }
.event-gallery__nav:hover { background: var(--color-accent); color: #fff; }
.event-gallery__nav--prev { left: 12px; }
.event-gallery__nav--next { right: 12px; }
.event-gallery__nav::after { font-size: 14px; font-weight: var(--font-weight-bold); }
.event-gallery__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }
/* Touch devices have no hover — keep arrows always visible at reduced opacity */
@media (hover: none) {
    .event-gallery__nav { opacity: 0.85; }
}
@media (max-width: 900px) {
    .event-gallery__nav { width: 38px; height: 38px; }
    .event-gallery__nav--prev { left: 8px; }
    .event-gallery__nav--next { right: 8px; }
}

/* "View all" footer below the carousel */
.event-gallery__footer {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}
.event-gallery__view-all {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    border-radius: 8px;
    min-width: 220px;
    justify-content: center;
    text-transform: none; /* Kay feedback: "View All", not VIEW ALL */
}

/* =========================================================================
   Gallery lightbox — full-screen dialog with Swiper carousel of ALL photos
   ========================================================================= */
.gallery-lightbox {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: rgba(10, 10, 10, 0.96);
    color: #fff;
    overflow: hidden;
}
.gallery-lightbox::backdrop {
    background: rgba(10, 10, 10, 0.95);
}
.gallery-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background var(--transition);
}
.gallery-lightbox__close:hover { background: var(--color-accent); }
.gallery-lightbox__swiper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.gallery-lightbox__slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 60px 70px;
    box-sizing: border-box;
}
.gallery-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}
.gallery-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    z-index: 5;
    cursor: pointer;
    transition: background var(--transition);
}
.gallery-lightbox__nav:hover { background: var(--color-accent); border-color: var(--color-accent); }
.gallery-lightbox__nav--prev { left: 24px; }
.gallery-lightbox__nav--next { right: 24px; }
.gallery-lightbox__nav::after { font-size: 20px; font-weight: var(--font-weight-bold); }
@media (max-width: 700px) {
    .gallery-lightbox__slide { padding: 80px 16px 60px; }
    .gallery-lightbox__nav { width: 40px; height: 40px; }
    .gallery-lightbox__nav--prev { left: 10px; }
    .gallery-lightbox__nav--next { right: 10px; }
    .gallery-lightbox__nav::after { font-size: 16px; }
}

/* ---- Proof points stats ---- */
.event-stats { padding: 80px 0; background: #fff; }
.event-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.event-stats__card {
    background: var(--color-dark);
    color: var(--color-text-inverse);
    padding: 56px 32px;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.event-stats__num {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-heavy);
    color: var(--color-text-inverse);
    line-height: 1;
}
.event-stats__label {
    font-size: 14px;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Testimonials slider (3 cards per view, design-matched) ---- */
.event-testimonials { padding: 100px 0; background: #fff; }
.event-testimonials__swiper { position: relative; padding-bottom: 64px; overflow: hidden; }
.event-testimonials__card {
    background: var(--color-bg-light);
    border-radius: 10px;
    padding: 28px;
    height: auto;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.event-testimonials__head { display: flex; align-items: center; gap: 16px; margin-bottom: 0; }
.event-testimonials__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-dark);
    color: #fff;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.event-testimonials__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.event-testimonials__monogram { line-height: 1; }
.event-testimonials__person { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.event-testimonials__name { font-size: 18px; font-weight: var(--font-weight-bold); color: var(--color-dark); line-height: 1.3; }
.event-testimonials__role { font-size: 14px; color: var(--color-text-muted); line-height: 1.4; }
.event-testimonials__quote {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    font-style: italic;
}
.event-testimonials__quote p { margin: 0 0 0.6em; }
.event-testimonials__quote p:last-child { margin-bottom: 0; }
/* Add typographic quote marks around the testimonial */
.event-testimonials__quote p:first-child::before { content: "\201C"; }
.event-testimonials__quote p:last-child::after   { content: "\201D"; }

/* Pagination dots — orange active pill + larger grey circles, left-aligned.
   The container spans the FULL carousel width (left:0; right:0) at Swiper's
   default z-index 10, which sits above the nav arrows (z-index 6) and was
   swallowing their clicks — the arrows looked dead. pointer-events:none on
   the strip lets clicks fall through to the arrows; bullets re-enable their
   own hits so dot navigation still works. */
.event-testimonials .swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    padding-left: 4px;
    pointer-events: none;
}
.event-testimonials .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.18);
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 8px 0 0 !important;
    transition: background var(--transition), width var(--transition);
    pointer-events: auto;
}
.event-testimonials .swiper-pagination-bullet-active {
    background: var(--color-accent);
    width: 36px;
    border-radius: 6px;
}

/* Side arrows — orange, always visible, bottom-right alongside pagination
   (matches Cuscal design 4 Jun 2026). Bigger + heavier than Swiper defaults
   so they read clearly on the page. Disabled state dims rather than hides
   so visitors can see they're at start/end of the deck. */
.event-testimonials__nav {
    position: absolute;
    top: auto;
    bottom: -12px;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--color-accent);
    opacity: 1;
    transform: none;
    z-index: 6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), opacity var(--transition), transform var(--transition);
}
.event-testimonials__nav:hover {
    background: transparent;
    color: var(--color-accent-hover);
    transform: translateX(2px);
}
.event-testimonials__nav--prev:hover { transform: translateX(-2px); }
.event-testimonials__nav--prev { left: auto; right: 64px; }
.event-testimonials__nav--next { right: 8px; }
/* Replace Swiper's default chevron font character with real arrow SVGs
   (left/right). Mask painted with currentColor so it inherits the nav
   button's color rule above and follows hover / disabled transitions. */
.event-testimonials__nav::after {
    content: "";
    display: block;
    width: 36px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    font-size: 0; /* in case Swiper text content sneaks through */
}
.event-testimonials__nav--prev::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M35 11H1m11-10L1 11l11 10'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M35 11H1m11-10L1 11l11 10'/></svg>");
}
.event-testimonials__nav--next::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M1 11h34m-11-10 11 10-11 10'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M1 11h34m-11-10 11 10-11 10'/></svg>");
}
/* Disabled state = neutral grey arrow (not just a dimmed orange).
   Matches the client design where the left arrow at slide 1 appears as a
   clean grey while the right arrow stays vivid orange. */
.event-testimonials__nav.swiper-button-disabled {
    color: #c4c4c4;
    opacity: 1;
    pointer-events: none;
}

/* ---- Event Content Hub feature ----
   Dark curtain bg, white text. LEFT column = title + desc + 3 latest article
   thumbs + CTA. RIGHT column = big featured banner (latest article). All
   thumbs/featured are clickable links to their article. */
.event-content-hub {
    position: relative;
    padding: 100px 0;
    background: var(--color-dark);
    color: var(--color-text-inverse);
    overflow: hidden;
}
.event-content-hub__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.95;
}
/* Dark fade so left-column text stays readable on the curtain image */
.event-content-hub--has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(10,10,10,0.92) 0%,
        rgba(10,10,10,0.78) 40%,
        rgba(10,10,10,0.45) 70%,
        rgba(10,10,10,0.2)  100%);
    pointer-events: none;
}
.event-content-hub__container {
    position: relative;
    z-index: 2;
}
.event-content-hub__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 900px) {
    .event-content-hub__grid { grid-template-columns: 1fr; gap: 32px; }
}

.event-content-hub__lead { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.event-content-hub__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    color: var(--color-text-inverse);
}
.event-content-hub__desc {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 540px;
}
.event-content-hub__desc p { margin: 0 0 1em; }
.event-content-hub__desc p:last-child { margin-bottom: 0; }

/* 3 small clickable thumbnails — latest articles 2, 3, 4 */
.event-content-hub__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 580px;
    margin: 4px 0 8px;
}
@media (max-width: 600px) {
    .event-content-hub__thumbs { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
.event-content-hub__thumb {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.08);
    transition: transform var(--transition);
}
.event-content-hub__thumb:hover { transform: translateY(-3px); }
.event-content-hub__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.event-content-hub__thumb-img--empty {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.event-content-hub__cta {
    padding: 14px 28px;
    min-height: 0;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    border-radius: 8px;
    margin-top: 8px;
}

/* Big featured banner — latest article */
.event-content-hub__featured {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.event-content-hub__featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.event-content-hub__featured:hover .event-content-hub__featured-img { transform: scale(1.03); }
.event-content-hub__featured-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 32px 28px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- FAQs accordion ---- */
.event-faqs { padding: 100px 0; background: var(--color-bg-light); }
.event-faqs__list { display: flex; flex-direction: column; gap: 12px; }
.event-faqs__item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}
.event-faqs__question {
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-dark);
}
.event-faqs__question::-webkit-details-marker { display: none; }
.event-faqs__chevron {
    flex-shrink: 0;
    transition: transform 200ms ease, color 200ms ease;
    color: var(--color-accent);
}
.event-faqs__item[open] .event-faqs__chevron { transform: rotate(180deg); color: var(--color-accent-hover); }
.event-faqs__answer {
    padding: 0 24px 24px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
}
.event-faqs__answer p { margin: 0 0 1em; }
.event-faqs__answer p:last-child { margin-bottom: 0; }

/* ---- featured-cta-block ---- */
.featured-cta {
    position: relative;
    min-height: 843px;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    background: var(--color-dark);
}
@media (max-width: 1200px) { .featured-cta { min-height: 680px; } }
@media (max-width: 992px)  { .featured-cta { min-height: 560px; } }
@media (max-width: 768px)  { .featured-cta { min-height: 480px; padding: 56px 0; } }

.featured-cta__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.featured-cta__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Feedback #12 (Figma 2169-741): the banner artwork is near-black on its
       left half with the vivid gradient bottom-right — anchor the crop there
       so the colour shows behind/right of the glass panel like the design,
       instead of centring on the dark zone (which read as a black section). */
    object-position: right bottom;
    display: block;
}

.featured-cta__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Panel — glass effect by default */
.featured-cta__panel {
    position: relative;
    border-radius: 10px;
    padding: 64px;
    max-width: 1312px;
}
.featured-cta--panel-center .featured-cta__panel { margin: 0 auto; }
.featured-cta--panel-left   .featured-cta__panel { margin: 0 auto 0 0; max-width: 760px; }
.featured-cta--panel-right  .featured-cta__panel { margin: 0 0 0 auto; max-width: 760px; }

@media (max-width: 768px) {
    .featured-cta__panel { padding: 32px; }
}

.featured-cta--glass .featured-cta__panel {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--color-dark);
}
.featured-cta--solid .featured-cta__panel {
    background: #fff;
    color: var(--color-dark);
}
.featured-cta--dark .featured-cta__panel {
    background: rgba(10, 10, 10, 0.78);
    color: var(--color-text-inverse);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Content alignment inside the panel */
.featured-cta__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 612px;
}
.featured-cta--align-center .featured-cta__content { margin: 0 auto; text-align: center; align-items: center; }
.featured-cta--align-right  .featured-cta__content { margin-left: auto; text-align: right; align-items: flex-end; }

.featured-cta__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.75rem); /* 60px max */
    line-height: 1.15;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.005em;
    color: inherit;
}
.featured-cta__body {
    font-size: 16px;
    line-height: 1.6;
    color: inherit;
}
.featured-cta__body p { margin: 0 0 1em; }
.featured-cta__body p:last-child { margin-bottom: 0; }
.featured-cta__cta {
    align-self: flex-start;
    padding: 11px 28px;
    min-height: 0;
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    text-transform: none;
    letter-spacing: 0;
    border-radius: 5px;
    line-height: 32px;
    min-width: 224px;
    justify-content: center;
}
.featured-cta--align-center .featured-cta__cta { align-self: center; }
.featured-cta--align-right  .featured-cta__cta { align-self: flex-end; }

/* ---- page-header (shared by archives + singles) ---- */
.page-header {
    padding: 96px 0 64px;
    color: var(--color-text-inverse);
    background: var(--color-dark);
}
.page-header--dark { background: var(--color-dark); color: var(--color-text-inverse); }
.page-header--light { background: var(--color-bg-light); color: var(--color-dark); }
.page-header__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 880px;
}
.page-header__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.page-header__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: inherit;
}
.page-header__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: inherit;
    opacity: 0.85;
}
@media (max-width: 768px) {
    .page-header { padding: 64px 0 40px; }
}

/* ---- archive-grid ---- */
.archive-grid { padding: 80px 0 96px; background: #fff; }
.archive-grid__inner { display: flex; flex-direction: column; gap: 56px; }
.archive-grid__empty {
    font-size: 16px;
    color: var(--color-text-muted);
    margin: 0;
}
.archive-grid__pagination { display: flex; justify-content: center; }
.archive-grid__pagination ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.archive-grid__pagination a,
.archive-grid__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    color: var(--color-dark);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.archive-grid__pagination a:hover {
    background: var(--color-dark);
    color: var(--color-text-inverse);
    border-color: var(--color-dark);
}
.archive-grid__pagination .current {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}

/* ---- single-post ---- */
.single-post { background: #fff; }
.single-post__back {
    display: inline-block;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 8px;
    transition: color var(--transition);
}
.single-post__back:hover { color: var(--color-accent); }
.single-post__meta {
    margin-top: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.single-post__hero { padding: 0; background: #fff; }
.single-post__hero-inner { padding-top: 0; padding-bottom: 0; }
.single-post__hero-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: -64px; /* lifts the image up into the dark header */
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
    .single-post__hero-image { margin-top: -32px; }
}

.single-post__body {
    padding: 64px 0 96px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}
.single-post__body p { margin: 0 0 1.25em; }
.single-post__body h2 {
    margin: 1.6em 0 0.6em;
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}
.single-post__body h3 {
    margin: 1.4em 0 0.5em;
    font-size: clamp(1.25rem, 2.5vw, 1.375rem);
    font-weight: var(--font-weight-bold);
}
.single-post__body a {
    color: var(--color-accent);
    text-decoration: none; /* Sam 10/6/26: orange + bold body links, no underline */
}
.single-post__body a:hover { color: var(--color-accent-hover); }
.single-post__body blockquote {
    margin: 1.5em 0;
    padding: 24px 32px;
    border-left: 4px solid var(--color-accent);
    background: var(--color-bg-light);
    font-style: italic;
}
.single-post__body img { border-radius: 10px; height: auto; }

.single-post__related {
    padding: 80px 0 120px;
    background: var(--color-bg-light);
}
.single-post__related .posts-grid__title { font-size: clamp(1.75rem, 3vw, 2.25rem); }

/* ---- video-single ---- */
.video-single { background: #fff; }

/* Hero matches the home page hero height (914px design spec) so visitors
   feel they're still in the same brand world when they click through to
   About / a single article / a single video. */
.page-hero {
    position: relative;
    overflow: hidden;
    min-height: 914px;
    padding: 96px 0;
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center right;
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
}
@media (max-width: 1400px) { .page-hero { min-height: 760px; } }
@media (max-width: 1200px) { .page-hero { min-height: 680px; padding: 80px 0; } }
@media (max-width: 992px)  { .page-hero { min-height: 600px; padding: 72px 0; } }
@media (max-width: 768px)  { .page-hero { min-height: 480px; padding: 56px 0; } }

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0.75) 30%,
        rgba(10, 10, 10, 0.3) 60%,
        rgba(10, 10, 10, 0) 90%
    );
    pointer-events: none;
}
@media (max-width: 768px) {
    .page-hero__overlay {
        background: linear-gradient(to bottom,
            rgba(10,10,10,0.7) 0%,
            rgba(10,10,10,0.55) 100%);
    }
}

.page-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 880px;
    /* Left-aligned within the centred .container — matches design grid */
    margin-left: 0;
    margin-right: auto;
}

.page-hero__back {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 16px;
    margin-bottom: 16px;
    transition: color var(--transition);
}
.page-hero__back:hover { color: var(--color-accent); }

.page-hero__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.page-hero__title {
    margin: 0;
    font-family: var(--font-display);
    /* Sized to suit realistic video titles (3-15 words). */
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: var(--font-weight-heavy);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.page-hero__desc {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    max-width: 520px;
}

/* ---- video-content (the_content output) ---- */
.page-body {
    padding: 80px 0;
    background: #fff;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}
/* Body inner column: ~1100px wide, CENTRED within the .container so the
   reading area has equal whitespace on left + right.
   Per client feedback (4 Jun 2026): "equal space in left and right". The
   hero above is full-bleed background image so its asymmetry isn't
   visible; only the white body needed balancing. */
.page-body__inner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.page-body__inner > * { margin-bottom: 1.25em; }
.page-body__inner > *:last-child { margin-bottom: 0; }

.page-body h2 {
    margin: 1.4em 0 0.6em;
    font-size: clamp(1.625rem, 3vw, 2rem); /* up to 32px */
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
    margin: 1.3em 0 0.5em;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: var(--font-weight-bold);
}
.page-body p { margin: 0 0 1.25em; }
.page-body a {
    color: var(--color-accent);
    text-decoration: none; /* Sam 10/6/26: orange + bold body links, no underline */
}
.page-body a:hover { color: var(--color-accent-hover); }

.page-body blockquote {
    margin: 1.5em 0;
    padding: 24px 32px;
    border-left: 4px solid var(--color-accent);
    background: var(--color-bg-light);
    font-style: italic;
}

/* WP core Embed block — YouTube/Vimeo etc. */
.page-body .wp-block-embed,
.page-body figure.wp-block-embed,
.page-body .wp-block-video {
    margin: 32px 0;
}
/* WP core already provides aspect-ratio via a ::before pseudo on
   .wp-embed-aspect-* .wp-block-embed__wrapper — don't add padding-top
   here or it doubles the height. We only add the visual polish. */
.page-body .wp-block-embed__wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.page-body .wp-block-embed__wrapper iframe,
.page-body .wp-block-embed__wrapper video,
.page-body .wp-block-embed iframe,
.page-body .wp-block-video video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 16px;
    display: block;
}
.page-body .wp-block-video video {
    position: static;
    width: 100% !important;
    height: auto !important;
    border-radius: 16px;
    display: block;
}
.page-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* Gutenberg core blocks inside .page-body */
/* Lists — custom markers matching Cuscal design spec:
   • UL  → hollow orange square
   • OL  → bold orange numbers (no trailing dot)
   Native marker hidden; drawn with ::before so stroke/colour match Figma.
   `.editor-styles-wrapper` is the Gutenberg block-editor canvas root —
   adding it here mirrors the same orange markers inside the WP editor so
   editors see what visitors will see. add_editor_style() in functions.php
   already enqueues this stylesheet inside the editor iframe. */
.page-body ul,
.page-body ol,
.single-post__body ul,
.single-post__body ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    margin: 0 0 1.25em;
    padding-left: 0;
    list-style: none;
    counter-reset: cuscal-ol;
}
.page-body li,
.single-post__body li,
.editor-styles-wrapper li {
    position: relative;
    margin: 0 0 0.5em;
    padding-left: 32px;
    line-height: 1.7;
}
.page-body ul > li::before,
.single-post__body ul > li::before,
.editor-styles-wrapper ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--color-accent);
    border-radius: 1px;
    background: transparent;
}
.page-body ol > li,
.single-post__body ol > li,
.editor-styles-wrapper ol > li { counter-increment: cuscal-ol; }
.page-body ol > li::before,
.single-post__body ol > li::before,
.editor-styles-wrapper ol > li::before {
    content: counter(cuscal-ol);
    position: absolute;
    left: 0;
    top: 0;
    min-width: 22px;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    line-height: 1.7;
    text-align: left;
}
.page-body ol ol,
.single-post__body ol ol,
.editor-styles-wrapper ol ol { counter-reset: cuscal-ol; }

.page-body .wp-block-gallery {
    margin: 32px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.page-body .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.page-body .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
/* Gutenberg's "has-nested-images" gallery loads inline <style> AFTER our
   stylesheet and sets `width: calc(50% - gap/2)` on each figure, which
   doesn't expand into the grid cell we hand it. Use !important to win the
   source-order fight; this is the only place we use !important in this
   stylesheet and it's localised to the gallery child. */
.page-body .wp-block-gallery .wp-block-image,
.page-body .wp-block-gallery > figure.wp-block-image,
.page-body .wp-block-gallery.has-nested-images figure.wp-block-image,
.page-body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
}
.page-body .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    display: block;
}
@media (max-width: 600px) {
    .page-body .wp-block-gallery,
    .page-body .wp-block-gallery.columns-3,
    .page-body .wp-block-gallery.columns-4 { grid-template-columns: 1fr; gap: 16px; }
}

.page-body .wp-block-image {
    margin: 24px 0;
}
.page-body .wp-block-image img { border-radius: 10px; }

/* Two-images side-by-side — editors drop a core "Columns" block with 2
   columns and an Image in each. Equal-width, rounded, gentle gap; stacks
   under 768px. Also styles a 2-image core "Gallery" the same way. */
.page-body .wp-block-columns {
    display: flex;
    gap: 24px;
    margin: 32px 0;
    align-items: stretch;
}
.page-body .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.page-body .wp-block-column > .wp-block-image,
.page-body .wp-block-column > figure.wp-block-image {
    margin: 0;
    height: 100%;
}
.page-body .wp-block-column > .wp-block-image img,
.page-body .wp-block-column > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
@media (max-width: 768px) {
    .page-body .wp-block-columns { flex-direction: column; gap: 16px; }
}

.video-single__related,
.article-single__related {
    padding: 80px 0 120px;
    background: var(--color-bg-light);
}
.video-single__related .posts-grid__title,
.article-single__related .posts-grid__title { font-size: clamp(1.75rem, 3vw, 2.25rem); }

/* =========================================================================
   GLOBAL — body copy hyperlinks, lists, tables (Cuscal orange + bold)
   Applies to any rich-text content: page bodies, article bodies, video
   bodies, About Cuscal page, About Block body, Featured CTA body,
   testimonials, FAQ answers, agenda body cells, event content, etc.
   ========================================================================= */

/* Hyperlinks in body copy: Cuscal orange + bold.
   `.editor-styles-wrapper a` matches inline links inside the Gutenberg editor
   canvas so editors see the same orange + bold treatment they'd see live.
   We scope to <p> / <li> / <h*> ancestors so the editor's own UI chrome
   (block toolbar buttons rendered as anchors, etc.) isn't restyled — the
   editor canvas only contains content blocks under .editor-styles-wrapper,
   but being explicit guards against future Gutenberg internal changes. */
.page-body a,
.single-post__body a,
.about-block__body a,
.featured-cta__body a,
.event-faqs__answer a,
.event-testimonials__quote a,
.event-gallery__intro a,
.editor-styles-wrapper :is(p, li, h1, h2, h3, h4, h5, h6, td, th, figcaption) a {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    text-decoration: none; /* Sam 10/6/26: orange + bold body links, no underline */
}
.page-body a:hover,
.single-post__body a:hover,
.about-block__body a:hover,
.featured-cta__body a:hover,
.event-faqs__answer a:hover,
.event-testimonials__quote a:hover,
.event-gallery__intro a:hover,
.editor-styles-wrapper :is(p, li, h1, h2, h3, h4, h5, h6, td, th, figcaption) a:hover {
    color: var(--color-accent-hover);
}

/* Bullet + numbered list markers: Cuscal orange (native ::marker styling —
   complements the ::before approach above for browsers that respect it). */
.page-body ul li::marker,
.page-body ol li::marker,
.single-post__body ul li::marker,
.single-post__body ol li::marker,
.about-block__body ul li::marker,
.about-block__body ol li::marker,
.featured-cta__body ul li::marker,
.featured-cta__body ol li::marker,
.event-faqs__answer ul li::marker,
.event-faqs__answer ol li::marker,
.editor-styles-wrapper ul li::marker,
.editor-styles-wrapper ol li::marker {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

/* Tables in body copy — Cuscal design spec:
   • Solid orange header bar (white text)
   • Pale-grey body cells with thin orange grid lines
   • Header sits flush against the body — no rounding */
.page-body table,
.single-post__body table,
.editor-styles-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 16px;
    line-height: 1.5;
    background: #ffffff;
}
.page-body th,
.page-body td,
.single-post__body th,
.single-post__body td,
.editor-styles-wrapper th,
.editor-styles-wrapper td {
    padding: 12px 16px;
    border: 1px solid var(--color-accent);
    text-align: left;
    vertical-align: top;
}
.page-body td,
.single-post__body td,
.editor-styles-wrapper td { background: #f4f4f5; }
.page-body th,
.single-post__body th,
.editor-styles-wrapper th {
    background: var(--color-accent);
    color: #ffffff;
    font-weight: var(--font-weight-bold);
    border-color: var(--color-accent);
}
/* Lists inside tables shouldn't grow the cell — strip the wide marker padding */
.page-body table ul,
.page-body table ol,
.single-post__body table ul,
.single-post__body table ol,
.editor-styles-wrapper table ul,
.editor-styles-wrapper table ol { margin: 0; }
.page-body table li,
.single-post__body table li,
.editor-styles-wrapper table li { padding-left: 20px; }

/* Body-copy tables on mobile — wrap and swipe rather than letting cells
   collapse to unreadable widths. min-width keeps column structure usable;
   overflow-x lets the user swipe horizontally; visible thin orange
   scrollbar is the affordance that there's more content. */
@media (max-width: 768px) {
    .page-body figure.wp-block-table,
    .single-post__body figure.wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        scrollbar-width: thin;
        scrollbar-color: var(--color-accent) rgba(0, 0, 0, 0.06);
    }
    .page-body figure.wp-block-table::-webkit-scrollbar,
    .single-post__body figure.wp-block-table::-webkit-scrollbar { height: 6px; }
    .page-body figure.wp-block-table::-webkit-scrollbar-track,
    .single-post__body figure.wp-block-table::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); }
    .page-body figure.wp-block-table::-webkit-scrollbar-thumb,
    .single-post__body figure.wp-block-table::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }
    .page-body figure.wp-block-table table,
    .single-post__body figure.wp-block-table table { min-width: 600px; }
}

/* =========================================================================
   Static legal disclaimer — bottom of Article / Video singles
   Plain 14px grey copy with a hair-line separator above. Hardcoded via
   template-parts/post-disclaimer.php so legal wording stays consistent.
   ========================================================================= */
.page-body__notice {
    /* Sam 10/6/26: drop the thin grey divider line above the notice. Keep
       margin-top spacing so the box still sits cleanly below body copy. */
    margin-top: 56px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}
.page-body__notice p { margin: 0; }
.page-body__notice strong {
    color: #4b5563;
    font-weight: var(--font-weight-bold);
}

/* Legacy per-post ACF disclaimer styles — kept for backwards compat in
   case any other surface still renders .page-body__disclaimer. */
.page-body__disclaimer {
    margin-top: 56px;
    padding: 24px 28px;
    background: #F4F4F5;
    border-left: 3px solid #BDBDBD;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}
.page-body__disclaimer p { margin: 0 0 0.85em; }
.page-body__disclaimer p:last-child { margin-bottom: 0; }
.page-body__disclaimer strong { color: #333; font-weight: var(--font-weight-bold); }

/* =========================================================================
   TYPOGRAPHY — Cuscal 22 May DR meeting spec
   H1 60px / H2 32px / H3 22px / H4 20px / Body 16px
   Clamp keeps responsive scaling on small screens. These rules sit at the
   bottom of the file so they win against per-component overrides above.
   ========================================================================= */

/* Body copy baseline */
body,
.page-body,
.single-post__body,
.about-block__body,
.featured-cta__body,
.event-faqs__answer,
.event-testimonials__quote,
.event-gallery__intro,
.page-header__lead,
.event-content-hub__desc,
.posts-grid__excerpt {
    font-size: 16px;
}

/* H1 — hero / page header / featured CTA titles */
.hero-slider__title,
.page-header__title,
.page-hero__title,
.featured-cta__title {
    font-size: clamp(2.25rem, 5vw, 3.75rem); /* 36–60px */
    line-height: 1.1;
}

/* H2 — section titles across blocks and event sections */
.about-block__title,
.posts-grid__title,
.event-section__title-plain,
.event-content-hub__title,
.page-body h2,
.single-post__body h2,
.speaker-bio__name {
    font-size: clamp(1.625rem, 3vw, 2rem); /* 26–32px */
    line-height: 1.2;
}

/* H3 — sub-section titles, related-post titles */
.page-body h3,
.single-post__body h3,
.video-single__related .posts-grid__title,
.article-single__related .posts-grid__title,
.single-post__related .posts-grid__title {
    font-size: clamp(1.25rem, 2.5vw, 1.375rem); /* 20–22px */
    line-height: 1.3;
}

/* H4 — agenda day headings, smaller surfaces.
   NOTE: .posts-grid__card-title intentionally NOT included — Sam asked for
   card titles to drop one step below H4 (18px). See override above. */
.event-agenda__day-heading,
.page-body h4,
.single-post__body h4 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
}

/* =========================================================================
   Gallery from Folder BLOCK — scans wp-content/uploads/<path>/ and renders
   a grid. Reuses .gallery-lightbox dialog styles (defined further down).
   ========================================================================= */
.gallery-folder {
    padding: 64px 0;
    background: #fff;
}
.gallery-folder--empty {
    padding: 32px;
    background: #fdf2e9;
    border: 1px dashed var(--color-accent);
    color: var(--color-dark);
    border-radius: 8px;
    font-size: 14px;
}
.gallery-folder__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.gallery-folder__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.2;
}
.gallery-folder__count {
    margin: 0;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.gallery-folder__grid {
    display: grid;
    gap: 16px;
}
.gallery-folder__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-folder__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-folder__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .gallery-folder__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .gallery-folder__grid--cols-3,
    .gallery-folder__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
    .gallery-folder__grid { gap: 10px; }
}
@media (max-width: 480px) {
    .gallery-folder__grid--cols-2,
    .gallery-folder__grid--cols-3,
    .gallery-folder__grid--cols-4 { grid-template-columns: 1fr; }
}

.gallery-folder__thumb {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-bg-light);
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    position: relative;
}
.gallery-folder__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.gallery-folder__thumb:hover .gallery-folder__thumb-img,
.gallery-folder__thumb:focus-visible .gallery-folder__thumb-img {
    transform: scale(1.04);
}

/* =========================================================================
   Gallery PAGE — /gallery/ template (year-grouped masonry-style grid)
   Each year is its own H2 + grid. Click any thumb → opens the existing
   .gallery-lightbox dialog (CSS + JS already defined above).
   ========================================================================= */
.gallery-page {
    padding: 64px 0 96px;
    background: #fff;
}
.gallery-page__intro {
    margin: 0 auto 56px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}
.gallery-page__empty {
    margin: 0;
    padding: 64px 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 18px;
}

/* Year section — outline pattern: bold left-aligned heading + full-width
   hairline rule under it, generous whitespace before the grid. */
.gallery-page__year {
    padding: 56px 0 64px;
}
.gallery-page__year:first-of-type { padding-top: 16px; }

.gallery-page__year-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.gallery-page__year-title {
    margin: 0;
    font-family: var(--font-display);
    /* H2-scale to match the rest of the site (Cuscal 22 May type-scale) */
    font-size: clamp(1.625rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.gallery-page__year-count {
    margin: 0;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}
/* Breathing room between hairline and first row of thumbnails */
.gallery-page__year-header + .gallery-page__grid { margin-top: 24px; }

/* Photo grid ------------------------------------------------------------- */
.gallery-page__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1100px) { .gallery-page__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gallery-page__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.gallery-page__thumb {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-bg-light);
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    position: relative;
}
.gallery-page__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.gallery-page__thumb:hover .gallery-page__thumb-img,
.gallery-page__thumb:focus-visible .gallery-page__thumb-img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .gallery-page { padding: 40px 0 64px; }
    .gallery-page__year { padding: 32px 0; }
    .gallery-page__year-header { margin-bottom: 20px; }
}

/* =========================================================================
   MOBILE TIGHTENING — universal narrow-viewport adjustments
   Closes gaps where desktop-tuned padding feels excessive on phones.
   Sits AFTER per-component rules so it wins.
   ========================================================================= */

@media (max-width: 768px) {
    /* Section padding: every full-bleed event/page section gets a tighter
       vertical rhythm so content isn't pushed below the fold. */
    .event-speakers,
    .event-venues,
    .event-gallery,
    .event-stats,
    .event-testimonials,
    .event-faqs,
    .event-content-hub,
    .event-agenda,
    .archive-grid,
    .content-hub__body {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    /* Stats cards: less vertical air, still impactful */
    .event-stats__card { padding: 36px 20px; }

    /* Agenda header: pill + Download PDF button stack cleanly */
    .event-agenda__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .event-agenda__pdf { font-size: 13px; padding: 9px 14px; }

    /* FAQs: tighter padding + slightly smaller question font */
    .event-faqs__question { padding: 16px 18px; font-size: 15px; }
    .event-faqs__answer  { padding: 0 18px 20px; }

    /* Testimonials card padding */
    .event-testimonials__card { padding: 20px; }

    /* Venues media height shorter so card stays compact */
    .event-venues__media { height: 220px; }

    /* Hero CTA — easier tap target */
    .event-hero__cta { padding: 12px 24px; font-size: 15px; }

    /* Page body + single-post body — reduce vertical padding */
    .page-body { padding: 56px 0 72px; }
    .single-post__body { padding: 48px 0 72px; }

    /* Featured CTA panel padding */
    .featured-cta__panel { padding: 32px 24px; }

    /* Post pager: symmetric padding when stacked */
    .post-pager { padding-top: 24px; margin-top: 32px; }
}

@media (max-width: 480px) {
    /* Very narrow phones: drop section padding further. */
    .event-speakers,
    .event-venues,
    .event-gallery,
    .event-stats,
    .event-testimonials,
    .event-faqs,
    .event-content-hub,
    .event-agenda,
    .archive-grid,
    .content-hub__body {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .event-stats__card { padding: 28px 16px; }
    .event-content-hub__cta,
    .event-gallery__view-all { width: 100%; min-width: 0; }
    .post-pager { gap: 8px; }
    /* Speaker bio dialog already full-screen at <700 — kept ✓ */
    /* Gallery lightbox already adjusted at <700 — kept ✓ */
}

/* Content Hub filter row: on phones the 3-part row ("Filter by" label /
   chips / "Reset filters" link) crowds awkwardly — stack vertically so
   chips have the full row to wrap into and the label sits on top. */
@media (max-width: 600px) {
    .posts-grid__filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .posts-grid__filter-chips {
        gap: 8px;
        justify-content: flex-start;
    }
    .posts-grid__reset { align-self: flex-end; }
}

/* =========================================================================
   Post pager — Previous / Next nav on Article and Video singles
   Orange arrows + dark titles. Empty slot keeps the layout balanced when
   only one direction has a sibling post.
   ========================================================================= */
.post-pager {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.post-pager__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    text-decoration: none;
    color: var(--color-dark);
    transition: color var(--transition);
}
/* The global `.page-body a` rule (1 class + 1 element) outranks
   `.post-pager__link` on specificity and pulls in underline + orange +
   bold. Re-assert the pager's own look with a higher-specificity selector. */
.page-body .post-pager__link,
.page-body__inner .post-pager__link {
    text-decoration: none;
    color: var(--color-dark);
    font-weight: var(--font-weight-medium);
}
.page-body .post-pager__link:hover,
.page-body__inner .post-pager__link:hover {
    text-decoration: none;
    color: var(--color-accent);
}
.post-pager__link--empty { pointer-events: none; opacity: 0; }
.post-pager__link--next {
    justify-self: end;
    text-align: right;
}
.post-pager__link:hover { color: var(--color-accent); }
.post-pager__arrow {
    font-size: 28px;
    line-height: 1;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    transition: transform var(--transition);
}
.post-pager__link--prev:hover .post-pager__arrow { transform: translateX(-4px); }
.post-pager__link--next:hover .post-pager__arrow { transform: translateX(4px); }
.post-pager__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.post-pager__direction {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}
.post-pager__title {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-dark);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .post-pager { grid-template-columns: 1fr; gap: 12px; }
    .post-pager__link--next { justify-self: start; text-align: left; }
    .post-pager__link--next .post-pager__arrow { order: -1; }
}

/* =========================================================================
   LOGO BAR BLOCK
   Row of partner / client logos. Greyscale + 85% opacity by default, full
   colour + 100% on hover (only when the logo is a link). Responsive grid:
   auto-fit minmax 140px so it lays out cleanly with any number of logos.
   ========================================================================= */
.logo-bar {
    padding: 80px 0;
}
.logo-bar__header {
    text-align: center;
    margin: 0 0 48px;
}
.logo-bar__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 12px;
}
.logo-bar__heading {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 3vw, 2rem); /* H2 per Cuscal type scale */
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0;
    color: var(--color-dark);
}
.logo-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px;
    align-items: center;
    justify-items: center;
}
.logo-bar__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* defensive — override .page-body li padding if dropped inside body copy */
    margin: 0;
}
.logo-bar__item::before {
    content: none; /* kill the orange-square marker if inherited from body lists */
}
.logo-bar__link {
    display: block;
    line-height: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}
a.logo-bar__link:hover { transform: translateY(-2px); }
.logo-bar__img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.85;
    transition: filter 200ms ease, opacity 200ms ease;
}
a.logo-bar__link:hover .logo-bar__img {
    filter: grayscale(0);
    opacity: 1;
}
.logo-bar--empty {
    padding: 24px 28px;
    background: #fff7ed;
    border: 1px dashed var(--color-accent);
    border-radius: 6px;
    color: #6b7280;
    font-size: 14px;
}
@media (max-width: 768px) {
    .logo-bar { padding: 56px 0; }
    .logo-bar__header { margin-bottom: 32px; }
    .logo-bar__list { gap: 24px; }
    .logo-bar__img { max-height: 48px; }
}

/* =========================================================================
   FOOTER SOCIAL ICON — LinkedIn
   White rounded badge with black "in" letters inside. Required because the
   footer is on a dark background — a plain black "in" would be invisible.
   Per client feedback (4 June 2026): "the 'in' in the icon" should be black,
   icon links to linkedin.com/company/cuscal.
   ========================================================================= */
.site-footer__social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 12px;
}
.site-footer__social li {
    margin: 0;
    padding: 0;
}
/* The .site-footer__social a rule in style.css forces white (text-inverse) at
   specificity 0,2,1 — needs an equal-or-higher selector to override.
   `.site-footer__social a.site-footer__social-link` = 0,2,1 + later source. */
.site-footer__social a.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: #0a0a0a;          /* Cuscal dark — paints the SVG 'in' letters */
    text-decoration: none;
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
}
.site-footer__social a.site-footer__social-link:hover {
    transform: translateY(-2px);
    background: var(--color-accent);
    color: #ffffff;
}
.site-footer__social a.site-footer__social-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.site-footer__social a.site-footer__social-link svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* =========================================================================
   Gallery page — progressive disclosure
   Each year section shows first N thumbs by default; remaining thumbs are
   in DOM but hidden via .is-hidden. A "Show more" button (JS in custom.js)
   flips data-expanded on the year section, which reveals the hidden thumbs.
   Keeps initial render light when a single year has hundreds of photos.
   ========================================================================= */
.gallery-page__thumb.is-hidden { display: none; }
.gallery-page__year[data-expanded="true"] .gallery-page__thumb.is-hidden { display: block; }

.gallery-page__more {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}
.gallery-page__show-more {
    min-width: 220px;
}