/* Q92-11 — article block styles. Layers on top of mock-styles.css (the
   round-5c-turf-brand tokens/components), adding only what those components
   don't already cover: block spacing, quote treatment, embed sizing, and
   the gallery lightbox itself. Reuses --display, --label, --ink-*,
   --gray-*, --brand tokens defined in mock-styles.css. */

.article-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6, 24px);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6, 24px) var(--sp-4, 16px);
}

.block-rich-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
}
.block-rich-text p { margin: 0 0 1em; }
.block-rich-text p:last-child { margin-bottom: 0; }

/* image block */
.block-image { margin: 0; }
.block-image img { width: 100%; height: auto; display: block; }
.block-image figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-400);
  line-height: 1.5;
}

/* pull quote — mock's display font + heading scale (R12) */
.block-pull-quote {
  margin: 0;
  padding: var(--sp-5, 20px) 0;
  border-top: 1px solid var(--gray-400);
  border-bottom: 1px solid var(--gray-400);
}
.pull-quote-text {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink-900);
  text-wrap: balance;
}
.pull-quote-attribution {
  display: block;
  margin-top: 10px;
  font: 700 11px/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-400);
}

/* embed */
.block-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.embed-social-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-4, 16px);
  background: var(--gray-100);
  border: 1px solid var(--ink-900);
  font: 700 13px/1 var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-900);
  text-decoration: none;
}
.embed-social-card:hover { background: var(--paper); color: var(--brand); }

/* score block sits on the shared .gamecard component from mock-styles.css */
.block-score .gamecard { max-width: 420px; }
.score-unavailable {
  padding: var(--sp-4, 16px);
  background: var(--gray-100);
}
.score-unavailable-notice {
  margin: 0;
  font: 400 13px/1.5 var(--label);
  color: var(--ink-400);
}

/* gallery grid — mock's card/photo-card pattern (R12), buttons not divs
   so every thumbnail is a real, keyboard-reachable control */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 2px;
  background: var(--gray-400);
}
.gallery-thumb {
  display: block;
  padding: 0;
  border: 0;
  background: var(--paper);
  cursor: pointer;
  aspect-ratio: 1;
  overflow: hidden;
  min-width: 44px;
  min-height: 44px;
}
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease, filter .3s ease;
  filter: saturate(.65);
}
.gallery-thumb:hover img,
.gallery-thumb:focus-visible img { transform: scale(1.04); filter: saturate(1.05); }
.gallery-thumb:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .gallery-thumb img { transition: none; }
  .gallery-thumb:hover img, .gallery-thumb:focus-visible img { transform: none; }
}

/* lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 31, 36, .96);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-stage {
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-slide { margin: 0; }
.gallery-lightbox-slide[hidden] { display: none; }
.gallery-lightbox-slide img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  display: block;
}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-prev:focus-visible,
.gallery-lightbox-next:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.gallery-lightbox-close { top: var(--sp-4, 16px); right: var(--sp-4, 16px); font-size: 28px; }
.gallery-lightbox-prev { left: var(--sp-4, 16px); top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: var(--sp-4, 16px); top: 50%; transform: translateY(-50%); }

@media (max-width: 480px) {
  .pull-quote-text { font-size: 22px; }
}