/*
 * /in-the-media/ — the press page.
 *
 * PAGE-LEVEL GLUE ONLY. Every component this page renders is borrowed whole:
 * the hero is service-template.css's .ad-service-hero, the buttons are the
 * .ad-locations__btn family from components/button.css, the break strip is
 * components/break-strip.css, and the dual cards are airway-pages.css's
 * .ad-page-card-grid--two. Nothing shared is overridden except where a card
 * rule is scoped to a .ad-page-page wrapper this page does not have.
 *
 * The list is a deliberate sibling of the /provider-events/ schedule rows, not
 * a fork of them: same hairline-separated grid, same hover wash, same outlined
 * action in the trailing column. It carries its own class names because the
 * two lists describe different things and will drift — a media row has no date
 * block, no chips, and no filled "next up" state, so sharing selectors would
 * only mean maintaining a shape neither page fully uses.
 *
 * Layout notes worth keeping:
 * - Rows are hairline-separated rather than boxed. Nothing on this page carries
 *   a fill, which is what lets the three lists sit on alternating white/mist
 *   bands without the page reading as a stack of cards on tinted paper.
 * - The Mentions band is the long tail, so its rows deliberately step down a
 *   type size and lose their vertical air. That contrast is the section's whole
 *   editorial signal and it disappears if the quiet rows get styled back up.
 * - Below 767px the row drops the trailing action column and the button goes
 *   full width underneath, matching how the schedule rows collapse.
 *
 * Every value here is a token (--ad-color-*, --ad-fluid-*, --ad-radius-*) and
 * every breakpoint sits on the canonical 1100/767/640 rail.
 */

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

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

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

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

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

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

.ad-media__hero .ad-media__hero-subheading {
    font-size: var(--ad-fluid-h4);
    font-weight: var(--ad-font-weight-semibold);
}

/* Derived stat line ("15 features · 6 shows and outlets"). Teal dot separators
   are drawn with ::before so the string itself stays plain text for screen
   readers — same treatment the /provider-events/ hero uses. */
.ad-media__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-media__hero-meta-item {
    display: inline-flex;
    align-items: center;
}

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

/* ------------------------------------------------------------------ bands */

.ad-media__section {
    padding: 112px 0;
}

.ad-media__section--band-0 {
    background: var(--ad-surface-page);
}

.ad-media__section--band-1 {
    background: var(--ad-surface-subtle);
}

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

.ad-media__section-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-media__section-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;
}

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

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

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

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

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

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

/* "Outlet · Category · Mar 2026" — dot separators drawn, never typed, so the
   line reads as three plain facts to assistive tech. */
.ad-media__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 8px 0 0;
    color: var(--ad-text-soft);
    font-size: var(--ad-fluid-body);
    line-height: var(--ad-line-height-body);
}

.ad-media__meta-item:first-child {
    color: var(--ad-text-strong);
    font-weight: var(--ad-font-weight-semibold);
}

.ad-media__meta-item + .ad-media__meta-item::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-media__note {
    margin: 10px 0 0;
    max-width: 68ch;
    color: var(--ad-text-soft);
    font-size: var(--ad-fluid-body);
    line-height: var(--ad-line-height-body);
}

.ad-media__action {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.ad-media__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);
}

/* ----------------------------------------------------------- the long tail
 *
 * Mentions. Same row, stepped down: one size smaller on the title, less air,
 * and the meta line lightened. This is the only thing marking it as the quiet
 * section, so it has to be visible at a glance.
 */

.ad-media__section--quiet .ad-media__row {
    padding: 18px 24px;
}

.ad-media__section--quiet .ad-media__title {
    font-size: var(--ad-fluid-h5);
}

.ad-media__section--quiet .ad-media__meta {
    margin-top: 6px;
    font-size: var(--ad-fluid-small);
    color: var(--ad-text-muted);
}

.ad-media__section--quiet .ad-media__meta-item:first-child {
    color: var(--ad-text-soft);
}

/* ------------------------------------------------------------- dual cards
 *
 * Page-scoped glue ONLY. The section is the stock .ad-page-card-grid--two /
 * .ad-page-card component and keeps its own tones, radius, shadow and 1100px
 * collapse. Typography is restated here because the .ad-page-* heading and
 * paragraph rules are scoped to a .ad-page-page wrapper this page does not
 * have — without these three rules the card copy falls back to browser
 * defaults.
 */

/* Joel ruling 2026-08-24: the cards band must look like the rest of the site,
   which means the /provider-events/ audience band — full-bleed edge-to-edge
   halves in the flat brand tones, not the shared card component's bordered,
   washed default. The recipe below mirrors .ad-pe__audience rule for rule. */
.ad-media__cards {
    padding: 0;
}

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

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

/* Visually-hidden heading: the cards band is headless on screen, but the
   accessibility outline still needs an h2 above the card h3s. */
.ad-media__sr-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

/* Flat tones per the PE band (Joel reversed the gradient wash there too). */
.ad-media__cards .ad-page-card--blue {
    background: var(--ad-color-soft-blue);
}

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

.ad-media__cards .ad-media__card-eyebrow {
    color: var(--ad-text-heading);
}

.ad-media__card-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-media__cards .ad-page-card p:not(.ad-service-overline) {
    margin: 20px 0 0;
    color: var(--ad-text-soft);
    font-size: var(--ad-fluid-body-lg);
    line-height: var(--ad-line-height-body);
}

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

/* Blue transparent CTAs, same as the PE audience cards: 1px brand-blue stroke
   and label on a transparent face so the card tone reads through; hover
   deepens stroke and label to blue-mid and stays transparent (the shared
   outlined hover's teal wash would fight both the blue and the card tone). */
.ad-media__cards .ad-locations__btn--outlined {
    background: transparent;
    border-color: var(--ad-color-blue);
    color: var(--ad-color-blue);
}

.ad-media__cards .ad-locations__btn--outlined:hover,
.ad-media__cards .ad-locations__btn--outlined:focus {
    background: transparent;
    border-color: var(--ad-color-blue-mid);
    color: var(--ad-color-blue-mid);
}

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

@media (max-width: 1100px) {
    .ad-media__section {
        padding: 80px 0;
    }

    .ad-media__row {
        padding: 24px 16px;
        gap: 14px 24px;
    }

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

@media (max-width: 767px) {
    .ad-media__section {
        padding: 64px 0;
    }

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

    /* The trailing action column has nowhere to go on a phone, so the row
       becomes a single column and the button spans it — the same collapse the
       /provider-events/ schedule rows make. */
    .ad-media__row {
        grid-template-columns: minmax(0, 1fr);
        padding: 22px 4px;
        gap: 16px;
    }

    .ad-media__section--quiet .ad-media__row {
        padding: 16px 4px;
    }

    .ad-media__row:hover {
        background: transparent;
    }

    .ad-media__action {
        justify-content: stretch;
    }

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

    .ad-media__cards .ad-page-card {
        padding: 36px 24px;
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    .ad-media__row {
        transition: none;
    }
}