/* Components — the six content sections. */

/* Banner hero */
.section-banner {
	position: relative; min-height: 400px;
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
	/* A hero needs more air under it than two photos need between them,
	 * so it gets its own margin on top of whatever the next section
	 * brings. Margin, not padding, so the photo-gap rules stay honest. */
	margin-bottom: var(--hl-banner-gap);
}
.section-banner__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.section-banner__content { position: relative; z-index: 2; text-align: center; padding: 0 1rem; }
.section-banner__title {
	color: #fff; font-size: clamp(1.8rem, 5vw, 3.5rem);
	text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
@media (max-width: 900px) { .section-banner { min-height: 300px; } }
@media (max-width: 600px) { .section-banner { min-height: 250px; } }

/* Text block */
.section-text { text-align: center; }
.section-text__heading { margin-bottom: 1.5rem; }
.section-text__body { max-width: 800px; margin: 0 auto; }

/* Image + text row — clean two-column, alternating via `order` so source
 * stays image→text for screen readers. Optional vertical hairline is the
 * High Life brand touch (the old .homeTextLeft/Right divider). */
.section-imgtext .imgtext__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: center;
}
.section-imgtext--right .imgtext__media { order: 2; }
.section-imgtext--right .imgtext__text  { order: 1; }

.imgtext__media { margin: 0; }
.imgtext__img {
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	display: block;
}

.imgtext__heading { margin-bottom: 1.2rem; }
.imgtext__body { color: var(--hl-muted); }
.imgtext__body p:last-child { margin-bottom: 0; }

/* Hairline divider on the text column, mirrored for reversed rows.
 * Matched to the live site's actual rule (measured, not the older brief):
 * a 1px hairline with a fixed ~2rem inset, not a heavy 3px/6% one. */
.section-imgtext--hairline .imgtext__text {
	border-left: 1px solid var(--hl-muted);
	padding-left: 2rem;
}
.section-imgtext--right.section-imgtext--hairline .imgtext__text {
	border-left: 0;
	border-right: 1px solid var(--hl-muted);
	padding-left: 0;
	padding-right: 2rem;
}

/* Photo sections — banner, portal grid, image+text row, video, gallery,
 * full-width image — stack with one consistent, tight breath between
 * them (--hl-photo-gap each side, so ~36px photo to photo), which is what
 * live does: every one of its rows carries the same small gutter above and
 * below its image. Reading sections (text, accordion, contact) are NOT in
 * this set and keep the full --hl-section-y rhythm — they're copy, not
 * photography, and need the room. One token, used everywhere, so any page
 * built from these sections gets the same rhythm. */
:is(.section-banner, .section-portals, .section-imgtext, .section-video, .section-gallery, .section-image)
+ :is(.section-banner, .section-portals, .section-imgtext, .section-video, .section-gallery, .section-image) {
	padding-top: var(--hl-photo-gap);
}
:is(.section-banner, .section-portals, .section-imgtext, .section-video, .section-gallery, .section-image):has(
	+ :is(.section-banner, .section-portals, .section-imgtext, .section-video, .section-gallery, .section-image)
) {
	padding-bottom: var(--hl-photo-gap);
}

@media (max-width: 767px) {
	.section-imgtext .imgtext__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.section-imgtext--right .imgtext__media { order: 0; }
	.section-imgtext--hairline .imgtext__text,
	.section-imgtext--right.section-imgtext--hairline .imgtext__text {
		border: 0; padding: 0;
	}
	.imgtext__img { max-height: 320px; }
}

/* ── Accordion / FAQ ───────────────────────────────────────────────
 * Open/close is the grid-rows trick: the answer wrapper goes 0fr → 1fr
 * and the browser interpolates the real height, so it feels identical
 * for a one-liner and a three-paragraph answer. The icon is a plus made
 * of two bars that rotates into a minus. */
