/*
 * /provider-events/ — Physician Education Events.
 *
 * A tour-dates listing in the Airways design system. Everything here is
 * token-bound (--ad-*) and every @media rule sits on the canonical rail scale
 * (see tokens.css); no raw palette values, no new breakpoints.
 *
 * The page leans on service-template.css for the hero and the FAQ block, on
 * components/button.css for the .ad-locations__btn family, on
 * airway-pages-locations.css for the shared "About Our Events" band, on
 * airway-pages.css for the dual-audience card grid, and on doctor-carousel.css
 * for the roster. This bundle carries the listing itself plus a short block of
 * page-scoped glue for the cards — nothing shared is overridden.
 *
 * Layout notes worth keeping:
 * - The date column carries a hairline on its inline end. Repeated down the
 *   list those hairlines read as one continuous spine, which is what makes the
 *   rows scan as a schedule rather than as a stack of cards.
 * - Rows are separated by hairlines rather than boxed, so the only element with
 *   a filled background is the NEXT UP row. That contrast is the whole point of
 *   the treatment and it disappears the moment anything else gets a fill.
 * - Below 767px the grid drops to two columns: the date block keeps its place
 *   beside the copy (it is the row's identity) and the action moves to a full
 *   width row underneath.
 */

.ad-pe {
    background: var(--ad-surface-page);
    color: var(--ad-text-body);
    font-family: var(--ad-font-primary);
}

.ad-pe * {
    box-sizing: border-box;
}

.ad-pe__shell {
    width: var(--ad-service-shell);
    margin: 0 auto;
}

/* ------------------------------------------------------------------- hero */

/* No hero photograph on this page, so the two-column service hero collapses to
   a single measured column instead of being padded out with stock imagery. */
.ad-pe__hero-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.ad-pe__hero .ad-service-hero__content {
    max-width: 760px;
}

/* The shared .ad-service-hero__subheading already supplies the navy and the
   measure; the design sets this one a step larger and heavier (24px SemiBold at
   the desktop anchor), which is exactly --ad-fluid-h4. */
.ad-pe__hero .ad-pe__hero-subheading {
    font-size: var(--ad-fluid-h4);
    font-weight: var(--ad-font-weight-semibold);
}

/* Derived stat line ("3 upcoming dates · 3 offices · Next: Aug 17 in Sugar
   Land"). Teal dot separators are drawn with ::before so the string itself
   stays plain text for screen readers. */
.ad-pe__hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 28px 0 0;
    padding: 0;
    color: var(--ad-color-teal-active);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ad-pe__hero-meta-item {
    display: inline-flex;
    align-items: center;
}

.ad-pe__hero-meta-item + .ad-pe__hero-meta-item::before {
    content: "";
    width: 4px;
    height: 4px;
    margin-right: 16px;
    border-radius: var(--ad-radius-pill);
    background: var(--ad-color-teal);
}

/* ------------------------------------------------------------- list header */

.ad-pe__list-section {
    padding: 112px 0;
    background: var(--ad-surface-page);
}

.ad-pe__list-header {
    max-width: 720px;
    margin: 0 0 40px;
}

.ad-pe__list-overline {
    margin: 0 0 12px;
    color: var(--ad-color-teal-active);
    font-size: var(--ad-fluid-overline);
    font-weight: var(--ad-font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ad-pe__list-title {
    margin: 0;
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-h2);
    font-weight: var(--ad-font-weight-semibold);
    line-height: var(--ad-line-height-heading);
    letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- filters */

.ad-pe__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 0 0 8px;
    padding: 0 0 24px;
}

.ad-pe__filters[hidden] {
    display: none;
}

.ad-pe__filters-label {
    color: var(--ad-text-muted);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ad-pe__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Same visual family as the /find-your-office office pills: pill radius, teal
   line, teal fill when active. These are buttons rather than links because they
   filter in place instead of navigating. */
.ad-pe__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 18px;
    border: 1px solid var(--ad-border-subtle);
    border-radius: var(--ad-radius-pill);
    background: var(--ad-surface-page);
    color: var(--ad-text-strong);
    font-family: inherit;
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ad-pe__pill:hover {
    border-color: var(--ad-color-teal);
    background: var(--ad-color-teal-hover);
}

.ad-pe__pill.is-active {
    border-color: var(--ad-color-teal);
    background: var(--ad-color-teal);
    color: var(--ad-color-white);
}

.ad-pe__pill-count {
    color: inherit;
    font-weight: var(--ad-font-weight-regular);
    opacity: 0.7;
}

/* -------------------------------------------------------------------- list */

.ad-pe__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ad-border-faint);
}

