/* ==========================================================================
   Page chrome — hero photograph and body texture
   --------------------------------------------------------------------------
   These rules were scoped to body.page-template-page-tickets and lived in
   tickets-cards.css, which only loads on that one template. They are shared now,
   so About, Events, Contact, Achievements and Gallery get the same treatment.

   No template selector here at all: this file only loads on pages that take the
   chrome (idc_has_chrome(), which excludes the front page outright), and the two
   custom properties are only printed on those same pages. So the guard lives in
   one place in PHP rather than as a list of selectors to keep in step.
   ========================================================================== */

body {
	background-color: var(--bg);

	/*
	 * FIVE LAYERS, TOP TO BOTTOM.
	 *
	 *   1-3. warm radial glows;
	 *   4.   a HEAVY scrim, .88 to .96 — far heavier than the hero's .60, because
	 *        every card, price and button on the page sits over this one. The
	 *        photograph must read as texture, never as a picture competing with
	 *        the content;
	 *   5.   --page-bg-image, printed on :root by idc_chrome_vars().
	 *
	 * Only the photograph takes cover; the gradients keep their own sizing, or a
	 * radial stop given in percentages would be rescaled and the glow would move.
	 */
	background-image:
		radial-gradient(circle at 12% 0%,  rgba(116, 30, 15, .20), transparent 28%),
		radial-gradient(circle at 90% 12%, rgba(230, 184, 63, .09), transparent 24%),
		radial-gradient(circle at 50% 0%,  rgba(230, 184, 63, .07), transparent 35%),
		linear-gradient(180deg, rgba(8, 9, 13, .88) 0%, rgba(8, 9, 13, .96) 100%),
		var(--page-bg-image, none);
	background-size: auto, auto, auto, auto, cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.page-hero {
	position: relative;

	/*
	 * The hero's scrim is lighter — .60 easing to .95 — so the photograph reads,
	 * while the title and subtitle keep contrast over it. Heavier at the bottom on
	 * purpose: the Custom House facade is brightest in the lower half of the
	 * frame, which is exactly where the subtitle sits.
	 */
	background-image:
		radial-gradient(circle at 12% 42%, rgba(161, 37, 18, .30), transparent 24%),
		radial-gradient(circle at 88% 38%, rgba(238, 154, 35, .13), transparent 22%),
		linear-gradient(180deg, rgba(8, 9, 13, .60) 0%, rgba(12, 14, 20, .95) 100%),
		var(--hero-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Under everything, so a failed image never shows through as white. */
	background-color: var(--bg);
}

/*
 * Large fixed gradients and a fixed cover image are the cheapest way to make a
 * mid-range phone stutter: fixed attachment forces a repaint every scroll frame.
 * Dropped to scroll on small screens, where the glows are mostly off-canvas
 * anyway, and for anyone who has asked for less motion.
 */
@media (max-width: 768px) {
	body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
	body { background-attachment: scroll; }
}

/* ==========================================================================
   Responsive spacing scale
   --------------------------------------------------------------------------
   These were 18 inline style attributes across the five content templates —
   margin-bottom of 80, 64, 56, 48 and 40px, a 48px padding-top, a 520px measure.

   They had to leave the markup before they could respond at all: an inline style
   outranks every media query, so a 64px gap between a heading and its content
   stayed 64px on a 375px screen no matter what any stylesheet said. That is a
   quarter of a phone's visible height spent on one gap.

   Mobile-first: the phone value is the base, and min-width adds room as the
   screen earns it. Breakpoints are 640 and 1025 — the same scale the ticket page
   uses, so the two do not reflow at different moments.
   ========================================================================== */

.idc-gap-md      { margin-bottom: 20px; }
.idc-gap-lg      { margin-bottom: 24px; }
.idc-gap-xl      { margin-bottom: 28px; }
.idc-gap-2xl     { margin-bottom: 32px; }
.idc-gap-md-top  { margin-top: 20px; }
.idc-gap-lg-top  { margin-top: 24px; }
.idc-pad-lg-top  { padding-top: 24px; }
.idc-center      { text-align: center; }

/* A measure rather than a pixel width: 46ch stays readable when a reader scales
   their text up, where 520px stops being a sensible line length immediately. */
.idc-measure-sm {
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: 22px;
}

@media (min-width: 640px) {
	.idc-gap-md      { margin-bottom: 30px; }
	.idc-gap-lg      { margin-bottom: 36px; }
	.idc-gap-xl      { margin-bottom: 44px; }
	.idc-gap-2xl     { margin-bottom: 52px; }
	.idc-gap-md-top  { margin-top: 26px; }
	.idc-gap-lg-top  { margin-top: 32px; }
	.idc-pad-lg-top  { padding-top: 34px; }
	.idc-measure-sm  { max-width: 52ch; margin-bottom: 28px; }
}

@media (min-width: 1025px) {
	.idc-gap-md      { margin-bottom: 40px; }
	.idc-gap-lg      { margin-bottom: 48px; }
	.idc-gap-xl      { margin-bottom: 64px; }
	.idc-gap-2xl     { margin-bottom: 80px; }
	.idc-gap-md-top  { margin-top: 32px; }
	.idc-gap-lg-top  { margin-top: 48px; }
	.idc-pad-lg-top  { padding-top: 48px; }
	.idc-measure-sm  { margin-bottom: 32px; }
}

/* ==========================================================================
   Buy Tickets — lighter scrim so the diya photograph reads as a real
   background, not just texture
   --------------------------------------------------------------------------
   The shared page-chrome.css scrim (.88 to .96) is deliberately heavy because
   it was written for a generic skyline placeholder sitting behind six
   different templates. This page now has ticket-bg-im.jpg, an actual
   committee photograph the user wants visible — so this page alone gets a
   much lighter scrim. Ticket cards carry their own background image and tint
   independently (idc_card_bg_style()), so they don't depend on this scrim
   for contrast; only the space around/behind the cards is affected.
   ========================================================================== */

body.page-template-page-tickets {
	background-image:
		radial-gradient(circle at 12% 0%,  rgba(116, 30, 15, .20), transparent 28%),
		radial-gradient(circle at 90% 12%, rgba(230, 184, 63, .09), transparent 24%),
		radial-gradient(circle at 50% 0%,  rgba(230, 184, 63, .07), transparent 35%),
		linear-gradient(180deg, rgba(8, 9, 13, .45) 0%, rgba(8, 9, 13, .65) 100%),
		var(--page-bg-image, none);
}