/* Event Solutions page (template-event-solutions.php, /services/) —
   dark-theme reskin of the supplied mockup. */

/* ---- Hero: same full-bleed-photo-behind-text treatment as every other
   full-bleed hero on the site — see style.css's bar-v2 block for the
   full reasoning. Scoped to .hero > .hero-art (direct child only), not
   the bare .hero-art class — that class is reused elsewhere on this
   page (.editorial__photo, the event cards) and an unscoped rule here
   would strip those photos' own height/positioning too (confirmed
   gotcha, see the Sustainability/Contact/Gallery page blocks in
   style.css). */
.page-template-template-event-solutions-php{ --maxw: 1440px; }
.page-template-template-event-solutions-php .hero{
	position:relative; overflow:hidden; display:block;
	min-height:0; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-event-solutions-php .hero > div:first-child{
	position:relative; z-index:1; max-width:820px;
	padding-block:50px;
}
.page-template-template-event-solutions-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-event-solutions-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-event-solutions-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-event-solutions-php .hero > .hero-art{ width:100%; }
	.page-template-template-event-solutions-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}

/* ---- Every other section: 1440 content width (the sitewide --maxw
   default, .wrap handles it) with the house 30px top/bottom padding. */
.page-template-template-event-solutions-php .event-solutions__find,
.page-template-template-event-solutions-php .editorial,
.page-template-template-event-solutions-php .event-solutions__managed{
	padding-top:30px; padding-bottom:30px;
}

/* Plain bold statement line — no pullquote box, matching the hero
   treatment already used on Contact/Sustainability. Used both in the
   hero and inline in body copy further down the page, so no fixed
   font-size override (inherits the surrounding paragraph's). */
.event-solutions__note{ margin:20px 0 0; font-weight:700; color:var(--ink); }
.hero .event-solutions__note{ font-family:'Open Sans',sans-serif; font-weight:700; font-size:16px; line-height:1.38; }

/* "Your Event." in the hero h1 goes accent green (the shared .hero h1 b
   is plain ink) — matches the pattern used on Sustainability/Brand &
   Marketing's hero headings. */
.page-template-template-event-solutions-php .hero h1 b{ color:var(--accent); }

/* "Find Your Event" eyebrow bumped to the same size as the hero's own
   eyebrow (15px) so it reads
   as an equally weighted section opener rather than the smaller default
   used by every other eyebrow on this page. It keeps the usual 12px
   gap under it (the 20px "big eyebrow" exception in style.css no longer lists it). */
.page-template-template-event-solutions-php .event-solutions__find-title > .eyebrow{ font-size:15px; }

/* "Different Events. Different Jobs to Do." at the same size/weight as
   the hero h1 (same clamp, so it scales identically at every viewport).
   Sitewide default is now weight:600/line-height:.9 (2026-09-24 revision
   — matches the home page's own heading system); "Different Events."
   sits outside the <b>, so it just inherits that 600 default, and only
   the closing phrase needs its own explicit 700 to read bolder still. */
.page-template-template-event-solutions-php .event-solutions__find-title > h2{
	font-size:38.4px; line-height:.9; font-weight:300;
}
.page-template-template-event-solutions-php .event-solutions__find-title > h2 b{ font-weight:700; }

/* Intro copy under that heading spans the section width instead of
   sitting in a narrow 70ch column that cut it short against the much
   bigger heading above it. No gap between the 4 short paragraphs — the
   browser's default 1em top/bottom margin was leaving a visible blank
   line between each one. */
.page-template-template-event-solutions-php .event-solutions__find-copy > p{ max-width:none; margin:0; }

/* "One Bar. One Day." / "Then Comes" — same reasoning as the Find Your
   Event heading above, now redundant with the sitewide default but kept
   explicit for clarity: only the closing accent phrase reads bolder. */