.ad-pe__row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) auto;
    gap: 0 32px;
    align-items: center;
    padding: 28px 24px;
    border-bottom: 1px solid var(--ad-border-faint);
    border-radius: var(--ad-radius-md);
    transition: background-color 0.18s ease;
}

.ad-pe__row[hidden] {
    display: none;
}

.ad-pe__row:hover {
    background: var(--ad-color-teal-tint);
}

/* NEXT UP: the one filled row in the list. Teal wash + a teal spine on the
   leading edge, and the hairlines either side of it are suppressed so the wash
   reads as a single object rather than a shaded table cell. */
.ad-pe__row.is-next {
    background: var(--ad-gradient-teal-card-highlight);
    border-bottom-color: transparent;
    box-shadow: inset 3px 0 0 0 var(--ad-color-teal), var(--ad-shadow-card-subtle);
}

.ad-pe__row.is-next:hover {
    background: var(--ad-gradient-teal-card-strong);
}

.ad-pe__list > .ad-pe__row.is-next:first-child {
    border-top-color: transparent;
}

.ad-pe__row.is-tbd {
    background: var(--ad-surface-subtle);
}

/* --------------------------------------------------------- the date block */

.ad-pe__topbar {
    display: contents;
}

.ad-pe__time-badge {
    display: none;
}

.ad-pe__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    padding-right: 32px;
    border-right: 1px solid var(--ad-border-subtle);
}

.ad-pe__date-month {
    color: var(--ad-color-teal-active);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-bold);
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ad-pe__date-day {
    display: block;
    margin: 2px 0 4px;
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-h1);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Visible only to assistive tech: the long date the sighted layout expresses
   through the block itself. */
.ad-pe__date-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ad-pe__date-year {
    margin-top: 2px;
    color: var(--ad-text-muted);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-regular);
    line-height: 1.2;
    letter-spacing: 0.08em;
}

.ad-pe__date-weekday {
    color: var(--ad-text-muted);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* No date yet: the block keeps the row's rhythm so nothing shifts, but reads as
   an open slot rather than a value — dashed edge, muted, no numeral. */
.ad-pe__date--tbd {
    border-right-style: dashed;
    border-right-color: var(--ad-border-neutral);
}

.ad-pe__date-tbd {
    color: var(--ad-text-muted);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- row body */

.ad-pe__body {
    min-width: 0;
}

.ad-pe__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.ad-pe__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--ad-radius-pill);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ad-pe__chip--next {
    background: var(--ad-color-teal);
    color: var(--ad-color-white);
}

.ad-pe__chip--language {
    border: 1px solid var(--ad-border-subtle);
    background: var(--ad-color-teal-hover);
    color: var(--ad-color-teal-active);
}

.ad-pe__chip--quiet {
    border: 1px solid var(--ad-border-neutral);
    background: var(--ad-surface-page);
    color: var(--ad-text-muted);
}

.ad-pe__office {
    margin: 0;
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-h3);
    font-weight: var(--ad-font-weight-semibold);
    line-height: var(--ad-line-height-tight);
    letter-spacing: -0.01em;
}

.ad-pe__office-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--ad-color-teal), var(--ad-color-teal));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size 0.22s ease;
}

.ad-pe__office-link:hover,
.ad-pe__office-link:focus-visible {
    color: inherit;
    background-size: 100% 2px;
}

