/* ===========================================================================
   Entity detail pages — venue and artist.

   Replaces details_page.css and the first 235 lines of artist_page.css, which
   were the same file twice. One naming system, prefixed dp- (detail page):

     .dp-hero      page header, with or without a backdrop image
     .dp-stats     the at-a-glance figure strip under it
     .dp-layout    main column + sidebar
     .dp-section   a titled block, .dp-head its hairline header
     .dp-list      date-railed gig rows, the shape used on the homepage
     .dp-chips     compact link sets (cities, venues, bill-mates)
     .dp-card      a sidebar widget
     .dp-strip     horizontally scrolling media/album rail

   Deliberately mirrors home.css so a visitor moving from the homepage to a
   venue or artist page is looking at one site rather than three.
   =========================================================================== */

:root {
    --dp-max: 1280px;
    --dp-gut: 1.5rem;
    --dp-red: #ff0000;
    --dp-red-dim: #cc0000;
    --dp-red-soft: #ff4444;
    --dp-line: rgba(255, 255, 255, 0.10);
    --dp-line-soft: rgba(255, 255, 255, 0.06);
    --dp-surface: #101010;
    --dp-surface-2: #161616;
    --dp-muted: #8a8a8a;
    --dp-text: #d8d8d8;
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------------- */

.dp-crumbs {
    max-width: var(--dp-max);
    margin: 0 auto;
    /* The fixed header is 89px tall but layout.css only reserves 60px on
       <main>, so the first 29px of any page sits behind it. Rather than move a
       site-wide value under two pages' worth of testing, the crumbs carry
       enough top padding to clear it. */
    padding: 3rem var(--dp-gut) 0;
    font-size: 0.78rem;
    color: var(--dp-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.dp-crumbs a {
    color: var(--dp-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dp-crumbs a:hover {
    color: #fff;
}

.dp-crumbs span[aria-current] {
    color: #fff;
}

.dp-crumbs .sep {
    opacity: 0.45;
    font-size: 0.7rem;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.dp-hero {
    position: relative;
    overflow: hidden;
    margin-top: 0.9rem;
    /* No fixed height. The old header was locked to 400px, so a venue with a
       long name and four facts was cramped while an artist with a name and
       nothing else got 320px of empty gradient. */
    padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--dp-line-soft);
    border-bottom: 1px solid var(--dp-line);
    background: linear-gradient(150deg, #141414 0%, #1b0c0c 55%, #240808 100%);
}

/* Backdrop, used only when the page actually has a picture of its subject —
   an approved fan photo, the next gig's artwork, or the artist portrait. The
   old design put the same stock crowd shot behind all 1,298 venues. */
.dp-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(0.8);
    transform: scale(1.12);
    opacity: 0.5;
}

.dp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 100% at 15% 0%, rgba(255, 0, 0, 0.12), transparent 60%),
        linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.dp-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--dp-max);
    margin: 0 auto;
    padding: 0 var(--dp-gut);
    display: flex;
    align-items: flex-end;
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* Round portrait, artist pages with a real image only. */
.dp-hero-portrait {
    flex: 0 0 auto;
    width: clamp(96px, 14vw, 152px);
    height: clamp(96px, 14vw, 152px);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: var(--dp-surface);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.dp-hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dp-hero-body {
    min-width: 0;
    flex: 1 1 auto;
}

.dp-eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-red-soft);
}

/* Inter, not the Lacquer grunge face the old headers used. At 3rem that font
   was close to unreadable, and it matched nothing else on the site. */
.dp-title {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.75rem, 5.5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

.dp-sub {
    margin: 0.6rem 0 0;
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--dp-text);
    font-weight: 500;
}

.dp-sub a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.dp-sub a:hover {
    color: #fff;
    text-decoration-color: var(--dp-red);
}

.dp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.15rem;
}

@media (max-width: 700px) {
    .dp-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Buttons ----------------------------------------------------------------- */

.dp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.dp-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.dp-btn i {
    font-size: 0.85em;
}

.dp-btn--primary {
    background: var(--dp-red);
    border-color: var(--dp-red);
}

.dp-btn--primary:hover {
    background: var(--dp-red-dim);
    border-color: var(--dp-red-dim);
}

/* Liked state — filled heart plus a red wash, so it reads at a glance. */
.dp-btn--on {
    background: rgba(255, 0, 0, 0.22);
    border-color: var(--dp-red);
}

.dp-btn--on:hover {
    background: rgba(255, 0, 0, 0.3);
}

.dp-btn .heart {
    color: var(--dp-red-soft);
}

.dp-btn--spotify:hover {
    background: rgba(30, 215, 96, 0.16);
    border-color: #1ed760;
}

/* ---------------------------------------------------------------------------
   At-a-glance figures
   --------------------------------------------------------------------------- */

.dp-stats {
    position: relative;
    z-index: 1;
    max-width: var(--dp-max);
    margin: 0 auto;
    padding: 1.5rem var(--dp-gut) 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

/* A single tile stretched across 1280px reads as a mistake rather than a
   figure, so a lone one keeps a sane width. */
.dp-stats:has(> .dp-stat:only-child) {
    grid-template-columns: minmax(150px, 260px);
}

.dp-stat {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--dp-line);
    border-radius: 6px;
    background: var(--dp-surface);
}

.dp-stat-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.dp-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dp-muted);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.dp-layout {
    max-width: var(--dp-max);
    margin: 0 auto;
    padding: 2rem var(--dp-gut) 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
}

.dp-main {
    min-width: 0;
}

.dp-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 76px;
}

