/*
 * Cards section: the Set template (/expansions/<set>/, inc/set.php) and the Cards hub (/cards/, inc/cards-hub.php).
 * Loaded after base.css and character.css (the shared pieces: .opc-crumb, .opc-noimg, .opc-strip, .opc-burst, .opc-tile).
 * Type, colour and spacing come from theme.json presets; spacing steps only: 4, 8, 12, 16, 24, 40, 72.
 * Depth kit (claude/design-system.md, 14 Oct): big key art + crimp on the Set hero; burst + crimp on the hub hero; power strip
 * under section headings; the ghost word once per page (Who is in the set / Meet the heroes); card finish on product and guide
 * panels. Phone (≤ 781): one column in the hero, 2-up tiles and panels; nothing scrolls sideways.
 */

/* ---------- Hero: on the key art (Set) or the lit table (hub), closed by the crimp ---------- */
.ops-hero { position: relative; overflow: hidden; padding: 16px 0 calc(72px + 96px); min-height: 600px; display: flex; align-items: flex-end; }
.ops-hero__art { position: absolute; top: 0; bottom: 0; right: 0; left: var(--hero-left, 28%); z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 var(--hero-fade, 42%)); mask-image: linear-gradient(90deg, transparent 0%, #000 var(--hero-fade, 42%)); }
/* Hero key art, one rule for every page (Mr Manager, 24 Oct: "the image itself is always supposed to be like two-thirds, and then the fade is on the one-third on the left side"; Maggie on Contact is the model): the art fills the right of the hero, fades into the ground on its left (no hard edge), each page frames its character with --hero-pos (and --hero-left when the art should start further left). .ops-hero--flip mirrors the art. Not zoomed, except art with a name banner baked into its top right (keyart-03 Atom Eve, keyart Omni-Man by Kubert): --hero-scale from the bottom left (--hero-origin) pushes the banner out of the frame. */
.ops-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 30%); transform: var(--hero-flip, scaleX(1)) scale(var(--hero-scale, 1)); transform-origin: var(--hero-origin, 50% 50%); }
/* the Atom Eve key art (Art & Artists, Join OverPower): its banner out of the frame */
.opa-hero, .opj-hero { --hero-scale: 1.15; --hero-origin: 0 100%; }
.ops-hero--flip { --hero-flip: scaleX(-1); }
.ops-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 12, 36, .55) 0%, rgba(6, 12, 36, 0) 48%), linear-gradient(180deg, rgba(6, 12, 36, .35) 0%, rgba(6, 12, 36, 0) 28%, rgba(6, 12, 36, 0) 62%, rgba(6, 12, 36, .8) 100%); }
.ops-hero__wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: min(1080px, 100% - 32px); }
@media (min-width: 782px) { .ops-hero__wrap { width: min(1080px, 100% - 80px); } }
.ops-hero .opc-crumb { margin-bottom: 40px; }
.ops-h1 { margin: 0 0 16px; max-width: 804px; }
.ops-hero__lead { margin: 0; max-width: 620px; font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.ops-hero__buttons { margin-top: 40px; }
.ops-hero__credit { align-self: flex-end; margin: 24px 0 0; padding: 4px 8px; border-radius: 2px; color: #DCE6F5; background: rgba(6, 12, 36, .82); }
.ops-hero--hub { min-height: 0; padding-top: 24px; padding-bottom: calc(24px + 96px); }
.ops-hero--hub .ops-hero__buttons { margin-top: 24px; }
.ops-hero--hub .ops-hero__credit { margin-top: 12px; }
.ops-hero--hub .ops-hero__wrap { align-items: flex-start; }
.ops-hero--hub .opc-burst::before { left: -260px; top: 40%; }

/* ---------- Section heads with a lead on the right ---------- */
.ops-sechead__lead { margin: 0; max-width: 344px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ops-lead { margin: -16px 0 24px; max-width: 620px; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ops-label { margin: 0 0 16px; font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; color: var(--wp--preset--color--cyan); text-shadow: none; line-height: 1.3; }
.ops-grid { list-style: none; margin: 0; padding: 0; }
.ops-grid + .ops-label { margin-top: 40px; }
.ops-note { margin: 16px 0 0; }
.ops-note + .ops-label { margin-top: 40px; }
.ops-tiles { list-style: none; margin: 0; padding: 0; }

/* ---------- Ghost word (Depth kit, once per page): the set name in Niagara, outline only, cyan at 13%, behind the section heading ---------- */
/* .ops-ghost (the ghost title) and the striped tile (.ops-guide) are shared parts: blocks.css, "Page rhythm". */
.ops-who, .ops-sets, .ops-guides, .ops-errata, .ops-where, .ops-facts, .ops-products { position: relative; overflow: hidden; } /* .ops-spots: blocks.css (25 Oct) */
.ops-who .oph-wrap { position: relative; }

/* ---------- Products (What is in the set): card-stock panels with the card finish, on the lit table ---------- */
.ops-product { position: relative; gap: 0; padding-top: 16px; }
.ops-product::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--wp--preset--color--yellow); border-radius: 2px 2px 0 0; }
.ops-product__img { display: flex; align-items: center; justify-content: center; height: 220px; margin-bottom: 16px; border-radius: var(--wp--custom--radius--panel); background: radial-gradient(60% 60% at 50% 55%, rgba(92, 225, 230, .14) 0%, rgba(92, 225, 230, 0) 100%); }
.ops-product__img img { display: block; width: auto; max-width: 100%; height: 200px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.ops-product__img .opc-noimg { width: 100%; height: 100%; }
.ops-product__name { margin: 0 0 4px; }
.ops-product__meta { margin: 0 0 8px; }
.ops-product__line { margin: 0 0 16px; }
.ops-product__buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ops-price { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 30px; line-height: 1; color: var(--wp--preset--color--yellow); }
.ops-product__buy .wp-block-button { margin: 0; }

/* ---------- Guides and tools (hub): textured tiles, the image as a card ---------- */
.ops-guide { padding: 0; }
.ops-guide__link { display: flex; flex-direction: column; height: 100%; padding: 24px; color: inherit; text-decoration: none; }
.ops-guide__img { display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 16px; }
.ops-guide__img img { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; border-radius: 6px; box-shadow: var(--wp--preset--shadow--card, 0 14px 24px rgba(0,0,0,.5)); }
.ops-guide__title { display: block; margin: 0 0 8px; color: var(--wp--preset--color--yellow); }
.ops-guide__link:hover .ops-guide__title { color: var(--wp--preset--color--text); }

/* ---------- Sets (hub): the copy left, the renders right ---------- */
.ops-sets__grid { grid-template-columns: minmax(0, 1fr); }
/* One tile per set (Mr Manager, 15 Oct 13:13): the head (the set's packs left; the logo as the name, the counts and the three buttons right),
   the shelf (the booster display and the four starter decks at their real relative size), the playmats (images only), six Character cards.
   Skybound sits on the Invincible two-player playmat art, darkened so the text reads. Light shadows only. */
/* The set tile is a size container: the shelf scales so it stays on one row */
.ops-set { position: relative; display: flex; flex-direction: column; gap: 32px; container-type: inline-size; overflow: hidden; }
.ops-set > :not(.ops-set__bg) { position: relative; z-index: 1; }
.ops-set__bg { position: absolute; inset: 0; z-index: 0; }
.ops-set__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ops-set__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 36, .45) 0%, rgba(6, 12, 36, .72) 45%, rgba(6, 12, 36, .9) 75%, rgba(6, 12, 36, .96) 100%), linear-gradient(90deg, rgba(6, 12, 36, .55) 0%, rgba(6, 12, 36, 0) 60%); }
/* ERB (Mr Manager, 26 Oct): Mina Harker on the right, her face above Visit the shop, looking down over the tile; lighter than Skybound's art */
.ops-set--erb .ops-set__bg img { position: absolute; top: -14%; left: -22%; width: 122%; height: auto; transform: scaleX(-1); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.ops-set--erb .ops-set__bg::after { background: linear-gradient(180deg, rgba(6, 12, 36, .15) 0%, rgba(6, 12, 36, .35) 35%, rgba(6, 12, 36, .75) 60%, rgba(6, 12, 36, .92) 80%, rgba(6, 12, 36, .96) 100%), linear-gradient(90deg, rgba(6, 12, 36, .6) 0%, rgba(6, 12, 36, 0) 45%); }
/* Head: the packs left, the name, counts and buttons right */
.ops-set__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 40px; }
.ops-fan { grid-row: 1 / span 2; }
.ops-set__copy { align-self: end; }
.ops-set__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ops-set__copy .oph-caption { margin: 0; color: var(--wp--preset--color--muted); }
.ops-set__title { margin: 0; }
.ops-set__logo { display: block; width: auto; max-width: 260px; height: auto; max-height: 150px; }
.ops-set__buttons { grid-column: 2; align-self: start; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; margin-top: 8px; }
.ops-set__buttons .wp-block-button { margin: 0; }
/* The pack fan: three wrappers from a common point at the bottom, the middle one in front; a single render (ERB) stands on its own */
.ops-fan { position: relative; width: 250px; height: 230px; }
.ops-fan__pack { position: absolute; bottom: 0; left: 50%; width: auto; height: 200px; transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.ops-fan__pack--0 { transform: translateX(-50%) translateX(-56px) rotate(-14deg); }
.ops-fan__pack--1 { transform: translateX(-50%) translateY(-6px); z-index: 2; }
.ops-fan__pack--2 { transform: translateX(-50%) translateX(56px) rotate(14deg); }
.ops-fan--solo { display: flex; align-items: flex-end; justify-content: center; }
.ops-fan--solo .ops-fan__pack { position: static; transform: none; height: 210px; }
/* The shelf: the booster display stands a little taller than a starter deck box */
.ops-shelf { --deck: min(170px, calc(19cqi - 24px)); list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px 24px;
	background: radial-gradient(60% 22% at 50% 100%, rgba(92, 225, 230, .10) 0%, rgba(92, 225, 230, 0) 100%); }
.ops-shelf__item { flex: none; display: flex; align-items: flex-end; }
.ops-shelf__item img { display: block; width: auto; height: var(--deck); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.ops-shelf__item--box img { height: calc(var(--deck) * 1.15); }
.ops-mats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: end; }
.ops-mats__item { min-width: 0; }
.ops-mats__item img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.ops-set__sample { padding-top: 16px; border-top: 1px solid var(--wp--custom--line--divider); }
.ops-set__sample .oph-labs { margin-bottom: 12px; }
.ops-set__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ops-set__cards img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--wp--preset--shadow--card, 0 14px 24px rgba(0,0,0,.5)); }
.ops-set--tbc .ops-set__copy { gap: 8px; }
@media (max-width: 1099px) { .ops-set__head { gap: 24px; } .ops-fan { grid-row: auto; } .ops-set__copy { align-self: center; } .ops-set__buttons { grid-column: 1 / -1; margin-top: 0; } .ops-fan { width: 210px; height: 190px; } .ops-fan__pack { height: 165px; } .ops-fan__pack--0 { transform: translateX(-50%) translateX(-46px) rotate(-14deg); } .ops-fan__pack--2 { transform: translateX(-50%) translateX(46px) rotate(14deg); } .ops-fan--solo .ops-fan__pack { height: 170px; } .ops-set__logo { max-width: 200px; max-height: 120px; } }