.ad-pe__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 10px 0 0;
    color: var(--ad-text-soft);
    font-size: var(--ad-fluid-body);
    line-height: var(--ad-line-height-body);
}

.ad-pe__meta > * + *::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 12px;
    border-radius: var(--ad-radius-pill);
    background: var(--ad-border-neutral);
    vertical-align: middle;
}

.ad-pe__meta-map-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ad-border-neutral);
    text-underline-offset: 3px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.ad-pe__meta-map-link:hover,
.ad-pe__meta-map-link:focus-visible {
    color: var(--ad-color-teal-active);
    text-decoration-color: var(--ad-color-teal);
}

/* The time slot always occupies the same position, so a real time drops in
   without moving anything; only its weight changes when it stops being a
   placeholder. */
.ad-pe__meta-time {
    font-weight: var(--ad-font-weight-semibold);
    color: var(--ad-text-strong);
}

.ad-pe__meta-time.is-pending {
    font-weight: var(--ad-font-weight-regular);
    color: var(--ad-text-muted);
    font-style: italic;
}

/* --------------------------------------------------------- presenter chip */

.ad-pe__presenter {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    padding: 6px 16px 6px 6px;
    border: 1px solid var(--ad-border-soft);
    border-radius: var(--ad-radius-pill);
    background: var(--ad-surface-subtle);
}

.ad-pe__presenter-photo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--ad-radius-pill);
    object-fit: cover;
    object-position: center top;
    background: var(--ad-surface-subtle-strong);
}

.ad-pe__presenter-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ad-pe__presenter-label {
    color: var(--ad-text-muted);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ad-pe__presenter-name {
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-body);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.3;
}

.ad-pe__presenter-creds {
    margin-left: 6px;
    color: var(--ad-color-teal-active);
    font-weight: var(--ad-font-weight-regular);
}

/* -------------------------------------------------------------- row action */

.ad-pe__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* One explanatory line above the list, not a caption repeated under every
   button. Removed automatically once real registration links exist. */
.ad-pe__list-note {
    margin: 0 0 20px;
    color: var(--ad-text-muted);
    font-size: var(--ad-fluid-body);
    line-height: var(--ad-line-height-body);
}

.ad-pe__empty {
    margin: 0;
    padding: 40px 0;
    color: var(--ad-text-soft);
    font-size: var(--ad-fluid-body-lg);
    line-height: var(--ad-line-height-body);
}

/* -------------------------------------------------- dual-audience cards
 *
 * Page-scoped glue ONLY. The section is the stock .ad-page-card-grid--two /
 * .ad-page-card component; the Figma draws it as two full-bleed halves with a
 * hard seam down the middle instead of two rounded cards inside a shell, so
 * this block widens the shell, closes the gutter and squares the corners on
 * this page and nowhere else. The card family's own colors, tones and grid
 * behaviour (including its 1100px collapse to one column) are untouched.
 * Typography is restated here because .ad-page-* heading/paragraph rules are
 * scoped to the .ad-page-page wrapper, which this page does not have.
 */

.ad-pe__audience .ad-page-shell {
    width: 100%;
    margin: 0;
}

.ad-pe__audience .ad-page-card-grid--two {
    gap: 0;
}