.page-template-template-event-solutions-php .event-solutions__built .editorial__copy h2{ font-weight:300; font-size:38.4px; }
.page-template-template-event-solutions-php .event-solutions__built .editorial__copy h2 b{ font-weight:700; }

/* Built Around What You Need / closing CTA — photo column matches the
   copy column's height instead of the fixed 1:1 .editorial__photo ratio
   (same technique as Brand & Marketing's .editorial--intro in
   style.css: stretch the row, let the photo's ratio go auto, and take
   the img out of flow so its own intrinsic size can't fight the
   stretch). Fixed-height fallback on phones, where the grid drops to a
   single column and "match the text" no longer means anything. */
.page-template-template-event-solutions-php .event-solutions__built{ align-items:stretch; }
.page-template-template-event-solutions-php .event-solutions__built .editorial__photo{
	aspect-ratio:auto; position:relative;
}
.page-template-template-event-solutions-php .event-solutions__built .editorial__photo img{
	position:absolute; inset:0; width:100%; height:100%;
}
@media (max-width:820px){
	.page-template-template-event-solutions-php .event-solutions__built .editorial__photo{
		height:320px;
	}
}

/* ---- Find Your Event: intro copy, then a 3x2 grid of full-bleed photo
   cards (title + accent tagline + paragraph + link), each linking out
   to a real page or, where none exists yet, the quote form. */
.event-solutions__find-copy > p{ max-width:70ch; }
.event-solutions__find-title > h2{ margin-bottom:.5em; }
.event-solutions__find-title > h2 b{ color:var(--accent); }
.event-solutions__grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px;
}
.event-solutions__card{
	position:relative; min-height:300px; overflow:hidden; display:flex; align-items:flex-end;
	background-size:cover; background-position:center; text-decoration:none; color:var(--ink);
	transition:transform .2s ease;
}
.event-solutions__card:hover{ transform:translateY(-2px); }
.event-solutions__card:after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(0deg, rgba(13,26,31,.82) 0%, rgba(13,26,31,.5) 34%, rgba(13,26,31,.06) 62%, transparent 100%);
}
.event-solutions__card-body{ position:relative; z-index:1; padding:20px; display:flex; flex-direction:column; text-shadow:0 1px 8px rgba(13,26,31,.65); }
.event-solutions__card-title{
	font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
	font-size:1.05rem; line-height:1.2; margin-bottom:6px;
}
.event-solutions__card-tagline{
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
	font-size:.72rem; letter-spacing:.04em; color:var(--accent); margin-bottom:8px;
}
.event-solutions__card-desc{ font-size:.82rem; color:var(--ink-muted); line-height:1.38; margin-bottom:10px; }
/* Same as the Our Bars cards: the description stays hidden until the card is hovered / focused, while the
   photo zooms in (the photo is copied onto ::before so only it scales). Touch screens keep the text visible. */
.event-solutions__card:before{ content:""; position:absolute; inset:0; background:inherit; background-size:cover; background-position:center; transition:transform .5s ease; }
.event-solutions__card:hover:before, .event-solutions__card:focus-visible:before{ transform:scale(1.12); }
.event-solutions__card-desc{ max-height:0; opacity:0; overflow:hidden; margin-bottom:0; transition:max-height .35s ease, opacity .25s ease, margin-bottom .35s ease; }
.event-solutions__card:hover .event-solutions__card-desc, .event-solutions__card:focus-visible .event-solutions__card-desc{ max-height:12em; opacity:1; margin-bottom:10px; }
@media (hover:none){ .event-solutions__card-desc{ max-height:none; opacity:1; margin-bottom:10px; } }
.event-solutions__card-link{
	font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
	font-size:.72rem; letter-spacing:.03em; color:var(--ink);
}
.event-solutions__card:hover .event-solutions__card-link{ color:var(--accent); }
@media (max-width:900px){ .event-solutions__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .event-solutions__grid{ grid-template-columns:1fr; } }

/* ---- Built Around What You Need: standard photo+copy editorial,
   nothing page-specific needed beyond the shared .editorial rules. */