.section-accordion__heading { text-align: center; margin-bottom: 2.5rem; }
.accordion-layout { max-width: 860px; margin: 0 auto; }
.accordion__item { border-bottom: 1px solid var(--hl-rule); }
.accordion__item:first-child { border-top: 1px solid var(--hl-rule); }
.accordion__qh { margin: 0; font: inherit; text-transform: none; letter-spacing: normal; }
.accordion__q {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	color: #fff; font-family: var(--hl-font); text-transform: uppercase; letter-spacing: 0.1em;
	font-size: 1rem; line-height: 1.4; padding: 1.15rem 0.25rem 1.15rem 0;
	transition: color 0.2s ease, padding-left 0.3s cubic-bezier(.2,.7,.2,1);
	-webkit-tap-highlight-color: transparent;
}
.accordion__q:hover, .accordion__item.is-open .accordion__q { color: var(--hl-green-text); }
.accordion__item.is-open .accordion__q { padding-left: 0.5rem; }
.accordion__q:focus-visible { outline: 2px solid var(--hl-green-text); outline-offset: 2px; border-radius: 2px; }
.accordion__icon {
	position: relative; flex: 0 0 auto; width: 14px; height: 14px;
	transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.accordion__icon::before, .accordion__icon::after {
	content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
	background: currentColor; border-radius: 2px; transform: translateY(-50%);
	transition: transform 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.25s ease;
}
.accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
.accordion__item.is-open .accordion__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.accordion__a {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(.2,.7,.2,1);
}
.accordion__a-inner {
	min-height: 0; overflow: hidden;
	color: var(--hl-muted);
	opacity: 0; transform: translateY(-6px);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.accordion__a-inner > :last-child { margin-bottom: 0; padding-bottom: 1.4rem; }
.accordion__a-inner > :first-child { padding-top: 0.1rem; }
.accordion__item.is-open .accordion__a { grid-template-rows: 1fr; }
.accordion__item.is-open .accordion__a-inner { opacity: 1; transform: none; transition-delay: 0.08s; }

/* Two-column variant: questions left, tall photo right, photo stays in
 * view while the answers scroll past it. */
.section-accordion--with-image .accordion-layout {
	max-width: none;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.accordion-aside { position: sticky; top: 1.5rem; }
.accordion-aside__img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 900px) {
	.section-accordion--with-image .accordion-layout { grid-template-columns: 1fr; }
	.accordion-aside { position: static; order: -1; margin-bottom: 0.5rem; }
	.accordion-aside__img { aspect-ratio: 4 / 3; max-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
	.accordion__a, .accordion__a-inner, .accordion__icon, .accordion__icon::before, .accordion__icon::after, .accordion__q { transition: none; }
}

/* Portal grid */
/* Sits inside .container like every other photo section — only the
 * banner and the video strip are allowed to run edge to edge. Gutter
 * matches the gallery grid; tiles are 3:2 like live's 600x400 sources. */
.portals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.875rem; }
.portal { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.portal__img {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	filter: brightness(50%) grayscale(100%); transition: filter 0.5s ease;
}
.portal__title {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center; text-align: center;
	color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.5rem; font-weight: 300;
}
.portal:hover .portal__img { filter: brightness(100%) grayscale(0%); }
@media (max-width: 979px) { .portals__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 700px) { .portals__grid { grid-template-columns: 1fr; } }

/* Standard page + blog */
.page-standard { padding-block: var(--hl-section-y); }
.page-standard__title { text-align: center; margin-bottom: 2rem; }
.page-standard__content { max-width: 800px; margin: 0 auto; }
.error-404 { padding-block: var(--hl-section-y); text-align: center; }
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; padding-block: var(--hl-section-y); }
.post-card { background: var(--hl-bg-alt); color: #333; }
.post-card__title { padding: 1rem; font-size: 1.1rem; }

/* Contact section + hand-built form */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact__heading { margin-bottom: 1.5rem; }
.contact__details a { color: var(--hl-green-text); }

.contact-form .form-field { margin-bottom: 1.1rem; }
.contact-form label { display: block; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--hl-muted); }
.contact-form label span { color: var(--hl-green-text); }
.contact-form input, .contact-form textarea {
	width: 100%; background: transparent; border: 1px solid #666; border-radius: 0;
	color: #fff; font-family: var(--hl-font); font-size: 1rem; padding: 0.85rem 1rem;
	-webkit-appearance: none; appearance: none;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--hl-green-text); }
.contact-form ::placeholder { color: var(--hl-dim); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
/* "I'm not a robot" tick. The theme strips native input chrome, which
 * left the checkbox as an empty box that never visibly ticked. Draw our
 * own: the real input stays (keyboard + screen readers), visually
 * replaced by a box that fills green with a tick. */
/* Scoped as .contact-form .captcha, not bare .captcha: `.contact-form label`
 * is more specific than a lone class, so a bare .captcha rule lost and the
 * label stayed display:block. That left the box as an INLINE span, where
 * width/height are ignored — hence the 2px-wide sliver with the tick
 * spilling over the text. */
.contact-form .captcha {
	position: relative; display: flex; align-items: center; gap: 0.6rem;
	margin-bottom: 0; color: var(--hl-muted); cursor: pointer;
}
.contact-form .captcha input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; }
.captcha__box {
	flex: 0 0 auto; width: 22px; height: 22px; box-sizing: border-box;
	border: 1px solid #666; background: transparent; position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.captcha__box::after {
	content: ''; position: absolute; left: 50%; top: 48%;
	width: 5px; height: 10px; margin: -7px 0 0 -3px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0); transform-origin: center;
	transition: transform 0.2s cubic-bezier(.2,.7,.2,1);
}
.contact-form .captcha:hover .captcha__box { border-color: var(--hl-green-text); }
.contact-form .captcha input:checked ~ .captcha__box { background: var(--hl-green); border-color: var(--hl-green); }
.contact-form .captcha input:checked ~ .captcha__box::after { transform: rotate(45deg) scale(1); }
.contact-form .captcha input:focus-visible ~ .captcha__box { outline: 2px solid var(--hl-green-text); outline-offset: 2px; }