.ad-pe__audience .ad-page-card {
    padding: 96px clamp(24px, 6vw, 112px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Joel ruling (reverses the earlier "accept the wash"): Figma node 1835:1045
   draws these two halves as FLAT solid tones, not the shared card family's
   gradient-to-white. Override page-scoped so the shared .ad-page-card--blue /
   --teal gradients stay intact everywhere else. */
.ad-pe__audience .ad-page-card--blue {
    background: var(--ad-color-soft-blue);
}

.ad-pe__audience .ad-page-card--teal {
    background: var(--ad-color-mist-strong);
}

/* Figma sets these eyebrows in the heading navy, not the teal the shared
   overline uses for section labels sitting on a white ground. */
.ad-pe__audience .ad-pe__audience-eyebrow {
    color: var(--ad-text-heading);
}

.ad-pe__audience-title {
    margin: 8px 0 0;
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-h3);
    font-weight: var(--ad-font-weight-semibold);
    line-height: var(--ad-line-height-heading);
    letter-spacing: -0.01em;
}

.ad-pe__audience .ad-page-card p:not(.ad-service-overline) {
    margin: 24px 0 0;
    font-size: var(--ad-fluid-body-lg);
    line-height: var(--ad-line-height-body);
}

.ad-pe__audience .ad-locations__btn {
    margin-top: 40px;
}

/* Joel ruling 2026-08-18 (reverses the earlier "just use the shared outlined
   variant" call): Figma node 1835:1063 draws these two card CTAs in the brand
   blue — 1px #009EE9 stroke, #009EE9 label — not the teal the shared
   .ad-locations__btn--outlined carries for the /locations action rows. Recolor
   page-scoped so the shared variant stays teal everywhere else; geometry,
   radius and type all still come from the component. */
/* Joel ruling 2026-08-18 (second pass): the face is TRANSPARENT, not the
   component's secondary white — the card tone (#CCECFB blue / #DAF4F5 teal)
   has to read through the button, so the CTA sits on the card rather than
   punching a white hole in it. */
.ad-pe__audience .ad-locations__btn--outlined {
    background: transparent;
    border-color: var(--ad-color-blue);
    color: var(--ad-color-blue);
}

/* Hover follows the theme's blue-action pattern (--ad-action-primary-bg-hover
   and the .ad-page-button--secondary:hover label both deepen to blue-mid):
   stroke and label darken to #005076. The face stays transparent in this state
   too — the shared outlined hover paints an 8% teal wash, which would both
   fight the blue and break the card tone showing through. */
.ad-pe__audience .ad-locations__btn--outlined:hover,
.ad-pe__audience .ad-locations__btn--outlined:focus {
    background: transparent;
    border-color: var(--ad-color-blue-mid);
    color: var(--ad-color-blue-mid);
}

/* ----------------------------------------------------------------- the FAQ */

/* Joel ruling: Figma node 1835:644 puts this band on a vertical wash — mist
   flat down to the halfway mark, then blending into the strong mist at the
   bottom edge. The inner .ad-service-faq__card stays white on top of it. */
.ad-pe__faq {
    padding: 112px 0;
    background: linear-gradient(
        180deg,
        var(--ad-color-mist) 0%,
        var(--ad-color-mist) 50%,
        var(--ad-color-mist-strong) 100%
    );
}

/* --------------------------------------------------------- patient reviews
 * Thin glue only. The Elfsight embed brings its own layout, so this section
 * just supplies the page's band rhythm and centers the heading the same way
 * the other h2s on this page are set.
 */

.ad-pe__reviews {
    padding: 112px 0;
    background: var(--ad-surface-page);
}

.ad-pe__reviews h2 {
    margin: 0 0 40px;
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-h2);
    font-weight: var(--ad-font-weight-semibold);
    line-height: var(--ad-line-height-heading);
    letter-spacing: -0.01em;
    text-align: center;
}

.ad-pe__reviews-widget {
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .ad-pe__list-section,
    .ad-pe__faq,
    .ad-pe__reviews {
        padding: 80px 0;
    }

    .ad-pe__row {
        grid-template-columns: 96px minmax(0, 1fr) auto;
        gap: 0 24px;
    }

    .ad-pe__date {
        padding-right: 24px;
    }

    /* One column from here down, so the full-bleed halves become stacked
       full-bleed bands and the padding drops with them. */
    .ad-pe__audience .ad-page-card {
        padding: 72px clamp(24px, 6vw, 64px);
    }

    /* Joel: "a weird line after the For Patients & Families block, before
       Frequently Asked Questions". Once the halves stack, the LAST audience
       band is the teal card (--ad-color-mist-strong, #daf4f5) and the FAQ
       band's wash still opens on --ad-color-mist (#f4f8f8), so the two
       sections meet on a hard 1px step back to a lighter tone — a stray hair-
       line rather than a band change. Give the wash a short mist-strong lead-
       in so it starts flush with the card above and fades into the designed
       mist plateau; the 50%/100% stops (and therefore the desktop two-column
       rendering, which keeps the original three-stop wash) are untouched. */
    .ad-pe__faq {
        background: linear-gradient(
            180deg,
            var(--ad-color-mist-strong) 0%,
            var(--ad-color-mist) 20%,
            var(--ad-color-mist) 50%,
            var(--ad-color-mist-strong) 100%
        );
    }
}

