/* ==========================================================================
   GÜROL KUYUMCULUK — COLLECTION PAGE SYSTEM
   Loaded only by koleksiyon-*.html pages, after style.css. Every rule
   here is namespaced under .collection-* so nothing can collide with or
   override homepage selectors — style.css itself is never touched.
   Reuses the same design tokens (colors, fonts, spacing, easing) defined
   in style.css's :root; no new palette, no new fonts, no new spacing
   scale. Every section below is the correct resting/no-JS state on its
   own — collection-page.js only ever adds a temporary reveal on top of
   content it renders; nothing is hidden unless JS is already running.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SHARED
   -------------------------------------------------------------------------- */
/* Visually hidden but present for assistive tech — used for the one
   section heading that has no visible on-page heading text of its own
   (the product grid), so the H1 -> H2 -> H3 structure stays valid
   without inserting a visible heading the approved design doesn't call
   for. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.collection-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(198, 164, 71, 0.8);
}

/* Nav active-state, additive to the existing .site-nav__link rule in
   style.css — a restrained permanent underline, the same technique
   style.css already uses for hover states elsewhere (background-image
   line, never a pill/border/fill). */
.site-nav__link.is-active {
  color: var(--color-ivory);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   1. COLLECTION HERO — EDITORIAL COVER
   One immersive photograph, full-bleed, nothing else — no split, no
   panel, no box. Type sits directly over the image's own negative
   space (never over the jewelry), protected by one soft, localized
   radial scrim confined to the text's own area — not a banner, not a
   full-image gradient. Composition (crop + scrim + text position) is
   deliberately different per breakpoint; see the responsive tiers below.
   -------------------------------------------------------------------------- */
.collection-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--color-obsidian);
}

.collection-hero__media {
  position: absolute;
  inset: 0;
}

.collection-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desktop: subject sits in the left ~60% of the source photo, so the
     text zone below (60% -> edge) reads against clear background. */
  object-position: 30% 40%;
}

.collection-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Soft radial fade confined to where the text sits — not a band
     across the whole photograph. */
  background: radial-gradient(ellipse 42% 55% at 82% 52%, rgba(10, 9, 8, 0.4) 0%, rgba(10, 9, 8, 0) 72%);
}

.collection-hero__content {
  position: absolute;
  z-index: 2;
  left: 60%;
  right: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
}

.collection-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 6vw, 108px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--color-ivory);
  max-width: 100%;
}

/* Applied automatically by collection-page.js for titles too long to sit
   comfortably at the default scale in a single line (e.g. BİLEKLİKLER vs.
   YÜZÜKLER) — see the titleSize / auto-length check in renderHero(). Same
   typeface, same weight, same editorial intent, just a lower clamp
   ceiling so the word has room to breathe instead of overflowing its
   column. Only wins the cascade where no later, more specific tier rule
   (tablet-portrait/mobile below) already sets font-size for this
   viewport — those tiers are wide relative to their own type scale and
   don't need a separate long-title reduction. */
.collection-hero__title--long {
  font-size: clamp(44px, 5vw, 90px);
}

