/**
 * Layout primitives shared by every section: container, section padding,
 * background tone modifiers, and the small set of grid patterns that repeat
 * across the homepage (brief §11) rather than being redefined per section.
 */

/*
 * Fixed .site-header is out of flow — clear it on the main landmark so page /
 * shortcode / archive content never paints underneath the nav. Templates that
 * intentionally sit content under a transparent header (homepage hero, theme
 * single-event media) opt out via body class.
 */
.evently-main {
	padding-top: var(--evently-header-height);
}

/*
 * Elementor's own full-width Container element (.e-con-full) ships a
 * default 10px horizontal padding — separate from and unaware of this
 * theme's --evently-pad/.evently-container spacing system. When a site
 * owner builds the homepage in Elementor using this theme's own section
 * widgets (Hero, Trending Events, etc. — see front-page.php), that
 * widget's .evently-section/.evently-container still renders with the
 * theme's normal spacing, but it's now nested one level deeper inside
 * Elementor's own already-padded container, stacking an extra,
 * uncoordinated 10px on top and pushing that section out of alignment
 * with the header and every plain (non-Elementor) page — see hero.php's
 * docblock: the same template part renders identically whether invoked
 * via Elementor widget or the built-in fallback, so its own spacing
 * should be the only spacing that applies either way.
 *
 * Elementor computes .e-con's padding from --padding-left/right, which
 * default to var(--container-default-padding-left/right, 10px) — Elementor
 * ships that custom-property hook specifically so a theme can retune the
 * default without fighting its (logical-property-based) specificity.
 * Setting it to 0 here — rather than declaring padding-left/right
 * ourselves — is what actually reaches the value Elementor renders with.
 *
 * `.e-con-full` on its own is NOT theme-specific — it's the plain class
 * Elementor gives ANY full-width Container a site editor builds, on any
 * page, including a brand new empty one being drafted from scratch. An
 * earlier version of this rule targeted `.e-con-full` unscoped, which
 * zeroed Elementor's own default padding globally — so every new
 * container anyone built anywhere on the site lost its default padding
 * too, not just this theme's own pre-built sections. Scoped instead to
 * containers whose direct child is specifically one of this theme's own
 * registered widgets (elementor-widget-evently-*, matching the slugs
 * registered in inc/integrations/elementor/) — see the debug chain in
 * that earlier fix's discussion: .e-con-full > .elementor-element
 * .elementor-widget-evently-* is the exact structure front-page.php's
 * widgets render inside. Nothing else is touched.
 */
.e-con-full:has( > [class*="elementor-widget-evently-"] ) {
	--container-default-padding-left: 0px;
	--container-default-padding-right: 0px;
}

body.admin-bar .evently-main {
	padding-top: calc(var(--evently-header-height) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .evently-main {
		padding-top: calc(var(--evently-header-height) + 46px);
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .evently-main {
		padding-top: var(--evently-header-height);
	}
}

body.evently-front-page .evently-main,
body.evently-header-on-media .evently-main {
	padding-top: 0;
}

.evently-container {
	width: 100%;
	max-width: var(--evently-max);
	margin: 0 auto;
	/* Baseline 10px inset so a container's own direct content (grids, cards,
	   headings) never sits flush with the container's own edge. This used
	   to be 0, relying entirely on the ambient --evently-pad of an
	   ancestor .evently-section — which centers the container's max-width
	   box so effectively that on anything wider than a phone, the section's
	   padding never actually gets used (the container caps out well short
	   of the section's padded edge), leaving content sitting exactly on
	   the container's edge. That's harmless in isolation, but next to the
	   header/hero/search-bar/archive-layout (which all carry their own
	   explicit 10px inset — see those rules) it reads as misaligned: the
	   header's logo sits 10px in while the grid below it sits flush. This
	   keeps every .evently-container-based section starting at the same
	   x-position as the header, regardless of Elementor vs. the plain PHP
	   template — both render the exact same markup/classes either way. */
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

/*
 * Horizontal inset for containers that are NOT nested inside .evently-section
 * (which already applies --evently-pad). Hero, and any lone container
 * need this so content never kisses the viewport edge on phones/tablets.
 * Header gets a tighter, fixed 10px inset instead of --evently-pad — just
 * enough that the logo/nav never touch the edge on mobile, without the
 * wider breathing room the rest of the site's containers use.
 */
.hero-inner.evently-container {
	padding-left: var(--evently-pad);
	padding-right: var(--evently-pad);
}

.site-header__inner.evently-container {
	padding-left: 10px;
	padding-right: 10px;
}

.evently-container--wide {
	max-width: var(--evently-canvas);
}

.evently-section {
	padding: var(--evently-space-9) var(--evently-pad); /* 100px vertical (rounded to 96px token) */
}

.evently-section--tight {
	padding: var(--evently-space-8) var(--evently-pad);
}

.evently-section--soft {
	background: var(--evently-surface);
}

.evently-section--dark {
	background: var(--evently-dark);
	color: var(--evently-white);
}

.evently-section--dark h1,
.evently-section--dark h2,
.evently-section--dark h3,
.evently-section--dark h4 {
	color: var(--evently-white);
}

/* Generic responsive grid utilities used by Trending Events / Near You /
   Choose Your Vibe / Stats / Testimonials / Journal — one implementation,
   column count supplied per section via a modifier or inline custom property
   so there's no duplicated grid rule per section (brief §14 "don't duplicate
   markup unnecessarily" extends to CSS). */
.evently-grid {
	display: grid;
	gap: var(--evently-space-3);
}

.evently-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.evently-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.evently-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.evently-grid--2-1 {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 1000px) {
	.evently-grid--3,
	.evently-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.evently-grid--2-1 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.evently-grid--2,
	.evently-grid--3,
	.evently-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* Horizontal-scroll variant used on mobile for card rows that would
   otherwise wrap awkwardly (brief §11 mobile behavior: "Events: Horizontal
   scroll or 1-column list depending on section"). Opt-in per section. */
.evently-scroll-row {
	display: flex;
	gap: var(--evently-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.evently-scroll-row > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.evently-visually-hidden-until-scroll {
	scrollbar-width: thin;
}

/* Utility spacing (matches the 8px scale — used sparingly, most spacing
   should live in the component's own stylesheet). */
.evently-mt-0 {
	margin-top: 0;
}

.evently-mb-0 {
	margin-bottom: 0;
}