/* ==========================================================================
   411 CONNECTIONS — DETAIL PAGES (child theme)
   --------------------------------------------------------------------------
   The event and organization pages, from notice/assets/css/site.css
   ("crumb", "doc-head", "locator"). Loads after the widgets plugin's
   tokens → base → widgets, and reuses their classes: c411-dochero,
   c411-docbody, c411-prose, c411-side, c411-statlist, c411-dl, c411-callout,
   c411-posters, c411-sechead.

   The classes this file ADDS — each grepped for across all three packages
   before it was used (GOTCHAS 17 / 29), and each whole, never built onto a
   shared prefix:
       c411-main  c411-docpage  c411-docsec  c411-crumb  c411-dochead
       c411-dochead--solo  c411-dochead__title  c411-dochead__title--long
       c411-dochead__by  c411-docstatus
       c411-docnote  c411-docmap  c411-docpills  c411-side__actions

   ⚠️ Nothing here restyles a widgets class on its own. Where a rule touches
   one it is scoped under .c411-docpage and wins on WEIGHT, not on file
   order (GOTCHAS 30).
   ========================================================================== */

/* The skip-link target. It takes focus (tabindex="-1") so the next Tab
   continues from the content; it is not itself a control, so no ring. */
.c411-main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Crumb
   -------------------------------------------------------------------------- */
.c411-crumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--c411-s2) var(--c411-s3);
	padding: var(--c411-s5) 0;
	font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
	color: var(--c411-ink-soft);
}
.c411-crumb a { color: var(--c411-ink-soft); }
.c411-crumb a:hover { color: var(--c411-orange-ink); }
.c411-crumb [aria-current] { color: var(--c411-ink); overflow-wrap: anywhere; min-width: 0; }

/* --------------------------------------------------------------------------
   Title row: the name on the left, who posted it on the right
   -------------------------------------------------------------------------- */
.c411-dochead {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--c411-s7); align-items: end;
	padding-bottom: var(--c411-s5); margin-bottom: var(--c411-s7);
	border-bottom: 2.5px solid var(--c411-navy);
}
.c411-dochead.c411-dochead--solo { grid-template-columns: minmax(0, 1fr); }
.c411-dochead .c411-eyebrow { display: block; }
.c411-dochead .c411-pill { margin-bottom: var(--c411-s3); }
.c411-dochead__title { margin-top: var(--c411-s3); overflow-wrap: break-word; hyphens: auto; }
/* A title with a 10+ letter word may set smaller than the design's 2.3rem floor,
   so the word fits a phone instead of breaking mid-word (C411_Detail::title_class).
   (0,2,0): wins over .c411-d2 by weight, not file order (GOTCHAS 30). */
.c411-d2.c411-dochead__title--long { font-size: clamp(1.8rem, 5.4vw, 4.4rem); }
.c411-dochead__by .c411-eyebrow { margin-bottom: var(--c411-s2); }
.c411-dochead__by .c411-d4 { margin: 0; overflow-wrap: break-word; }
.c411-dochead__by a { color: var(--c411-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.c411-dochead__by a:hover { color: var(--c411-orange-ink); }
.c411-dochead .c411-lede { margin: 0; font-size: 1rem; }

/* "This event has already happened." */
.c411-callout.c411-docnote { margin: 0 0 var(--c411-s7); max-width: 60em; }

/* --------------------------------------------------------------------------
   Side panel
   -------------------------------------------------------------------------- */
.c411-docpage .c411-side .c411-statlist:last-child { margin-bottom: 0; }
.c411-docpage .c411-statlist .c411-dl:last-child { margin-bottom: 0; }
.c411-side__actions { display: grid; gap: var(--c411-s3); margin-top: var(--c411-s4); }
/* "Email address copied: …" under an email link, added by assets/js/detail.js. */
.c411-docstatus { margin: var(--c411-s2) 0 0; font-size: .85rem; line-height: 1.45; color: var(--c411-ink); overflow-wrap: anywhere; }
/* A panel with no text column beside it should not stretch to 1400px. */
.c411-docpage .c411-docbody--solo > .c411-side { position: static; max-width: 520px; }

/* The locator: the map's own dark ground in both themes (--c411-deep). */
.c411-docmap {
	background: var(--c411-deep); padding: var(--c411-s4);
	border: 2.5px solid var(--c411-navy); margin-bottom: var(--c411-s3);
}
.c411-docmap .c411-locator { display: block; }
.c411-docmap + .c411-xs { margin: 0; }

/* Focus-area pills in the text column. */
.c411-prose .c411-docpills { display: flex; flex-wrap: wrap; gap: 6px; }
.c411-prose .c411-callout { font-size: .95rem; color: var(--c411-ink); }

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.c411-dochead { grid-template-columns: minmax(0, 1fr); gap: var(--c411-s5); }
	.c411-docpage .c411-docbody--solo > .c411-side { max-width: none; }
}
@media (max-width: 680px) {
	.c411-docpage .c411-dochero { aspect-ratio: 4 / 3; margin-bottom: var(--c411-s6); }
	.c411-dochead { margin-bottom: var(--c411-s6); }
}