/* Arkon Event Manager — single event template.

   Deliberately restrained. This template exists so the page is never blank when
   the theme has no layout for the post type; it is a floor, not a design. It
   inherits the theme's fonts wherever possible and only sets what it must.

   Layout note. The theme this was built against uses an overlay header:
   header.x-masthead collapses to zero height and the visible nav bar inside it
   is positioned absolutely, so content laid out from the top of the document
   renders underneath the navigation. Every other page on the site answers that
   with a tall full-bleed hero band that the nav sits over, so this template does
   the same rather than padding the content down. Adjust the band with:

     .abm-single { --abm-hero-min: 420px; }

   Recolour the accent with:

     .abm-single { --abm-accent: #ff129f; }

   If the theme later supplies its own single-abm_event.php, or a Cornerstone
   Single Layout is assigned to Event, neither this file nor the template loads. */

.abm-single {
	/* Same tokens as the calendar list, sampled from the live site: the brand
	   pink off the active nav pill, and Cornerstone's own transition curve. */
	--abm-accent: #ff129f;
	--abm-hover-fill: #191919;
	--abm-ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--abm-rule: rgba(128, 128, 128, 0.25);
	--abm-hero-min: 420px;
	--abm-hero-ink: #fff;
	--abm-ink: #171c24;
	--abm-muted: #5f6570;
	/* The script face the theme uses for every other hero title. */
	--abm-hero-font: ScriptMT, "Script MT", "Brush Script MT", cursive, serif;
}

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

.abm-single-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--abm-hero-min);
	padding: 140px 20px 60px; /* top clears the overlay nav */
	box-sizing: border-box;
	text-align: center;
	background-color: #1a1013;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Darkening wash, so the title stays legible over any flyer. */
.abm-single-hero.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 15, 0.72);
}

.abm-single-hero-inner {
	position: relative; /* above the wash */
	max-width: 900px;
	width: 100%;
}

/* Matches the other hero titles on the site, which are ScriptMT at 70px on a
   desktop viewport. Sized with clamp() rather than a fixed value plus
   breakpoints: the theme scales its own type fluidly (its buttons use
   calc(0.75em + 1vmin)), and a fluid rule needs no breakpoint set to maintain. */
.abm-single-title {
	margin: 0;
	font-family: var(--abm-hero-font);
	font-weight: 400;
	font-size: clamp(2.4rem, 1.2rem + 4vw, 4.375rem);
	line-height: 1.12;
	color: var(--abm-hero-ink);
}

.abm-single-hero-date {
	margin: 14px 0 0;
	color: var(--abm-hero-ink);
	opacity: 0.92;
	font-size: 1.05rem;
}

.abm-single-hero-sep {
	opacity: 0.55;
	padding: 0 4px;
}

/* Body ------------------------------------------------------------------ */

.abm-single-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 48px 20px 64px;
	box-sizing: border-box;
}

.abm-single-body {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

/* Four siblings in one flex container, placed by `order` alone.

   Wide screen:  [ flyer | details ]      heading, then description beneath.
   Phone:        flyer, heading, details, description — the heading rises so the
                 visitor knows what they are reading before the meta list.

   When there is no description the heading has nothing to introduce, so it moves
   up beside the details on every width rather than stranding itself below the
   columns. Hence .has-description. */
.abm-single-flyer {
	order: 1;
	flex: 0 1 380px;
	min-width: 0;
}

.abm-single-flyer img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.abm-single-detail {
	order: 3;
	flex: 1 1 320px;
	min-width: 0;
}

/* Plain, readable restatement of the title — body face, not the hero script. */
.abm-single-heading {
	order: 2;
	flex: 1 0 100%;
	margin: 0 0 4px;
	color: var(--abm-ink);
	font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
	line-height: 1.25;
}

/* With a description, the heading introduces it below the two columns. */
.abm-single.has-description .abm-single-heading {
	order: 4;
	margin: 8px 0 0;
}

.abm-single.has-description .abm-single-detail {
	order: 2;
}

/* Meta list ------------------------------------------------------------- */

.abm-single-meta {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.abm-single-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--abm-rule);
	margin: 0;
}

.abm-single-label {
	flex: 0 0 88px;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
	line-height: 1.9;
}

