/* ==========================================================================
   AURELLE ATELIER — collection.css
   S312 Stage 3 (w3b). Page-specific styles for collection.html ONLY.
   Loaded after main.css; nothing here leaks to other pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   <picture> seated inside .media-frame
   main.css §9 targets `.media-frame > img|video` (direct child). The
   collection page ships <picture> wrappers (WebP + JPEG fallback), so the
   fit / hover / motion contract is mirrored here for the picture path.
   -------------------------------------------------------------------------- */
.media-frame > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media-frame > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-long);
}

/* Hover scale parity with main.css (700ms, 1.04, inside overflow-hidden) */
a:hover .media-frame > picture > img,
a:focus-visible .media-frame > picture > img,
.variant-panel:hover .media-frame > picture > img {
  transform: scale(1.04);
}

/* Reduced motion: kill the scale + transition on the picture path too
   (main.css's universal kill covers transitions; transforms cleared here) */
@media (prefers-reduced-motion: reduce) {
  .media-frame > picture > img {
    transition: none;
  }
  a:hover .media-frame > picture > img,
  a:focus-visible .media-frame > picture > img,
  .variant-panel:hover .media-frame > picture > img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Small page rhythm helpers (replace scaffold inline styles)
   -------------------------------------------------------------------------- */
.collection-open {
  padding-top: var(--space-8);
}

.spread__teaser {
  margin-top: var(--space-4);
}

.selector-group {
  margin-top: var(--space-5);
}

.selector-helper {
  margin-top: var(--space-3);
}

.selector-note {
  margin-top: var(--space-4);
}

.variant-panel__name {
  font-family: var(--font-display);
  color: var(--color-heading-on-dark);
}