/**
 * sandbox.css
 *
 * Smilškaste page styles (Figma "Smilkkaste" 74:33, 1440×5786).
 * Loaded only on pages using the "Sandbox" page template (page-sandbox.php).
 *
 * COLOR TOKENS  (Figma "Materiali" layer palette)
 * ------------------------------------------------
 * --sb-navy:      #01162a  — Dark navy (headings, body on light bg)
 * --sb-blue:      #7189bd  — Brand blue (right-column text, blue buttons)
 * --sb-coral:     #f06334  — CTA coral (left-column text, numbered circles)
 * --sb-peach:     #fcab89  — Light peach (hero H1)
 * --sb-peach-bg:  #f4a584  — CTA section background
 * --sb-gray:      #cdcad5  — Mid-gray section backgrounds
 * --sb-card-bg:   #dcdbe2  — Lighter card background
 * --sb-white:     #ffffff
 *
 * HEADER OVERLAY
 * The .site-header--white must float above the hero, same pattern as the
 * homepage. front-page.css achieves this for body.home; for the sandbox page
 * (body.page-template-page-sandbox-php) we replicate the same two rules here.
 *
 * SECURITY CLASS C — §2: no external requests; all asset paths are local;
 * no JavaScript in this file.
 *
 * @package AICenterwp
 * @since   1.2.0
 */

/* ==========================================================================
   DESIGN TOKENS  (local to the sandbox page)
   ========================================================================== */

.sandbox-page {
	--sb-navy:     #01162a;
	--sb-blue:     #7189bd;
	--sb-coral:    #f06334;
	--sb-peach:    #fcab89;
	--sb-peach-bg: #f4a584;
	--sb-gray:     #cdcad5;
	--sb-card-bg:  #dcdbe2;
	--sb-white:    #ffffff;
	--sb-section-pad: 96px;

	background-color: var(--sb-gray);
}

/* ==========================================================================
   HEADER OVERLAY
   Positions the white menu variant absolutely over the hero, same mechanism
   as front-page.css for body.home.
   ========================================================================== */

body.page-template-page-sandbox-php {
	position: relative;
}

body.page-template-page-sandbox-php .site-header--white {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* ==========================================================================
   SHARED CTA BUTTON  (.btn)
   Duplicated from front-page.css because sandbox.css loads independently.
   front-page.css only loads on is_front_page(); these rules are required
   on the Sandbox page as well.
   ========================================================================== */

.sandbox-page .btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 5px 9px 5px 14px;
	border: 1px solid currentColor;
	border-radius: 20px;
	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;
}

.sandbox-page .btn__label { white-space: nowrap; }

.sandbox-page .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;
}

.sandbox-page .btn:hover .btn__icon,
.sandbox-page .btn:focus-visible .btn__icon { transform: translateX(3px); }

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

.sandbox-page .btn--coral {
	background-color: var(--sb-coral);
	border-color: var(--sb-coral);
	color: var(--sb-white);
}
.sandbox-page .btn--coral:hover { background-color: #d8562c; }

.sandbox-page .btn--blue {
	background-color: var(--sb-blue);
	border-color: var(--sb-blue);
	color: var(--sb-white);
}
.sandbox-page .btn--blue:hover { background-color: #5f77ab; }

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

/* ==========================================================================
   SHARED SECTION HEADING  (.sb-section-heading)
   Dark navy, 30px/700 Google Sans Flex Expanded — used by most sections.
   .sb-section-heading--dark forces navy on a blue background (Process).
   ========================================================================== */

.sb-section-heading {
	font-family: var(--font-sans-expanded);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sb-navy);
	margin: 0 0 48px;
}

.sb-section-heading--dark {
	color: var(--sb-navy);
}

/* ==========================================================================
   SHARED BULLET LIST  (.sandbox-list)
   Arrow-icon bullets using the same SVG mask as .btn__icon, coloured via
   currentColor so the same element works in coral and blue contexts.
   ========================================================================== */

.sandbox-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sandbox-list li {
	position: relative;
	padding-left: 26px;
	font-size: 23px;
	font-weight: 300;
	line-height: 1.4;
	margin-bottom: 18px;
}

.sandbox-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.35em;
	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;
}

.sandbox-list--coral { color: var(--sb-coral); }
.sandbox-list--blue  { color: var(--sb-blue); }

