/**
 * Homepage-only styles, enqueued conditionally on is_front_page(). Section
 * colors come from theme.json and blocks.css; this file covers the
 * homepage-specific hero (circuit graphics, typography, single CTA),
 * the "Our Expertise" 12-service grid, and compact section-heading sizing.
 */

.oasis-hero-home {
	background-image: radial-gradient(var(--wp--preset--color--gray-300) 1px, transparent 1px);
	background-position: center top;
	background-size: 24px 24px;
	overflow: hidden;
	position: relative;
}

/*
 * Circuit geometry ported directly from the approved Figma handoff
 * (design/figma/prototype-code/src/components/CircuitLeft.tsx /
 * CircuitRight.tsx -- same coordinates and node radii, translated from
 * JSX to plain SVG). Sized and positioned using Figma's own fixed-pixel
 * breakpoint steps (prototype-code/src/index.css's .hc-l/.hc-r rules)
 * rather than the previous fluid clamp()-based approach: now that
 * Phase F2's global canvas already caps the whole site at 1160px, the
 * hero section's own edges are themselves canvas-bounded, so anchoring
 * to them with Figma's exact fixed widths reproduces the approved
 * composition directly instead of approximating it with a formula.
 * No breakpoint hides the circuits entirely -- the approved 390px
 * screenshot still shows them, just smaller and lower-opacity, so
 * neither does this.
 *
 * "Hero-only reference match" phase: widened from 256/210 to 275/235
 * (the underlying SVG artwork in hero.php is itself denser and reaches
 * farther inward now too -- see that file's own comment) to visually
 * match a supplied reference showing stronger, farther-reaching circuit
 * art, while keeping the increase modest enough that the headline still
 * fits its approved two-line wrap in the narrower remaining text column
 * (see .oasis-hero-heading below).
 */
.oasis-hero-circuit {
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 275px;
	z-index: 0;
}

.oasis-hero-circuit--left {
	color: var(--wp--preset--color--cyan);
	inset-inline-start: 0;
}

.oasis-hero-circuit--right {
	color: var(--wp--preset--color--lime);
	inset-inline-end: 0;
	width: 235px;
}

@media (max-width: 1024px) {
	.oasis-hero-circuit--left {
		width: 183px;
	}

	.oasis-hero-circuit--right {
		width: 157px;
	}
}

@media (max-width: 600px) {
	.oasis-hero-circuit--left {
		opacity: 0.55;
		width: 107px;
	}

	.oasis-hero-circuit--right {
		opacity: 0.55;
		width: 92px;
	}
}

@media (max-width: 390px) {
	.oasis-hero-circuit--left {
		opacity: 0.38;
		width: 38px;
	}

	.oasis-hero-circuit--right {
		opacity: 0.38;
		width: 32px;
	}
}

/*
 * The hero's text column reserves horizontal space equal to each
 * circuit's max width plus an 18px gap (275+18=293 / 235+18=253) at
 * desktop, matching the circuits above -- this guarantees no
 * circuit/text overlap by construction (reserved space) rather than by
 * computing whether a margin happens to be wide enough. The tablet
 * breakpoint (<=1024px, covering both the 1024x768 and 768x1024
 * acceptance viewports) keeps the same 18px gap at its smaller circuit
 * width. At <=390px (which also covers 360px) the gap steps down to
 * 12px (38+12=50 / 32+12=44): the circuit is already scaled down
 * substantially and faint (0.38 opacity) there, so the extra buffer
 * isn't needed, and the headline needs the reclaimed width to keep its
 * two-line wrap at the narrowest tested width.
 */
.oasis-hero-inner {
	padding-block: 60px;
	padding-inline-end: 253px;
	padding-inline-start: 293px;
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.oasis-hero-inner {
		padding-block: 52px;
		padding-inline-end: 175px;
		padding-inline-start: 201px;
	}
}

@media (max-width: 600px) {
	.oasis-hero-inner {
		padding-block: 48px;
		padding-inline-end: 110px;
		padding-inline-start: 125px;
	}
}

@media (max-width: 390px) {
	.oasis-hero-inner {
		padding-block: 40px;
		padding-inline-end: 44px;
		padding-inline-start: 50px;
	}
}

