/* ==========================================================================
   Garden of Eden — COLLECTION

   A horizontal, catalogue-style browser: header and three cards share one
   screen. Deliberately a change of rhythm from the cinematic story
   sections — no full-viewport-per-product scene, no vertical stack.

     .collection            the section (one screen)
       .collection__head    title + supporting line + arrow controls
       .ccarousel           native horizontal scroll container + snap
         .ccarousel__track  the row
           .ccard × 6       media (dominant) → number/category → title → CTA

   Card width is driven by BOTH the viewport width and its height, so the
   full 2:3 figure always fits on screen and every card is identical.
   Sizing is deliberately not an exact fraction of the row — that is what
   leaves a partial next card visible as the affordance for scrolling.

   Palette, type and hairline language are inherited unchanged from
   hero/styles.css :root.
   ========================================================================== */

.skip-link {
  position: absolute;
  z-index: 1000;
  top: -100%;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-gold);
  color: var(--ground);
  font-family: system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--r-sm, 12px);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ==========================================================================
   Section shell
   ========================================================================== */

.collection {
  /* Two independent jobs, kept separate so they cannot fight:

     1. CARD SIZE comes from the height left over once the header, gaps
        and metadata are accounted for (--chrome). That guarantees a whole
        card always fits on screen, at any window shape.
     2. HOW MANY ARE VISIBLE comes from capping the carousel's own width
        to N cards + a fraction. Three-and-a-bit is therefore the
        composition at every desktop size — wide monitors gain margin
        rather than a fourth card, so the rhythm holds. */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --gap: clamp(16px, 2vw, 34px);
  --ratio: 1.5;                 /* 2:3 portrait */
  --chrome: 24rem;              /* paddings + header + gaps + metadata */
  --card-w: min(calc((100svh - var(--chrome)) / var(--ratio)), 30vw);
  --visible: 3.38;              /* three cards and a deliberate sliver */
  --gaps: 3;                    /* gaps inside that span (no ceil(): not
                                   supported everywhere, and a dropped
                                   declaration silently uncaps the count) */

  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(1rem, 3vh, 2.25rem);
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: clamp(4.5rem, 11vh, 7rem) clamp(2rem, 6vh, 4rem);
  background: var(--ground);
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Header — strong, but deliberately not viewport-consuming
   -------------------------------------------------------------------------- */

.collection__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-inline: var(--pad);
  padding-block-end: clamp(.6rem, 1.6vh, 1.1rem);
  border-block-end: 1px solid rgb(194 169 89 / .18);
}

.collection__heading { display: grid; gap: .4rem; }

.collection__title {
  margin: 0;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.01em;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  color: var(--text-strong);
}
.collection__title .split-line { overflow: clip; }

.collection__sub {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--accent-gold);
}

/* --- editorial navigation: thin, muted, no chrome --- */

.collection__nav { display: flex; gap: .35rem; flex: none; }

.collection__arrow {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;               /* ≥44px touch target */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.collection__arrow:hover:not(:disabled) { color: var(--accent-gold-bright); opacity: 1; }
.collection__arrow[data-dir="-1"]:hover:not(:disabled) { transform: translateX(-3px); }
.collection__arrow[data-dir="1"]:hover:not(:disabled)  { transform: translateX(3px); }
.collection__arrow:focus-visible { outline: 1px solid var(--accent-gold-bright); outline-offset: 4px; opacity: 1; }
.collection__arrow:disabled { opacity: .2; cursor: default; }

/* ==========================================================================
   The carousel
   ========================================================================== */

.ccarousel {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* starts on the site's content margin; width caps the visible count */
  margin-inline: var(--pad);
  max-inline-size: calc(var(--visible) * var(--card-w) + var(--gaps) * var(--gap));
  padding-block: 4px;             /* room for the hover lift, never clipped */
}
.ccarousel::-webkit-scrollbar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .ccarousel { cursor: grab; }
  .ccarousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .ccarousel.is-dragging .ccard__media { pointer-events: none; }
}

.ccarousel__track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  /* the carousel box already sits on the content margin */
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   One collection card — image dominant, metadata beneath, one system
   -------------------------------------------------------------------------- */

