/* ==========================================================================
   Detail page chassis (UI plan Wave 5 Phase B, 2026-09-25)

   Design: docs/devalay_handoff_clean/"Devalay Round 4 Detail and List.dc.html"
   section 01 `detailPage`. Styles the parts `_detail_base.html` renders for
   all five entity types. Linked from that template right AFTER
   pages/temple.css, which is unlayered too: equal specificity, later wins,
   so these replace the old rules without !important.
   ========================================================================== */

/* ── Breadcrumb ─────────────────────────────────────────────────────────
   Devalay / Temples / <title>, from `breadcrumb_trail()` -- the same trail
   the JSON-LD BreadcrumbList carries. */
.dvl-crumbs {
    max-width: 1130px;
    margin: 0 0 var(--s-3);
    font-size: var(--t-caption);
    font-weight: 500;
    color: var(--text-tertiary);
}
.dvl-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dvl-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}
.dvl-crumbs li + li::before {
    content: "/";
    color: var(--text-muted);
}
.dvl-crumbs a {
    color: inherit;
    text-decoration: none;
}
.dvl-crumbs a:hover,
.dvl-crumbs a:focus-visible {
    color: var(--text-link);
    text-decoration: underline;
}
.dvl-crumbs [aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

/* ── Tabs: title case, the active one on a tinted pill ──────────────────
   Design: 38px tabs rounded on top, the current one on --saffron-bg with a
   2px underline. The underline is not the only cue (the fill and the ink
   change too), so the saffron line is decoration, not a focus ring. */
.full-container .sections {
    gap: var(--s-1);
}
.full-container .nav-tab {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--s-4);
    border-radius: 9px 9px 0 0;
    color: var(--text-secondary);
    letter-spacing: 0;
    cursor: pointer;
}
.full-container .nav-tab.active {
    background: var(--saffron-bg);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--saffron);
    font-weight: 600;
}
.full-container .nav-tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* ── Hero: grows with its content, at every width ───────────────────────
   temple.css gave the hero `height: 300px` and pinned its content to the
   bottom with `position: absolute`. Anything taller -- a two-line title, a
   long address, the event's six buttons -- pushed the type chip out through
   the TOP, where `overflow: hidden` cut it off (measured on the event page:
   the "Event" chip was not visible at 1440px, the address was a 150px-wide
   column). Phones already had the fix below (temple.css @ max-width); it now
   applies everywhere. The title column takes a fixed share (flex-basis) so a
   crowded button row WRAPS under it instead of squeezing it. */
.full-container .whero {
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
}
.full-container .whero.god { height: auto; min-height: 260px; }  /* temple.css fixes it at 260px, two classes deep */
.full-container .whero .c {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    padding: var(--s-8) var(--s-6) var(--s-6);
    flex-wrap: wrap;
    row-gap: var(--s-4);
}
/* Desktop only: on a phone temple.css turns .c into a COLUMN, where a
   340px flex-basis becomes a 340px HEIGHT (measured: phone heroes grew from
   ~300px to 571px). */
@media (min-width: 768px) {
    .full-container .whero .whero-info { flex: 1 1 340px; }
}

/* A scrim for text that can now sit anywhere in the hero. The shared
   --gradient-image-overlay fades to nothing HALFWAY up, which suited a fixed
   300px hero with its text in the bottom half; a hero that grows (a phone, a
   long title) puts the chip and the title above that line, white on a bright
   photograph (seen on production: /Devalay/235/, a marble facade). Detail
   hero only; the token is shared with cards. Worst case, white text over a
   pure-white pixel (computed): 3.6:1 at the 0.5 stop, where only the large
   title can reach (3:1 floor for large text); 8.9:1 from the 0.75 stop down,
   where the address and the buttons sit. The shadow is for busy photos. */
.full-container .whero .ov {
    background: linear-gradient(to top,
        rgb(15 11 31 / 0.92) 0%,
        rgb(15 11 31 / 0.75) 45%,
        rgb(15 11 31 / 0.5) 75%,
        rgb(15 11 31 / 0.3) 100%);
}
.full-container .whero .nm,
.full-container .whero .loc {
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

/* The hero image stays out until it has loaded: `hidden` beats the
   `display: block` temple.css gives .whero-img only if stated here. */
.full-container .whero-img[hidden] { display: none; }

/* Every line under the title is one size: the address carried
   `.temple-address` sizing from elsewhere and read larger than the date. */
.full-container .whero .loc address,
.full-container .whero .loc .loc-text { font-size: inherit; line-height: 1.45; }

/* A wrapped address keeps its pin on the FIRST line, not centred on the
   block. */
.full-container .whero .loc { align-items: flex-start; }
.full-container .whero .loc svg { margin-top: 0.2em; }

/* The event's when/where lines. cards.css styles every `.event-date` /
   `.event-time` as a big grey block for the listing cards; in the hero they
   are part of one white line. */
.full-container .whero .event-date,
.full-container .whero .event-time {
    display: inline;
    font: inherit;
    color: inherit;
}

/* ── Rail cards: body text at body size ─────────────────────────────────
   temple.css set `.program-content` at --t-title-lg, so the event's
   Guidelines read as a headline. The design's side-card text is body-small
   in the secondary ink. */
.full-container .program-content {
    font-size: var(--t-body-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── Event: the RSVP counts inside the hero's glass buttons ──────────────
   Was pages/event-detail.css, which also held its own body-text sizes
   (larger than the other four types), a bare `.card` width for the rail,
   and rules for markup that no longer exists. All five types now share
   one body style; event.css and event-detail.css are gone. */
.full-container .rsvp-count {
    background: var(--surface-2);
    padding: 1px var(--s-2);
    border-radius: var(--radius-md);
    font-size: var(--t-caption);
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .dvl-crumbs {
        margin-inline: var(--s-4);
    }
    .dvl-crumbs [aria-current="page"] {
        max-width: 24ch;
    }
}