/**
 * Artspod v2 — content listing pages (whats-on, interviews, musicals, news,
 * pocket stories, auditions_list) + city pages. Built on _tokens.css
 * variables. Shared by the 6 listing templates; Phase B agents append their
 * area-specific styles in the marked sections below.
 */

/* ---------- Base ---------- */
/* News & Reviews top-spacing standard, applied to every listing template's
   content wrapper: 48px (sp-6) down from the fixed header, sp-4 on mobile.
   See events.css .asp-events for the canonical origin of this pairing. */
.aspv2 .asp-content {
    padding-top: var(--asp-sp-6);
}

@media (max-width: 780px) {
    .aspv2 .asp-content {
        padding-top: var(--asp-sp-4);
    }
}

.aspv2 .asp-page-title {
    font-size: var(--asp-fs-h2, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--asp-ink);
    /* Top margin dropped to 0: .asp-content's padding-top above now supplies
       the distance from the header, so this doesn't stack on top of it. */
    margin-block: 0 var(--asp-sp-2);
}

/* ---------- Ad slots ---------- */
.aspv2 .asp-adslot {
    max-width: 728px;
    margin-inline: auto;
    margin-block: var(--asp-sp-4);
    text-align: center;
}

.aspv2 .asp-adslot__title {
    display: block;
    margin-bottom: var(--asp-sp-1);
    font-size: var(--asp-fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--asp-gray);
}

.aspv2 .asp-adslot img {
    max-width: 100%;
    height: auto;
}

/* ---------- Listing grid ---------- */
.aspv2 .asp-content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--asp-sp-4);
}

.aspv2 .asp-content-card .asp-card__media {
    aspect-ratio: 16 / 9;
}

@media (max-width: 780px) {
    .aspv2 .asp-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== B1 whats-on ===== */

/* .asp-ecard rules moved to layout.css (Phase 4b canonical card). */

/* Prose wrapper for the whats-on intro + city page body copy. article.css
   normally carries prose typography, but it is not enqueued on /whats-on/
   and only loads AFTER archive.css on city pages (see scaffold-assets.php)
   — so the shared base lives here; article.css's B1 section only adds
   city-specific overrides (h2 spacing). */
/* Cap only the flowing TEXT at a readable measure — block sections in the
   same content stream (.asp-city grids, search box) span the full container.
   Descendant selectors on purpose: WPBakery nests content in .vc_row/.wpb_*
   wrappers, so direct-child selectors never match. Text inside cards/section
   heads is far narrower than 860px, so the cap is a no-op there. */
.aspv2 .asp-prose h1,
.aspv2 .asp-prose h2,
.aspv2 .asp-prose h3,
.aspv2 .asp-prose p,
.aspv2 .asp-prose ul,
.aspv2 .asp-prose ol {
    max-width: 860px;
}

.aspv2 .asp-prose h1 {
    font-size: var(--asp-fs-h2);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--asp-ink);
    margin-block: 0 var(--asp-sp-3);
}

.aspv2 .asp-prose h2 {
    font-size: var(--asp-fs-h3);
    font-weight: 700;
    color: var(--asp-ink);
    margin-block: var(--asp-sp-5) var(--asp-sp-2);
}

.aspv2 .asp-prose p {
    font-size: var(--asp-fs-body);
    line-height: 1.6;
    color: var(--asp-muted);
    margin-block: 0 var(--asp-sp-3);
}

/* Link color only for links in flowing text — NOT inside cards. The event
   cards render inside .asp-prose on whats-on/city pages, and archive.css
   loads after layout.css, so an unscoped `.asp-prose a` would repaint card
   titles/venues purple. */
.aspv2 .asp-prose p a,
.aspv2 .asp-prose li a {
    color: var(--asp-primary);
}

/* …but never inside an event card (whose own elements are <h3>/<p> too):
   cards keep their component colors regardless of the prose context. */
.aspv2 .asp-prose .asp-ecard a {
    color: inherit;
}

.aspv2 .asp-prose strong {
    color: var(--asp-slate);
}

.aspv2 .asp-whatson-intro {
    margin-bottom: var(--asp-sp-6);
}

/* City search input ([search_box] v2 markup) */
.aspv2 .asp-cityfilter {
    position: relative;
    max-width: 420px;
    margin: var(--asp-sp-2) 0 var(--asp-sp-6);
}

.aspv2 .asp-cityfilter svg {
    position: absolute;
    left: var(--asp-sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--asp-gray);
    pointer-events: none;
}

.aspv2 .asp-cityfilter__input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius-pill);
    font-size: var(--asp-fs-body);
    font-family: var(--asp-font);
    color: var(--asp-ink);
    background: var(--asp-bg);
    transition: border-color var(--asp-transition);
}

.aspv2 .asp-cityfilter__input:focus {
    outline: none;
    border-color: var(--asp-primary);
}

/* City sections ([cities_list] v2 markup) */
.aspv2 .asp-city {
    padding-block: var(--asp-sp-5) var(--asp-sp-6);
    border-top: 1px solid var(--asp-line);
}

