/**
 * Layout — spacing and structure that sit on top of Kadence's own
 * container/grid system. Kept mobile-first: base rules apply to small
 * screens, min-width media queries layer on larger-screen behaviour.
 */

/*
 * Subtle paper/grain texture — CSS-only (no external image request, no
 * base64 photo asset). The SVG is a tiny (120x120) `feTurbulence` noise
 * filter with its alpha baked in via `feColorMatrix` (the final `0.035` in
 * the alpha row), so the speckle itself is already near-invisible before
 * any browser rendering — this is the standard lightweight technique for a
 * fine paper/linen feel without a real scanned texture file. Tiled at its
 * native 120px size (background-repeat, explicit background-size so it
 * can't be silently rescaled). Layered as `background-image` on top of the
 * existing flat `background-color`, which still shows through everywhere
 * the noise pixels are transparent — this does not change the base colour
 * or affect text contrast (the busiest possible speckle only nudges a
 * pixel a few percent towards black, orders of magnitude below anything
 * that could move body text below the 4.5:1 contrast guideline).
 */
body {
	background-color: var(--gillani-color-background);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='gillaniGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23gillaniGrain)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 120px 120px;
}

.gillani-hero,
.gillani-split-content,
.gillani-card-grid,
.gillani-trust-grid,
.gillani-faq-accordion,
.gillani-testimonials,
.gillani-testimonials-grid,
.gillani-cta-band {
	padding-top: var(--gillani-space-5);
	padding-bottom: var(--gillani-space-5);
}

/*
 * Whitespace pass — desktop-only step up to the new `--gillani-space-7`
 * (see tokens.css). Mobile keeps its existing `--gillani-space-5` base
 * completely unchanged above, so small screens don't get proportionally
 * sparser as a side effect of a calmer desktop rhythm.
 */
@media (min-width: 782px) {
	.gillani-hero,
	.gillani-split-content,
	.gillani-card-grid,
	.gillani-trust-grid,
	.gillani-faq-accordion,
	.gillani-testimonials,
	.gillani-testimonials-grid,
	.gillani-cta-band {
		padding-top: var(--gillani-space-7);
		padding-bottom: var(--gillani-space-7);
	}
}

.gillani-card-grid,
.gillani-trust-grid,
.gillani-testimonials-grid {
	gap: var(--gillani-space-3);
}

/* Bucket A: more editorial, less cramped desktop card spacing. */
@media (min-width: 782px) {
	.gillani-card-grid,
	.gillani-testimonials-grid {
		gap: var(--gillani-space-4);
	}
}

/*
 * Alternating full-bleed section background utility — shared by the
 * Style Test pattern (Stage 0) and the real homepage pattern (Stage 1).
 * Sections keep their normal box width (identical to Kadence's own
 * content column and the header) and the "spans full viewport" look is
 * done purely visually with a box-shadow + clip-path bleed rather than
 * `align:full`/negative margins/`100vw`: the shadow paints the same
 * colour far beyond the element's edges, and clip-path stops that
 * oversized shadow from ever affecting layout or causing a horizontal
 * scrollbar. This is intentionally container-agnostic — proven working
 * on the live site across multiple Stage 0 review rounds.
 */
.gillani-section {
	position: relative;
	padding-top: var(--gillani-space-4);
	padding-bottom: var(--gillani-space-4);
	clip-path: inset(0 -100vmax);
}

/* Whitespace pass — desktop-only step up (mobile base above is unchanged). */
@media (min-width: 782px) {
	.gillani-section {
		padding-top: var(--gillani-space-6);
		padding-bottom: var(--gillani-space-6);
	}
}

.gillani-section--ivory {
	background-color: var(--gillani-color-background);
	box-shadow: 0 0 0 100vmax var(--gillani-color-background);
}

.gillani-section--stone {
	background-color: var(--gillani-color-border);
	box-shadow: 0 0 0 100vmax var(--gillani-color-border);
}

.gillani-section--white {
	background-color: var(--gillani-color-surface);
	box-shadow: 0 0 0 100vmax var(--gillani-color-surface);
}

/*
 * Hairline divider between two consecutive alternating-background
 * sections (e.g. ivory → stone → white). These flat-colour transitions
 * are all fairly low-contrast (cream/soft-border/off-white sit close
 * together tonally), so a 1px low-contrast rule gives the eye a
 * deliberate, editorial seam rather than a slightly indistinct hard
 * edge. Scoped to `.gillani-section + .gillani-section` only — a section
 * directly following the deep-navy `.gillani-hero` or preceding
 * `.gillani-cta-band` already reads as a strong, unambiguous colour
 * transition on its own, so no extra rule is added there.
 */
.gillani-section + .gillani-section {
	border-top: 1px solid var(--gillani-color-border);
}

/*
 * Revision 3 — section density/pacing pass. The homepage's background
 * alternation was deliberately reduced (fewer, larger blocks rather than
 * a long list of individually-labelled sections — see README.md
 * changelog); where two consecutive sections now deliberately share the
 * SAME background variant (e.g. intro → UK cards → International Agency
 * all now `--ivory`), the hairline seam above is suppressed so they read
 * as one continuous block with no visible boundary at all — only a
 * genuine colour change (ivory → stone, stone → ivory) still gets the
 * deliberate seam.
 */
.gillani-section--ivory + .gillani-section--ivory,
.gillani-section--stone + .gillani-section--stone,
.gillani-section--white + .gillani-section--white {
	border-top: none;
}

/*
 * Scroll-reveal (Task 4) — progressive enhancement only. This class is
 * added at runtime by assets/js/scroll-reveal.js, which never runs (and
 * therefore never adds this class) when the user has `prefers-reduced-
 * motion: reduce` set, or when JavaScript fails to load at all — in both
 * cases every section simply renders at its normal, always-visible CSS
 * state below with no hidden/faded starting point. The media query below
 * is a second, CSS-only backstop for the rare case this class is present
 * with reduced motion active (e.g. the setting changes after load).
 */
.gillani-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.gillani-reveal.gillani-reveal--visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.gillani-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Prevent double vertical spacing when a component that already has its
 * own top/bottom padding (card grid, trust grid, FAQ accordion — see
 * above) sits directly inside a `.gillani-section`: the section itself
 * owns all vertical rhythm for homepage sections, so the nested
 * component's own padding is zeroed out in that specific context only.
 */
.gillani-section > .gillani-card-grid,
.gillani-section > .gillani-trust-grid,
.gillani-section > .gillani-faq-accordion,
.gillani-section > .gillani-testimonials-grid {
	padding-top: 0;
	padding-bottom: 0;
}