/* ==========================================================================
   HERO  (Figma "Hero" in Smilkkaste, 1440×794)
   Background: dark navy; lapsta SVG covers the right side of the section.
   ========================================================================== */

.sandbox-hero {
	position: relative;
	overflow: hidden;
	/* Gradient fades into the page mid-gray at the bottom, matching the Ielauzumi section pattern */
	background: linear-gradient(to bottom, var(--sb-navy) 0%, var(--sb-navy) 88%, var(--sb-gray) 100%);
	color: var(--sb-white);
	isolation: isolate;
}

.sandbox-hero__art {
	position: absolute;
	/* At 1440px (max design width) the art overhangs the 1400px card band by 20px
	   (right: 0). Beyond 1440px it tracks the band edge keeping the same 20px reach. */
	right: max(0px, calc((100vw - 1400px) / 2 - 20px));
	top: 0;
	height: 100%;
	width: auto;
	max-width: none; /* deliberately wider than the section — clipped by .sandbox-hero's overflow:hidden, exempt from the global img max-width reset in layout.css */
	object-fit: cover;
	object-position: right center;
	z-index: 0;
	pointer-events: none;
}

.sandbox-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 794px;
	padding-block: 120px 64px;
	box-sizing: border-box;
}

.sandbox-hero__content {
	max-width: 620px;
}

.sandbox-hero__heading {
	font-family: var(--font-sans-expanded);
	font-size: 50px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sb-peach);
	margin: 0 0 28px;
}

.sandbox-hero__lead {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--sb-white);
	margin: 0 0 40px;
	max-width: 572px;
}

.sandbox-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ==========================================================================
   KĀPĒC SMILKKASTE  (Figma "Kapec smilkkaste", 1440×364, mid-gray bg)
   Heading: navy 30px/700. Two-column body text: black 23px/300.
   ========================================================================== */

.sandbox-kapec {
	background-color: var(--sb-gray);
	padding-block: var(--sb-section-pad);
}

.sandbox-kapec__inner {
	/* container class provides max-width 1172px + side padding */
}

.sandbox-kapec__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.sandbox-kapec__text {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.45;
	color: #000000;
	margin: 0;
}

/* ==========================================================================
   KAM PAREDZĒTA — 3-CARD BAND
   (Figma "kam paredzeta smilkkaste", 1440×504, mid-gray bg, cards lighter)
   ========================================================================== */

.sandbox-cards {
	background-color: var(--sb-gray);
}

.sandbox-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

.sandbox-card {
	display: flex;
	flex-direction: column;
	background-color: var(--sb-card-bg);
	padding: 25px 20px 40px;
	box-sizing: border-box;
	border: 1px solid var(--sb-blue);   /* matches .feature-card border on homepage */
	border-radius: 15px;                 /* matches .feature-card border-radius */
}

.sandbox-card__icon-wrap {
	height: 90px;
	display: flex;
	align-items: flex-end;
	margin-bottom: 24px;
}

.sandbox-card__icon {
	display: block;
	width: auto;
	max-height: 62px;
	object-fit: contain;
	object-position: left bottom;
}

.sandbox-card__heading {
	font-family: var(--font-sans-expanded);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sb-coral);
	margin: 0 0 24px;
}

.sandbox-card__text {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.45;
	color: #000000;
	margin: 0;
}

/* ==========================================================================
   KAS IR UN KAS NAV  (Figma 74:33, 1440×1545, mid-gray bg)
   Two-column layout: left = coral, right = blue.
   ========================================================================== */

.sandbox-kas-ir {
	background-color: var(--sb-gray);
	padding-block: var(--sb-section-pad);
}

.sandbox-kas-ir__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.sandbox-kas-ir__sub-heading {
	font-family: var(--font-sans-expanded);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 32px;
}

.sandbox-kas-ir__sub-heading--spaced {
	margin-top: 64px;
}

.sandbox-kas-ir__col--coral .sandbox-kas-ir__sub-heading { color: var(--sb-coral); }
.sandbox-kas-ir__col--blue  .sandbox-kas-ir__sub-heading { color: var(--sb-blue); }

.sandbox-kas-ir__body-text {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
}

.sandbox-kas-ir__col--coral .sandbox-kas-ir__body-text { color: var(--sb-coral); }
.sandbox-kas-ir__col--blue  .sandbox-kas-ir__body-text { color: var(--sb-blue); }