.ccard {
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto auto;   /* media, then meta — aligned across cards */
  gap: clamp(.7rem, 1.6vh, 1.1rem);
  min-inline-size: 0;
}

.ccard__media {
  inline-size: 100%;
  aspect-ratio: 1 / var(--ratio);  /* reserves height before the image decodes */
  overflow: hidden;
  border: 1px solid rgb(194 169 89 / .16);
  background: var(--ground-raised);
  cursor: pointer;
}
.ccard__media picture { display: contents; }
.ccard__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* object-position is chosen per costume inline — a deliberate focal point */
  transition: transform var(--dur-slower, 700ms) var(--ease-out),
              filter var(--dur-slower, 700ms) var(--ease-out);
}

/* restrained hover: a breath of scale and light, nothing more */
.ccard:hover .ccard__media img,
.ccard:focus-within .ccard__media img {
  transform: scale(1.03);
  filter: brightness(1.06);
}

.ccard__meta { display: grid; justify-items: start; gap: .3rem; }

.ccard__cat {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--text);
  opacity: .55;
}

/* a catalogue number: present, never dominant */
.ccard__no {
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--accent-gold);
  opacity: .9;
}

.ccard__title {
  margin: 0;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.01em;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  color: var(--text-strong);
}

.ccard__cta {
  margin-block-start: .25rem;
  padding: .5rem 1.15rem;
  border: 1px solid rgb(232 223 204 / .4);
  border-radius: var(--r-pill, 9999px);
  background: transparent;
  color: var(--text);
  font-family: system-ui, sans-serif;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.ccard__cta:hover,
.ccard__cta:focus-visible {
  color: var(--ground);
  background: var(--accent-gold);
  border-color: var(--accent-gold);
}
.ccard__cta:focus-visible { outline: 2px solid var(--accent-gold-bright); outline-offset: 3px; }

/* ==========================================================================
   Lightbox — knowledge/animations/04-product-reveal/product-lightbox.md
   ========================================================================== */

.lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  background: transparent; color: var(--text);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgb(20 23 10 / .93); }
.lightbox[open] {
  display: grid;
  place-items: center;
  inset: 0;
  inline-size: 100vw;
  block-size: 100vh;
}
.lightbox__img {
  max-inline-size: min(90vw, 900px);
  max-block-size: 86svh;
  border-radius: var(--r-md, 16px);
  box-shadow: var(--shadow-lg, 0 25px 70px rgb(0 0 0 / .8));
}
.lightbox__caption {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%; translate: -50% 0;
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .85;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid rgb(232 223 204 / .4);
  background: rgb(20 23 10 / .5);
  color: var(--text-strong);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--accent-gold); color: var(--ground); }
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prev  { left: var(--sp-4); top: 50%; translate: 0 -50%; }
.lightbox__next  { right: var(--sp-4); top: 50%; translate: 0 -50%; }

/* ==========================================================================
   Tablet — two cards, third peeking
   ========================================================================== */

@media (max-width: 1100px) {
  .collection {
    --card-w: min(calc((100svh - var(--chrome)) / var(--ratio)), 42vw);
    --visible: 2.35;              /* two cards, third peeking */
    --gaps: 2;
  }
}

/* short windows: a portrait 2:3 card plus a header simply cannot fit, so
   trade some height for a squarer crop rather than shrink to thumbnails */
@media (max-height: 780px) {
  .collection { --ratio: 1.2; --chrome: 19rem; }
}

/* ==========================================================================
   Mobile — one card, next peeking
   ========================================================================== */

@media (max-width: 767px) {
  .collection {
    --chrome: 17rem;
    --card-w: min(calc((100svh - var(--chrome)) / var(--ratio)), 78vw);
    --visible: 1.22;              /* one card, next peeking */
    --gaps: 1;
    --gap: 16px;
  }
  .collection__head { align-items: center; }
  .collection__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .lightbox__prev, .lightbox__next { inline-size: 40px; block-size: 40px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ccarousel { scroll-behavior: auto; }
  .ccard__media img { transition: none; }
  .ccard:hover .ccard__media img,
  .ccard:focus-within .ccard__media img { transform: none; filter: none; }
  .collection__arrow { transition: none; }
  .collection__arrow:hover:not(:disabled) { transform: none; }
}