/*
 * Art & Artists (/expansions/art/, inc/art.php). Loaded after base.css, character.css and cards.css (the hero on key art: .ops-hero).
 * Type, colour and spacing come from theme.json presets; spacing steps only: 4, 8, 12, 16, 24, 40, 72.
 * Phone (≤ 781): the mosaic is one large tile then 2-up; process stages 2-up; the artist list in two columns; nothing scrolls sideways.
 */

/* ---------- Hero: the button and the From sketch to card link on one line ---------- */
.opa-hero__buttons { align-items: center; gap: 24px; }
.opa-hero__link { margin: 0; }

/* ---------- Original art: the key art mosaic (one large, two stacked beside it, then four across); credit banners cropped ---------- */
.opa-mosaic__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.opa-ka { grid-column: span 3; position: relative; min-width: 0; }
.opa-ka--big { grid-column: span 8; grid-row: span 2; }
.opa-ka--side { grid-column: span 4; }
.opa-ka__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.opa-ka__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--wp--custom--radius--panel); background: var(--wp--preset--color--panel); }
.opa-ka--side, .opa-ka--side .opa-ka__link { display: flex; flex-direction: column; }
.opa-ka--side .opa-ka__img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
/* the key art files are cropped clear of their credit banner with the heads kept (Mr Manager, 15 Oct), so the tile shows them whole, anchored at the top */
.opa-ka__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 0; transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .opa-ka__link:hover .opa-ka__img img { transform: scale(1.04); } }
.opa-ka__cap { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 4px 8px; border-radius: 2px; color: #DCE6F5; background: rgba(6, 12, 36, .82); }
.opa-ka__link:hover .opa-ka__cap { color: var(--wp--preset--color--yellow); }

/* ---------- From sketch to card: one panel per piece, its stages left to right, ending on the printed card ---------- */
.opa-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.opa-piece { gap: 16px; }
.opa-piece__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.opa-piece__title { margin: 0; }
.opa-piece__title a { color: inherit; text-decoration: none; }
.opa-piece__title a:hover { color: var(--wp--preset--color--yellow); }
.opa-piece__meta { margin: 0; }
.opa-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.opa-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.opa-stage__img { display: flex; align-items: center; justify-content: center; height: 260px; padding: 8px; border-radius: var(--wp--custom--radius--panel); background: radial-gradient(60% 60% at 50% 55%, rgba(92, 225, 230, .10) 0%, rgba(92, 225, 230, 0) 100%), #060C24; }
.opa-stage__img a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.opa-stage__img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 4px; }
.opa-stage--card .opa-stage__img img { border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--card, 0 14px 24px rgba(0,0,0,.5)); }
.opa-stage__label { margin: 0; }
.opa-stage--card .opa-stage__label { color: var(--wp--preset--color--yellow); }
.opa-stage__img .opc-noimg { width: 100%; height: 100%; }

/* ---------- The artists: A–Z by surname, in columns; then Work with us ---------- */
.opa-list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 24px; }
.opa-artist { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--wp--custom--line--divider); break-inside: avoid; }
.opa-artist__name { font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.opa-artist__meta { margin: 0; }
/* Work with us on one row (Mr Manager, 15 Oct): title and line on the left, Contact us on the right */
.opa-press { margin-top: 40px; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px 40px; }
.opa-press__copy { min-width: 0; }
.opa-press .oph-h3 { margin: 0 0 8px; }
.opa-press .oph-small { margin: 0; }
.opa-press__cta { flex: none; margin: 0; }

@media (max-width: 1099px) {
	.opa-list { columns: 3; }
	.opa-stage__img { height: 200px; }
}

/* ---------- Phone ---------- */
@media (max-width: 781px) {
	.opa-hero { --hero-pos-phone: 30% 20%; } /* Atom Eve's figure (27 Oct) */
	.opa-hero__buttons { gap: 12px; }
	.opa-hero__link { align-self: flex-start; }
	.opa-mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
	.opa-ka, .opa-ka--side { grid-column: span 1; grid-row: auto; }
	.opa-ka--big { grid-column: 1 / -1; }
	.opa-ka--side .opa-ka__img { aspect-ratio: 16 / 9; flex: none; }
	.opa-ka:not(.opa-ka--big) .opa-ka__cap { position: static; display: block; margin-top: 4px; padding: 0; background: none; }
	.opa-stages { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
	.opa-stage__img { height: 150px; padding: 4px; }
	.opa-list { columns: 2; column-gap: 16px; }
	.opa-press { margin-top: 24px; flex-direction: column; align-items: stretch; }
	.opa-press__cta .wp-block-button, .opa-press__cta .wp-block-button__link { width: 100%; }
}

/* 27 Oct (Jon's review): the artist-credit line under the gallery lead, and the note under the A-to-Z title */
.opa-proud { margin-top: 8px; color: var(--wp--preset--color--text); }
.opa-az__note { margin: 8px 0 0; max-width: 62ch; }