/*
 * Hero typography. Max size trimmed from 50px to 46px (clamp ceiling
 * 3.125rem -> 2.875rem, matching vw coefficient 4.2 -> 3.9) to fit the
 * approved two-line headline back into the narrower text column left
 * by the widened circuits above -- still large/bold/dominant, just
 * sized to the available space instead of overflowing to a third line.
 * 600px step size unchanged (that column doesn't narrow at that
 * breakpoint). 390px trimmed 22px -> 20px for the same reason: even
 * after pulling the 390px circuits back down (see above), "Enterprise
 * IT infrastructure" measured ~274px at 22px/900-weight and the
 * available column there is narrower than that -- confirmed via a real
 * measured-text-width check -- so it kept re-wrapping to a third line.
 * That same 390px step also covers the 360px acceptance viewport (no
 * separate breakpoint needed once the circuit/padding numbers above
 * were tightened further -- re-confirmed via a real height/line-height
 * check at both 390 and 360, both render exactly two lines).
 */
.oasis-hero-heading {
	color: var(--wp--preset--color--navy);
	font-size: clamp( 1.75rem, 3.9vw, 2.875rem );
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.13;
	margin-bottom: var(--wp--preset--spacing--20);
}

@media (max-width: 600px) {
	.oasis-hero-heading {
		font-size: 28px;
	}
}

@media (max-width: 390px) {
	.oasis-hero-heading {
		font-size: 20px;
		letter-spacing: -0.015em;
		line-height: 1.2;
	}
}

.oasis-hero-subheading {
	color: var(--wp--preset--color--gray-700);
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--40);
	margin-inline: auto;
	max-width: 480px;
}

@media (max-width: 600px) {
	.oasis-hero-subheading {
		font-size: 0.906rem;
	}
}

@media (max-width: 390px) {
	.oasis-hero-subheading {
		font-size: 0.844rem;
		max-width: 100%;
	}
}

/*
 * Single dominant CTA: compact pill height, balanced padding, no
 * oversized dimensions. Explicit buttonPill token (Phase F1) rather
 * than the legacy 999px global button radius -- visually identical at
 * this button's height (any radius >= half the height renders the same
 * full-stadium shape) but semantically correct going forward.
 */
.oasis-hero-actions .wp-block-button__link {
	border-radius: var(--wp--custom--border-radius--button-pill);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	padding-bottom: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--50);
}

