/* ==========================================================================
   GHAO — Section skin "v2"  (reference: lime-wasp demo / lexend theme)
   --------------------------------------------------------------------------
   Every rule MUST stay scoped under `.ghao-skin-v2`.
   Turning the skin off drops this file + the body class → byte-for-byte the
   classic design. Preview: ?skin=v2 / ?skin=classic. Default: `altitude_skin`.

   Interpretation of the demo's section language, in GHAO tokens:
     1. Section headers  — centred eyebrow between two rules, centred title,
                           room for a subtitle line under it.
     2. Framing & rhythm — airier vertical rhythm (~120px), softer surfaces.
     3. Cards & iconboxes— rounder cards, circular icon chip, centred head,
                           lighter borders + deeper lift on hover.
   ========================================================================== */

.ghao-skin-v2 {
	--ghao-skin: "v2";
	--ghao-v2-radius: 22px;
	/* Deep teal accent (client-specified) — used to break the page rhythm on
	   feature bands, the way the reference alternates white → dark. */
	--ghao-deep: #07313B;
	--ghao-deep-2: #0A3F4B;
}

/* ── Alternating deep bands ───────────────────────────────────────────────
   Not every dark section — only the feature bands, so it reads as rhythm
   rather than a repaint. */
.ghao-skin-v2 .ghac-stats,
.ghao-skin-v2 .ghac-gallery.ghac-on-dark {
	background: var(--ghao-deep);
}
.ghao-skin-v2 .ghac-gallery.ghac-on-dark {
	background-image: radial-gradient(120% 80% at 15% 0%, var(--ghao-deep-2) 0%, var(--ghao-deep) 60%);
}
.ghao-skin-v2 .ghac-stat {
	border-right-color: rgba(255, 255, 255, .12);
}

/* ── 0. DISPLAY TYPE ──────────────────────────────────────────────────────
   The theme's `--ghac-serif` token points at Manrope, i.e. headings and body
   were the SAME face — hierarchy carried by size/weight alone, which is the
   main reason the page read "templated". Fraunces on the display headings only
   (hero, section titles, CTA, next-event) gives editorial contrast + gravitas;
   card titles, labels and UI stay Manrope so components stay crisp. */
.ghao-skin-v2 .ghac-hero h1,
.ghao-skin-v2 .ghac-masthead__h,
.ghao-skin-v2 .ghac-sec-h,
.ghao-skin-v2 .ghac-overview h2,
.ghao-skin-v2 .ghac-cta h2,
.ghao-skin-v2 .ghac-next-card__in h3,
.ghao-skin-v2 .ghac-mission-q,
.ghao-skin-v2 .ghac-mission .lead,
.ghao-skin-v2 .ghac-bignum,
.ghao-skin-v2 .ghac-stat .n {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: -.015em;
}
/* Fraunces runs larger + heavier than Manrope at the same size — pull the
   tracking in and let the big display sizes breathe. */
.ghao-skin-v2 .ghac-hero h1,
.ghao-skin-v2 .ghac-masthead__h {
	font-weight: 600;
	line-height: 1.02;
}
.ghao-skin-v2 .ghac-sec-h {
	line-height: 1.06;
}

/* ── 1. SECTION HEADERS ───────────────────────────────────────────────────
   Reference: the demo introduces each section with a small rounded PILL badge
   ("ARCHIVE EVENTS", "FAQ"), centred, with the title centred beneath it.
   Sections whose header sits beside a control stay left-aligned (see below). */
.ghao-skin-v2 .ghac-label {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	text-align: center;
	gap: 0;
	padding: 8px 20px;
	border: 1px solid var(--ghac-line-dk);
	border-radius: 100px;
	background: #fff;
	color: var(--ghac-navy-3);
	font-size: 11.5px;
	letter-spacing: .16em;
}
/* the classic skin's leading dash has no place inside a pill */
.ghao-skin-v2 .ghac-label::before {
	display: none;
}
/* on dark bands the pill inverts */
.ghao-skin-v2 .ghac-on-dark .ghac-label,
.ghao-skin-v2 .ghac-cta .ghac-label,
.ghao-skin-v2 .ghac-gallery .ghac-label {
	background: rgba(255, 255, 255, .08);
	border-color: var(--ghac-line);
	color: var(--ghac-sky-lt);
}
.ghao-skin-v2 .ghac-sec-h {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	max-width: 24ch;
}

/* Keep left-aligned where the header pairs with a control or sits in a card. */
.ghao-skin-v2 .ghac-evx__top .ghac-label,
.ghao-skin-v2 .ghac-events__head .ghac-label,
.ghao-skin-v2 .ghac-partner-block .ghac-label,
.ghao-skin-v2 .ghac-overview .ghac-label {
	margin-left: 0;
	justify-content: flex-start;
	text-align: left;
}
.ghao-skin-v2 .ghac-evx .ghac-sec-h,
.ghao-skin-v2 .ghac-events__head .ghac-sec-h,
.ghao-skin-v2 .ghac-partner-block .ghac-sec-h,
.ghao-skin-v2 .ghac-gallery .ghac-sec-h,
.ghao-skin-v2 .ghac-overview .ghac-sec-h {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	max-width: 20ch;
}

/* ── Single event page ────────────────────────────────────────────────────
   The two-column "booking rail" layout is gone (see single-ghac_event.php):
   past events now run as full-width bands, so the old `.ghac-single__main`
   overrides and the fake band separators (padding-top + border-top faked on
   stacked divs) have nothing to act on and would fight the real sections'
   padding. What survives is the header alignment rule, retargeted.

   The full-width bands take the skin's centred header. The summary band is the
   exception: its header sits beside the facts card, so centring it would read
   as broken exactly the way it did next to the old rail. */
