/**
 * Layout: 4 Boxes (Figma 596:1163 "What We Do").
 *
 * Section header: assets/css/layout.css (.gm-section-header).
 * Grid: .gm-grid.gm-grid--lg (1 → 2 → --gm-cols columns, 32px gap).
 *
 * Box (Figma 256 × 400): layers inside the rounded box, bottom to top
 *   1. tone colour (#101010, or purple for "Digital")
 *   2. photo at 70% (55% on purple)
 *   3. gradient to black (text contrast)
 *   4. text, bottom-aligned: title Averta 21/1.15 · 23px · text 19/27.
 *
 * @package GagaMuller
 */

.gm-four-boxes {
	--gm-box-min-h: clamp(20rem, 17.0423rem + 12.6197vw, 25rem); /* 320 → 400 */
	--gm-box-radius: var(--gm-radius-card);
	--gm-box-gradient: linear-gradient(180deg, rgb(16 16 16 / 0) 0%, rgb(16 16 16 / 0.35) 45%, var(--gm-color-black) 100%);
	--gm-box-photo-opacity: 0.7;
	--gm-box-hover-gradient: linear-gradient(180deg, rgb(114 21 244 / 0.18) 0%, rgb(114 21 244 / 0.55) 55%, rgb(80 15 171 / 0.9) 100%);
	--gm-box-title-size: clamp(1.1875rem, 1.1435rem + 0.1878vw, 1.3125rem); /* 19 → 21 */

	padding-bottom: clamp(var(--gm-space-section), 0.6rem + 8.6vw, 8.375rem); /* Figma: 134px below the boxes */
}

.gm-four-boxes__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Four boxes need ~1200px; between 1024 and 1199px keep two per row so
 * titles and text don't squeeze into 160px columns. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.gm-four-boxes__grid[style*="--gm-cols: 4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Box ---------------------------------------------------------- */

.gm-box {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--gm-box-min-h);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--gm-box-radius);
	background: var(--gm-color-black);
	color: var(--gm-color-white);
}

.gm-box--purple {
	--gm-box-photo-opacity: 0.55;

	background: var(--gm-color-purple);
}

.gm-box__media {
	position: absolute;
	z-index: -2;
	inset: 0;
}

.gm-box__media::after {
	position: absolute;
	inset: 0;
	background: var(--gm-box-gradient);
	content: "";
}

.gm-box__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--gm-box-photo-opacity);
}

.gm-box__body {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--gm-space-14), 1.0915rem + 0.4695vw, 23px); /* 14 → 23 */
	padding: var(--gm-space-24) var(--gm-space-24) 30px;
}

.gm-box__title {
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: var(--gm-box-title-size);
	font-weight: var(--gm-weight-bold);
	line-height: 1.15;
}

.gm-box__text {
	margin: 0;
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-body-lg);
	line-height: 1.42; /* Figma 19/27 */
}

/* Figma keeps the titles on one line across the row (a short text gets an
 * empty second line): reserve three lines of text on desktop. */
@media (min-width: 1200px) {
	.gm-box__text {
		min-height: calc(3em * 1.42);
	}
}

/* ---- Linked box: the title link covers the whole box --------------- */

/* Two classes: beats core global styles (:root :where(a)), which load later. */
.gm-box .gm-box__link,
.gm-box .gm-box__link:visited,
.gm-box .gm-box__link:hover,
.gm-box .gm-box__link:focus {
	color: inherit;
	text-decoration: none;
}

.gm-box__link::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
	content: "";
}

/* Hover / keyboard focus: a soft purple brand gradient fades in over the
 * photo (300–400ms, photo stays visible beneath). No scale, no shadow. */
.gm-box::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--gm-box-hover-gradient);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 350ms var(--gm-ease);
}

.gm-box--linked:hover::before,
.gm-box--linked:focus-within::before {
	opacity: 1;
}

.gm-box--linked:hover .gm-box__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.gm-box__link:focus {
	outline: none;
}

.gm-box__link:focus-visible::after {
	outline: var(--gm-focus-width) solid var(--gm-focus-color-on-dark);
	outline-offset: calc(var(--gm-focus-width) * -1);
}

/* ---- Entrance: boxes rise in, one after another (view.js) ----------
 * Only when JS has run and motion is allowed; content is visible
 * without JS or with reduced motion. */

@media (prefers-reduced-motion: no-preference) {
	.gm-four-boxes.is-animated .gm-box {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--gm-box, 0) * 120ms);
	}

	.gm-four-boxes.is-animated.is-visible .gm-box {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-box::before {
		transition: none;
	}
}