/*
 * Character template (/character/<slug>/): layout for the blocks inc/character.php renders.
 * Loaded on op_character pages only, after base.css. Type, colour and spacing come from theme.json presets.
 * The shared looks come from base.css: the halftone ground, stamped headings, .oph-wrap / .oph-sec / .oph-sechead,
 * card-stock panels (.is-style-panel, .oph-panel), the lit table (.is-style-table), the crimp (.is-style-crimp),
 * the on-black section after it, die-cut buttons, .oph-cardtile, .op-card-row, .op-foil-tag, .oph-labs, .op-tbc.
 * This file adds only what Character needs: the hero grid, the Power Grid panel, the Specials panel grid, the find rows,
 * and two kit pieces from design-system "Depth: don't look flat" (power strip, halftone burst).
 * Spacing steps only: 4, 8, 12, 16, 24, 40, 72. Phone (≤ 781): one column in the hero, 2-up tiles, kit items stacked; nothing scrolls sideways.
 */

/* ---------- Page frame ---------- */
.opc { margin-block: 0; }
.opc-noimg { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed rgba(147, 166, 206, .35); border-radius: var(--wp--custom--radius--card); margin: 0; }

/* ---------- 1. Breadcrumb: Teko label, 44 high rows, inside the hero ---------- */
.opc-crumb { margin-bottom: 24px; }
.opc-crumb ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.opc-crumb li { display: inline-flex; align-items: center; min-height: 44px; }
.opc-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--wp--preset--color--dim); }
.opc-crumb a { color: var(--wp--preset--color--cyan); text-decoration: none; }
.opc-crumb a:hover { color: var(--wp--preset--color--text); }
.opc-crumb [aria-current] { color: var(--wp--preset--color--text); }

/* ---------- 2. Hero on the lit table, closed by the crimp (96 / 64 high, from base.css): copy left (7 of 12), the landscape card right (5 of 12) ---------- */
.opc-hero { padding: 16px 0 calc(72px + 96px); }
.opc-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: center; }
.opc-hero__copy { grid-column: span 7; display: flex; flex-direction: column; align-items: flex-start; }
.opc-hero__card { grid-column: 8 / span 5; margin: 0; }
.opc-hero__card img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--card); }
.opc-hero .is-style-eyebrow { margin-bottom: 12px; }
.opc-h1 { margin-block: 0 16px; }
.opc-desc { margin: 0 0 24px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; }
/* the Card Library button after the set line (Mr Manager, 14 Oct 16:50) */
.opc-hero__buttons { display: flex; margin: 24px 0 0; }
.opc-hero__buttons .wp-block-button { margin: 0; }
.opc-h1__sub { display: block; font-size: var(--wp--preset--font-size--subsection); color: var(--wp--preset--color--text); text-shadow: none; margin-top: 8px; }
.opc-setline { margin-top: 12px; max-width: 620px; }
.opc-hero__cap { margin: 8px 0 0; text-align: center; }

/* ---------- 3. Power Grid panel: Threat on the blank cog first (Mr Manager, 14 Oct), then the four values with the Power Grid icons; the credit right-aligned under the panel ---------- */
.opc-grid { align-self: stretch; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 16px 24px; }
.opc-grid__cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 4px; }
.opc-grid__icon { display: flex; align-items: center; justify-content: center; height: 44px; }
.opc-grid__icon img { display: block; width: auto; height: 44px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.opc-grid__value { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--subsection); line-height: 1; color: var(--wp--preset--color--text); }
.opc-grid__label { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); line-height: 1.2; }
.opc-grid__cell--threat { border-left: 1px solid var(--wp--custom--line--divider); }
.opc-grid__cell--threat .opc-grid__value { color: var(--wp--preset--color--yellow); }
/* the Threat cog, as Home's team panel draws it: 56 px, the number in Archivo 700 on the blank disc */
.opc-threat { position: relative; width: 56px; height: 56px; flex: none; margin-bottom: 4px; }
.opc-threat img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.opc-threat b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 22px; letter-spacing: -.03em; color: #0A0A0A; }
.opc-grid__empty { grid-column: 1 / -1; margin: 0; }