.ghao-skin-v2 .ghac-evsum__body .ghac-label {
	margin-left: 0;
	justify-content: flex-start;
	text-align: left;
}
.ghao-skin-v2 .ghac-evsum__body .ghac-sec-h {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	max-width: 20ch;
}
/* Deep band inverts the pill, same as the other dark surfaces. */
.ghao-skin-v2 .ghac-evsec--deep .ghac-label {
	background: rgba(255, 255, 255, .08);
	border-color: var(--ghac-line);
	color: var(--ghac-sky-lt);
}
/* Centred headers on the full-width bands need their grid pushed clear. */
.ghao-skin-v2 .ghac-evsec .ghac-sec-h + * {
	margin-top: 40px;
}
/* The intro line has to follow its header — left under a centred title read as
   a misalignment, not a choice. */
.ghao-skin-v2 .ghac-evsec__intro {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* Speaker cards: soften the low-res source thumbs + give them a card feel. */
.ghao-skin-v2 .ghac-speaker__img {
	border-radius: 18px;
	box-shadow: 0 14px 30px -22px rgba(29, 29, 30, .5);
}

/* Resources: a long single stack of flat rows → a 2-up card grid with a real
   download affordance. Titles are long, so they wrap rather than squeeze. */
.ghao-skin-v2 .ghac-downloads {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.ghao-skin-v2 .ghac-download {
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 16px;
	position: relative;
	box-shadow: 0 12px 26px -22px rgba(29, 29, 30, .5);
}
.ghao-skin-v2 .ghac-download:hover {
	transform: translateY(-3px);
	border-color: var(--ghac-sky);
	box-shadow: 0 20px 38px -22px rgba(29, 29, 30, .55);
}
.ghao-skin-v2 .ghac-download .ico {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	margin-top: 1px;
}
.ghao-skin-v2 .ghac-download .nm {
	font-size: 14.5px;
	line-height: 1.45;
	padding-right: 22px;
	word-break: break-word;
}
.ghao-skin-v2 .ghac-download::after {
	content: "↓";
	position: absolute;
	top: 17px;
	right: 18px;
	font-size: 15px;
	color: var(--ghac-sky-lt);
	transition: .3s var(--ghac-ease);
}
.ghao-skin-v2 .ghac-download:hover::after {
	color: var(--ghac-navy-3);
	transform: translateY(3px);
}
@media (max-width: 900px) {
	.ghao-skin-v2 .ghac-downloads { grid-template-columns: 1fr; }
}

/* ── 2. FRAMING & RHYTHM ──────────────────────────────────────────────────
   The demo breathes more than we do (~120px section padding). */
.ghao-skin-v2 .ghac-pad {
	padding-top: clamp(76px, 10vw, 124px);
	padding-bottom: clamp(76px, 10vw, 124px);
}
.ghao-skin-v2 .ghac-services-grid,
.ghao-skin-v2 .ghac-steps,
.ghao-skin-v2 .ghac-serve,
.ghao-skin-v2 .ghac-why {
	margin-top: 56px;
}

/* ── 3. CARDS & ICONBOXES ─────────────────────────────────────────────────
   Rounder, softer, centred head with a circular icon chip. */
.ghao-skin-v2 .ghac-service,
.ghao-skin-v2 .ghac-step,
.ghao-skin-v2 .ghac-ev-card,
.ghao-skin-v2 .ghac-partner-block,
.ghao-skin-v2 .ghac-serve__c {
	border-radius: var(--ghao-v2-radius);
}
.ghao-skin-v2 .ghac-service {
	padding: 38px 30px 32px;
	text-align: center;
	box-shadow: 0 20px 46px -30px rgba(29, 29, 30, .38);
}
.ghao-skin-v2 .ghac-service__head {
	position: relative;
	justify-content: center;
	margin-bottom: 6px;
}
.ghao-skin-v2 .ghac-service__ic {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin: 0 auto 4px;
}
.ghao-skin-v2 .ghac-service__ic svg {
	width: 28px;
	height: 28px;
}
.ghao-skin-v2 .ghac-service__n {
	position: absolute;
	top: 2px;
	right: 0;
}
.ghao-skin-v2 .ghac-service:hover {
	transform: translateY(-8px);
	box-shadow: 0 34px 64px -30px rgba(29, 29, 30, .5);
}
/* Bullet lists stay left-aligned — centred bullets are unreadable. */
.ghao-skin-v2 .ghac-service__list {
	text-align: left;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ghac-line-dk);
}

/* Numbered process cards: centre the badge + copy. */
.ghao-skin-v2 .ghac-step {
	text-align: center;
	padding: 34px 26px 30px;
}
.ghao-skin-v2 .ghac-step__n {
	margin-left: auto;
	margin-right: auto;
}

/* Icon "who we serve" cards. */
.ghao-skin-v2 .ghac-serve__c {
	text-align: center;
}
.ghao-skin-v2 .ghac-serve__ic {
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
}

/* Why-list: centre the whole item stack. */
.ghao-skin-v2 .ghac-why__i {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

@media (max-width: 640px) {
	.ghao-skin-v2 .ghac-pad {
		padding-top: clamp(56px, 12vw, 76px);
		padding-bottom: clamp(56px, 12vw, 76px);
	}
	.ghao-skin-v2 .ghac-services-grid,
	.ghao-skin-v2 .ghac-steps,
	.ghao-skin-v2 .ghac-serve,
	.ghao-skin-v2 .ghac-why {
		margin-top: 36px;
	}
}