/*!
 * Component: Press Kit
 *
 * Per-template stylesheet for `press/kit.php` (Topic 20 LAUNCH-WP4). Loaded
 * via the additive `mystwood_studios_ab_enqueue_template_styles()` dispatcher
 * in inc/critical-css.php only when the assigned template matches. Scoped
 * under `.mw-page-press-kit` (set on `<main>` in the template) so the rules
 * cannot bleed into other pages that also use the `body` section partial.
 *
 * Visual contract:
 *
 *   - Section 3 — bundle download (single prominent ZIP button)
 *       `.mw-press-kit-bundle`               — centered button container
 *       `.mw-press-kit-bundle__btn`          — extends `.mw-btn--primary`
 *       `.mw-press-kit-bundle__meta`         — subdued caption inside button
 *       `.mw-press-kit-bundle__note`         — "prefer individual files?" hint
 *
 *   - Section 5 — per-asset download grid (3 cols → 2 @ 960px → 1 @ 720px)
 *       `.mw-press-kit-grid`                 — responsive grid container
 *       `.mw-press-kit-card`                 — single download card
 *       `.mw-press-kit-card__icon`           — file-type tile (SVG/PNG/JPG/PDF/@)
 *       `.mw-press-kit-card__title`          — card heading
 *       `.mw-press-kit-card__desc`           — card description
 *       `.mw-press-kit-card__links`          — per-card list of download links
 *       `.mw-press-kit-card__link`           — single download anchor
 *       `.mw-press-kit-card__format-chip`    — SVG / PNG @2x / PDF / JPG / ZIP
 *       `.mw-press-kit-card__palette`        — brand-colors swatch list
 *       `.mw-press-kit-card__swatch-chip`    — single swatch tile
 *       `.mw-press-kit-card__swatch-name`    — swatch label
 *       `.mw-press-kit-card__swatch-hex`     — hex code in <code>
 *
 * Closure-respecting: this file styles markup emitted from existing partials
 * (`hero` / `body` / `divider` / `key-facts` / `cta-band`) plus the rich-HTML
 * grid hosted *inside* the body partial's `.mw-section__content`. No new
 * section types are introduced.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 20 LAUNCH-WP4
 */

/* --- Section 3: Bundle download (centered hero button) ----------------- */

.mw-page-press-kit .mw-press-kit-bundle {
	display: flex;
	justify-content: center;
	margin: 1.5em 0;
}

.mw-page-press-kit .mw-press-kit-bundle__btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	padding: 1em 2em;
	font-size: 1.125rem;
	line-height: 1.3;
	text-align: center;
	min-height: 3.25em; /* keeps touch-target size > 44px */
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.mw-page-press-kit .mw-press-kit-bundle__btn:hover {
	transform: translateY(-1px);
}

.mw-page-press-kit .mw-press-kit-bundle__meta {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	opacity: 0.85;
}

.mw-page-press-kit .mw-press-kit-bundle__note {
	margin-top: 0.5em;
	font-size: 0.9375rem;
	opacity: 0.8;
	text-align: center;
}

/* --- Section 5: Per-asset download grid -------------------------------- */

/*
 * The grid lives inside .mw-section__content (a body partial) — strip the
 * inherited list bullets and reset spacing before applying our own layout.
 */
.mw-page-press-kit .mw-section--body .mw-section__content .mw-press-kit-grid {
	list-style: none;
	padding: 0;
	margin: 1.5em 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 960px) {
	.mw-page-press-kit .mw-section--body .mw-section__content .mw-press-kit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.mw-page-press-kit .mw-section--body .mw-section__content .mw-press-kit-grid {
		grid-template-columns: 1fr;
	}
}

.mw-page-press-kit .mw-press-kit-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
	transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.mw-page-press-kit .mw-press-kit-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 255, 255, 0.18);
}

/* --- File-type icon tile ---------------------------------------------- */

.mw-page-press-kit .mw-press-kit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(63, 46, 115, 0.85); /* studio-violet fallback */
}

/*
 * Per-format tint — keeps icons scannable at a glance. Studio palette only;
 * no new section-type or brand-token color introduced — these are localized
 * to this BEM block.
 */
