/**
 * Page: About ("About Tanya Gracie")  (PG2)  —  patterns/gg-about.php
 *
 * PAGE-ONLY partial (glob-enqueued, handle kd-pattern-gg-about). Namespace .kd-about*.
 * The About page assembles gated patterns (P2/P3/P4/P5/P6/P7/P9) that already carry all
 * their own styling; this file adds ONLY what the two 2-col compositions ("My approach"
 * and "Selected experience") need that the reused P3 .kd-mediasplit wrapper does not
 * give for free. LAYOUT-ONLY — no colour/type/spacing overrides (those come from the
 * gated patterns, theme.json, and core block attributes). Zero shared-file edits.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL, frame 2:823 desktop / 2019:139 mobile):
 *   • "My approach"        text (h2 2:994 + para 2:986 + maroon lead-in) | list 2:995
 *   • "Selected experience" text (h2 2:993 + paras 2:985)                | grid 2:1006–2:1017
 *
 * The two compositions REUSE P3's .kd-mediasplit / .kd-mediasplit__inner flex wrapper
 * (equal 50/50 columns + 64px gap + <768 image/text stack) with a .kd-mediasplit__text-col
 * as the left column and a plain aside column holding the gated P5 list / P4 grid markup.
 * A .kd-about scope class on the outer group carries the two rules below and never leaks
 * to the real P3 image+text splits (they have no .kd-about class).
 */

/* ── Top-align the composition columns ────────────────────────────────────────
   P3's .kd-mediasplit__inner vertically CENTRES its columns (correct for an image
   beside a text block). These compositions instead read TOP-aligned in the comp —
   the section heading top-aligns with the first list label / first grid tile
   (2:994 top ≈ 2:999 "Clarity" top; 2:993 top ≈ first grid row top), and the two
   columns are unequal height (short text col vs taller list/grid), so centring
   would drop the heading below the aside. Re-anchor to the top. Scoped to
   .kd-about only. Specificity (0,3,0) — .kd-about.kd-mediasplit are the SAME element
   — deterministically beats split-square.css's .kd-mediasplit .kd-mediasplit__inner
   (0,2,0) regardless of glob-enqueue order (no !important). */
.kd-about.kd-mediasplit .kd-mediasplit__inner {
	align-items: flex-start;
}

/* ── Small-phone logo grid: 3-up → 2-up (About mobile mock 2019:139) ───────────
   The P4 grid (shared logo-strip.css) intentionally stays 3-up at every width for
   its own standalone pages. Inside About's stacked composition the grid goes
   full-width on mobile, and the About mobile mock (2019:139) renders it 2-up with
   larger tiles. Override the column count for the About-embedded grid ONLY (scoped
   to .kd-about → the shared partial and other pages' grids are untouched). Uses the
   same 479.98px small-phone boundary the P4 strip variant already uses. */
@media (max-width: 479.98px) {
	.kd-about .kd-logo-strip--grid .kd-logo-strip__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}