@media (max-width: 767px) {
    .ad-pe__list-section,
    .ad-pe__faq,
    .ad-pe__reviews {
        padding: 64px 0;
    }

    .ad-pe__audience .ad-page-card {
        padding: 56px 24px;
    }

    /* Single-column card layout on mobile: date bar on top, full width
       for headline, venue, time, presenter, and RSVP button */
    .ad-pe__list {
        border-top: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .ad-pe__row {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 22px 18px;
        background: var(--ad-surface-page);
        border: 1px solid var(--ad-border-subtle);
        border-radius: var(--ad-radius-md);
    }

    .ad-pe__row.is-next {
        border-left: 4px solid var(--ad-color-teal);
        box-shadow: var(--ad-shadow-card-subtle);
    }

    .ad-pe__topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--ad-border-faint);
        width: 100%;
    }

    .ad-pe__date {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        padding: 0;
        border: none;
        width: auto;
    }

    .ad-pe__date-month {
        color: var(--ad-color-teal-active);
        font-size: var(--ad-fluid-small);
        font-weight: var(--ad-font-weight-bold);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .ad-pe__date-day {
        color: var(--ad-text-heading);
        font-size: var(--ad-fluid-h3);
        font-weight: var(--ad-font-weight-bold);
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin: 0;
        font-variant-numeric: normal;
    }

    .ad-pe__date-weekday {
        color: var(--ad-text-muted);
        font-size: var(--ad-fluid-small);
        font-weight: var(--ad-font-weight-regular);
        line-height: 1.2;
        letter-spacing: 0.02em;
    }

    .ad-pe__date-weekday::before {
        content: "· ";
        color: var(--ad-border-neutral);
        margin-right: 2px;
    }

    .ad-pe__date-year {
        margin-top: 0;
        font-size: var(--ad-fluid-small);
    }

    .ad-pe__date--tbd {
        border: none;
    }

    .ad-pe__time-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: var(--ad-radius-pill);
        background: var(--ad-color-teal-tint);
        border: 1px solid var(--ad-border-subtle);
        color: var(--ad-color-teal-active);
        font-size: var(--ad-fluid-small);
        font-weight: var(--ad-font-weight-semibold);
        white-space: nowrap;
        line-height: 1.3;
    }

    .ad-pe__time-badge.is-pending {
        background: var(--ad-surface-subtle);
        border-color: var(--ad-border-neutral);
        color: var(--ad-text-muted);
    }

    .ad-pe__time-badge-icon {
        flex-shrink: 0;
        opacity: 0.85;
    }

    .ad-pe__body {
        width: 100%;
    }

    .ad-pe__headline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
    }

    .ad-pe__office {
        font-size: var(--ad-fluid-h3);
    }

    .ad-pe__meta {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
    }

    .ad-pe__meta-address {
        font-size: var(--ad-fluid-body);
        line-height: 1.4;
    }

    .ad-pe__meta-time {
        display: none;
    }

    .ad-pe__presenter {
        margin-top: 16px;
        width: 100%;
    }

    .ad-pe__action {
        width: 100%;
        margin-top: 4px;
    }

    .ad-pe__action .ad-pe__action-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .ad-pe__hero-meta {
        gap: 6px 12px;
    }

    .ad-pe__hero-meta-item + .ad-pe__hero-meta-item::before {
        margin-right: 12px;
    }

    .ad-pe__filters {
        gap: 10px 14px;
    }
}