.contact-notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid; }
.contact-notice--ok  { border-color: var(--hl-green); color: #fff; background: rgba(102,155,61,0.15); }
.contact-notice--err { border-color: #b3541e; color: #fff; background: rgba(179,84,30,0.15); }

@media (max-width: 767px) {
	.contact__grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* ── Smart gallery ─────────────────────────────────────────────────
 * Rows are built in PHP (partials/section-gallery.php); this file only
 * has to make each row line up. Every tile carries two custom props:
 *   --r  its standard aspect ratio (4/3, 3/4 or 1/1)
 *   --g  its flex-grow share, numerically the same ratio
 * Flex hands out width in proportion to --g, and because each tile is
 * locked to --r, "width proportional to ratio" is the same thing as
 * "every tile the same height". So a portrait sits narrower than the
 * landscape beside it, never taller, and the row's top and bottom edges
 * are dead straight. The gutter matches the rest of the photo sections. */
.section-gallery__heading { text-align: center; margin-bottom: 2rem; }
.gallery { display: flex; flex-direction: column; gap: 1.875rem; }
.gallery__row { display: flex; gap: 1.875rem; align-items: stretch; }
.gallery__item {
	display: block; position: relative; overflow: hidden;
	flex: var(--g, 1) 1 0%;
	min-width: 0;
	aspect-ratio: var(--r, 4 / 3);
	background: #000;
	line-height: 0;
}
.gallery__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.4s ease, transform 0.6s ease;
}
.gallery__item:hover .gallery__img { opacity: 0.8; transform: scale(1.04); }
.gallery__item:focus-visible { outline: 2px solid var(--hl-green-text); outline-offset: 3px; }

/* Phones: rows of three would be ~100px tiles, so re-flow to a plain
 * two-up grid. Shapes are kept; height-matching is dropped, so a
 * portrait simply sits taller than its neighbour. */
@media (max-width: 600px) {
	.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
	.gallery__row { display: contents; }
	.gallery__item { flex: none; }
}
@media (max-width: 900px) {
	.gallery, .gallery__row { gap: 1rem; }
}

/* Full-width single image — sat between two galleries on the home page.
 * Bug found comparing against live: with only the HTML width/height
 * attributes to go on, the browser was rendering this at the source
 * file's native pixel size (1024px) instead of filling the 1152px
 * container, leaving a bare gap down the right side. Stretch it full
 * width like every other section-level photo. */
.section-image__img { width: 100%; height: auto; display: block; }

/* ── Video strip ──────────────────────────────────────────────────
   Click-to-play facade. The poster is a normal theme image; the
   provider iframe is injected by assets/js/video.js on first click,
   so nothing third-party loads until the visitor asks for it. */
.section-video__heading { text-align: center; margin-bottom: 2rem; }
.video {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: #000;
	overflow: hidden;
}
.video__trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
	transition: opacity 0.4s ease, transform 0.5s ease;
}
.video__trigger:hover .video__poster,
.video__trigger:focus-visible .video__poster { opacity: 1; transform: scale(1.02); }
.video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.video__play svg { width: 100%; height: auto; display: block; }
.video__play-bg { fill: #000; opacity: 0.55; transition: opacity 0.3s ease, fill 0.3s ease; }
.video__play-arrow { fill: #fff; }
.video__trigger:hover .video__play-bg,
.video__trigger:focus-visible .video__play-bg { fill: var(--hl-green); opacity: 0.95; }
.video__trigger:focus-visible { outline: 2px solid var(--hl-green); outline-offset: -2px; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Video strip: ambient loop ──────────────────────────────────────
   Full-bleed band, silent, looping, cropped to fill — the moving
   texture the old Revolution Slider strip provided. The iframe is
   sized with the standard cover trick so 16:9 fills the band at any
   viewport instead of letterboxing. Height ratio corrected against
   the live site's actual Slider Revolution module config (SR7's own
   height/width breakpoint table: 213px/480px, 345px/778px, 454px/1024px,
   550px/1240px+ — a flat ~44.3% of width, capping at 550px, not the
   39vw this was first measured as). */
.section-video--ambient { padding-left: 0; padding-right: 0; }
.video--ambient {
	position: relative;
	width: 100%;
	height: clamp(180px, 44.3vw, 550px);
	aspect-ratio: auto;
	overflow: hidden;
	background: #000;
	pointer-events: none;
}
.video--ambient .video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}
.video--ambient .video__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 56.25vw;          /* 16:9 of the viewport width */
	min-height: 100%;
	min-width: 177.78vh;      /* ...unless the band is taller than that */
	border: 0;
	pointer-events: none;
}