/* The public airport pages (/airports, /airports/{iata}) — Oct 3 2026,
   SEO_PUBLIC_PAGES.md phase 1. The home page's look (the dusk sky, Plex,
   the live cyan) on a page that answers one question fast: is this
   airport delayed right now. Tokens from css/tokens.css only. */

.ap-hero {
    margin-top: calc(-1 * var(--space-8));
    padding: var(--space-8) 0 var(--space-5);
    color: #FFFFFF;
}

.ap-crumbs {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--space-4);
}

.ap-crumbs a {
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
}

.ap-eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-live);
    margin: 0 0 var(--space-3);
}

.ap-title {
    font-family: var(--font-display);
    font-weight: 700;
    /* Oct 4 2026 (founder: "Headings are too big and too much white
       space"): the answer and the search lead, not the headline. */
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
}

.ap-dot { color: var(--color-live); }

.ap-lede {
    font-size: var(--text-base);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.74);
    max-width: 40rem;
    margin: 0;
}

/* The answer, as the app's flight card says it (Oct 4 2026): one chip —
   the light in the app's AirportLight colors, the label in white (words
   never wear the amber) — with the read time beside it. Program
   sentences follow only when there are programs. */
.ap-statusline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.ap-pill {
    --light: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--light) 45%, transparent);
    background: color-mix(in srgb, var(--light) 14%, rgba(255, 255, 255, 0.04));
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.2;
}

.ap-pill__light {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--light);
    box-shadow: 0 0 8px var(--light);
}

.ap-pill--clear { --light: var(--color-success); }
.ap-pill--groundStop,
.ap-pill--closure { --light: #FF5C74; }
.ap-pill--groundDelay { --light: #FF6B5B; }
.ap-pill--delay { --light: #FFB347; }

.ap-statusline__asof {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
}

.ap-programs {
    max-width: 44rem;
    margin: var(--space-3) 0 0;
    padding-left: 1.1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}

.ap-programs li + li { margin-top: var(--space-1); }

.ap-body {
    padding: var(--space-5) 0 var(--space-10);
}

.ap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.ap-card {
    padding: var(--space-6);
    border-radius: 20px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
}

.ap-card--app {
    background: linear-gradient(160deg, rgba(41, 214, 255, 0.10), rgba(94, 107, 255, 0.06) 60%, var(--color-card));
}

.ap-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
    margin: 0 0 var(--space-3);
}

.ap-card p { line-height: 1.55; }

.ap-weather__summary {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-2);
}

.ap-weather__facts {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.ap-alerts { margin-top: var(--space-4); }

.ap-alert {
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: 10px;
    background: rgba(255, 179, 71, 0.12);
    border: 1px solid rgba(255, 179, 71, 0.35);
    font-weight: 600;
}

.ap-muted {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.ap-badge {
    display: inline-block;
    line-height: 0;
    margin: var(--space-2) 0 var(--space-3);
}

.ap-badge img { height: 50px; width: auto; }

.ap-elsewhere { margin-top: var(--space-8); }

.ap-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ap-chip {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
}

.ap-chip--lit {
    border-color: rgba(255, 179, 71, 0.6);
    background: rgba(255, 179, 71, 0.12);
}

@media (hover: hover) {
    .ap-chip:hover { border-color: var(--color-action); }
}

.ap-index {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-3);
}

.ap-index__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: 14px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

.ap-index__row--lit {
    border-color: rgba(255, 179, 71, 0.55);
    background: rgba(255, 179, 71, 0.10);
}

@media (hover: hover) {
    .ap-index__row:hover { border-color: var(--color-border-strong); }
}

.ap-index__code {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
}

.ap-index__city {
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Amber marks the state (the pill), never the words (brand rule). */
.ap-index__flag {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-primary);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 179, 71, 0.22);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .ap-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    /* Phones: the answer, the weather and the app read as one column of
       cards, close together (founder, Oct 4: "too much white space"). */
    .ap-hero { padding-bottom: var(--space-4); }
    .ap-body { padding-top: var(--space-2); }
    .ap-card { padding: var(--space-5); }
}

/* The finder sits in the index's hero, right under the headline. */
.ap-finder--index {
    margin-top: var(--space-5);
}

.ap-index__miss {
    color: rgba(255, 255, 255, 0.74);
    margin: var(--space-3) 0 0;
}

.ap-index__map {
    margin-bottom: var(--space-5);
}

/* The field's photo (Google Places via the photo proxy), as the app's
   airport card shows it, with the author Google's terms ask for. */
.ap-photo {
    margin: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    background: rgba(255, 255, 255, 0.04);
}

.ap-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}

/* The app card spans the grid under the weather and the photo. */
.ap-card--app {
    grid-column: 1 / -1;
}

.ap-photo figcaption {
    position: absolute;
    right: 10px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(11, 10, 22, 0.6);
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
}

@media (max-width: 720px) {
    .ap-photo img { height: 200px; min-height: 0; }
}

/* The weather scene (WeatherScenes): the illustration once its art ships
   (wwwroot/img/weather/{key}.webp), the large glyph on the sky until then. */
.ap-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    margin: 0 0 var(--space-4);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background:
        radial-gradient(90% 70% at 50% 110%, rgba(255, 107, 91, 0.16), transparent 70%),
        linear-gradient(180deg, #0B0A16 0%, #1B1233 100%);
}

.ap-scene__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-scene__glyph {
    color: rgba(255, 255, 255, 0.9);
    font-size: 72px;
    line-height: 0;
}

.ap-scene .ap-scene__glyph .wx-glyph {
    width: 72px;
    height: 72px;
}

.ap-scene__title {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(11, 10, 22, 0.6);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
}