/*
 * aio-stages-cases.css
 * Sections 5–7 (stage) and 8 (cases) of the AI Optimisation page.
 * BEM prefix: aio2-
 * Loads after page-ai-optimization.css (which declares --aio-* tokens,
 * #page-aio2 base colours, Cutive Mono @font-face, and .aio2-ph).
 * Relies on .container and global tokens from styles.css.
 *
 * Platform rules observed:
 *   - background-color: var() used in longhand (not background: shorthand + var)
 *   - No :has() selector
 *   - Every margin/padding rule is fully specified (no bare margin-bottom)
 */

/* ==========================================================================
   §1  STAGE SECTIONS  (Sections 5, 6, 7)
   ========================================================================== */

/* Stage sections carry no extra padding — vertical rhythm comes from
   the spacer_after inline margin-bottom written by aio2-stage.php. */
.aio2-stage {
	/* dark page bg is inherited from #page-aio2 */
}

/* Two-column flex row: label-col 420px | 120px gap | cards flex-1 */
.aio2-stage__inner {
	display: flex;
	align-items: flex-start;
	gap: 120px;
}

/* ── Left column ── */
.aio2-stage__label-col {
	width: 420px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px; /* eyebrow → heading+body block */
}

/* Eyebrow: Cutive Mono, 16px/20px, #284ca0 */
.aio2-stage__eyebrow {
	font-family: var(--aio-f-mono);
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.32px;
	color: var(--aio-blue);
	margin: 0 0 0;
}

/* Heading + desc stacked with 20px internal gap */
.aio2-stage__label-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.aio2-stage__heading {
	font-family: var(--f-sans);
	font-size: 36px;
	font-weight: 600;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--on-dark-1);
	margin: 0 0 0;
}

.aio2-stage__desc {
	font-family: var(--f-sans);
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.36px;
	color: var(--on-dark-1);
	margin: 0 0 0;
}

/* ── Right column — card stack ── */
.aio2-stage__cards {
	flex: 1 0 0;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 40px; /* 300px card + 40px gap = 340px stride (matches Figma) */
}

/* Base card: Diagnosis and Strategy */
.aio2-stage__card {
	/* min-height, not height: the body copy already filled 300px, so the
	   checklist sat flush against it and a fixed height would clip the gap. */
	min-height: 300px;
	display: flex;
	flex-direction: column;
	padding: 40px 38px;
	border-radius: var(--aio-radius);
	background-color: var(--aio-bg-card-2); /* #0b0b0b */
	border: 1px solid var(--aio-line);      /* #484848 */
	overflow: hidden;
	box-sizing: border-box;
}

/* Action variant — card overrides */
.aio2-stage--action .aio2-stage__card {
	background-color: var(--aio-bg-card-3); /* #101217 */
	border: 1px solid var(--aio-blue);      /* #284ca0 */
}

/* Kicker / tag (mono, small, coloured) */
.aio2-stage__card-kicker {
	font-family: var(--f-sans);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: -0.28px;
	color: var(--on-dark-2); /* #B8B8B8 for Diagnosis/Strategy */
	margin: 0 0 16px;       /* gap to card title → y=74 */
}

/* Action modifier — kicker uses blue instead of grey */
.aio2-stage--action .aio2-stage__card-kicker {
	color: var(--aio-blue);
}

/* Card heading */
.aio2-stage__card-title {
	font-family: var(--f-sans);
	font-size: 30px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: -0.36px;
	color: var(--on-dark-1);
	margin: 0 0 10px; /* gap to body → y=120 */
}

/* Card body paragraph — flex-grow:1 pushes checklist to bottom */
.aio2-stage__card-body {
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.36px;
	color: var(--on-dark-1);
	margin: 0 0 24px; /* minimum breathing room above the checklist */
	flex-grow: 1;
}

/* Checklist */
.aio2-stage__checks {
	list-style: none;
	margin: 0 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.aio2-stage__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0;
	line-height: 24px;
}

/* Check-mark bullet. Was a 7×7 square rotated 45° (a diamond); Figma changed it
   to a tick — node 740:199 is a 4.118×6.178 L-shape rotated 43.38° inside a
   7.484×7.071 slot, i.e. two strokes, not a filled square.
   The slot keeps its own box so the flex gap and the text baseline are
   unaffected; the tick is drawn by ::before and centred inside it, which lets
   the rotated glyph overhang the slot slightly without shifting the row. */
