/**
 * Atlas destination strip (DS-A5): the plugin's events strip on destination pages, after events-strip.css and
 * atlas-tokens.css, only when a strip is printed (haven_theme_events_enqueue_atlas_strip()). --atlas-* colour tokens
 * only; every rule sits under .haven-events-strip and meets events-strip.css's weight, loading later. Dates lead,
 * set large, by CSS order only: the DOM keeps the heading first. Mobile first; no script, no motion.
 */

/* Section and heading. The root keeps the plugin's text colour and face, so the notify form (DS-A6) is unchanged. */
.haven-events-strip { padding: clamp(48px, 6vw, 88px) var(--atlas-pad); background: var(--atlas-paper-3); }
.haven-events-strip h2 { margin: 0 0 28px; color: var(--atlas-ink); font: 400 clamp(32px, 1.1rem + 2vw, 50px)/1.04 var(--atlas-serif); letter-spacing: -0.015em; text-align: left; text-wrap: balance; }
.haven-events-strip .haven-events-strip__preview { margin: 0 0 18px; color: var(--atlas-accent-ink); font: 500 12px/1.4 var(--atlas-mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; }

/* Links: dark ink, underlined in running text, a visible focus ring */
.haven-events-strip a { color: var(--atlas-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.haven-events-strip a:hover { color: var(--atlas-ink); text-decoration-thickness: 2px; }
.haven-events-strip a:focus-visible { outline: 2px solid var(--atlas-accent-ink); outline-offset: 3px; }

/* Month ruler: labels on a grid of --m columns, marks and Today placed by their month offsets. Decorative. */
.haven-events-strip .haven-events-strip__ruler { position: relative; display: grid; grid-template-columns: repeat(var(--m, 12), minmax(0, 1fr)); margin: 30px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--atlas-ink); color: var(--atlas-ink-3); font: 400 9px/1 var(--atlas-mono); letter-spacing: 0; text-transform: uppercase; container-type: inline-size; }
.haven-events-strip .haven-events-strip__ruler span { min-width: 0; overflow: hidden; padding-left: 3px; border-left: 1px solid var(--atlas-rule); white-space: nowrap; font-size: 9px; font-size: clamp(7px, calc((100cqi / var(--m, 12) - 3px) / 3.7), 10.5px); }
.haven-events-strip .haven-events-strip__ruler i { position: absolute; bottom: -4px; left: calc(var(--x) / var(--m) * 100%); width: calc(var(--w) / var(--m) * 100%); min-width: 6px; height: 8px; border-radius: 4px; background: var(--atlas-ink-2); }
.haven-events-strip .haven-events-strip__today { position: absolute; top: -20px; bottom: -8px; left: calc(var(--x) / var(--m) * 100%); width: 0; border-left: 2px solid var(--atlas-accent); }
.haven-events-strip .haven-events-strip__today::before { content: "Today"; position: absolute; top: 0; left: 5px; color: var(--atlas-accent-ink); font: 500 9px/1 var(--atlas-mono); letter-spacing: .12em; white-space: nowrap; }
/* The script hides ended items and rebuilds stale cached strips; the ruler then no longer matches, so it goes. */
.haven-events-strip:has(.haven-events-strip__items > li[hidden]) .haven-events-strip__ruler { display: none; }

/* Items: one column, three from 768px as events-strip.css; a rule under each */
.haven-events-strip .haven-events-strip__items { gap: 0; border-top: 2px solid var(--atlas-ink); }
.haven-events-strip .haven-events-strip__ruler + .haven-events-strip__items { border-top: 0; }
.haven-events-strip .haven-events-strip__items > li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 22px 0 26px; border-top: 0; border-bottom: 1px solid var(--atlas-rule); }

/* Dates first: the paragraph moves before the heading visually; its first date (the first element child, also after
   "N sessions from") is set large, the rest stays mono. "Dates to be announced" has no date and stays mono. */
.haven-events-strip .haven-events-strip__items > li > .haven-events-strip__dates { order: -1; }
.haven-events-strip .haven-events-strip__dates { margin: 0; color: var(--atlas-accent-ink); font: 500 13px/1.4 var(--atlas-mono); letter-spacing: .02em; }
.haven-events-strip .haven-events-strip__dates > time:first-child { display: block; margin-bottom: 6px; color: var(--atlas-ink); font: 300 clamp(34px, 1.2rem + 2vw, 44px)/1 var(--atlas-serif); font-variation-settings: "opsz" 72; letter-spacing: -0.02em; }

/* Event name: a serif heading whose link reads as a link */
.haven-events-strip .haven-events-strip__items h3 { margin: 0; color: var(--atlas-ink); font: 400 24px/1.15 var(--atlas-serif); letter-spacing: -0.015em; text-wrap: balance; }
.haven-events-strip .haven-events-strip__items h3 a { color: var(--atlas-ink); text-decoration: underline; text-decoration-color: var(--atlas-rule-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.haven-events-strip .haven-events-strip__items h3 a:hover { text-decoration-color: var(--atlas-ink); text-decoration-thickness: 2px; }

/* Status: a small source label after a short rule */
.haven-events-strip .haven-events-strip__status { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--atlas-ink-3); font: 500 11px/1.4 var(--atlas-mono); letter-spacing: .12em; text-transform: uppercase; }
.haven-events-strip .haven-events-strip__status::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }

/* Section-only extras: the event note, and the stay hint with its link underlined in running text */
.haven-events-strip .haven-events-strip__note { margin: 0; color: var(--atlas-ink-2); font: 400 16px/1.55 var(--atlas-serif); }
.haven-events-strip .haven-events-strip__stay-hint { margin: 22px 0 0; color: var(--atlas-ink-3); font: 400 15px/1.5 var(--atlas-sans); }
.haven-events-strip .haven-events-strip__stay-hint a { color: var(--atlas-accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The region link as an outline button; the arrow is a decorative pseudo-element with empty alternative text */
.haven-events-strip a.haven-events-strip__all { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 44px; max-width: 100%; margin-top: 26px; padding: 10px 18px; border: 1px solid var(--atlas-ink); border-radius: 2px; background: transparent; color: var(--atlas-ink); font: 600 15px/1.2 var(--atlas-sans); text-decoration: none; }
.haven-events-strip a.haven-events-strip__all::after { content: "\2192"; content: "\2192" / ""; flex: none; }
.haven-events-strip a.haven-events-strip__all:hover { background: var(--atlas-ink); color: var(--atlas-paper-3); text-decoration: none; }

@media (min-width: 700px) {
	.haven-events-strip .haven-events-strip__ruler span { padding-left: 6px; letter-spacing: .12em; }
}
@media (min-width: 768px) {
	.haven-events-strip .haven-events-strip__items > li { padding: 22px 22px 26px 0; }
	.haven-events-strip .haven-events-strip__items > li:not(:nth-child(3n + 1)) { padding-left: 22px; border-left: 1px solid var(--atlas-rule); }
}