/* Posters: flat field, mechanic graphic, width-fitted title.
   Art is authored in the top 330 of a 400x500 viewBox, so the title and
   description always sit on flat field. */

.poster {
  --pp: clamp(14px, 5.5cqi, 28px);
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-poster);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--field);
  background-image: var(--grain);
  color: var(--on);
  text-decoration: none;
  box-shadow: var(--hang);
  container-type: inline-size;
  container-name: poster;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* The poster itself is the container, so padding is sized from its width. */
.poster__art { grid-row: 1; position: relative; min-height: 0; pointer-events: none; }
.poster__art svg {
  position: absolute; top: 0; left: 50%;
  height: 151.5%; /* 500 / 330: the art band fills the cell */
  width: auto; max-width: none; aspect-ratio: 4 / 5;
  transform: translateX(-50%);
  overflow: visible;
}
.poster .art-field { display: none; }

.poster__chips {
  position: absolute; z-index: 2; top: var(--pp); left: var(--pp); right: var(--pp);
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.poster__chips .chip { height: 24px; font-size: 12px; padding: 0 9px; }

.poster__text {
  grid-row: 2; position: relative; z-index: 1;
  padding: 0 var(--pp) var(--pp);
  container-type: inline-size;
}
/* Width-fitted title: font size = text width / widest line in em. wdth per quiz. */
.poster__title {
  font-size: calc(100cqi / var(--em) * 0.985);
  font-weight: 900;
  font-stretch: var(--wdth);
  letter-spacing: -0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 0.16em;
  padding-top: 0.08em;
}
.poster__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.poster__desc { font-size: 14px; line-height: 1.35; font-weight: 500; max-width: 34ch; min-width: 0; }
.poster__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.poster__action {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 44px; padding: 0 14px 0 18px; border-radius: var(--r-pill);
  background: var(--deep); color: #FFFFFF;
  font-weight: 700; font-size: 15px; line-height: 1;
}
.poster__action .ico { width: 18px; height: 18px; }

/* Hung objects: lift and layered shift on pointer devices */
.poster .layer { transition: transform var(--t) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  a.poster:hover, a.poster:focus-visible { transform: translateY(-4px); box-shadow: var(--lift); }
  a.poster:hover .layer[data-depth="1"], a.poster:focus-visible .layer[data-depth="1"] { transform: translate(-2px, 1px); }
  a.poster:hover .layer[data-depth="2"], a.poster:focus-visible .layer[data-depth="2"] { transform: translate(3px, -3px); }
  a.poster:hover .layer[data-depth="3"], a.poster:focus-visible .layer[data-depth="3"] { transform: translate(6px, -5px); }
}
a.poster:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--wall), var(--lift); }

/* Duotone photo slot inside art (globe). Absent photo = poster art alone. */
.poster .photo-slot image { opacity: 1; }

/* Not yet available: line art only, on the wall */
.poster--soon {
  background: transparent; color: var(--ink); box-shadow: none;
  border: 1.5px dashed var(--line-strong);
}
.poster--soon .art-ink *, .poster--soon .art-ink { mix-blend-mode: normal !important; }
.poster--soon .art-ink :is(rect, circle, ellipse, polygon, path, text) {
  fill: none !important; stroke: var(--line-strong) !important; stroke-width: 2px !important;
}
.poster--soon .poster__desc { color: var(--ink-2); }
.poster--soon .chip { background: var(--surface-2); color: var(--ink); }

/* ---------- Size variants ---------- */

/* Wide (landscape side posters): art to the right, text across the bottom */
.poster--wide { aspect-ratio: auto; }
.poster--wide .poster__art svg { left: auto; right: 0; transform: none; }
.poster--wide .poster__chips { right: 45%; }

/* Featured: big field, art on the right, larger text */
.poster--featured .poster__desc { font-size: 16px; }
.poster--featured .poster__chips .chip { height: 28px; font-size: 13px; padding: 0 11px; }
.poster--featured .poster__foot { flex-wrap: wrap; }
.poster--featured .poster__cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.poster--featured .poster__action { min-height: 48px; padding: 0 18px 0 24px; font-size: 16px; }
.countdown { font-variant-numeric: tabular-nums; }
@container poster (min-width: 560px) {
  .poster--featured .poster__art svg { left: auto; right: 0; transform: none; }
  .poster--featured .poster__chips { right: 50%; }
}

/* Small (More to play) */
.poster--small .poster__desc { font-size: 13px; }

/* Container-driven compaction for narrow posters */
@container poster (max-width: 300px) {
  .poster__desc { font-size: 13px; }
  .poster__action { padding: 0 12px 0 14px; font-size: 14px; }
}
@container poster (max-width: 250px) {
  .poster__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Skeleton in the swatch light tone (surface-2 in dark), slow shimmer */
.skeleton { background: var(--light, var(--surface-2)); border-radius: var(--r-poster); position: relative; overflow: hidden; }
:root[data-theme="dark"] .skeleton { background: var(--surface-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skeleton { background: var(--surface-2); } }
@media (prefers-reduced-motion: no-preference) {
  .skeleton::after {
    /* a flat translucent band, not a gradient */
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 28%;
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(-120%) skewX(-12deg);
    animation: shimmer 2.2s ease-in-out infinite;
  }
  @keyframes shimmer { to { transform: translateX(460%) skewX(-12deg); } }
}

/* Duotone filter per swatch (filters are inline in each page) */
.sw-vermilion { --duo: url(#duo-vermilion); }
.sw-cobalt { --duo: url(#duo-cobalt); }
.sw-jade { --duo: url(#duo-jade); }
.sw-saffron { --duo: url(#duo-saffron); }
.sw-rose { --duo: url(#duo-rose); }
.sw-sky { --duo: url(#duo-sky); }