/**
 * assets/css/front-page.css
 *
 * Styles for the MIC homepage (Figma file "MIC 2", frame "MIC" 1:2).
 * Loaded only on the front page (see inc/assets.php → is_front_page()).
 *
 * Built on the AUTHORITATIVE tokens in fonts.css (palette + --font-sans) and
 * the type scale already shipped in article.css / news.css, so the homepage is
 * visually consistent with the live news and article pages:
 *   H1 .......... 50px / 700 / 1.1   (article.css)
 *   Lead ........ 25px / 600 / 1.32  (article.css)
 *   Body ........ 18px / 400 / 1.4   (article.css)
 *   Section h2 .. clamp(24,40)/700/1.2
 *
 * Layout widths follow the Figma 1440 canvas:
 *   .container        max 1172px (138px margins) — shared, defined in news.css
 *   .container--wide  max ~1400px (20px margins)  — the card bands that run wide
 *
 * Vertical paddings are derived from the section node geometry and are tuned
 * for rhythm; fine pixel tuning happens against the Figma frame in review.
 *
 * Mobile breakpoint matches the theme convention: max-width 1023px.
 *
 * SECURITY CLASS C — §2/§3: no external requests; the arrow glyph reuses the
 * bundled assets/img/icon-arrow-right.svg via CSS mask (local file only).
 *
 * @package AICenterwp
 * @since   1.1.0
 */

/* ==========================================================================
   HOMEPAGE TOKENS + SHARED PRIMITIVES
   ========================================================================== */