@media (max-width: 940px) {
    .dp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .dp-side {
        position: static;
    }
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */

.dp-section {
    margin-bottom: 2.5rem;
}

.dp-section:last-child {
    margin-bottom: 0;
}

.dp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--dp-line);
}

.dp-h {
    margin: 0;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.dp-h small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dp-muted);
}

.dp-more {
    flex-shrink: 0;
    color: var(--dp-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.dp-more:hover {
    opacity: 0.7;
}

/* Same affordance rendered as a <button> — the media panel's toggle is not a
   link, so it must not be marked up as one. */
.dp-more--btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dp-red);
    cursor: pointer;
}

.dp-more i {
    margin-left: 0.3rem;
    font-size: 0.72rem;
}

/* Body copy: bios, venue descriptions. */
.dp-prose {
    color: var(--dp-text);
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 68ch;
}

.dp-prose p {
    margin: 0 0 0.9rem;
}

.dp-prose p:last-child {
    margin-bottom: 0;
}

.dp-prose a {
    color: var(--dp-red-soft);
}

.dp-empty {
    color: #777;
    font-size: 0.9rem;
    margin: 0;
}

.dp-empty a {
    color: var(--dp-red);
    text-decoration: none;
}

.dp-empty a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Gig rows
   --------------------------------------------------------------------------- */

.dp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dp-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 6px;
    border-bottom: 1px solid var(--dp-line-soft);
    transition: background 0.18s ease;
}

.dp-row:last-child {
    border-bottom: none;
}

.dp-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dp-row-date {
    flex: 0 0 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.dp-row-date em {
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dp-red);
}

.dp-row-date b {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.dp-row-date i {
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dp-muted);
}

.dp-row-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--dp-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.dp-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dp-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Stretched link: the anchor is only around the title (so the accessible name
   is the gig, not the whole row) but its ::after covers the row, which keeps
   the row clickable without nesting a ticket link inside another anchor. */
.dp-row-title {
    display: block;
    font-size: 0.96rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.dp-row-title::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
}

.dp-row:hover .dp-row-title {
    color: var(--dp-red);
}

.dp-row-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--dp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-row-price {
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: #bbb;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Above the stretched link so the ticket click isn't swallowed by the row. */
.dp-row-tickets {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.dp-row-tickets:hover {
    background: var(--dp-red);
    border-color: var(--dp-red);
}

.dp-row-go {
    flex: 0 0 auto;
    color: #444;
    font-size: 0.78rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.dp-row:hover .dp-row-go {
    color: var(--dp-red);
    transform: translateX(3px);
}

/* The row stays on one line all the way down. Letting it wrap put the date
   and thumbnail alone on the first line and the title underneath, which read
   as two rows per gig. Dropping the price, the arrow and (on the narrowest
   screens) the thumbnail buys back the width instead. */
@media (max-width: 640px) {
    .dp-row {
        gap: 0.7rem;
        flex-wrap: nowrap;
    }

    .dp-row-thumb {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .dp-row-date {
        flex-basis: 44px;
    }

    .dp-row-date b {
        font-size: 1.2rem;
    }

    .dp-row-price,
    .dp-row-go {
        display: none;
    }
}

@media (max-width: 480px) {
    .dp-row-thumb {
        display: none;
    }

    .dp-row-tickets {
        padding: 0.4rem 0.7rem;
    }
}

/* "Show all N dates" — the rest of the listing is in the DOM either way, so
   every gig is crawlable; the class that hides it is only ever added by
   script, which is why a no-JS visitor sees the full list. */
.dp-js .dp-row.is-folded {
    display: none;
}

.dp-showall {
    display: none;
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--dp-line);
    border-radius: 6px;
    background: transparent;
    color: #ddd;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dp-js .dp-showall {
    display: block;
}

.dp-showall:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Chips
   --------------------------------------------------------------------------- */

.dp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--dp-line);
    border-radius: 999px;
    background: var(--dp-surface);
    color: #e4e4e4;
    font-size: 0.82rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dp-chip:hover {
    border-color: var(--dp-red);
    background: rgba(255, 0, 0, 0.1);
    color: #fff;
}

.dp-chip span {
    font-size: 0.72rem;
    color: var(--dp-muted);
    font-variant-numeric: tabular-nums;
}

.dp-chip:hover span {
    color: var(--dp-red-soft);
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.dp-faq-q {
    margin: 1.4rem 0 0.35rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
}

.dp-faq-q:first-of-type {
    margin-top: 0;
}

.dp-faq-a {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--dp-text);
    max-width: 68ch;
}

.dp-faq-a a {
    color: var(--dp-red-soft);
}

/* ---------------------------------------------------------------------------
   Sidebar cards
   --------------------------------------------------------------------------- */

.dp-card {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--dp-line);
    border-radius: 8px;
    background: var(--dp-surface);
}

.dp-card--accent {
    border-color: rgba(255, 0, 0, 0.35);
    background: linear-gradient(160deg, rgba(255, 0, 0, 0.08), transparent 60%), var(--dp-surface);
}

.dp-card-title {
    margin: 0 0 0.85rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dp-muted);
}