.collection-hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.7vw, 28px);
  line-height: 1.3;
  color: rgba(242, 238, 229, 0.82);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   1b. COLLECTION HERO — PER-COLLECTION COMPOSITION OVERRIDES
   Same mechanism as above (one photograph, one soft localized scrim, type
   in the image's own negative space) — only the crop, scrim position and
   text-zone side change, because each collection's source photograph
   places its clear space somewhere different. Applies at any landscape
   viewport >= 768px; tablet-portrait/mobile keep the shared bottom-
   anchored treatment from sections 10/11 below and only get their own
   object-position tweak there.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 768px) {
  /* Safe to keep every hero title on one line at this tier: the text
     column widths below (and the ring's own ~40%-of-viewport right-side
     zone) are sized to fit the longest current title (BİLEKLİKLER) at
     .collection-hero__title--long's clamp ceiling, so nowrap never
     reintroduces the overflow this rule set fixes. overflow-wrap stays
     the browser default (kept explicit as a documented safety net) —
     it's the width/font-size pairing below doing the actual work. */
  .collection-hero__title {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  /* Kolyeler: the dark dress fabric in the source photo's lower-left is
     the clear zone — the ring hero's right-side zone would sit across
     the pendant on this photograph. */
  [data-collection-slug="kolyeler"] .collection-hero__image {
    object-position: 58% 42%;
  }

  [data-collection-slug="kolyeler"] .collection-hero__scrim {
    background: radial-gradient(ellipse 44% 52% at 18% 76%, rgba(10, 9, 8, 0.45) 0%, rgba(10, 9, 8, 0) 72%);
  }

  [data-collection-slug="kolyeler"] .collection-hero__content {
    /* max() with a vw floor (not just --container-pad, which flattens to
       a fixed 80px past ~2000px wide) keeps a real ~5.5vw safe margin at
       every desktop width, not just the ones this was eyeballed against. */
    left: max(var(--container-pad), 5.5vw);
    right: auto;
    top: auto;
    bottom: clamp(64px, 10vh, 104px);
    transform: none;
    /* A fluid width, not a fixed ch value — ch is relative to this
       element's own (inherited, body-scale) font, not the title's
       actual display-face size, so a ch cap here doesn't track the
       title's real rendered width and was overflowing on long titles.
       min() keeps a sane ceiling on very wide viewports. */
    width: min(50vw, 660px);
    max-width: calc(100vw - 2 * var(--container-pad));
  }

  /* Bileklikler: a busier composition than the other two — its only real
     negative space is a small patch in the lower-right. */
  [data-collection-slug="bileklikler"] .collection-hero__image {
    object-position: 45% 38%;
  }

  [data-collection-slug="bileklikler"] .collection-hero__scrim {
    background: radial-gradient(ellipse 46% 54% at 84% 80%, rgba(10, 9, 8, 0.5) 0%, rgba(10, 9, 8, 0) 70%);
  }

  [data-collection-slug="bileklikler"] .collection-hero__content {
    left: auto;
    right: max(var(--container-pad), 5.5vw);
    top: auto;
    bottom: clamp(64px, 10vh, 104px);
    transform: none;
    width: min(50vw, 660px);
    max-width: calc(100vw - 2 * var(--container-pad));
  }
}

/* --------------------------------------------------------------------------
   2. COLLECTION INTRODUCTION
   Quiet, generous, no container — a single constrained paragraph.
   -------------------------------------------------------------------------- */
.collection-intro {
  padding-block: clamp(88px, 13vh, 160px);
  padding-inline: var(--container-pad);
}

.collection-intro__text {
  max-width: 620px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.55;
  color: rgba(242, 238, 229, 0.88);
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. FILTER
   Refined text navigation, not buttons-as-pills. Active/hover state reuses
   the same background-image underline technique as .site-footer__nav-link
   in style.css — deliberately the same interaction language, not a new one.
   -------------------------------------------------------------------------- */
.collection-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 40px);
  padding-inline: var(--container-pad);
  padding-bottom: clamp(56px, 7vh, 96px);
}

.collection-filter__button {
  font-family: var(--font-body);
  font-size: clamp(10.5px, 0.8vw, 12px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.55);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-out-soft), color 0.4s ease;
}

.collection-filter__button:hover,
.collection-filter__button:focus-visible {
  color: rgba(242, 238, 229, 0.85);
  background-size: 100% 1px;
}

.collection-filter__button.is-active {
  color: var(--color-gold);
  background-size: 100% 1px;
}

.collection-filter__button:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   4/6. PRODUCT GRID
   No card box, no border, no radius — just image, name, restrained
   metadata. A stable 4:5 ratio on every card prevents layout shift as
   images load.
   -------------------------------------------------------------------------- */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 56px) clamp(24px, 2.6vw, 44px);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: clamp(24px, 3vh, 48px);
}

.collection-product__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(242, 238, 229, 0.03);
}

.collection-product__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-soft);
}

.collection-product:hover .collection-product__image,
.collection-product:focus-within .collection-product__image {
  transform: scale(1.035);
}

.collection-product__meta {
  margin-top: clamp(14px, 1.6vw, 20px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.collection-product__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.2vw, 20px);
  color: rgba(242, 238, 229, 0.9);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out-soft);
}

.collection-product:hover .collection-product__name,
.collection-product:focus-within .collection-product__name {
  opacity: 0.7;
  transform: translateY(-2px);
}

.collection-product__code {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(242, 238, 229, 0.35);
}

.collection-product__category {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: clamp(9.5px, 0.72vw, 10.5px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(198, 164, 71, 0.75);
}

.collection-product__material {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: clamp(11px, 0.8vw, 12.5px);
  color: rgba(170, 167, 160, 0.75);
}

/* Filtered-out products: hidden from layout and assistive tech. JS
   toggles this via a restrained fade+scale rather than an instant
   display:none where motion is allowed (see collection-page.js). */
.collection-product[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   5. EDITORIAL BREAK
   Image-led, no overlay, no CTA. A short caption sits below the
   photograph on the page's own dark background rather than over it, so
   the image never needs a scrim to protect text contrast.
   -------------------------------------------------------------------------- */
.collection-break {
  padding-block: clamp(56px, 8vh, 104px);
  padding-inline: var(--container-pad);
}

.collection-break__media {
  max-width: 1400px;
  margin-inline: auto;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.collection-break__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-break__text {
  margin-top: clamp(20px, 2.4vw, 28px);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 21px);
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   7. EDITORIAL INTERRUPTION
   One image, full-bleed, tall and immersive — the photograph IS the
   section. Deliberately edge-to-edge and taller than the Editorial
   Break strip in section 5 so the two don't read as the same gesture
   repeated; this one is the page's single largest pause.
   -------------------------------------------------------------------------- */
.collection-editorial {
  position: relative;
  height: 85vh;
  max-height: 900px;
  margin-block: clamp(56px, 8vh, 104px);
  overflow: hidden;
}

.collection-editorial__media {
  width: 100%;
  height: 100%;
}

.collection-editorial__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. RELATED COLLECTIONS
   Large typographic links, not promotional cards. Hover reveals a
   restrained directional arrow shift — no button, no fill.
   -------------------------------------------------------------------------- */
.collection-related {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: clamp(64px, 9vh, 120px);
  border-top: 1px solid rgba(198, 164, 71, 0.2);
}

.collection-related__eyebrow {
  margin-bottom: clamp(32px, 4vh, 56px);
}

.collection-related__list {
  display: flex;
  flex-direction: column;
}

.collection-related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(20px, 2.6vh, 32px);
  border-bottom: 1px solid rgba(198, 164, 71, 0.2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 56px);
  color: rgba(242, 238, 229, 0.85);
  transition: color 0.4s ease;
}

.collection-related__link:hover,
.collection-related__link:focus-visible {
  color: var(--color-ivory);
}

.collection-related__link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 6px;
}

.collection-related__arrow {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 24px);
  color: var(--color-gold);
  transition: transform 0.5s var(--ease-out-soft);
}

