/**
 * css/components/template-contact.css — Website 2.0 Contact page reskin (#66)
 *
 * template-contact.php-scoped CSS. The hero reuses `.cg-case-hero` as-is
 * (css/components/template-single-work.css) — no overrides needed here.
 * The info/form band reuses `.cg-band`/`.cg-split` (band.css/split.css)
 * for the two-column layout; the rules below only cover the bits that
 * are unique to this page: the phone/social sub-groups, the social link
 * list, and the Gravity Form panel's width + heading colour (the panel
 * itself is the existing `.sidebar-form` dark box, style.css/theme.css —
 * already tokenized to `--violet` → ink and fully restyled by #164's
 * forms.css, reused unchanged).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-contact-info__groups {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
	margin: 36px 0;
}

.cg-contact-info__phone {
	margin-top: 10px;
}

.cg-contact-info__phone a {
	color: inherit;
	text-decoration: none;
}

.cg-contact-info__phone a:hover {
	color: var( --accent );
}

.cg-contact-info__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.cg-contact-info__note {
	margin-top: 40px;
}

.cg-contact-info__note a {
	color: var( --accent );
}

/* The dark `.sidebar-form` panel's own heading — swaps the retired
   `.title-box h5` companion (theme.css) for the shared `.cg-h3` type
   role, recoloured cream for legibility on the panel's ink background. */
.cg-contact-form__title {
	color: var( --cg-cream );
}

/* Keep the form panel a compact card (matches the pre-reskin "sidebar"
   proportions) instead of stretching to the full `.cg-split` 1fr column,
   which would otherwise run ~600px+ wide on large screens. */
.cg-contact-form .sidebar-form {
	max-width: 460px;
}

@media ( max-width: 1024px ) {
	.cg-contact-form .sidebar-form {
		max-width: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * #427 — Contact Us ONLY (`is_page( 'contact-us' )` in the template).
 * Giant Tungsten-Narrow H1 + address/phone/social (left) and a sticky ink
 * HubSpot form panel (right, full content height). Everything above this
 * point (`.cg-contact-info__*`, `.cg-contact-form .sidebar-form`) is the
 * PRE-#427 styling and stays exactly as-is — it still renders thank-you
 * and contact-us-old, the other two pages on this template.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 * ═══════════════════════════════════════════════════════════════════════ */

.cg-contact2__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 320px, 522px );
	align-items: stretch; /* the form column stretches to the LEFT column's height — see .cg-contact2__formpanel below */
	gap: clamp( 48px, 6vw, 96px );
}

.cg-contact2__eyebrow {
	margin: 0 0 24px;
}

/*
 * The design's 327px H1 (Figma node 633:1387, 1920px canvas) converted to
 * a fluid clamp the same way every other giant-word treatment in this
 * system is (css/components/giant-word.css `.cg-believe__word`/
 * `.cg-caps__word`): 327 / 1920 ≈ 17vw, so the rendered size tracks the
 * same proportion at every viewport instead of jumping between fixed
 * breakpoint values. Verified not to overflow at 1440/1024/768/390 (#427
 * PR — Playwright `scrollWidth === clientWidth` at all four).
 */
.cg-contact2__title {
	margin: 0 0 40px;
	font-family: var( --font-condensed );
	font-weight: 700;
	font-size: clamp( 56px, 17vw, 327px );
	line-height: 0.88;
	letter-spacing: -2px;
	text-transform: uppercase; /* content is mixed-case ("Say<br>Hello") — same treatment as .cg-believe__word */
	color: var( --accent );
}

.cg-contact2__lede {
	max-width: 805px; /* Figma: "Intro copy, 805 wide" */
	margin: 0 0 56px;
}

.cg-contact2__group {
	margin: 0 0 40px;
}

.cg-contact2__label {
	margin: 0 0 10px;
}

/* Address / phone figure — 56px Averta Semibold, far larger than the
   shared .cg-h3 (28px) card-title role, so it's its own class rather than
   a reuse. */
.cg-contact2__figure {
	margin: 0 0 24px;
	font-family: var( --font-body );
	font-weight: 600;
	font-size: clamp( 28px, 4vw, 56px );
	line-height: 1.1;
	color: var( --text );
}

.cg-contact2__figure a {
	color: inherit;
	text-decoration: none;
}

.cg-contact2__figure a:hover {
	color: var( --accent );
}

.cg-contact2__directions {
	margin-top: 4px;
}