/* ----------------------------------------------------------- RSVP modal */

.ad-pe-modal {
    padding: 0;
    border: none;
    border-radius: var(--ad-radius-lg);
    background: transparent;
    max-width: min(580px, calc(100vw - 32px));
    width: 100%;
    box-shadow: 0 20px 45px rgba(12, 37, 62, 0.25);
    overflow: visible;
}

.ad-pe-modal::backdrop {
    background: rgba(12, 37, 62, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ad-pe-modal__dialog {
    position: relative;
    padding: 36px 32px 32px;
    background: var(--ad-surface-page);
    border: 1px solid var(--ad-border-subtle);
    border-radius: var(--ad-radius-lg);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ad-pe-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ad-border-soft);
    border-radius: var(--ad-radius-pill);
    background: var(--ad-surface-subtle);
    color: var(--ad-text-strong);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ad-pe-modal__close:hover,
.ad-pe-modal__close:focus-visible {
    background: var(--ad-color-teal-hover);
    border-color: var(--ad-color-teal);
    color: var(--ad-color-teal-active);
}

.ad-pe-modal__header {
    margin-bottom: 20px;
    padding-right: 36px;
}

.ad-pe-modal__overline {
    margin: 0 0 4px;
    color: var(--ad-color-teal-active);
    font-size: var(--ad-fluid-small);
    font-weight: var(--ad-font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ad-pe-modal__title {
    margin: 0 0 10px;
    color: var(--ad-text-heading);
    font-size: var(--ad-fluid-h3);
    font-weight: var(--ad-font-weight-bold);
    line-height: var(--ad-line-height-tight);
}

.ad-pe-modal__event {
    margin: 0;
    padding: 8px 14px;
    border-radius: var(--ad-radius-sm);
    background: var(--ad-color-teal-tint);
    border-left: 3px solid var(--ad-color-teal);
    color: var(--ad-text-strong);
    font-size: var(--ad-fluid-body);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.35;
}

.ad-pe-modal__body {
    margin-top: 16px;
}

/* Modal Fluent Form overrides to match design tokens */
.ad-pe-modal .fluentform {
    font-family: inherit;
}

.ad-pe-modal .ff-el-input--label label {
    font-weight: var(--ad-font-weight-semibold);
    color: var(--ad-text-strong);
    font-size: var(--ad-fluid-small);
    margin-bottom: 6px;
}

.ad-pe-modal .ff-el-form-control {
    border-radius: var(--ad-radius-sm) !important;
    border: 1px solid var(--ad-border-neutral) !important;
    padding: 10px 14px !important;
    font-size: var(--ad-fluid-body) !important;
    color: var(--ad-text-strong) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ad-pe-modal .ff-el-form-control:focus {
    border-color: var(--ad-color-teal) !important;
    box-shadow: 0 0 0 3px var(--ad-color-teal-tint) !important;
    outline: none !important;
}

.ad-pe-modal .ad-pe-event-input {
    background: var(--ad-surface-subtle) !important;
    color: var(--ad-text-muted) !important;
    cursor: default;
}

.ad-pe-modal .ad-pe-field-office-slug {
    display: none !important;
}

.ad-pe-modal .ff_submit_btn_wrapper {
    margin-top: 20px;
}

.ad-pe-modal .ff-btn-submit {
    background: var(--ad-color-teal) !important;
    border: 1px solid var(--ad-color-teal) !important;
    color: var(--ad-color-white) !important;
    font-size: var(--ad-fluid-body) !important;
    font-weight: var(--ad-font-weight-semibold) !important;
    padding: 12px 28px !important;
    border-radius: var(--ad-radius-pill) !important;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.ad-pe-modal .ff-btn-submit:hover {
    background: var(--ad-color-teal-active) !important;
}

@media (prefers-reduced-motion: reduce) {
    .ad-pe__row,
    .ad-pe__pill,
    .ad-pe__office-link,
    .ad-pe-modal__close,
    .ad-pe-modal .ff-btn-submit {
        transition: none;
    }
}