/* ---- Fully Managed, From Start to Finish: copy left, icon-flow +
   statement + link right. */
.event-solutions__managed{
	display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:56px; align-items:center;
}
.event-solutions__managed-copy > h2{ margin-bottom:.5em; }
.event-solutions__managed-copy > h2 b{ color:var(--accent); }
.event-solutions__process{ display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; }
.event-solutions__process > div{
	display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0;
}
.event-solutions__process svg{
	height:26px; width:auto; max-width:100%; flex:0 0 auto;
	fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--accent);
}
.event-solutions__process span{
	font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:.62rem; letter-spacing:.02em; color:var(--ink);
	text-align:center; white-space:nowrap;
}
.event-solutions__process em{
	align-self:center; margin-top:13px; color:var(--accent); font-style:normal; font-size:1rem; flex:0 0 auto;
}
/* Statement + button sit side by side (button right of the text)
   instead of stacked — the note is split onto 2 lines in the markup
   (template-event-solutions.php) so it reads as a short two-line
   statement next to the link rather than a long single line above it. */
.event-solutions__managed-cta{
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	margin-top:16px; flex-wrap:wrap;
}
.event-solutions__managed-cta .event-solutions__note{ margin:0; }
/* "See How Barmotion Works" button sits 20px lower than the statement beside it (the button only; nothing else moves). */
.event-solutions__managed-cta > .btn{ position:relative; top:20px; }
@media (max-width:900px){
	.event-solutions__managed{ grid-template-columns:minmax(0,1fr); }
	.event-solutions__process{ flex-wrap:wrap; gap:14px 6px; }
	.event-solutions__process > div{ flex:1 1 30%; }
}

/* ---- Closing CTA: standard photo+copy editorial, nothing page-
   specific needed beyond the shared .editorial rules. */

/* Hero: text runs wider across the page (container 610 -> 900px) and
   "Built Around Your Event" stays on one line. */
.page-template-template-event-solutions-php .hero p.sub{ max-width:780px; font-size:16px; }
.event-solutions__nowrap{ white-space:nowrap; }

/* Find Your Event: top block split 50/50 — title left, copy right (no
   dividing rule). */
.event-solutions__find-head{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:0; align-items:center; }
.event-solutions__find-title{ padding-right:40px; }
.event-solutions__find-title > h2{ margin-bottom:0; }
.event-solutions__find-copy{ padding-left:40px; }
@media (max-width:900px){
	.event-solutions__find-head{ grid-template-columns:minmax(0,1fr); gap:20px; }
	.event-solutions__find-title{ padding-right:0; }
	.event-solutions__find-copy{ border-left:0; padding-left:0; }
	.event-solutions__nowrap{ white-space:normal; }
}

/* Closing CTA: 50/50 — eyebrow + heading on the left, copy and button on the right. */
.page-template-template-event-solutions-php .event-solutions__closing{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.page-template-template-event-solutions-php .event-solutions__closing h2{ font-size:38.4px; }
.page-template-template-event-solutions-php .event-solutions__closing .eyebrow{ font-size:15px; }
@media (max-width:820px){ .page-template-template-event-solutions-php .event-solutions__closing{ grid-template-columns:minmax(0,1fr); } }
/* Closing CTA: the "We'll help you work out what fits." line and the button share a row, button pushed to the far right. */
.page-template-template-event-solutions-php .event-solutions__closing-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:-8px; }
.page-template-template-event-solutions-php .event-solutions__closing-foot .event-solutions__note,
.page-template-template-event-solutions-php .event-solutions__closing-foot .hero-cta{ margin:0; }
@media (max-width:480px){ .page-template-template-event-solutions-php .event-solutions__closing-foot{ flex-wrap:wrap; } }
/* Every eyebrow on this page is 15px (hero, section and closing eyebrows alike). */
body.page-template-template-event-solutions-php .eyebrow{ font-size:15px; }