.aio2-stage__check-icon {
	display: inline-block;
	position: relative;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
}
.aio2-stage__check-icon::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 45%;                 /* rotation drops the optical centre — nudge up */
	width: 4px;
	height: 6.5px;
	border-right: 1.5px solid var(--aio-ink-check);
	border-bottom: 1.5px solid var(--aio-ink-check);
	transform: translate(-50%, -50%) rotate(43deg);
}

.aio2-stage__check-text {
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: var(--aio-ink-check); /* rgba(255,255,255,.3) */
}

/* ==========================================================================
   §2  CASES SECTION  (Section 8)
   ========================================================================== */

.aio2-cases {
	/* margin-bottom:247px is output inline by the PHP partial */
}

/* ── 2a. Title block ─────────────────────────────────────────────────────── */
/* Centred stack. The earlier build absolutely positioned the three lines at the
   spec's x offsets (label 143px, heading 122px, body 0) — but those offsets are
   relative to the design's 388px title FRAME, which is itself centred in the
   1200 column (388 + 2×406 = 1200). Applying them inside a full-width 1200px
   container pushed everything left of centre.
   Each line is centred within that 388px frame in the design (label 143→245,
   centre 194; heading 122→267, centre 194.5; frame centre 194), so a centred
   flex column reproduces it exactly and survives any copy length.
   align-items:center also shrink-wraps each child, which keeps the
   `cases-title-work` geometry anchor (h2 ≈145px wide) meaningful. */
.aio2-cases__title-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 120px; /* 24 label + 60 heading + 11 gap + 24 body = 119 */
}

.aio2-cases__title-label {
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: var(--on-dark-1);
	margin: 0 0 0;
}

.aio2-cases__title-heading {
	font-family: var(--f-sans);
	font-size: 50px;
	font-weight: 600;
	line-height: 60px;
	letter-spacing: -1px;
	color: var(--on-dark-1);
	margin: 0 0 11px;   /* design: heading ends at y=84, body starts at y=95 */
}

.aio2-cases__title-body {
	font-family: var(--f-sans);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.36px;
	color: var(--on-dark-1);
	margin: 0 0 0;
}

/* ── 2b. 2-up case cards ─────────────────────────────────────────────────── */
.aio2-cases__cards {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.aio2-cases__card {
	flex: 1 0 0;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* Image wrapper — relative for logo overlay */
.aio2-cases__card-img-wrap {
	position: relative;
}

.aio2-cases__card-img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--aio-radius); /* 10px */
	display: block;
}

/* Logo overlay placeholder — centred over the image */

/* Brand name */
.aio2-cases__card-brand {
	font-family: var(--f-sans);
	font-size: 24px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: -0.48px;
	color: var(--on-dark-1);
	margin: 0 0 0;
}

/* Tags row */
.aio2-cases__card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Base pill */
.aio2-cases__tag {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 17px;
	border-radius: var(--aio-radius-pill); /* 20px */
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.32px;
	background-color: var(--aio-bg-tag); /* #2d2d2d */
	color: var(--on-dark-1);
}

/* Blue-on-white pill variant (pill 1 = "theCAP") */
.aio2-cases__tag--blue {
	background-color: var(--on-dark-1); /* white */
	color: var(--aio-blue);            /* #284ca0 */
}

/* Case description */
.aio2-cases__card-desc {
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.32px;
	color: var(--on-dark-1);
	max-width: 355px;
	margin: 0 0 0;
}

/* ── 2c. Client logo strip ───────────────────────────────────────────────── */
.aio2-cases__logo-strip {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 25px;
}

.aio2-cases__logo-cell {
	flex: 1 1 0;
	max-width: 180px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--aio-radius);
}

/* Each cell is ONE composed image (background photo + client logo baked in),
   sliced from the Figma strip at 2x. It fills the cell edge to edge; the cell's
   own overflow:hidden + radius does the rounding. */
.aio2-cases__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The .aio2-ph inside each cell is styled by the base file */

/* ==========================================================================
   §3  MOBILE  (max-width: 768px)
   Values read from the Figma 375 mobile frame (node 740:2). The mobile stage
   is a single 335px column: label block on top, cards below.
   ========================================================================== */