.mw-page-press-kit .mw-press-kit-card__icon[data-format="svg"] { background: #3F2E73; }
.mw-page-press-kit .mw-press-kit-card__icon[data-format="png"] { background: #5F4DA0; }
.mw-page-press-kit .mw-press-kit-card__icon[data-format="jpg"] { background: #8B6BC9; }
.mw-page-press-kit .mw-press-kit-card__icon[data-format="pdf"] { background: #B43F3F; }
.mw-page-press-kit .mw-press-kit-card__icon[data-format="zip"] { background: #1A1330; }
.mw-page-press-kit .mw-press-kit-card__icon[data-format="mail"] { background: #E6B450; color: #1A1330; }

/* --- Card text ------------------------------------------------------- */

.mw-page-press-kit .mw-press-kit-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.mw-page-press-kit .mw-press-kit-card__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.85;
	flex: 1; /* pushes the link list to the bottom of the card */
}

/* --- Per-card download links ----------------------------------------- */

/*
 * Override .mw-section__content's default <ul> styling — we want a tight
 * row of format chips, not bulleted prose.
 */
.mw-page-press-kit .mw-section--body .mw-section__content .mw-press-kit-card__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mw-page-press-kit .mw-press-kit-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 0.375rem;
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.2;
	transition: background-color 0.15s ease-out;
}

.mw-page-press-kit .mw-press-kit-card__link:hover {
	background: rgba(255, 255, 255, 0.16);
	text-decoration: none;
}

.mw-page-press-kit .mw-press-kit-card__link:focus-visible {
	outline: 2px solid #E6B450; /* studio-gold accent */
	outline-offset: 2px;
}

.mw-page-press-kit .mw-press-kit-card__link--mail {
	background: rgba(230, 180, 80, 0.18);
}

.mw-page-press-kit .mw-press-kit-card__link--mail:hover {
	background: rgba(230, 180, 80, 0.32);
}

/* --- Format chip ----------------------------------------------------- */

.mw-page-press-kit .mw-press-kit-card__format-chip {
	display: inline-block;
	padding: 0.15em 0.5em;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mw-press-kit-card__link-label {
	font-weight: 500;
}

/* --- Brand-colors palette swatches ---------------------------------- */

.mw-page-press-kit .mw-section--body .mw-section__content .mw-press-kit-card__palette {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.mw-page-press-kit .mw-press-kit-card__swatch {
	display: grid;
	grid-template-columns: 1.25rem 1fr auto;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	margin: 0;
}

.mw-page-press-kit .mw-press-kit-card__swatch-chip {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 0.25rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.mw-page-press-kit .mw-press-kit-card__swatch-name {
	font-weight: 500;
}

.mw-page-press-kit .mw-press-kit-card__swatch-hex {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	opacity: 0.85;
	padding: 0.1em 0.4em;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 0.25rem;
}

/* --- Reduced-motion preference --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mw-page-press-kit .mw-press-kit-card,
	.mw-page-press-kit .mw-press-kit-card__link,
	.mw-page-press-kit .mw-press-kit-bundle__btn {
		transition: none;
	}

	.mw-page-press-kit .mw-press-kit-card:hover,
	.mw-page-press-kit .mw-press-kit-bundle__btn:hover {
		transform: none;
	}
}

/* --- RTL parity ----------------------------------------------------- */

/*
 * The grid is symmetric and uses logical-property-friendly properties
 * (grid + flex with gap), so it mirrors correctly under [dir="rtl"]
 * without dedicated overrides. The only directional concern is the
 * swatch row, which uses grid-template-columns left-to-right — flipping
 * the column order keeps the chip on the leading edge under RTL.
 */
[dir="rtl"] .mw-page-press-kit .mw-press-kit-card__swatch {
	grid-template-columns: auto 1fr 1.25rem;
}

/* --- Print: hide downloads (paper press kit makes no sense) ---------- */

@media print {
	.mw-page-press-kit .mw-press-kit-grid,
	.mw-page-press-kit .mw-press-kit-bundle {
		display: none !important;
	}
}