/* ==========================================================================
   PROCESS  (Figma "Process", 1440×1033, brand-blue bg)
   5-column step grid. Connector lines via ::before on the grid container.
   ========================================================================== */

.sandbox-process {
	background: linear-gradient(
		to bottom,
		var(--sb-gray)  0%,
		var(--sb-blue)  8%,
		var(--sb-blue) 92%,
		var(--sb-gray) 100%
	);
	padding-block: var(--sb-section-pad);
}

/* Heading override — navy text on blue background */
.sandbox-process .sb-section-heading {
	color: var(--sb-navy);
}

.sandbox-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0 0 64px;
	position: relative;
}

/* Each step is position: relative so ::after arrows can escape into the gap. */
.sandbox-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Dotted connector line — runs from this circle's right edge to the arrowhead base.
   Geometry (equal 5-col grid, 90px circles centred, 20px gap):
     left  = 50% + 46px  (1px past circle right edge)
     right = calc(33px - 50%)  (= gap centre – 8px arrowhead width from left of next circle) */
.sandbox-step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: calc(50% + 46px);
	right: calc(33px - 50%);
	top: 60px;
	height: 0;
	border-top: 1.5px dashed rgba(255, 255, 255, 0.65);
	z-index: 2;
}

/* Small right-pointing arrowhead — tip at left edge of next circle. */
.sandbox-step:not(:last-child)::after {
	content: '';
	position: absolute;
	right: calc(25px - 50%);
	top: 60px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid rgba(255, 255, 255, 0.65);
	z-index: 2;
}

.sandbox-step__head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 15px;
	width: 100%;
	margin-bottom: 24px;
	z-index: 1;
}

/* Border circle framing each step icon — 90×90 keeps all circles equal so
   the step numbers below are horizontally aligned across all five columns. */
.sandbox-step__circle {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 16px;
}

.sandbox-step__icon {
	display: block;
	width: auto;
	max-width: 54px;
	height: auto;
	max-height: 48px;
	object-fit: contain;
	/* White-wash icons on the blue background so they read as white */
	filter: brightness(0) invert(1);
}

.sandbox-step__num {
	width: 31px;
	height: 31px;
	border-radius: 50%;
	background-color: var(--sb-coral);
	color: var(--sb-white);
	font-size: 17px;
	font-weight: 700;
	line-height: 31px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.sandbox-step__title {
	font-family: var(--font-sans-expanded);
	font-size: 17px;
	font-weight: 700;
	color: var(--sb-white);
	line-height: 1.3;
	margin: 0 0 12px;
	width: 100%;
	text-align: left;
}

.sandbox-step__text {
	font-size: 17px;
	font-weight: 300;
	color: var(--sb-navy);
	line-height: 1.45;
	margin: 0;
	width: 100%;
	text-align: left;
}

/* Current call / deadline sub-block — white-bordered box at the bottom of Process */
.sandbox-process__update {
	max-width: 597px;
	margin-inline: auto;
	text-align: left;
	border: 1px solid var(--sb-white);
	padding: 32px 40px;
	border-radius: 4px;
	box-sizing: border-box;
}

.sandbox-process__update-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--sb-white);
	margin: 0 0 12px;
}

.sandbox-process__update-text {
	font-size: 17px;
	font-weight: 300;
	color: var(--sb-navy);
	margin: 0;
	line-height: 1.45;
}

/* ==========================================================================
   STATUSS UN LĒMUMI  (Figma "Statuss un lemumi", 1440×668, mid-gray bg)
   Three-column status grid: coral / blue / navy.
   ========================================================================== */

.sandbox-statuss {
	background-color: var(--sb-gray);
	padding-block: var(--sb-section-pad);
}

.sandbox-statuss__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.sandbox-statuss__col-heading {
	font-family: var(--font-sans-expanded);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 32px;
}

.sandbox-statuss__col-text {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
}

.sandbox-statuss__col--coral .sandbox-statuss__col-heading,
.sandbox-statuss__col--coral .sandbox-statuss__col-text { color: var(--sb-coral); }

.sandbox-statuss__col--blue  .sandbox-statuss__col-heading,
.sandbox-statuss__col--blue  .sandbox-statuss__col-text  { color: var(--sb-blue); }

.sandbox-statuss__col--navy  .sandbox-statuss__col-heading,
.sandbox-statuss__col--navy  .sandbox-statuss__col-text  { color: var(--sb-navy); }