.aspv2 .asp-city:first-of-type {
    border-top: none;
    padding-top: 0;
}

.aspv2 .asp-city__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--asp-sp-3);
    margin-bottom: var(--asp-sp-3);
}

.aspv2 .asp-city__head h2 {
    font-size: var(--asp-fs-h3);
    font-weight: 800;
    color: var(--asp-ink);
    margin: 0;
}

.aspv2 .asp-city__head h2 a {
    color: inherit;
    text-decoration: none;
}

.aspv2 .asp-city__head h2 a:hover {
    color: var(--asp-primary);
}

.aspv2 .asp-city__more {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--asp-primary);
    border-color: var(--asp-line-strong);
}

.aspv2 .asp-city__more:hover {
    border-color: var(--asp-primary);
}

.aspv2 .asp-city__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--asp-sp-4);
}

@media (max-width: 1100px) {
    .aspv2 .asp-city__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* JS filter helper (archive.js city search + reused wherever a v2 template
   needs to hide/show elements without inline styles). */
.aspv2 .hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .aspv2 .asp-city__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .aspv2 .asp-city__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .aspv2 .asp-city__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== B2 news ===== */
/* Card grid + toolbar/count/pagination/sidebar/filtersbtn/layout are all
   reused as-is from events.css (asp-events__*, asp-epages) — both enqueued
   on this page (scaffold-assets.php). Only the venues block below is new. */

.aspv2 .asp-venues {
    margin-top: var(--asp-sp-5);
    padding: var(--asp-sp-4);
    background: #fff;
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
}

.aspv2 .asp-venues h4 {
    margin-bottom: var(--asp-sp-3);
    font-size: var(--asp-fs-body);
    font-weight: 700;
    color: var(--asp-ink);
}

.aspv2 .asp-venues ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--asp-sp-1) var(--asp-sp-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.aspv2 .asp-venues li {
    font-size: var(--asp-fs-sm);
}

.aspv2 .asp-venues a {
    color: var(--asp-muted);
    text-decoration: none;
}

.aspv2 .asp-venues a:hover {
    color: var(--asp-primary);
    text-decoration: underline;
}

/* ===== B3 news-single + auditions-single ===== */

/* ===== B4 interviews ===== */
/* .asp-topbanner rules live in the B6 section (single canonical copy). */
.aspv2 .asp-content__head {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-2);
    margin-bottom: var(--asp-sp-5);
}

.aspv2 .asp-content__intro {
    max-width: 672px;
    font-size: var(--asp-fs-lg);
    line-height: 1.55;
    color: var(--asp-muted);
}

/* ===== B5 musicals ===== */

/* Every musical card badge reads "MUSICALS" on this page — zero signal. */
.aspv2 .asp-content--musicals .asp-card__badge {
    display: none;
}


/* ===== B6 pocket-story + auditions-list ===== */

/* .asp-content__intro is defined once in the B4 section; keep max-width
   672px / fs-lg as canonical. Bottom margin comes from .asp-content__head. */

.aspv2 .asp-content__empty {
    padding: var(--asp-sp-6) var(--asp-sp-4);
    text-align: center;
    color: var(--asp-muted);
    background: #fff;
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
}

/* Banner 29 top slot (interviews/auditions_list place their ad above the
   H1) — same treatment as .asp-adslot but no "- Advertisement -" label,
   matching legacy AdRotate banner placement. Full container width (no
   728px cap); the banner is the page's first child so the 48px top
   distance comes from .asp-content's padding-top, not its own margin. */
.aspv2 .asp-topbanner {
    margin-block: 0 var(--asp-sp-4);
    text-align: center;
}

.aspv2 .asp-topbanner img {
    max-width: 100%;
    height: auto;
}

/* The 1920px-wide creative is illegible squeezed into a phone viewport —
   hide the slot on small screens (legacy served a separate mobile ad
   group there instead). */
@media (max-width: 600px) {
    .aspv2 .asp-topbanner {
        display: none;
    }
}

/* Pagination (asp-epages) — copied from events.css: listings in this
   section (pocket-story, auditions_list) don't enqueue events.css, so the
   rules are duplicated here rather than shared, per scaffold-assets.php's
   enqueue map. Keep in sync with events.css if that styling changes. */
.aspv2 .asp-epages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--asp-sp-2);
    padding-top: var(--asp-sp-4);
    flex-wrap: wrap;
}

.aspv2 .asp-epages__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    color: var(--asp-muted);
    text-decoration: none;
    border: 1px solid var(--asp-line-strong);
    border-radius: var(--asp-radius-pill);
    background: #fff;
    transition: border-color var(--asp-transition), color var(--asp-transition);
}

.aspv2 a.asp-epages__btn:hover {
    border-color: var(--asp-primary);
    color: var(--asp-primary);
}

.aspv2 .asp-epages__btn.is-current {
    background: var(--asp-primary);
    border-color: var(--asp-primary);
    color: #fff;
}

.aspv2 .asp-epages__gap {
    width: 40px;
    text-align: center;
    color: var(--asp-muted);
}