/**
 * Artspod v2 — single article pages (interview, musical, news, pocket
 * story, auditions singles) + city pages. Built on _tokens.css variables.
 * Phase B agents append their area-specific styles in the marked sections
 * below (prose typography, rail, vc_* embed normalization, etc.).
 */

/* ---------- Base ---------- */
.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);
    margin-block: var(--asp-sp-4) 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;
}

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

/* City H1 subtitle line — legacy loop-single-whats.php splits the ACF
   `headline` field on a single ": " into "Left:<br><strong>Right</strong>";
   v2 equivalent (single-whats-on-in-v2.php) renders the same split as a
   two-line treatment, the second line in the accent color. */
.aspv2 .asp-page-title__sub {
    display: block;
    margin-top: var(--asp-sp-1);
    color: var(--asp-primary);
    font-weight: 700;
}

/* City featured image — full main width, large rounded corners, directly
   below the H1 (single-whats-on-in-v2.php's `.asp-city-hero`). */
.aspv2 .asp-city-hero {
    margin: 0 0 var(--asp-sp-5);
}

.aspv2 .asp-city-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--asp-radius-lg);
}

/* City content: the shared B3 prose core (below) sets a generic h2 margin;
   on city pages the LAST h2 is always the "Upcoming Theatre, Music and
   Exhibitions in X" heading immediately followed by the [events_with_filter]
   grid — tighten the gap above the grid so it doesn't read as an orphaned
   heading. */
.aspv2 .asp-content--city .asp-prose h2:last-of-type {
    margin-bottom: var(--asp-sp-3);
}

/* ===== B2 news ===== */

/* ===== B3 news-single + auditions-single =====
   Shared CORE for every article single (interview/musical/pocket rail
   variants are B4's concern — they append layout-only extras on top of
   this section, they must not redefine what's here). */

/* ---------- Article shell ---------- */
.aspv2 .asp-article {
    padding-block: var(--asp-sp-6) var(--asp-sp-7);
}

/* .asp-container already centers (margin-inline:auto) and pads
   (padding-inline:var(--asp-gutter)) the element; this only narrows it. */
.aspv2 .asp-article--full {
    max-width: 760px;
}

.aspv2 .asp-article__meta {
    font-size: var(--asp-fs-sm);
    color: var(--asp-gray);
    margin: 0 0 var(--asp-sp-4);
}

.aspv2 .asp-article__figure {
    margin: 0 0 var(--asp-sp-5);
}

.aspv2 .asp-article__figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--asp-radius);
}

/* ---------- Prose typography ---------- */
.aspv2 .asp-prose {
    color: var(--asp-slate);
    font-size: var(--asp-fs-body);
}

.aspv2 .asp-prose > *:first-child {
    margin-top: 0;
}

.aspv2 .asp-prose p,
.aspv2 .asp-prose li {
    line-height: 1.7;
    margin: 0 0 var(--asp-sp-3);
}

.aspv2 .asp-prose ul,
.aspv2 .asp-prose ol {
    margin: 0 0 var(--asp-sp-3);
    padding-left: 1.25em;
}

.aspv2 .asp-prose ul {
    list-style-type: disc;
}

.aspv2 .asp-prose ol {
    list-style-type: decimal;
}

.aspv2 .asp-prose h2 {
    font-size: var(--asp-fs-h2);
    margin: var(--asp-sp-5) 0 var(--asp-sp-2);
}

.aspv2 .asp-prose h3 {
    font-size: var(--asp-fs-h3);
    margin: var(--asp-sp-4) 0 var(--asp-sp-2);
}

.aspv2 .asp-prose a {
    color: var(--asp-primary);
    text-decoration: underline;
    text-decoration-color: var(--asp-primary-soft);
    text-underline-offset: 2px;
}

.aspv2 .asp-prose a:hover {
    color: var(--asp-primary-dark);
}

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

.aspv2 .asp-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--asp-radius-sm);
}

/* Cards render INSIDE the prose stream (city pages' [events_with_filter]
   grids, td_block_4 "you might also like" rows on singles) — restore the
   cropped card media the generic prose-img rule above breaks (it wins over
   layout.css's equal-specificity card rules purely by load order). */
.aspv2 .asp-prose .asp-ecard__media img,
.aspv2 .asp-prose .asp-card__media img {
    height: 100%;
    border-radius: 0;
}

.aspv2 .asp-prose figure {
    margin: var(--asp-sp-4) 0;
}

.aspv2 .asp-prose figcaption {
    font-size: var(--asp-fs-xs);
    color: var(--asp-gray);
    margin-top: var(--asp-sp-1);
}

/* ---------- WPBakery normalization ----------
   js_composer's own stylesheet is dequeued on every v2 page (see
   aspv2_dequeue_legacy() in inc/scaffold-assets.php, which drops any
   registered style handle matching /^(td[-_]|js_composer|wpb_|vc_)/i), so
   all structural + spacing rules for VC shortcode markup live here. */
.aspv2 .asp-prose .vc_row,
.aspv2 .asp-prose .wpb_row,
.aspv2 .asp-prose .vc_column,
.aspv2 .asp-prose .wpb_column,
.aspv2 .asp-prose .vc_column-inner,
.aspv2 .asp-prose .wpb_wrapper {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

.aspv2 .asp-prose .wpb_content_element {
    margin-bottom: var(--asp-sp-3);
}

.aspv2 .asp-prose .wpb_video_widget .wpb_video_wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--asp-radius);
    margin: var(--asp-sp-4) 0;
    background: var(--asp-ink);
}