.abm-single-value {
	flex: 1 1 160px;
	min-width: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

/* Export buttons (from [abm_event_export]) ------------------------------ */

.abm-single .abm-export {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
}

/* Matched to the calendar's "View Detail" button: a quiet bordered pill that
   inverts to charcoal with a white label. */
.abm-single .abm-export a {
	/* inline-flex + min-height rather than padding alone, so the box clears the
	   44px touch-target minimum without the label drifting off centre. The
	   calendar's Load More is sized the same way for the same reason. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	background: #fff;
	color: #767676;
	text-decoration: none;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.4;
	transition: background-color var(--abm-ease), color var(--abm-ease), border-color var(--abm-ease);
}

.abm-single .abm-export a:hover,
.abm-single .abm-export a:focus-visible {
	background: var(--abm-hover-fill);
	border-color: var(--abm-hover-fill);
	color: #fff;
}

/* Other dates ----------------------------------------------------------- */

.abm-single-upcoming h2 {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
	margin: 0 0 10px;
}

.abm-single-upcoming ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* A weekly night can list many dates; keep it from running the page long. */
	max-height: 260px;
	overflow-y: auto;
}

.abm-single-upcoming li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--abm-rule);
	margin: 0;
}

.abm-single-upcoming li a {
	color: var(--abm-ink);
	text-decoration: none;
	transition: color var(--abm-ease);
}

.abm-single-upcoming li a:hover,
.abm-single-upcoming li a:focus-visible {
	color: var(--abm-accent);
}

.abm-single-upcoming-time {
	color: var(--abm-muted);
	font-size: 0.9rem;
}

/* Content and footer ---------------------------------------------------- */

/* The event description. Short in practice — a lineup, a door time — so it is
   set as a readable paragraph rather than boxed and labelled the way the old
   calendar did it. Measure capped so it stays comfortable on a wide screen. */
.abm-single-content {
	order: 5;
	flex: 1 0 100%;
	margin: 12px 0 0;
	max-width: 68ch;
	color: var(--abm-ink);
	font-size: 1.05rem;
	line-height: 1.7;
}

.abm-single-content > :first-child {
	margin-top: 0;
}

.abm-single-content > :last-child {
	margin-bottom: 0;
}

.abm-single-content p {
	margin: 0 0 1em;
}

.abm-single-content a {
	color: var(--abm-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.abm-single-back {
	margin: 40px 0 0;
}

/* "All events" — the site's own text-button form: uppercase, letter-spaced,
   charcoal, with a chevron doing the moving. The theme's Learn More button pairs
   a base and hover icon and animates over 300ms on Material Standard easing;
   this reproduces the feel with one glyph that slides. */
.abm-single-back a {
	display: inline-flex;
	align-items: center;
	/* Text-only links are easy to leave as 16px-tall tap targets. This is the
	   last control on the page and the one a phone visitor is most likely to
	   reach for, so give it a real target without changing how it looks. */
	min-height: 44px;
	gap: 0.5em;
	color: var(--abm-ink);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color var(--abm-ease);
}

/* Chevron as a pseudo-element: decorative, so it stays out of the accessibility
   tree instead of being announced as a stray character. */
.abm-single-back a::before {
	content: "\2039";
	font-size: 1.35em;
	line-height: 1;
	transition: transform var(--abm-ease);
}

.abm-single-back a:hover,
.abm-single-back a:focus-visible {
	color: var(--abm-accent);
}

.abm-single-back a:hover::before,
.abm-single-back a:focus-visible::before {
	transform: translateX(-0.28em);
}

@media (prefers-reduced-motion: reduce) {
	.abm-single-back a::before {
		transition: none;
	}
}

/* The two-column threshold.

   Flyer (380) + gap (32) + details (320) = 732px of content, so the columns stop
   fitting at roughly a 772px viewport. The heading's placement has to flip at the
   same point, not at the phone breakpoint: between the two the layout stacked
   while the heading stayed below the details, which is the one arrangement this
   heading exists to avoid. 800px leaves a little slack over the arithmetic. */
@media (max-width: 800px) {
	.abm-single-flyer {
		flex: 0 1 100%;
	}

	.abm-single.has-description .abm-single-heading {
		order: 2;
		margin: 0 0 4px;
	}

	.abm-single.has-description .abm-single-detail {
		order: 3;
	}
}

@media (max-width: 700px) {
	.abm-single {
		--abm-hero-min: 300px;
	}

	.abm-single-hero {
		padding: 110px 16px 40px;
	}

	.abm-single-inner {
		padding: 32px 16px 44px;
	}

	.abm-single-body {
		gap: 24px;
	}


	.abm-single-flyer {
		flex-basis: 100%;
	}

	.abm-single-label {
		flex-basis: 100%;
		line-height: 1.4;
	}
}

/* Category archive. Reuses the hero and body rules above; only the calendar
   embedded beneath them needs its own breathing room. */
.abm-archive .abm-calendar {
	margin-top: 4px;
}

.abm-archive .abm-single-back {
	margin-top: 32px;
}