/* City hubs and gig guides — /city/…, /radar/country/… and /gigs/…
 *
 * Loaded AFTER detail.css, and dependent on it. The venue and artist pages
 * already answer "what does a Moshradar page look like" — hero, chips, two
 * columns, hairline sections — and the city pages used to answer it a fourth
 * way, with a 500px hero, three animated pulse rings and 1,560 lines of its
 * own. That sheet is gone; this one holds only what a city hub has that a
 * venue page does not.
 *
 * No :root block. The --dp-* tokens come from detail.css, and a second copy of
 * the same palette was two sources of truth for one set of colours — the same
 * note festival.css carries.
 *
 * The tab strip is NOT here: .dp-tabs lives in detail.css, because the profile
 * and the festival hubs want it too.
 */

/* --- Bulletin board ------------------------------------------------------
 * The one component with no dp-* equivalent: nothing else on the site is a
 * comment wall. Ported from the old sheet's .chat-* block onto tokens. */

.cy-board-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.cy-board-input {
    width: 100%;
    min-height: 80px;
    padding: 0.9rem 1rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-line);
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.cy-board-input:focus {
    outline: none;
    border-color: var(--dp-red);
}

.cy-board-form .dp-btn { align-self: flex-end; }

.cy-msgs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

.cy-msg-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.cy-msg-author {
    color: var(--dp-red-soft);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.cy-msg-author:hover { text-decoration: underline; }

.cy-msg-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--dp-muted);
}

.cy-msg-body {
    margin: 0;
    color: var(--dp-text);
    font-size: 0.92rem;
    line-height: 1.6;
    /* Posts are plain text typed into a textarea, so the line breaks someone
       put in are part of what they wrote. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Map ------------------------------------------------------------------
 * _map.html brings its own radar_map.css; this is only the frame around it, so
 * it sits in a .dp-section like every other block rather than bleeding to the
 * edges. */

.cy-map {
    border: 1px solid var(--dp-line);
    border-radius: 8px;
    overflow: hidden;
}

/* --- Promoter marker ------------------------------------------------------ */

.cy-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    background: var(--dp-red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* --- Sub-heading inside a section -----------------------------------------
 * "By genre" / "When are you going?" / "By month" inside the browse block.
 * Not .dp-faq-q: those are questions with an answer under them and a twin in
 * the FAQPage JSON-LD, and borrowing the class here would have put three
 * non-questions into anything that counts them. */

.cy-subhead {
    margin: 1.5rem 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dp-muted);
}

.cy-subhead:first-of-type { margin-top: 0.9rem; }

/* --- Vertical rhythm ------------------------------------------------------
 *
 * detail.css spaces a venue page, which is a plain stack of .dp-section: each
 * carries a bottom margin and nothing else. These pages open differently. A
 * paragraph, a row of navigation chips and, on the hubs, a tab strip all land
 * before the first section, and none of those three has a margin of its own —
 * so there was a large gap under the stats strip and then nothing at all
 * between the next four things.
 *
 * Everything here is scoped to .cy-page or a cy- class, so the venue, artist,
 * label, profile and festival pages keep the spacing they already have.
 */

/* The opening paragraph. The hubs lift theirs out of the column entirely so it
   reads as the page's first line rather than as the top of whichever tab
   happens to be open. */
.cy-lede {
    max-width: var(--dp-max);
    /* .dp-stats has padding-top only, so the top margin here is the whole gap. */
    margin: 1.5rem auto 1.75rem;
    /* Must match .dp-layout's gutter, or the paragraph hangs left of the
       content below it. */
    padding: 0 var(--dp-gut);
}

.cy-page {
    padding-top: 1.25rem;
}

/* The gig guides keep their paragraph inside the column. */
.cy-page .dp-main > .dp-prose {
    margin-bottom: 1.6rem;
}

/* Chip rows used as navigation, sitting directly in the column rather than
   inside a section. */
.cy-page .dp-main > .dp-chips {
    margin: 0 0 2.25rem;
}

/* A heading straight after prose or chips wants the air a preceding section's
   bottom margin would have given it. */
.cy-page .dp-main > .dp-prose + .dp-section,
.cy-page .dp-main > .dp-chips + .dp-section {
    margin-top: 0.75rem;
}

/* Panels are siblings with one shown at a time, so the space above the first
   heading belongs to the panel rather than to every section inside it. */
.cy-page .dp-panel > .dp-section:first-of-type {
    margin-top: 0.5rem;
}

/* --- The block below the tabs ---------------------------------------------
 *
 * Ruled off because it is page-level, not tab content: the browse links are
 * this page's crawl path to its genre, timeframe and month spokes, and someone
 * landing on ?tab=media should still meet the prose and the FAQ. Without a
 * divider it reads as though every tab were repeating the same thing.
 */
.cy-evergreen {
    margin-top: 3.25rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--dp-line);
}

@media (max-width: 760px) {
    .cy-lede { margin-top: 1.25rem; }
    .cy-evergreen { margin-top: 2.25rem; padding-top: 1.75rem; }
}