/**
 * Artspod v2 — venue singles.
 *
 * These pages carry no featured image (exactly one of 543 does) and most have
 * no shows on sale, so the layout is built to hold up as a mostly-typographic
 * page: a two-column header that collapses to one when there's no photo, and
 * an empty state that reads as a deliberate signpost rather than a gap.
 */

.aspv2 .asp-content--venue {
    padding-block: var(--asp-sp-5) var(--asp-sp-7);
}

/* ---------- Header ---------- */
.aspv2 .asp-venue__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--asp-sp-5);
    align-items: start;
    margin-bottom: var(--asp-sp-5);
}

/* No photo: the intro simply spans the row. */
.aspv2 .asp-venue__head:not(:has(.asp-venue__photo)) {
    grid-template-columns: minmax(0, 1fr);
}

.aspv2 .asp-venue__eyebrow {
    margin: 0 0 var(--asp-sp-2);
    font-size: var(--asp-fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--asp-primary);
}

.aspv2 .asp-venue__eyebrow a {
    color: inherit;
}

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

.aspv2 .asp-venue__head .asp-page-title {
    margin-bottom: var(--asp-sp-3);
}

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

.aspv2 .asp-venue__meta li {
    display: flex;
    align-items: center;
    gap: var(--asp-sp-2);
    font-size: var(--asp-fs-sm);
    color: var(--asp-gray);
}

.aspv2 .asp-venue__meta svg {
    flex-shrink: 0;
    color: var(--asp-primary);
}

.aspv2 .asp-venue__site {
    text-decoration: none;
}

/* These are as often logos on white as they are photographs, so the image is
   contained and height-capped rather than cropped to a ratio — cropping blew
   a wordmark up to fill a 4:3 box and unbalanced the whole header. */
.aspv2 .asp-venue__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--asp-sp-3);
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
    background: #fff;
    box-shadow: var(--asp-shadow-sm);
}

.aspv2 .asp-venue__photo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 260px;
    height: auto;
    object-fit: contain;
}

/* ---------- Editor copy ---------- */
.aspv2 .asp-venue__body {
    margin-bottom: var(--asp-sp-6);
}

/* WPBakery leaves empty grid wrappers behind once the image and button
   shortcodes are suppressed — collapse their spacing. */
.aspv2 .asp-venue__body .vc_empty_space,
.aspv2 .asp-venue__body .vc_row:empty,
.aspv2 .asp-venue__body .wpb_column:empty {
    display: none;
}

/* ---------- Shows ---------- */
.aspv2 .asp-venue__shows {
    margin-bottom: var(--asp-sp-5);
}

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

/* ---------- Empty state (the common case) ---------- */
.aspv2 .asp-venue__empty {
    background: var(--asp-bg-soft);
    border: 1px solid var(--asp-line);
    border-radius: var(--asp-radius);
    padding: var(--asp-sp-5);
    text-align: center;
}

.aspv2 .asp-venue__empty p {
    margin: 0 auto var(--asp-sp-4);
    max-width: 520px;
    color: var(--asp-muted);
    line-height: 1.6;
}

.aspv2 .asp-venue__empty-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--asp-sp-2);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .aspv2 .asp-venue__head {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Photo above the copy reads better once stacked. */
    .aspv2 .asp-venue__photo {
        order: -1;
    }

    .aspv2 .asp-venue__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .aspv2 .asp-venue__empty {
        padding: var(--asp-sp-4);
    }

    .aspv2 .asp-venue__empty-links .asp-btn {
        width: 100%;
    }
}