.front-page {
	--fp-section-pad: 96px;          /* default vertical rhythm between sections */
	--fp-navy:    var(--color--base-foreground, #01162a);
	--fp-lav:     var(--color--base-background, #c6c8d4);
	--fp-peri:    var(--color--accent-primary, #7189bd);
	--fp-coral:   var(--color--accent-coral, #fcab89); /* light peach — Uzdevumi panel */
	--fp-cta:     #f06334;                             /* true coral CTA — Figma rgb(240,99,52) */
	--fp-card-bg: rgb(220, 219, 226);                  /* Figma card fill — Darbs 1/2/3 */
	--fp-white:   #ffffff;
	background-color: var(--fp-lav);
}

/* Wider band for the card grids (Figma cards run to ~20px side margins). */
.container--wide {
	max-width: 1400px;
}

/* Shared section heading — "Ko mēs darām", "Mūsu uzdevumi", "Par MIC". */
.front-page .section-heading {
	font-family: var(--font-sans-expanded);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--fp-navy);
	margin: 0 0 24px;
}

/* Lead paragraph — 25px/600, matches article.css lead. */
.front-page .lead {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--fp-navy);
	margin: 0;
}

/* ==========================================================================
   CTA BUTTON  (Figma "Button white" 32:17 / "Button dark blue" 50:21 — 160×44)
   ========================================================================== */

/* Both Figma button components are OUTLINE PILLS (transparent fill, 1px
   border, 20px radius, label + trailing arrow). They differ only in colour:
   "Button white" (32:11, hero)  → white border + white text;
   "Button dark blue" (50:21)    → dark border + dark text (lavender sections). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 160px;
	min-height: 48px;
	padding: 7px 9px 7px 14px;   /* Figma mobile: 48px height */
	border: 1px solid currentColor;
	border-radius: 20px;          /* pill */
	background-color: transparent;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color .15s ease, transform .15s ease;
}

.btn__label { white-space: nowrap; }

/* Arrow glyph — bundled chevron, recoloured to follow the text colour. */
.btn__icon {
	width: 12px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url('../img/icon-arrow-right.svg') no-repeat center / 12px auto;
	mask: url('../img/icon-arrow-right.svg') no-repeat center / 12px auto;
	flex: 0 0 auto;
	transition: transform .15s ease;
}
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon { transform: translateX(3px); }

.btn--white { color: var(--fp-white); border-color: var(--fp-white); }
.btn--white:hover { background-color: rgba(255, 255, 255, .14); }

.btn--dark  { color: var(--fp-navy); border-color: var(--fp-navy); }
.btn--dark:hover  { background-color: rgba(1, 22, 42, .07); }

.btn:focus-visible { outline: 2px solid var(--fp-coral); outline-offset: 2px; }

/* ==========================================================================
   FRONT-PAGE HEADER OVERLAY
   The white menu variant must sit transparently OVER the hero. The body is
   normal block flow, so a negative-margin pull-up on the hero was unreliable
   (the menu ended up on the lavender strip above the hero). Pin the header
   absolutely instead — deterministic, and the hero's top padding clears it.
   Scoped to the front page (this stylesheet only loads there).
   ========================================================================== */

body.home { position: relative; }

.site-header--white {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* ==========================================================================
   HERO  (Figma "Hero" 1:15)
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	/* Figma 1:15: vertical gradient, periwinkle for the top ~92% then a short
	   fade into the lavender page ground at the very bottom. */
	background: linear-gradient(to bottom, var(--fp-peri) 92.3%, #cdcad5 100%);
	color: var(--fp-white);
	isolation: isolate;
}

/* "Kuģis" ship illustration — sits over the ground, right-anchored.
   No max-width: image scales freely from height (overflow:hidden on .hero clips excess).
   object-fit:cover + object-position:right bottom matches sandbox behaviour: image always
   fills its box from the right edge. right formula keeps 20px overhang over cards at
   1440px and tracks the band edge beyond that. */
.hero__art {
	position: absolute;
	right: max(0px, calc((100vw - 1400px) / 2 - 20px));
	bottom: 0;
	height: 86%;
	width: auto;
	max-width: none; /* deliberately wider than the section — clipped by .hero's overflow:hidden, exempt from the global img max-width reset in layout.css */
	object-fit: cover;
	object-position: right bottom;
	z-index: -1;
	pointer-events: none;
}

.hero__inner {
	display: flex;
	align-items: center;
	min-height: 794px;             /* Figma hero frame height (incl. menu zone) */
	padding-block: 100px 64px;     /* top padding clears the overlaid menu */
	box-sizing: border-box;
}

.hero__content { max-width: 620px; }

.hero__heading {
	font-size: 50px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 28px;
	color: var(--fp-coral);        /* Figma 1:37 — coral headline */
}

.hero__lead {
	font-size: 23px;               /* Figma 1:38 */
	font-weight: 300;              /* Light */
	line-height: 1.3;
	margin: 0 0 40px;
	max-width: 572px;
	color: var(--fp-white);
}

/* ==========================================================================
   PAR MIC  (Figma 32:35)
   ========================================================================== */

.par-mic { padding-block: 64px; }
.par-mic__text { max-width: 689px; }
/* Figma 32:35: body text is black rgba(0,0,0,1), 23px/300 — override the shared .lead */
.par-mic .lead {
	font-size: 23px;
	font-weight: 300;
	color: #000000;
}

/* ==========================================================================
   FEATURE CARDS  ("Ko mēs darām" 1:17 + "Uzdevumi" 1:18 share .feature-card)
   ========================================================================== */

.ko-daram { padding-block: var(--fp-section-pad); }

.ko-daram__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	align-items: start;
}

.feature-card {
	padding: 28px 28px 36px;           /* Figma: card 467px wide, text 412px wide → ~28px h-pad */
	background-color: var(--fp-card-bg);
	border: 1px solid #7189bd;         /* Figma: stroke=rgb(113,137,189) */
	border-radius: 15px;               /* Figma: cornerRadius=15 */
}

.feature-card__icon {
	display: block;
	width: 62px;
	height: 62px;
	margin: 0 0 24px;
}

.feature-card__title {
	font-size: 23px;                   /* Figma: 23px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--fp-cta);              /* Figma: rgba(240,99,52) coral */
	margin: 0 0 16px;
}

.feature-card__text {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color--base-foreground-2, #000000);
	margin: 0;
	max-width: 412px;
}

/* ==========================================================================
   UZDEVUMI  (Figma 1:18) — 4×2 flush grid of 8 task cards
   ========================================================================== */

.uzdevumi { padding-block: var(--fp-section-pad); }

.uzdevumi__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.feature-card--task .feature-card__title { font-size: 22px; }
.feature-card--task .feature-card__text  { max-width: 292px; }

/* Hover — tiles shift to Uzdevums 3 style: peach bg, white title + icon */
.feature-card--task {
	transition: background-color 0.2s ease;
}
.feature-card--task .feature-card__title,
.feature-card--task .feature-card__icon {
	transition: color 0.2s ease, filter 0.2s ease;
}

.feature-card--task:hover {
	background-color: #fcab89;
}
.feature-card--task:hover .feature-card__title {
	color: #ffffff;
}
.feature-card--task:hover .feature-card__icon {
	/* SVGs loaded via <img> can't be styled directly; brightness(0) makes
	   every pixel black then invert(1) makes it white. */
	filter: brightness(0) invert(1);
}

/* ==========================================================================
   FEATURE (image + text)  — "Par smilškasti" intro 24:7 + CTA 1:19
   ========================================================================== */

.feature { padding-block: var(--fp-section-pad); overflow: hidden; }

.feature__inner {
	display: grid;
	/* Figma: text column ~620px of 1172px container → text slightly wider */
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: stretch;              /* columns fill the row height */
	min-height: 458px;                 /* Figma content area: 650px frame − 2×96px padding */
}

.feature__content {
	max-width: 620px;
	display: flex;
	flex-direction: column;
	justify-content: center;           /* vertically centre text within the stretched row */
}

.feature__heading {
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 700;
	line-height: 1.25;                 /* Figma: 62.6/50 */
	color: var(--fp-navy);
	margin: 0 0 31px;                  /* Figma intro gap heading→body: 31px */
}

/* Figma: Google Sans Flex Light 300, 23px, lh 28.8/23 ≈ 1.25, max-width 572px */
.feature__text {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.25;
	margin: 0 0 40px;
	max-width: 572px;
}

/* Media column: fills the stretched row height; clips at the column boundary
   (= container right edge, same as Ko daram / Uzdevumi tiles above). */
.feature__media {
	overflow: hidden;
}

/* SVGs are 1186×551 and 1189×552 (aspect ≈ 2.15:1).
   object-fit: cover fills the column at full row height.
   object-position is set per-section to show the relevant part of each SVG. */
.feature__art {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* koks_1.svg: tree illustration is in the right ~40% of the SVG canvas.
   Show the right side so the tree is centred in the visible column area. */
.feature--intro .feature__art { object-position: right center; }

/* lapsta_final_1.svg: same right-center crop as koks — shows the right side of the SVG canvas. */
.feature--cta .feature__art { object-position: right center; }

/* Par smilškasti 24:7 (2nd on page) — gray→navy→navy→gray gradient.
   Peach heading, brand-blue body. */
.feature--intro {
	background: linear-gradient(
		to bottom,
		rgb(205, 202, 213)  0%,
		rgb(1,  22,  42)   10%,
		rgb(1,  22,  42)   90%,
		rgb(205, 202, 213) 100%
	);
}
.feature--intro .feature__heading { color: var(--fp-coral); }  /* Figma: rgba(252,171,137) peach */
.feature--intro .feature__text    { color: var(--fp-peri); }   /* Figma: rgba(113,137,189) blue */

/* Par smilškasti 1:19 (3rd on page) — gray→peach→peach→gray gradient.
   White heading, black body. */
.feature--cta {
	background: linear-gradient(
		to bottom,
		rgb(205, 202, 213)   0%,
		rgb(252, 171, 137)  10%,
		rgb(252, 171, 137)  90.4%,
		rgb(205, 202, 213) 100%
	);
}
.feature--cta .feature__heading {
	color: var(--fp-white);
	margin-bottom: 35px;    /* Figma 1:19: gap heading→body = 35px */
}
.feature--cta .feature__text {
	color: #000000;         /* Figma: rgba(0,0,0,1) */
	margin-bottom: 47px;    /* Figma 1:19: gap body→button = 47px */
}

/* ==========================================================================
   SEKO LĪDZI + SAZINIES  (Figma 1:20 + 15:3) — two equal columns
   ========================================================================== */

/* Two full-bleed colour panels (each 720px half in Figma), butting against the
   news section above and the footer below — no surrounding lavender gap. */
.follow-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.follow-contact__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 560px;
	padding: 96px clamp(24px, 9.3vw, 134px);  /* Figma content inset ≈ 134px */
}

/* Seko līdzi (1:20) — coral gradient; white heading, dark body + dark button. */
.follow-contact__col--follow {
	background: linear-gradient(to bottom, #cdcad5 0%, #f4a584 10%, var(--fp-coral) 100%);
}
.follow-contact__col--follow .follow-contact__heading { color: var(--fp-white); }
.follow-contact__col--follow .follow-contact__text { color: var(--fp-navy); }

/* Sazinies (15:3) — gray→deeper-blue→periwinkle gradient matching Figma 15:3.
   Stops: rgba(205,202,213) 0%, rgba(108,131,181) 10%, rgba(113,137,189) 100% */
.follow-contact__col--contact {
	background: linear-gradient(
		to bottom,
		rgb(205, 202, 213)  0%,
		rgb(108, 131, 181) 10%,
		rgb(113, 137, 189) 100%
	);
}
.follow-contact__col--contact .follow-contact__heading,
.follow-contact__col--contact .follow-contact__text { color: var(--fp-white); }

.follow-contact__heading {
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 24px;
}

.follow-contact__text {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.3;
	margin: 0 0 32px;
	max-width: 457px;
}

/* ==========================================================================
   RESPONSIVE  (theme breakpoint: max-width 1023px)
   ========================================================================== */

@media ( max-width: 1023px ) {

	.front-page { --fp-section-pad: 56px; }

	/* Hero — Figma "MIC phone" hero frame: 393×774px.
	   Matches the Sandbox hero's mobile box (sandbox.css .sandbox-hero__inner)
	   so the logo-to-heading gap reads the same on both pages. */
	.hero__inner { min-height: 560px; padding-block: 120px 48px; }
	.hero__heading { font-size: clamp(30px, 8vw, 40px); }
	.hero__lead { font-size: 18px; }
	/* Ship art: let it be taller on tablet so it reads well. */
	.hero__art { max-width: 65%; height: 55%; opacity: .9; }

	.par-mic .lead,
	.front-page .lead { font-size: 20px; }

	.ko-daram__grid { grid-template-columns: 1fr; }

	/* Ko daram + Uzdevumi cards — horizontal layout on mobile.
	   Figma mobile: icon at x=20 (62×62), title+text start at x=99.
	   CSS grid: col-1 = 62px icon (spans both rows), col-2 = title then text. */
	.feature-card {
		display: grid;
		grid-template-columns: 62px 1fr;
		grid-template-rows: auto auto;
		column-gap: 17px;
		row-gap: 10px;
		padding: 20px 20px 24px;
		align-items: start;
	}
	.feature-card__icon {
		grid-column: 1;
		grid-row: 1 / 3;
		margin-bottom: 0;
		align-self: start;
		margin-top: 4px;
	}
	.feature-card__title {
		grid-column: 2;
		grid-row: 1;
	}
	.feature-card__text {
		grid-column: 2;
		grid-row: 2;
		max-width: none;
	}

	.uzdevumi__grid { grid-template-columns: 1fr; row-gap: 0; }

	.feature__inner { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
	/* Single column: Figma mobile shows image ~260-273px tall. */
	.feature__media { height: 260px; }
	.feature__art { object-position: center; }

	.follow-contact__inner { grid-template-columns: 1fr; }
	.follow-contact__col { min-height: 0; padding: 56px clamp(24px, 7vw, 48px); }
}

@media ( max-width: 600px ) {
	/* Small phones (≤ 600px) — closer to Figma 393×774 mobile canvas.
	   min-height/padding-block intentionally NOT overridden here — keep the
	   560px/120,48 box from the 1023px tier so the logo-to-heading gap stays
	   consistent with the Sandbox hero at every mobile width. */
	.hero__heading { font-size: 30px; }
	/* Allow ship art to overflow container width (clipped by hero overflow:hidden).
	   Figma ship (638×296) bleeds beyond the 393px frame — right-anchored. */
	.hero__art { height: 40%; max-width: none; }

	.uzdevumi__grid { grid-template-columns: 1fr; }
}