@media (max-width: 768px) {

	/* Stage: collapse two columns to single column.
	   34px = label frame ends y=15014, card stack starts y=15048. */
	.aio2-stage__inner {
		flex-direction: column;
		gap: 34px;
	}

	.aio2-stage__label-col {
		width: 100%;
		gap: 5px;
	}

	/* 740:244 — 12/20 mono, down from 16/20. */
	.aio2-stage__eyebrow {
		font-size: 12px;
		line-height: 20px;
		letter-spacing: -0.24px;
	}

	.aio2-stage__label-body {
		gap: 15px;
	}

	/* 740:246 — 24px. Figma's leading is 24 too, but that is the auto-height of
	   a single unwrapped line; the live heading can wrap at 335px, so 30px keeps
	   two Korean lines from colliding. */
	.aio2-stage__heading {
		font-size: 24px;
		line-height: 30px;
		letter-spacing: -0.48px;
	}

	/* 740:247 — 14/20. */
	.aio2-stage__desc {
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.28px;
	}

	/* 740:194 — 20px between stacked cards, down from the desktop 40px. */
	.aio2-stage__cards {
		width: 100%;
		gap: 20px;
	}

	/* 740:196 — 280px tall, 30/20 padding. min-height (not height) so a card
	   that rewraps taller on a narrow phone grows instead of clipping. */
	.aio2-stage__card {
		height: auto;
		min-height: 280px;
		padding: 30px 20px;
	}

	/* 740:208 — 12/16 in --aio-line grey, not the desktop --on-dark-2. */
	.aio2-stage__card-kicker {
		font-size: 12px;
		line-height: 16px;
		letter-spacing: -0.24px;
		color: var(--aio-line);
		margin: 0 0 12px;
	}

	/* 740:209 — 24/30. */
	.aio2-stage__card-title {
		font-size: 24px;
		line-height: 30px;
		letter-spacing: -0.48px;
		margin: 0 0 12px;
	}

	/* 740:210 — 14/20. */
	.aio2-stage__card-body {
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.28px;
	}

	/* 740:198 — 14/24. The gap is 6px, NOT the text node's ml-13.76: the bullet
	   and the text share one grid cell in Figma, so that margin is measured from
	   the cell's left edge. Subtract the 7.484 bullet to get the real gap. */
	.aio2-stage__check {
		gap: 6px;
	}

	.aio2-stage__check-text {
		font-size: 14px;
		line-height: 24px;
		letter-spacing: -0.28px;
	}

	/* Cases title block: 740:95 — centred stack, WORK at 30/30 rather than the
	   desktop 50/60. The desktop rule is already a centred flex column, so mobile
	   only relaxes the fixed height and the type scale. */
	.aio2-cases__title-block {
		height: auto;
		gap: 4px;
	}

	.aio2-cases__title-label {
		padding: 0;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.28px;
	}

	.aio2-cases__title-heading {
		padding: 0;
		font-size: 30px;
		line-height: 30px;
		letter-spacing: -0.6px;
		margin: 0 0 13px;
	}

	.aio2-cases__title-body {
		padding: 0;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.28px;
	}

	/* Case cards: stack 1-up full width.
	   53px between cards (740:82 at y=18070, 738:614 at y=18540, each 417 tall).
	   This has to stay CLEARLY larger than the 25px gap inside a card — at the
	   old 20px the between-card gap was smaller than the internal one, so the
	   next case's image read as part of the previous case's description block.
	   That is the "여백을 줘서 다른 블럭임을 구분해주세요" note. */
	.aio2-cases__cards {
		flex-direction: column;
		gap: 53px;
	}

	/* 740:87 — 25px between brand, tags and description. */
	.aio2-cases__card {
		width: 100%;
		gap: 25px;
	}

	/* 740:83 → 740:87 is 20px, tighter than the 25px between the text rows. */
	.aio2-cases__card-img-wrap {
		margin-bottom: -5px;
	}

	/* 740:84 — 335x250 on mobile, not the desktop 590x650 portrait. */
	.aio2-cases__card-img {
		height: auto;
		aspect-ratio: 335 / 250;
	}

	/* 740:78 — pills drop to 14px. */
	.aio2-cases__tag {
		font-size: 14px;
		letter-spacing: -0.28px;
	}

	/* 740:94 — 14/20. */
	.aio2-cases__card-desc {
		font-size: 14px;
		line-height: 20px;
		letter-spacing: -0.28px;
		max-width: none;
	}

	/* Logo strip: 740:33 — 3 across on mobile (102x68 cells, 14px apart),
	   6 logos → 2 rows. */
	.aio2-cases__logo-strip {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
	}

	.aio2-cases__logo-cell {
		flex: 0 0 calc((100% - 28px) / 3);
		max-width: none;
	}
}