/* ---------- Kit pieces (design-system "Depth: don't look flat", 14 Oct) ---------- */
/* Power strip: four bars 40 × 6, skewed −24°, 6 apart, in the Power Grid colours in order, 16 below the heading */
/* .opc-strip (the Power strip) and .opc-burst (the yellow burst) are shared parts: blocks.css, "Page rhythm". */
/* Halftone burst: Power Yellow dots at 26%, 13 px grid, fading out from the centre of a 980 px circle, behind the heading (once per page) */
.opc-findsec { position: relative; overflow: hidden; }
.opc-findsec .oph-wrap { position: relative; }
.opc-findsec .oph-sechead { z-index: 0; }

/* ---------- Card tiles (Home's .oph-cardtile, in Where to find the cards): landscape Character cards, portrait Specials, both at the same card width ---------- */
/* every card image on the same top edge; captions below (Mr Manager, 14 Oct) */
.opc-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; align-items: start; }
.opc-tiles--stack { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.opc-tile { min-width: 0; }
.opc-tile--special img { aspect-ratio: 444 / 620; border-radius: 8px; }
/* Rare and Ultra Rare tiles carry op-foil-pending: the foil-shine block (URF mask over the print) attaches there once the masks exist; no plain sheen. */

/* ---------- 2. Specials: card-stock panels 2-up, portrait card 160 wide beside the text ---------- */
.opc-kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.opc-kit__item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; }
.opc-kit__img { display: block; }
.opc-kit__img img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--wp--preset--shadow--card); }
.opc-kit__body { display: flex; flex-direction: column; min-width: 0; }
.opc-kit__body .oph-labs { margin-bottom: 8px; }
.opc-kit__body .oph-h3 { margin-bottom: 12px; }
.opc-kit__body .oph-small { white-space: pre-line; } /* card text keeps its printed line breaks ("OR" on its own line) */

/* ---------- 3. Buy, build, join: a full-width row inside Where to find the cards (Mr Manager, 14 Oct 14:26); primary, outline, outline in one row, 16 apart ---------- */
.opc-find__row--cta .opc-cta__buttons { grid-column: 1 / -1; }
.opc-cta__buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.opc-cta__buttons .wp-block-button { margin: 0; }

/* ---------- 4. Spotlight: 16:9 frame on the lit table ---------- */
.opc-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--wp--custom--radius--panel); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), var(--wp--preset--shadow--card); }
.opc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 5. Where to find the cards (Mr Manager, 14 Oct 15:01): each block is the sub-title row, then two columns: the product (1 of 4, top-left) and the text with its tiles 4-up (3 of 4); blocks divided by the hairline ---------- */
.opc-find { display: flex; flex-direction: column; }
.opc-find__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 24px; row-gap: 24px; align-items: start; padding-block: 40px; border-top: 1px solid var(--wp--custom--line--divider); }
.opc-find__row:first-child { border-top: 0; padding-top: 0; }
.opc-find__label { grid-column: 1 / -1; margin: 0; font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; color: var(--wp--preset--color--cyan); text-shadow: none; line-height: 1.3; }
.opc-find__product { display: flex; align-items: flex-start; justify-content: flex-start; min-width: 0; }
.opc-find__product > img { display: block; width: auto; max-width: 100%; height: 220px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.opc-find__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.opc-find__line { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; max-width: 620px; }
.opc-find__body .opc-tiles + .opc-find__line { margin-top: 8px; }
.opc-deck { display: flex; flex-direction: column; gap: 4px; }
.opc-deck__meta { margin: 0; }
.opc-deck__specials { margin-top: 4px; max-width: 620px; }
.opc-deck .opc-tiles { margin-top: 16px; }
.opc-deck .opc-tiles + .opc-deck__specials { margin-top: 16px; }
.opc-deck__buy { margin-top: 24px; }
/* tiles in the 3/4 column: 4-up (the stack 4 + 4, the Rare slot landscape 4-up as Home's card row); the starter team one 4-up row of small tiles (option B, approved 14 Oct) */
.opc-find__body .opc-tiles--stack, .opc-find__body .opc-tiles.op-card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.opc-find__body .opc-tiles--team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 648px; }
.opc-tiles--team .oph-cardtile__name { font-size: 14px; }
.opc-tile--here .oph-cardtile__img img { outline: 3px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.opc-tile--here .oph-cardtile__name { color: var(--wp--preset--color--yellow); }
/* ERB (brief 36, batches 3–4): the product slot may carry a caption under the render (boosters by the box); a Reserve member of a starter team is labelled on its tile; a set with no video of its own says so under the widget heading */
.opc-find__product { flex-direction: column; }
.opc-find__note { margin: 8px 0 0; max-width: 220px; }
.opc-tile__role { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 2px; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--yellow-ink); background: var(--wp--preset--color--yellow); vertical-align: 2px; }