.collection-related__link:hover .collection-related__arrow,
.collection-related__link:focus-visible .collection-related__arrow {
  transform: translateX(8px);
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE — TABLET LANDSCAPE (768px – 1023px, landscape)
   Keep the hero split, narrow its proportions; grid drops to 2 columns.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .collection-hero__image {
    object-position: 34% 38%;
  }

  .collection-hero__content {
    left: 54%;
  }

  .collection-hero__title {
    font-size: clamp(40px, 6.4vw, 64px);
  }

  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-editorial {
    height: 72vh;
  }
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE — TABLET PORTRAIT (max-width: 1439px, portrait)
   Its own composition, not the desktop cover shrunk: the crop moves the
   subject higher in frame, the type moves to the bottom third over a
   bottom-anchored scrim instead of the desktop's right-side zone —
   still one photograph, still no box, no split. Grid becomes 2 columns.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) and (orientation: portrait) {
  .site-nav__links {
    display: none;
  }

  .menu-trigger {
    display: flex;
  }

  .collection-hero__image {
    object-position: 42% 22%;
  }

  [data-collection-slug="kolyeler"] .collection-hero__image {
    object-position: 55% 20%;
  }

  [data-collection-slug="bileklikler"] .collection-hero__image {
    object-position: 48% 20%;
  }

  .collection-hero__scrim {
    background: linear-gradient(to top, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0) 42%);
  }

  .collection-hero__content {
    left: var(--container-pad);
    right: var(--container-pad);
    top: auto;
    bottom: clamp(56px, 9vh, 96px);
    transform: none;
  }

  .collection-hero__title {
    font-size: clamp(42px, 9vw, 64px);
  }

  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-editorial {
    height: 64vh;
  }
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE — MOBILE (below 768px)
   Single column throughout — cards stay large and legible rather than
   cramped. Filter scrolls horizontally instead of wrapping into tiny
   multi-line text. Related collections keep full-width tap targets.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-nav__links {
    display: none;
  }

  .menu-trigger {
    display: flex;
  }

  .collection-hero {
    height: 100dvh;
  }

  .collection-hero__image {
    object-position: 46% 18%;
  }

  [data-collection-slug="kolyeler"] .collection-hero__image {
    object-position: 58% 16%;
  }

  [data-collection-slug="bileklikler"] .collection-hero__image {
    object-position: 50% 16%;
  }

  .collection-hero__scrim {
    background: linear-gradient(to top, rgba(10, 9, 8, 0.6) 0%, rgba(10, 9, 8, 0) 48%);
  }

  .collection-hero__content {
    left: var(--container-pad);
    right: var(--container-pad);
    top: auto;
    bottom: clamp(40px, 7vh, 64px);
    transform: none;
    gap: 12px;
  }

  .collection-hero__title {
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1.02;
  }

  .collection-hero__subtitle {
    font-size: clamp(16px, 4.6vw, 20px);
    max-width: none;
  }

  .collection-intro {
    padding-block: clamp(56px, 10vh, 88px);
  }

  .collection-intro__text {
    font-size: clamp(18px, 5vw, 22px);
    text-align: left;
  }

  .collection-filter {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 24px;
    padding-bottom: 40px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .collection-filter::-webkit-scrollbar {
    display: none;
  }

  .collection-filter__button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .collection-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .collection-break__media {
    aspect-ratio: 4 / 5;
  }

  .collection-editorial {
    height: 52vh;
    margin-block: clamp(40px, 7vh, 64px);
  }

  .collection-related__link {
    font-size: clamp(26px, 8vw, 34px);
    padding-block: 20px;
  }
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .collection-product__image,
  .collection-product__name,
  .collection-related__arrow {
    transition: none;
  }
}