.dp-card p {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--dp-text);
}

.dp-card p:last-child {
    margin-bottom: 0;
}

.dp-card .dp-btn {
    width: 100%;
    justify-content: center;
}

.dp-card .dp-btn + .dp-btn {
    margin-top: 0.5rem;
}

/* Definition rows — address, capacity, that sort of thing. */
.dp-facts {
    margin: 0;
    font-size: 0.86rem;
}

.dp-facts div {
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--dp-line-soft);
}

.dp-facts div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dp-facts dt {
    flex: 0 0 84px;
    color: var(--dp-muted);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dp-facts dd {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    color: #e4e4e4;
    overflow-wrap: anywhere;
}

.dp-facts dd a {
    color: var(--dp-red-soft);
    text-decoration: none;
}

.dp-facts dd a:hover {
    text-decoration: underline;
}

/* People rail — recent attendees, related artists. */
.dp-people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dp-person {
    width: 54px;
    text-align: center;
    text-decoration: none;
    color: var(--dp-muted);
}

.dp-person img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: border-color 0.2s ease;
}

.dp-person:hover img {
    border-color: var(--dp-red);
}

.dp-person span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-peer {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--dp-line-soft);
    text-decoration: none;
    color: inherit;
}

.dp-peer:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dp-peer img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.dp-peer-body {
    min-width: 0;
}

.dp-peer-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.dp-peer:hover .dp-peer-name {
    color: var(--dp-red);
}

.dp-peer-meta {
    display: block;
    font-size: 0.74rem;
    color: var(--dp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Horizontal rails — fan media, album artwork, image gallery
   --------------------------------------------------------------------------- */

.dp-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dp-strip::-webkit-scrollbar {
    display: none;
}

.dp-tile {
    flex: 0 0 auto;
    width: 230px;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    border: 1px solid var(--dp-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--dp-surface);
}

.dp-tile img,
.dp-tile video {
    width: 100%;
    height: 172px;
    object-fit: cover;
    display: block;
    background: #000;
}

.dp-tile--square img {
    height: 230px;
}

.dp-tile figcaption,
.dp-tile-body {
    padding: 0.6rem 0.75rem;
    font-size: 0.76rem;
    color: var(--dp-muted);
    line-height: 1.5;
}

.dp-tile-name {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-tile figcaption strong {
    display: block;
    color: #ddd;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-tile a {
    color: var(--dp-red-soft);
    text-decoration: none;
}

.dp-tile a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Tracks
   --------------------------------------------------------------------------- */

.dp-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--dp-line-soft);
}

.dp-track:last-child {
    border-bottom: none;
}

.dp-track-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dp-track-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-track-album {
    display: block;
    font-size: 0.78rem;
    color: var(--dp-muted);
}

.dp-track audio {
    height: 32px;
    max-width: 200px;
}

/* ---------------------------------------------------------------------------
   Upload form (venue media)
   --------------------------------------------------------------------------- */

.dp-upload {
    margin-bottom: 1.25rem;
    padding: 1.2rem;
    border: 1px solid var(--dp-line);
    border-radius: 8px;
    background: var(--dp-surface);
}

.dp-js .dp-upload[hidden] {
    display: none;
}

.dp-upload p {
    margin: 0 0 0.85rem;
    font-size: 0.84rem;
    color: var(--dp-muted);
    line-height: 1.6;
}

.dp-upload-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.dp-upload label {
    font-size: 0.82rem;
    color: #ccc;
}

.dp-upload input[type="file"] {
    display: block;
    margin-top: 0.3rem;
    color: var(--dp-muted);
    font-size: 0.8rem;
}

.dp-upload input[type="text"] {
    width: 100%;
    margin-bottom: 0.85rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: #0c0c0c;
    color: #eee;
    font: inherit;
    font-size: 0.86rem;
}

.dp-upload input[type="text"]:focus {
    outline: none;
    border-color: var(--dp-red);
}

/* ---------------------------------------------------------------------------
   Scrollbars — carried over from artist_page.css, which this file replaces
   --------------------------------------------------------------------------- */

html {
    scrollbar-width: thin;
    scrollbar-color: #444 #101010;
}

::-webkit-scrollbar {
    width: 10px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #101010;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border: 2px solid #101010;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dp-red);
}

::-webkit-scrollbar-corner {
    background: #101010;
}

@media (prefers-reduced-motion: reduce) {
    .dp-btn,
    .dp-row-go,
    .dp-chip,
    .dp-hero-media {
        transition: none;
    }
}