/**
 * HP-02B Layout Components — C-LAY-001 / C-LAY-002 / C-LAY-003
 *
 * Source: HP-02A.03 §5 (content well), HP-02A.05C (layout tokens).
 * All values reference DS-* tokens from tokens.css (Section B).
 * This file must load after tokens.css.
 *
 * This file is SEPARATE from assets/css/layouts.css (legacy pre-HP-02B
 * grid/pro-band rules). Both files coexist — do not merge.
 *
 * @package HaritaZen
 * @since   HP-02B Sprint 1
 */

/* ==========================================================================
   C-LAY-001 — Content Well
   Max-width container that centres all homepage content.
   Per HP-02A.03 §5: 1200px max at 1280px+; 335px readable minimum at 375px.
   ========================================================================== */

.hz-content-well {
	width: 100%;
	max-width: var(--DS-LY-CONTENT-WELL-MAX);
	margin-inline: auto;
	padding-inline: var(--DS-SP-CONTAINER-X);
}

/* Wider horizontal padding from 768px upward */
@media (min-width: 768px) {
	.hz-content-well {
		padding-inline: var(--DS-G-SP-006); /* 32px */
	}
}

/* Full content well padding from 1280px — content well reaches its max */
@media (min-width: 1280px) {
	.hz-content-well {
		padding-inline: var(--DS-G-SP-005); /* 24px — well is capped; padding is visual breathing room */
	}
}

/* Narrow variant — 800px max for text-heavy sections (e.g. newsletter, editorial) */
.hz-content-well--narrow {
	max-width: 800px;
}

/* Wide variant — full bleed within the outer well max (used by hero) */
.hz-content-well--full {
	max-width: none;
	padding-inline: 0;
}

/* ==========================================================================
   C-LAY-002 — Section Wrapper
   Vertical rhythm container that wraps each homepage section (S-01…S-11).
   ========================================================================== */

.hz-section {
	padding-block: var(--DS-SP-SECTION-Y);
	position: relative;
}

/* Surface variants */
.hz-section--white {
	background-color: var(--DS-C-BG-PRIMARY);
}

.hz-section--mist {
	background-color: var(--DS-C-BG-MIST);
}

.hz-section--navy {
	background-color: var(--DS-C-BG-NAVY);
	color: var(--DS-C-TEXT-ON-NAVY);
}

/* Spacing modifiers */
.hz-section--compact {
	padding-block: var(--DS-G-SP-006); /* 32px */
}

.hz-section--spacious {
	padding-block: var(--DS-SP-SECTION-Y-LG); /* 64px */
}

.hz-section--flush {
	padding-block: 0;
}

/* Top / bottom individual overrides */
.hz-section--no-top    { padding-block-start: 0; }
.hz-section--no-bottom { padding-block-end: 0; }

/* Divider rule between sections */
.hz-section--ruled {
	border-top: 1px solid var(--DS-C-RULE);
}

/* Section header block (shared across S-02 through S-10) */
.hz-section__header {
	margin-bottom: var(--DS-G-SP-006); /* 32px */
}

.hz-section__eyebrow {
	display: block;
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 700;
	letter-spacing: var(--DS-T-TRACKING-WIDEST);
	text-transform: uppercase;
	color: var(--DS-C-BRAND-GREEN);
	margin-bottom: var(--DS-G-SP-002);
}

.hz-section--navy .hz-section__eyebrow {
	color: var(--DS-C-BRAND-GOLD);
}

.hz-section__title {
	font-family: var(--DS-T-FAMILY-SERIF);
	font-size: clamp(var(--DS-T-SIZE-XL), 3vw, var(--DS-T-SIZE-3XL));
	font-weight: normal;
	line-height: var(--DS-T-LEADING-TIGHT);
	color: var(--DS-C-BRAND-NAVY);
	margin: 0 0 var(--DS-G-SP-003);
	text-wrap: balance;
}

.hz-section--navy .hz-section__title {
	color: var(--DS-C-TEXT-ON-NAVY);
}

.hz-section__description {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-MD);
	line-height: var(--DS-T-LEADING-BASE);
	color: var(--DS-C-TEXT-MUTED);
	max-width: 640px;
	margin: 0;
}

.hz-section--navy .hz-section__description {
	color: rgba(255, 255, 255, 0.75);
}

/* Centred header variant */
.hz-section__header--centred {
	text-align: center;
}

.hz-section__header--centred .hz-section__description {
	margin-inline: auto;
}

/* Section CTA link (e.g. "View all guides →") */
.hz-section__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--DS-G-SP-002);
	margin-top: var(--DS-G-SP-005);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 600;
	color: var(--DS-C-BRAND-GREEN);
	text-decoration: none;
	min-height: 44px; /* ACC-QG-10: minimum touch target */
	min-width: 44px;
}

.hz-section__cta:hover {
	text-decoration: underline;
}

.hz-section__cta:focus-visible {
	outline: var(--DS-A-FOCUS-RING);
	outline-offset: var(--DS-A-FOCUS-RING-OFFSET);
	border-radius: var(--DS-G-R-002);
}

.hz-section--navy .hz-section__cta {
	color: var(--DS-C-BRAND-GOLD);
}

/* ==========================================================================
   C-LAY-003 — Grid System
   Responsive grid used across S-02 (hub cards), S-03 (guides),
   S-04 (tools), S-05 (templates), etc.
   9-breakpoint responsive per HP-02A.03 §3.
   ========================================================================== */

/* Base grid — single column (mobile-first) */
.hz-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--DS-SP-GAP-CARD);
}