/* ---------- Create your team (hub): the ERB sample tiles are not links ---------- */
.ops-tile--nolink .oph-cardtile__img { cursor: default; }

/* ---------- Where to buy and play: three equal panels; Release date and card count: the facts list ---------- */
.ops-where .oph-grid3 .oph-panel .oph-small { margin: 0; }
.ops-facts__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ops-facts__logo { align-items: flex-start; }
.ops-facts__logo .opc-noimg { width: 100%; min-height: 160px; }
.ops-facts__logo img { display: block; width: 100%; max-width: 320px; height: auto; }
.ops-facts__logo .oph-caption { margin: 12px 0 0; }
.ops-facts__list { margin: 0; gap: 0; }
.ops-facts__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--wp--custom--line--divider); }
.ops-facts__row:first-child { border-top: 0; padding-top: 0; }
.ops-facts__row:last-child { padding-bottom: 0; }
.ops-facts__row dt { margin: 0; align-self: center; }
.ops-facts__row dd { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }


/* ---------- Phone ---------- */
@media (max-width: 781px) {
	.ops-hero { min-height: 0; padding: 200px 0 calc(40px + 64px); }
	.ops-hero__art { left: 0; -webkit-mask-image: none; mask-image: none; }
	.ops-hero__art img { object-position: var(--hero-pos-phone, 50% 0); transform: var(--hero-flip, scaleX(1)) scale(var(--hero-scale-phone, var(--hero-scale, 1))); transform-origin: var(--hero-origin-phone, var(--hero-origin, 50% 50%)); } /* a page (or a set's key-art data) may scale and anchor differently on phones (27 Oct) */
	.ops-hero__art::after { background: linear-gradient(180deg, rgba(6, 12, 36, .35) 0%, rgba(6, 12, 36, .78) 40%, rgba(6, 12, 36, .96) 100%); }
	.ops-hero .opc-crumb { margin-bottom: 24px; }
	.ops-hero__buttons { margin-top: 24px; width: 100%; flex-direction: column; gap: 12px; }
	.ops-hero__buttons .wp-block-button, .ops-hero__buttons .wp-block-button__link { width: 100%; }
	.ops-hero__credit { align-self: flex-start; margin-top: 16px; }
	.ops-hero--hub { padding-top: 40px; }
	.ops-hero--hub .opc-burst::before { left: -320px; }
	.ops-sechead__lead { max-width: none; }
	.ops-lead { margin: -8px 0 16px; }
	.oph-grid4.ops-grid, .oph-grid3.ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.ops-product__img { height: 140px; margin-bottom: 12px; }
	.ops-product__img img { height: 128px; }
	.ops-product__buy { flex-direction: column; align-items: stretch; gap: 8px; }
	.ops-product__buy .wp-block-button, .ops-product__buy .wp-block-button__link { width: 100%; }
	.ops-price { font-size: 24px; }
	.ops-guide__link { padding: 16px; }
	.ops-guide__img { height: 96px; margin-bottom: 12px; }
	.ops-guide__img img { max-height: 96px; }
	.ops-set { gap: 24px; }
	.ops-set__head { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
	.ops-set__copy { align-items: center; text-align: center; width: 100%; }
	.ops-fan { width: 190px; height: 170px; }
	.ops-fan__pack { height: 145px; }
	.ops-fan__pack--0 { transform: translateX(-50%) translateX(-40px) rotate(-14deg); }
	.ops-fan__pack--2 { transform: translateX(-50%) translateX(40px) rotate(14deg); }
	.ops-fan--solo .ops-fan__pack { height: 150px; }
	.ops-set__logo { max-width: 200px; max-height: 110px; }
	.ops-set__buttons { flex-direction: column; gap: 12px; width: 100%; }
	.ops-set__buttons .wp-block-button, .ops-set__buttons .wp-block-button__link { width: 100%; }
	.ops-shelf { --deck: 80px; gap: 16px 12px; }
	.ops-shelf__item--box { flex-basis: 100%; justify-content: center; }
	.ops-shelf__item--box img { height: 110px; }
	.ops-mats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.ops-set--erb .ops-set__bg img { top: 0; left: -100%; width: 250%; } /* her face to the right of the logo, over the counts */
	.ops-set--skybound .ops-mats { display: none; } /* Mr Manager, 26 Oct: no playmats on the Skybound tile on phones */
	.ops-set__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ops-where .oph-grid3 { grid-template-columns: 1fr; }
	.ops-where .wp-block-button, .ops-where .wp-block-button__link { width: 100%; }
	.ops-facts__grid { grid-template-columns: 1fr; }
	.ops-facts__row { grid-template-columns: 1fr; gap: 4px; }
}