/* ---------- Phone ---------- */
@media (max-width: 781px) {
	.opc-crumb { margin-bottom: 16px; }
	.opc-hero { padding: 8px 0 calc(40px + 64px); }
	.opc-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.opc-hero__copy, .opc-hero__card { grid-column: auto; }
	.opc-hero__card { order: -1; }
	.opc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
	.opc-grid__cell { flex-direction: row; justify-content: flex-start; text-align: left; gap: 8px; min-height: 44px; }
	.opc-grid__icon, .opc-grid__icon img { height: 32px; }
	.opc-grid__label { order: 2; flex: 1; }
	.opc-grid__value { order: 3; font-size: 30px; }
	.opc-grid__cell--threat { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--wp--custom--line--divider); padding-top: 12px; }
	.opc-grid__cell--threat .opc-threat { order: 3; margin: 0; width: 44px; height: 44px; }
	.opc-grid__cell--threat .opc-threat b { font-size: 18px; }
	.opc-kit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.opc-kit__item { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
	.opc-cta__buttons { flex-direction: column; align-items: stretch; gap: 12px; }
	.opc-cta__buttons .wp-block-button__link { width: 100%; }
	/* full width; the long label wraps to two lines inside the die-cut (it is 466 px of Teko at 23) */
	.opc-hero__buttons .wp-block-button, .opc-hero__buttons .wp-block-button__link { width: 100%; }
	.opc-hero__buttons .wp-block-button__link { white-space: normal; text-align: center; line-height: 1.05; padding-top: 10px; padding-bottom: 10px; }
	.opc-tiles--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	/* phone: as approved on 14 Oct 13:56 ("mobile looks good"): label, product 200, text, 2-up tiles */
	.opc-find__row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-block: 24px; }
	.opc-find__label { grid-column: auto; }
	.opc-find__product:empty { display: none; }
	.opc-deck__buy .wp-block-button, .opc-deck__buy .wp-block-button__link { width: 100%; }
	.opc-find__product { align-items: center; }
	.opc-find__product > img { height: 200px; }
	.opc-find__body .opc-tiles--stack, .opc-find__body .opc-tiles.op-card-row, .opc-find__body .opc-tiles--team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Character spotlight: the standard block global-spotlight; its styles moved to blocks.css (25 Oct). */

/* ---------- Double-sided card (Walkers): the flip card in the hero; character.js toggles is-back every 3 s; 0.8 s rotate; reduced motion: no transition ---------- */
.opc-flip { position: relative; perspective: 1400px; }
.opc-flip__inner { position: relative; aspect-ratio: 620 / 444; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(.2, .8, .2, 1); }
.opc-flip.is-back .opc-flip__inner { transform: rotateY(180deg); }
.opc-flip__inner img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.opc-flip__back { transform: rotateY(180deg); }
.opc-flip__btn { position: absolute; right: 8px; bottom: 8px; z-index: 2; cursor: pointer; }
.opc-hero__card .opc-flip + .opc-hero__cap, .opc-hero__card .opc-flip ~ .opc-hero__cap { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .opc-flip__inner { transition: none; } }

/* ---------- 15 Oct (Mr Manager): foil tiles shine like Home's (.op-foil: one copy, in blocks.css, since 16 Oct);
   the empty description slot keeps its line; the keyword line under a Special's text; Buy, build, join as its own section ---------- */
.opc-desc:empty { min-height: 1.3em; }
.opc-kit__kw { margin: 8px 0 0; font-weight: 700; }
.opc-ctasec .oph-sechead { margin-bottom: 24px; }

/* ---------- No deck built around the character (Mr Manager, 15 Oct): the starter decks on sale in a row, full width ---------- */
.opc-find__row--wide .opc-find__product { display: none; }
.opc-find__row--wide .opc-find__body { grid-column: 1 / -1; }
.opc-shopdecks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 760px; }
.opc-shopdecks__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.opc-shopdecks__item img { display: block; width: auto; max-width: 100%; height: 200px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.opc-shopdecks__name { margin: 0; text-align: center; }
@media (max-width: 781px) {
	.opc-shopdecks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.opc-shopdecks__item img { height: 150px; }
}