.aspv2 .asp-prose .wpb_video_widget .wpb_video_wrapper iframe,
.aspv2 .asp-prose .wpb_video_widget .wpb_video_wrapper embed,
.aspv2 .asp-prose .wpb_video_widget .wpb_video_wrapper object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* vc_btn3 -> v2 solid primary pill (copies .asp-btn--primary from base.css). */
.aspv2 .asp-prose .vc_btn3-container {
    margin: var(--asp-sp-3) 0;
}

.aspv2 .asp-prose a.vc_btn3,
.aspv2 .asp-prose button.vc_btn3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--asp-sp-2);
    font-weight: 600;
    font-size: var(--asp-fs-body);
    padding: 12px 24px;
    border-radius: var(--asp-radius-pill);
    border: 1px solid transparent;
    background: var(--asp-primary);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--asp-transition), transform var(--asp-transition);
}

.aspv2 .asp-prose a.vc_btn3:hover,
.aspv2 .asp-prose button.vc_btn3:hover {
    background: var(--asp-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

/* vc_separator -> hr-like divider (markup: .vc_separator > .vc_sep_holder
   > .vc_sep_line, two holders either side of an optional title). */
.aspv2 .asp-prose .vc_separator {
    display: flex;
    align-items: center;
    gap: var(--asp-sp-2);
    margin: var(--asp-sp-4) 0;
}

.aspv2 .asp-prose .vc_separator .vc_sep_holder {
    flex: 1;
    display: block;
}

.aspv2 .asp-prose .vc_separator .vc_sep_line {
    display: block;
    border-top: 1px solid var(--asp-line);
}

/* vc_empty_space is a manual spacer div — our own p/heading margins already
   provide rhythm, so collapse it rather than double up on spacing. */
.aspv2 .asp-prose .vc_empty_space {
    display: none;
}

/* ---------- In-content "You might also like" / "What's on elsewhere?"
   (aspv2_td_block4_v2() in inc/content-data.php swaps td_block_4 for this
   markup for the duration of the_content()). ---------- */
.aspv2 .asp-prose-block {
    margin: var(--asp-sp-6) 0 0;
    padding-top: var(--asp-sp-5);
    border-top: 1px solid var(--asp-line);
}

.aspv2 .asp-prose-block__title {
    font-size: var(--asp-fs-h2);
    margin: 0 0 var(--asp-sp-4);
}

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

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


/* ===== B4 interviews ===== */

/* ---------- Rail layout (interview / musical / pocket singles) ---------- */
/* Rail variant keeps .asp-container's standard max-width (1200px — same
   shell width as the v2 single event page); only --full narrows further. */

.aspv2 .asp-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--asp-sp-5, 2.5rem);
    align-items: start;
}

.aspv2 .asp-article__main {
    min-width: 0;
}

.aspv2 .asp-article__rail {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-4);
}

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

    .aspv2 .asp-article__rail {
        order: 2;
    }

    .aspv2 .asp-article__main {
        order: 1;
    }
}

/* ---------- Rail promo banners (adids 33/40/41/23, like legacy) ---------- */
.aspv2 .asp-rail__promos {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-3);
    margin-top: var(--asp-sp-4);
}

.aspv2 .asp-rail__promo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--asp-radius);
}

/* ---------- Popular shows (rail widget) ---------- */
.aspv2 .asp-popular {
    background: #fff;
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
    box-shadow: var(--asp-shadow-sm);
    padding: var(--asp-sp-4);
}

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

.aspv2 .asp-popular__list {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-3);
}

.aspv2 .asp-popular__item {
    display: flex;
    flex-direction: column;
    gap: var(--asp-sp-2);
}

.aspv2 .asp-popular__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--asp-radius-sm);
    overflow: hidden;
    background: var(--asp-line);
}

.aspv2 .asp-popular__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aspv2 .asp-popular__body {
    min-width: 0;
}

.aspv2 .asp-popular__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font-size: var(--asp-fs-xs);
    color: var(--asp-gray);
}

.aspv2 .asp-popular__meta svg {
    flex-shrink: 0;
}

.aspv2 .asp-popular__name {
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 var(--asp-sp-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aspv2 .asp-popular__name a {
    color: var(--asp-ink);
}

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

/* Genre pill on the media, matching the event card's bottom-left treatment. */
.aspv2 .asp-popular__label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: var(--asp-radius-sm);
    background: rgba(11, 28, 48, 0.82);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

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

/* [vc_facebook] renders as a static Like-button embed (verified markup:
   <div class="fb_like ..."><iframe src="…facebook.com/plugins/like.php…">).
   Covers the fb-like/fb_iframe_widget class spellings too in case another
   post's WPBakery version renders XFBML markup instead of this static
   iframe. .vc_btn3 (tour-dates button) and the video wrapper already get
   their generic treatment from the shared B3 core above — nothing
   musical-specific needed there. */
.aspv2 .asp-prose .fb_like,
.aspv2 .asp-prose .fb-like,
.aspv2 .asp-prose .fb_iframe_widget {
    display: block;
    margin: var(--asp-sp-4) 0;
}

.aspv2 .asp-prose .fb_like iframe,
.aspv2 .asp-prose .fb-like iframe,
.aspv2 .asp-prose .fb_iframe_widget iframe {
    max-width: 100%;
}

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