/**
 * Template: Portfolio & Collaborations archive  (PG5)  —  templates/archive-gg_project.html
 *
 * PAGE-ONLY partial (glob-enqueued, handle kd-pattern-gg-portfolio). Namespace .kd-portfolio*.
 * The Portfolio archive composes the gated P2 banner + P12 project loop (both carry all
 * their own styling) plus a "Selected experience" 2-col composition whose markup is
 * copied verbatim from patterns/gg-about.php (same Figma text, About frame 2:823 /
 * Portfolio frame 14:105 share the identical "Selected experience" comp). This file adds
 * ONLY what that composition needs beyond the reused P3 .kd-mediasplit wrapper — the
 * SAME two rules gg-about.css defines for About's own "Selected experience" block, scope
 * class swapped .kd-about -> .kd-portfolio. LAYOUT-ONLY, zero shared-file edits.
 *
 * KNOWN NEAR-DUPLICATE of gg-about.css (flagged in the PG5 handoff) — both files exist
 * because each page/template is isolated per the theme's file-isolation convention (no
 * shared CSS edits across parallel builds). A future DRY follow-up could promote this to
 * a shared "text+grid composition" class (e.g. .kd-textgrid) if a third instance appears.
 * NOT refactored here — isolation over cleanliness for a single re-occurrence.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL, frame 14:105 desktop / 2020:356 mobile):
 *   • "Selected experience" text (h2 23:864 + para 23:863) | grid 23:865–23:876
 */

/* ── Top-align the composition columns ────────────────────────────────────────
   P3's .kd-mediasplit__inner vertically CENTRES its columns (correct for an image
   beside a text block). This composition instead reads TOP-aligned in the comp —
   the section heading top-aligns with the first grid tile row (23:864 top ≈ 23:865
   top), and the two columns are unequal height (text col vs the taller grid), so
   centring would drop the heading below the grid. Re-anchor to the top. Scoped to
   .kd-portfolio only. Specificity (0,3,0) — .kd-portfolio.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-portfolio.kd-mediasplit .kd-mediasplit__inner {
	align-items: flex-start;
}

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