.oasis-eyebrow {
	color: var(--wp--preset--color--gray-700);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.oasis-trust-strip {
	background-color: var(--wp--preset--color--background);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/*
 * "Our Expertise" section: left-aligned compact label, tighter top
 * spacing than a standard .oasis-section. .oasis-section itself carries
 * no horizontal gutter (only header/footer do, via blocks.css), so this
 * section needs its own inline padding to match the approved screenshots
 * -- same 40/20/16px steps as the header/footer gutter, for visual
 * consistency with the rest of the canvas.
 */
.oasis-expertise-section {
	padding-inline: 40px;
	padding-top: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.oasis-expertise-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-expertise-section {
		padding-inline: 16px;
	}
}

.oasis-section-label {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: var(--wp--preset--spacing--30);
	text-align: start;
	text-transform: uppercase;
}

/*
 * True CSS grid for the 12-service expertise layout: 3 columns / 4 rows
 * desktop, 2 columns / 6 rows tablet, 1 column / 12 rows mobile. Uses
 * Figma's own fixed-pixel breakpoints (prototype-code/src/index.css's
 * .svc-grid rules: 860px -> 2 columns, 520px -> 1 column) rather than the
 * theme's general 960/599 steps, since those two exact values are what
 * the approved 768px and 390px screenshots were designed against.
 */
.oasis-expertise-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
	.oasis-expertise-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.oasis-expertise-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Grid spacing comes entirely from the `gap` above -- override core's
 * default flow-layout block-gap margin (applied to non-first children
 * via a low-specificity :where() rule since this group uses "type":
 * "default" layout). Without this, the grid's overall first card (only)
 * renders 1.5rem taller than its row-mates -- align-items:stretch fills
 * each card to its row's tallest required extent, and the first card
 * (with no inherited margin-top) stretches into the space the others
 * reserve for that margin. Found and fixed alongside the identical bug
 * in .oasis-clients-grid during Phase F5 regression QA.
 */
.oasis-expertise-grid > .oasis-expertise-card {
	margin-block: 0;
}

/*
 * Compact, centered card variant for the homepage grid specifically
 * (layered on top of the shared .is-style-card so the Services page and
 * generic capabilities-grid pattern, which reuse is-style-card without
 * this class, keep their existing left-aligned/larger presentation).
 * Padding, internal gap, border width, and typography follow the
 * approved Figma .svc-card spec exactly rather than the theme's larger
 * default card metrics, since the 12-card grid needs a visibly more
 * compact card than the theme-wide is-style-card default.
 */
.oasis-expertise-card {
	align-items: center;
	border-width: 1px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 20px 24px;
	text-align: center;
}

/* The shared is-style-card gradient-square placeholder is replaced by a real ported icon (SVG, or the one approved raster) as the card's first child. */
.oasis-expertise-card::before {
	display: none;
}

.oasis-expertise-card.oasis-accent-lime {
	border-color: var(--wp--preset--color--lime);
}

.oasis-expertise-card.oasis-accent-lime .oasis-svc-icon {
	color: var(--wp--preset--color--lime);
}

.oasis-expertise-card :where(h3) {
	color: var(--wp--preset--color--navy);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.oasis-expertise-card p {
	color: var(--wp--preset--color--gray-700);
	font-size: 12.5px;
	line-height: 1.65;
	margin: 0;
}

/* Accent-tinted hover elevation (rgba values match the approved Figma .svc-card.bc/.bl hover shadows). */
.oasis-expertise-card:hover,
.oasis-expertise-card:focus-within {
	box-shadow: 0 6px 22px rgba(0, 179, 216, 0.14);
}

.oasis-expertise-card.oasis-accent-lime:hover,
.oasis-expertise-card.oasis-accent-lime:focus-within {
	box-shadow: 0 6px 22px rgba(125, 196, 32, 0.13);
}

/* Compact section headings for the homepage's supporting sections, smaller than the sitewide h2 default. */
.oasis-subsection-heading {
	font-size: 1.75rem;
}

/*
 * "Our Clients" section (Phase F5). Sits on the alternating light
 * background (.oasis-surface-band, already used elsewhere on the
 * homepage) between "Our Expertise" and "Why enterprise IT leaders
 * choose Oasis", matching the approved Figma page order. .oasis-section
 * carries no horizontal gutter of its own (see the Phase F4 note above
 * on .oasis-expertise-section), so this section needs the same 40/20/16
 * gutter steps as the header/footer and expertise section for visual
 * alignment with the rest of the canvas.
 */
.oasis-clients-section {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-clients-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-clients-section {
		padding-inline: 16px;
	}
}

/*
 * Eyebrow label ("Trusted By"). Distinct from the sitewide .oasis-eyebrow
 * (which is gray-700, used standalone as a compact heading in
 * trust-strip.php) -- Figma's .section-label token for centered
 * compound headings is cyan, so this is a separate, section-scoped class
 * rather than overloading the existing one.
 *
 * Phase F9 contrast audit: plain cyan measures ~2.5:1 against this
 * section's light background, failing the 4.5:1 WCAG AA minimum for
 * text -- cyan-700 clears 5:1 (same substitution as .oasis-eyebrow-label
 * and .oasis-contact-label in blocks.css).
 */
.oasis-clients-label {
	color: var(--wp--preset--color--cyan-700);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	margin-bottom: var(--wp--preset--spacing--10);
	text-transform: uppercase;
}

.oasis-clients-sub {
	color: var(--wp--preset--color--gray-700);
	font-size: 0.906rem;
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--40);
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--10);
	max-width: 580px;
}

/*
 * True CSS grid for the 8-client placeholder layout: 4 columns / 2 rows
 * down to 700px (Figma's own .clients-grid breakpoint -- confirmed via
 * the approved 768px screenshot, which still shows 4 columns there),
 * then 2 columns / 4 rows from 700px down through the 390px screenshot.
 * No separate single-column mobile step exists in the approved design.
 */
.oasis-clients-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr);
}

/*
 * Grid spacing comes entirely from the `gap` above -- override core's
 * default flow-layout block-gap margin (applied to non-first children
 * via a low-specificity :where() rule since this group uses "type":
 * "default" layout) so it doesn't stack with `gap` and unevenly inflate
 * row heights/offsets.
 */
.oasis-clients-grid > .oasis-client-box {
	margin-block: 0;
}

@media (max-width: 700px) {
	.oasis-clients-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Placeholder client box: plain, non-interactive container (no link, no
 * tabindex) so it doesn't imply clickability before real logos exist.
 * The label paragraph is the only child so it can later be swapped for
 * a core/image without touching this wrapper's border/sizing.
 */
.oasis-client-box {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	min-height: 64px;
	transition: border-color 0.18s ease;
}

.oasis-client-box:hover {
	border-color: var(--wp--preset--color--cyan);
}

/*
 * Figma's own placeholder text color (#b0c4d4) measures ~1.8:1 against
 * the white card background, far below the 4.5:1 AA minimum for real
 * text -- substituting the theme's existing gray-700 "muted text" token
 * (~6.3:1) instead, the same substitution precedent set in Phase F2 for
 * the footer-dim token.
 */
.oasis-client-label {
	color: var(--wp--preset--color--gray-700);
	font-size: 0.719rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}