.cg-contact2__social {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Social ICONS, not lettered circles (#459).
 *
 * CD review r1 (2026-09-01): "make the social links icons instead of circles -
 * same as what we are using in the footer and menu flyout". The markup now
 * comes from blocks/cg/social-links.php — the same partial the footer and the
 * #cg-menu overlay use — so this file only supplies placement, exactly as
 * `.cg-footer__social` (footer.css:68) and `.cg-menu__social` (header.css:823)
 * do for their own surfaces. Sizing/colour is deliberately set here rather than
 * shared, because this row sits on the cream page surface while the footer's
 * sits on ink and the overlay's on cream-at-a-different-scale; the partial's
 * docblock is explicit that it implies no styling.
 *
 * The retired `.cg-contact2__circle` rules (56px round chip, first letter of
 * the platform name) are gone with their only caller. `.cg-contact2__social`
 * itself is unchanged — the flex row still holds, the gap steps up from 14px to
 * 22px to match `.cg-menu__social`, since an icon glyph is narrower than a 56px
 * chip and 14px read as crowded.
 */
.cg-contact2__social a {
	display: block;
	font-size: 22px;
	line-height: 1;
	color: var( --text );
	text-decoration: none;
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-contact2__social a:hover,
.cg-contact2__social a:focus-visible {
	color: var( --accent );
}

.cg-contact2__note {
	margin-top: 40px;
	max-width: 805px;
}

/* ─── Sticky ink form panel ────────────────────────────────────────────
 * `.cg-contact2__formcol` stretches to the grid row's height, which is
 * always the LEFT column's natural height (it carries far more copy than
 * an 800px form panel) — that's what `align-items: stretch` on the grid
 * (above) buys us. `.cg-contact2__formpanel` is `position: sticky` INSIDE
 * that stretched box: pinned to the top of the viewport while the column
 * still has height left below it, released back into normal flow the
 * moment the column runs out. That is native CSS sticky-against-own-
 * containing-block behaviour — no scroll-position JS needed for "unsticks
 * at the end of the left column rather than overlapping the footer".
 *
 * `max-height: 100vh` + `overflow-y: auto` is the other half of the
 * contract, and the one the issue calls out as the part most likely to be
 * got wrong: `position: sticky; top: 0` ALONE pins the panel with its top
 * edge at the viewport top and does nothing else — if the panel's own
 * content (title + HubSpot form) is taller than the viewport, the bottom
 * portion (the submit button, on a short viewport) sits below the fold
 * with literally nothing that can scroll it into view, because a stuck
 * element doesn't move with page scroll. Capping the panel at the
 * viewport height and letting IT scroll internally (mouse wheel/touch
 * over the panel scrolls its own content once pinned) is what keeps every
 * field, the checkbox, and the submit button reachable at ANY viewport
 * height — verified at 1200/900/700/600 (#427 PR measurements).
 * ──────────────────────────────────────────────────────────────────── */

.cg-contact2__formcol {
	min-width: 0;
}

.cg-contact2__formpanel {
	position: sticky;
	top: 0;
	max-height: 100vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: var( --box-pad );
	background: var( --surface-dark );
	color: var( --cg-cream );
}

.cg-contact2__formhead {
	margin: 0 0 24px;
}

.cg-contact2__formtitle {
	margin: 0 0 12px;
	font-family: var( --font-body );
	font-weight: 600;
	font-size: 32px;
	line-height: 1.15;
	color: var( --cg-cream );
}

.cg-contact2__formsub {
	margin: 0;
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.5;
	color: var( --cg-grey );
}

/* Sticky is disabled below the breakpoint the layout goes single-column
   at (matches split.css's own 1024px stacking point) — a stuck panel
   makes no sense once the form sits inline after the intro copy instead
   of beside it. */
@media ( max-width: 1024px ) {
	.cg-contact2__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.cg-contact2__formpanel {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* +50px on the TOP inset only (#488). Once the panel un-sticks it stops
   being a column beside the copy and becomes a full-width block the reader
   scrolls into under the 89px sticky header, with only `--box-pad` (44px)
   between its edge and the form headline. CD, 2026-09-03 (#480): "Lets
   give it 50px of padding above the headline".

   Left/right/bottom stay at --box-pad — he asked about the space above the
   headline, and moving the other three would shift the whole embedded
   HubSpot form.

   PHONES ONLY (<=680px), deliberately NOT the <=1024px block above where
   the panel un-sticks. The un-stick is a layout necessity at both widths;
   this 50px is a taste adjustment the CD made from phone screenshots, and
   #480's scope is "only applied to mobile breakpoints". Tablet (681-1024)
   keeps today's 44px. If the CD wants it there too, widen this one block. */
@media ( max-width: 680px ) {
	.cg-contact2__formpanel {
		padding-top: calc( var( --box-pad ) + 50px );
	}

	/* #485 — the headline the CD screenshotted. -2px was tuned against
	   this headline at desktop size — 244.8px at 1440, where it is -0.82%
	   of the em, and 0.61% at the clamp's 327px ceiling (reached at
	   >=1924px). The clamp floors at 56px and computes 66.3px at 390,
	   where the same flat value is -3.02% and the letters collide.

	   Measured on Dev at 390x844, per rendered line and in the case the
	   browser actually paints (`text-transform: uppercase` below, so the
	   glyphs are SAY / HELLO, not the "Say Hello" in the markup):
	   4 of 6 adjacent pairs render as a single ink run at -2px, 1 of 6 at
	   zero. The survivor is `AY`, and it is not this rule's doing — `AY`
	   also touches at 1440 with -2px untouched, i.e. it is a kern pair
	   Tungsten Narrow draws that way at every size. Fixing it would mean
	   positive tracking, which is not what was asked for.

	   Desktop keeps -2px. CD, 2026-09-03 (#480). */
	.cg-contact2__title {
		letter-spacing: 0;
	}
}