/* Shared product-detail scale, based on the supplied security-label reference.
   Keep each poster's original typefaces, copy, hero composition and lower sections. */
body[data-product-landing] {
  --product-hero-title-size: 54px;
  --product-hero-subtitle-size: 12px;
  --product-hero-tracking: -1.8px;
  --product-detail-height: 129px;
  --product-detail-gap: 2px;
}

/* IDs also cover the paper title's two spans and override legacy locale sizes. */
body[data-product-landing] :is(h1#print-title, h1#cover-title, h1#hero-title) {
  font-size: var(--product-hero-title-size);
  letter-spacing: var(--product-hero-tracking);
  overflow-wrap: anywhere;
}

body[data-product-landing] [data-landing-text="subtitle"] {
  font-size: var(--product-hero-subtitle-size);
}

html[lang^="zh"] body[data-product-landing] {
  --product-hero-tracking: -.03em;
}

body[data-product-landing="tickets"] .details {
  padding-inline: 0;
  padding-bottom: 0;
}

body[data-product-landing] :is(.print-detail-grid, .tech-collage, .detail-strip, .tech-grid) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: var(--product-detail-height);
  gap: var(--product-detail-gap);
  padding: 0;
}

body[data-product-landing] :is(.print-detail-grid, .tech-collage, .detail-strip, .tech-grid) > :is(figure, img) {
  grid-row: auto;
  grid-column: auto;
  min-width: 0;
  min-height: 0;
  height: var(--product-detail-height);
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: auto;
  overflow: hidden;
}

body[data-product-landing] :is(.print-detail-grid, .tech-collage, .detail-strip, .tech-grid) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transform: none;
}

/* Seven certificate samples: preserve all seven without a larger overview tile
   or an empty last row. The strip remains accessible by touch and keyboard. */
body[data-product-landing="certificates"] .tech-collage {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * var(--product-detail-gap)) / 6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

body[data-product-landing="certificates"] .tech-collage::-webkit-scrollbar {
  display: none;
}

body[data-product-landing="certificates"] .tech-collage > figure {
  scroll-snap-align: start;
}

body[data-product-landing="certificates"] .tech-collage:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Only the ticket template used a 933px desktop canvas. */
@media (min-width: 701px) {
  body[data-product-landing="tickets"] :is(.page-shell, .landing-nav) {
    width: min(720px, calc(100% - 24px));
  }
}

@media (max-width: 570px) {
  body[data-product-landing] {
    --product-hero-title-size: clamp(25px, 7.5vw, 42px);
    --product-hero-subtitle-size: 10px;
    --product-hero-tracking: -.04em;
    --product-detail-height: 106px;
  }

  body[data-product-landing] :is(.print-detail-grid, .tech-collage, .detail-strip, .tech-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-product-landing="certificates"] .tech-collage {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 2 * var(--product-detail-gap)) / 3);
  }
}

@media (max-width: 360px) {
  body[data-product-landing] {
    --product-hero-title-size: 24px;
  }
}