/*!
 * Section: Gallery
 *
 * Scoped CSS for inc/sections/gallery.php. Stub partial — visual composition
 * lands during page-migration WPs (RENDER-WP5–WP11).
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1
 */

/* Topic 23 REDESIGN-WP7 — section rhythm tokens applied.
 * Gallery padding-block anchors to --mw-space-section (120px) max; headline→
 * gallery-grid wires --mw-space-headline-to-paragraph (24px). H2 ceiling
 * lifted to 2.625rem (42px) per WP-1 type scale. */
.mw-section--gallery {
	padding-block: clamp(2rem, 6vw, var(--mw-space-section, 120px));
}

.mw-section--gallery .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--gallery .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.625rem);
	line-height: 1.2;
	margin-block: 0 var(--mw-space-headline-to-paragraph, 24px);
}

/* Topic 36 CORR-WP1 Item 5 — additive `align="center"` centres the eyebrow +
 * headline, mirroring `.mw-section--body.mw-section--center` exactly. */
.mw-section--gallery.mw-section--center .mw-section__eyebrow,
.mw-section--gallery.mw-section--center .mw-section__headline {
	text-align: center;
}

.mw-gallery {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.mw-gallery--cols-1 { grid-template-columns: 1fr; }
.mw-gallery--cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.mw-gallery--cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.mw-gallery--cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* -----------------------------------------------------------------------
 * Variant: uniform  (opt-in via `variant => 'uniform'`)
 *
 * The .mw-gallery--cols-N rules above are auto-fit + a minimum item width, so
 * the column count is whatever happens to fit — cols-4 lays out five or six
 * across at the 72rem content width. That is fine for a loose screenshot wall
 * and wrong for a cast line-up, where the reader is comparing one plate
 * against the next and a ragged final row reads as a mistake.
 *
 * This variant pins a real column count and makes every cell the same square,
 * so mixed-ratio sources cannot stagger the rows. It sits after the cols-N
 * rules and at the same specificity, so source order carries it — do not move
 * it above them.
 *
 * 3-up from 60rem, 2-up on tablet, 1-up on phones.
 * ----------------------------------------------------------------------- */
.mw-gallery--uniform {
	grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
	.mw-gallery--uniform {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60rem) {
	.mw-gallery--uniform {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Equal cells regardless of the source ratio. The plates are ~1:1 already, so
 * `cover` crops at most a couple of percent off the odd 1.03 — but it also
 * means a wrong-ratio file dropped in later cannot break the grid. */
.mw-gallery--uniform .mw-gallery__figure img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
}

/* -----------------------------------------------------------------------
 * Variant: landscape  (opt-in via `variant => 'landscape'`)
 *
 * Same problem as `uniform` — mixed-ratio sources staggering a row — but the
 * opposite answer, because `uniform` is wrong for wide art. It pins a 1:1
 * square AND a hard 3-up, so a row of landscape plates would lose a third to a
 * half of every frame and drop from four across to three.
 *
 * This variant touches ONLY the image box: it locks a 16:9 cell and leaves
 * `grid-template-columns` entirely to the caller's `.mw-gallery--cols-N`, so
 * the auto-fit packing those rules provide is preserved.
 *
 * 16:9 is the balance point for the K-World bedtime art, which ships in two
 * shapes — 1600×1073 (1.49) and 1600×812 (1.97). It trims roughly 16% off the
 * tall pair and 10% off the wide pair, and every subject survives the crop.
 * 3:2 was tested first and rejected: it cut the left third out of the rooftop
 * plate and the harbour out of the sunset plate.
 *
 * Specificity note — unlike `uniform` this rule cannot collide with the cols-N
 * rules, since it never declares `grid-template-columns`. It sits here purely
 * to keep the two variants read as a pair.
 * ----------------------------------------------------------------------- */
.mw-gallery--landscape .mw-gallery__figure img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	height: auto;
}

.mw-gallery__figure {
	margin: 0;
}

.mw-gallery__figure img {
	width: 100%;
	height: auto;
	display: block;
}

.mw-gallery__caption {
	font-size: 0.8125rem;
	line-height: 1.4;
	margin-block-start: 0.5rem;
	opacity: 0.85;
}

/* -----------------------------------------------------------------------
 * K-World brand variant (Topic 17 RENDER-WP7)
 *
 * Inside-the-Book auto-coloured PDF gallery (BRAND-WP11 — 8 thumbs preserved).
 * Thumbnails sit on a kw-castle-stone band for the hub, on kw-sky for the
 * sample-pages on /book-product. Tone-locked from Topic 13 Figma 90:6 + 97:6.
 * ----------------------------------------------------------------------- */
.mw-section--gallery[data-bg-token="kw-sky"]          { background-color: var(--kw-sky-surface);  color: #040420; }
.mw-section--gallery[data-bg-token="kw-gold"]         { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--gallery[data-bg-token="kw-cream"]        { background-color: var(--kw-cream);        color: #040420; }
.mw-section--gallery[data-bg-token="kw-sunset"]       { background-color: var(--kw-sunset);       color: #ffffff; }
.mw-section--gallery[data-bg-token="kw-castle-stone"] { background-color: var(--kw-castle-stone); color: #ffffff; }

/* -----------------------------------------------------------------------
 * Brand-k-world studio-token painters (Topic 36 CORR-WP1 Item 3)
 *
 * `/k-world/`'s gallery section moved off `kw-gold` onto `studio-violet`
 * (owner ruling: no gold/yellow/brown on the hub's last two sections).
 * `is_brand` stays `k-world` so the tier keeps its type treatment, but that
 * means the studio-tier painters in `_studio.css` (scoped to
 * `.mw-section--brand-studio`) never fire here — only the background is
 * missing; text tokens are already brand-agnostic (theme-tokens.css:383).
 * `studio-dark` is included alongside `studio-violet` for symmetry with the
 * cta-band painter below, even though no gallery call uses it today.
 * ----------------------------------------------------------------------- */
.mw-section--gallery.mw-section--brand-k-world[data-bg-token="studio-dark"]   { background-color: var(--studio-dark, #0E0841);   color: #ffffff; }
.mw-section--gallery.mw-section--brand-k-world[data-bg-token="studio-violet"] { background-color: var(--studio-violet, #0e0a2a); color: #ffffff; }

/* Topic 13 KWORLD-WP4-B dark-glass cascade — thumb frames keep contrast on stone. */
.mw-section--gallery[data-bg-token="kw-castle-stone"] .mw-gallery__figure {
	background-color: var(--kw-cream);
	padding: 0.5rem;
	border-radius: var(--mw-radius-soft, 8px);
	box-shadow: var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}

/* Split out from the castle-stone rule above (Topic 36 CORR-WP1 Item 2) so the
 * kw-sky variant can carry its own boundary ring without also drawing one on
 * castle-stone, where the cream frame already has plenty of edge. `kw-sky` on
 * `.mw-section--brand-k-world` matters here: `.mw-section--gallery[data-bg-
 * token="kw-sky"]` alone (no brand qualifier, not this selector) also exists
 * for the lore/other tiers and must stay untouched. `--kw-sky-surface`
 * flipped to white, so this cream (#FFF1D6) frame lost the periwinkle field
 * it was tuned against — same defect class as the media-text / card-grid
 * fixes for the same flip. */
.mw-section--gallery.mw-section--brand-k-world[data-bg-token="kw-sky"] .mw-gallery__figure {
	background-color: var(--kw-cream);
	padding: 0.5rem;
	border-radius: var(--mw-radius-soft, 8px);
	box-shadow: 0 0 0 1px rgba(4, 4, 32, 0.5), var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}

/* Same cream frame, extended to the two studio tokens above (Topic 36
 * CORR-WP1 Item 3) — a light card still needs a boundary against a dark
 * band regardless of which brand's dark token it is. Kept as a SEPARATE
 * rule rather than folded into the pair above: the studio tokens are dark
 * (white foreground), unlike kw-sky (light, dark foreground), so sharing one
 * rule would be coincidence, not a real pairing. */
.mw-section--gallery.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-gallery__figure,
.mw-section--gallery.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-gallery__figure {
	background-color: var(--kw-cream);
	padding: 0.5rem;
	border-radius: var(--mw-radius-soft, 8px);
	box-shadow: var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}

.mw-section--gallery.mw-section--brand-k-world .mw-gallery__caption {
	color: inherit;
}

/* Section intro (S5) centered under a gallery heading (Topic 27 BRAND-WP4
 * Iter 3) — the Claude Design "Sample pages" SectionHeading carries an intro. */
.mw-section--gallery .mw-section__intro {
	margin-inline: auto;
	text-align: center;
}