/* 2-column — from 768px (tablet portrait) */
@media (min-width: 768px) {
	.hz-grid--cols-2,
	.hz-grid--cols-3,
	.hz-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 3-column — from 1024px (tablet landscape / small desktop) */
@media (min-width: 1024px) {
	.hz-grid--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.hz-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 4-column — from 1280px (desktop standard) */
@media (min-width: 1280px) {
	.hz-grid--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 5-column — hub card specific grid (5 hubs at S-02) */
@media (min-width: 768px) {
	.hz-grid--cols-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.hz-grid--cols-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.hz-grid--cols-5 {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Gap modifiers */
.hz-grid--gap-sm  { gap: var(--DS-G-SP-004); } /* 16px */
.hz-grid--gap-lg  { gap: var(--DS-G-SP-006); } /* 32px */
.hz-grid--gap-xl  { gap: var(--DS-G-SP-007); } /* 48px */

/* Asymmetric layouts (sidebar + content) */
.hz-grid--sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--DS-G-SP-006);
}

@media (min-width: 1024px) {
	.hz-grid--sidebar {
		grid-template-columns: 280px 1fr;
		align-items: start;
	}
}

/* Flex row — for inline groups (icon + label; badge + title) */
.hz-flex-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--DS-SP-GAP-INLINE);
}

.hz-flex-row--between {
	justify-content: space-between;
}

.hz-flex-row--end {
	justify-content: flex-end;
}

/* Stack — vertical flex (icon above label; stacked form fields) */
.hz-stack {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-003);
}

.hz-stack--sm { gap: var(--DS-G-SP-002); }
.hz-stack--lg { gap: var(--DS-G-SP-005); }

/* ==========================================================================
   Accessibility — Global rules that apply to all HP-02B layout elements
   Source: HP-02A.08A
   ========================================================================== */

/* Focus ring — ACC-QG-04: 2px solid Brand Green, 2px offset */
.hz-content-well *:focus-visible,
.hz-section *:focus-visible,
.hz-grid *:focus-visible {
	outline: var(--DS-A-FOCUS-RING);
	outline-offset: var(--DS-A-FOCUS-RING-OFFSET);
}

/* Reduced motion — ACC-QG-09: collapse all transitions/animations to 0ms */
@media (prefers-reduced-motion: reduce) {
	.hz-content-well *,
	.hz-section *,
	.hz-grid * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   Shared Button System — hz-btn
   Moved here from homepage-v2.css (Sprint 6 consolidation) so buttons are
   available on every template that loads layout.css without needing to also
   load homepage-v2.css or legal.css.
   ACC-QG-10: min 44×44px touch target on all variants.
   ========================================================================== */

.hz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--DS-G-SP-002);
	padding: 10px var(--DS-G-SP-005);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 600;
	letter-spacing: var(--DS-T-TRACKING-WIDE);
	line-height: 1;
	border-radius: var(--DS-G-R-006);
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	min-height: 44px;
	min-width: 44px;
	white-space: nowrap;
	transition:
		background-color var(--DS-G-M-001),
		color var(--DS-G-M-001),
		border-color var(--DS-G-M-001);
}

.hz-btn:focus-visible {
	outline: 2px solid var(--DS-C-FOCUS);
	outline-offset: 2px;
	border-radius: var(--DS-G-R-002);
}

/* Gold — primary CTA on dark surfaces */
.hz-btn--gold {
	background-color: var(--DS-C-BRAND-GOLD);
	color: var(--DS-G-C-014);
	border-color: var(--DS-C-BRAND-GOLD);
}
.hz-btn--gold:hover {
	background-color: #9A7A22;
	border-color: #9A7A22;
}

/* Ghost white — secondary CTA on dark (forest/midnight) surfaces */
.hz-btn--white-ghost {
	background-color: transparent;
	color: #FAFAF7;
	border-color: rgba(250, 250, 247, 0.45);
}
.hz-btn--white-ghost:hover {
	background-color: rgba(250, 250, 247, 0.1);
	border-color: rgba(250, 250, 247, 0.7);
}

/* Forest green — solid CTA on light surfaces */
.hz-btn--forest,
.hz-btn--green {
	background-color: var(--DS-C-BRAND-GREEN);
	color: #FAFAF7;
	border-color: var(--DS-C-BRAND-GREEN);
}
.hz-btn--forest:hover,
.hz-btn--forest:focus-visible,
.hz-btn--green:hover {
	background-color: var(--DS-C-BRAND-NAVY);
	border-color: var(--DS-C-BRAND-NAVY);
}

/* Outline green — secondary CTA on light surfaces */
.hz-btn--outline-green {
	background-color: transparent;
	color: var(--DS-C-BRAND-GREEN);
	border-color: var(--DS-C-BRAND-GREEN);
}
.hz-btn--outline-green:hover {
	background-color: var(--DS-C-BRAND-GREEN);
	color: #FAFAF7;
}

@media (prefers-reduced-motion: reduce) {
	.hz-btn {
		transition: none;
	}
}

/* ==========================================================================
   Visually hidden utility (screen-reader only) */
.hz-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Skip link — ACC-QG-04 / HP-02A.08A §4 */
.hz-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--DS-LY-Z-TOAST);
	padding: var(--DS-G-SP-002) var(--DS-G-SP-004);
	background: var(--DS-C-BRAND-GREEN);
	color: var(--DS-G-C-004);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--DS-G-R-003) 0;
	transform: translateY(-100%);
	transition: transform var(--DS-G-M-001);
}

.hz-skip-link:focus {
	transform: translateY(0);
}