/* ==========================================================================
   AICINĀJUMS RĪCĪBAI — CTA  (Figma "Aicinajums ricibai", 1440×438)
   Light-peach background. H2 navy + text-left, blue button right.
   ========================================================================== */

.sandbox-cta {
	/* Top-only gradient: fades from mid-gray into peach, solid peach to the bottom. */
	background: linear-gradient(
		to bottom,
		var(--sb-gray)     0%,
		var(--sb-peach-bg) 10%
	);
	padding-block: var(--sb-section-pad);
}

.sandbox-cta__heading {
	font-family: var(--font-sans-expanded);
	font-size: 30px;
	font-weight: 700;
	color: var(--sb-navy);
	margin: 0 0 32px;
	line-height: 1.3;
}

.sandbox-cta__body {
	display: flex;
	align-items: center;
	gap: 48px;
}

.sandbox-cta__text {
	flex: 1 1 auto;
	max-width: 763px;
}

.sandbox-cta__sub {
	font-size: 23px;
	font-weight: 700;
	color: var(--sb-navy);
	margin: 0 0 16px;
	line-height: 1.3;
}

.sandbox-cta__desc {
	font-size: 23px;
	font-weight: 300;
	color: var(--sb-navy);
	margin: 0;
	line-height: 1.4;
}

.sandbox-cta__action {
	flex: 0 0 auto;
}

/* ==========================================================================
   RESPONSIVE  (≤ 1023px — single-column layout)
   ========================================================================== */

@media ( max-width: 1023px ) {

	.sandbox-page {
		--sb-section-pad: 56px;
	}

	/* Hero */
	.sandbox-hero__inner { min-height: 560px; padding-block: 120px 48px; }
	.sandbox-hero__heading { font-size: clamp(28px, 7vw, 40px); }
	.sandbox-hero__lead { font-size: 18px; }
	/* Match the homepage ship art's mobile placement/behaviour (front-page.css
	   .hero__art): bottom-anchored instead of the desktop top-anchored crop. */
	.sandbox-hero__art {
		top: auto;
		bottom: 0;
		object-position: right bottom;
		opacity: .7; /* fade art for readability; right: 0 keeps it anchored */
	}

	/* Kāpēc */
	.sandbox-kapec__grid { grid-template-columns: 1fr; }

	/* Cards */
	.sandbox-cards__grid { grid-template-columns: 1fr; padding-inline: 16px; }

	/* Kas ir un kas nav */
	.sandbox-kas-ir__columns { grid-template-columns: 1fr; }
	.sandbox-kas-ir__sub-heading--spaced { margin-top: 40px; }
	.sandbox-list li { font-size: 18px; }

	/* Process */
	.sandbox-steps {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.sandbox-step::before,
	.sandbox-step::after { display: none; } /* connectors hidden — 2-col layout */
	.sandbox-step__icon { filter: brightness(0) invert(1); }

	/* Statuss */
	.sandbox-statuss__grid { grid-template-columns: 1fr; }

	/* Process update box — desktop padding (32px 40px) leaves too little room
	   for the text column on phone widths; ease it down with the rest of the
	   mobile rhythm in this block. */
	.sandbox-process__update { padding: 24px; }

	/* CTA */
	.sandbox-cta__body { flex-direction: column; align-items: flex-start; gap: 24px; }

	/* Shared heading size */
	.sb-section-heading { font-size: 24px; margin-bottom: 32px; }
	.sandbox-kas-ir__sub-heading { font-size: 22px; }
	.sandbox-statuss__col-heading { font-size: 24px; }
}

@media ( max-width: 599px ) {
	.sandbox-hero__heading { font-size: 28px; }
	.sandbox-hero__lead { font-size: 16px; }
	/* Keep the art visible on phones too, matching the homepage hero's mobile
	   treatment (front-page.css .hero__art) — shrink + fade instead of hiding. */
	.sandbox-hero__art { height: 45%; opacity: .5; }

	.sandbox-steps { grid-template-columns: 1fr; }

	.sandbox-kapec__text,
	.sandbox-kas-ir__body-text,
	.sandbox-cta__sub,
	.sandbox-cta__desc { font-size: 18px; }

	.sandbox-card__heading { font-size: 20px; }
	.sandbox-statuss__col-text { font-size: 18px; }
	.sandbox-process__update { padding: 20px 16px; }
}