/* =====================================================================
   NAGHAM — Collections  «اختر عالمك العطري»   ·  v3 "خط اللوحات"
   ---------------------------------------------------------------------
   Direction: an open gallery wall — no cards, no panels, no tint. Three
   frames standing on the white page with a single gold rail running
   under them and the labels hanging off it, museum-plate style.

   The photography does the heavy lifting, so it was rebuilt first
   (see the pipeline note in HERO-NOTES / the build step):

   · The three source frames were NOT shot on one rig. The men's shelves
     sat 26px higher than the women's and its shelf-to-shelf gap was 14px
     wider, so standing them in a row left the shelves visibly stepped.
     The men's frame is scaled vertically by .9722 and offset 44px, which
     lands BOTH its shelf lips within 1px of the other two. That single
     line across the row is what makes the section read as one wall — it
     is the whole idea, so the locked aspect-ratio below is not free.
   · All three are cropped identically to 1082×1180, which cuts the dead
     sky off the top and the margins off the sides. The bottles are now
     ~40% larger in frame than before at the same column width.
   · The paper is ramped to true #fff above 236 luma, so the frames have
     no edge at all against the page — only bottles and shelves.

   Everything drawn here is structure, not an imitation of the
   photograph: it can be perfectly crisp without pretending to be part
   of the picture.
   ===================================================================== */

.colls {
  /* the grid gap, needed by the rail so it can bridge the columns */
  --coll-gap: clamp(1.25rem, 2.6vw, 2.4rem);
  --rail: color-mix(in srgb, var(--gold) 42%, transparent);

  padding-block: 0 clamp(2.25rem, 3.6vw, 3rem);   /* top space comes from .sep */
  padding-inline: var(--gutter);
  background: #fff;
  overflow: clip;
}

.colls__inner {
  max-inline-size: 1120px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   1. Header — centred, with a small ornament rule. Deliberately
   quiet: the photography is the loud part.
   --------------------------------------------------------------- */
.colls__head {
  text-align: center;
  margin-block-end: clamp(1.75rem, 3.2vw, 2.75rem);
}

.colls__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.95rem, 4vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.colls__head h2 em { font-style: normal; color: var(--gold); }

/* ---------------------------------------------------------------
   2. The wall
   --------------------------------------------------------------- */
.colls__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--coll-gap);
}

.coll {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .5s var(--ease-luxe);
}

.coll:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 4px; }

/* ---- 2a. stage — ratio is locked to the crop ---------------------- */
.coll__stage {
  aspect-ratio: 1082 / 1180;
  overflow: hidden;
}
.coll__stage img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 100%;    /* grows up off the shelf, never through it */
  transition: transform .9s var(--ease-luxe), filter .6s var(--ease-luxe);
}
@media (hover: hover) {
  .coll:hover .coll__stage img { transform: scale(1.045); filter: contrast(1.03); }
}

/* ---- 2b. caption — museum plate, centred under the rail ----------- */
.coll__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block-start: clamp(1.7rem, 2.8vw, 2.4rem);
}

/* THE RAIL. Each column draws its own segment and overshoots by half a
   gap on both sides, so the segments meet in the gaps and read as one
   continuous line — no measuring, and it survives any column width.
   The outer ends fade instead of stopping dead. dir is fixed RTL here,
   so the first card is the rightmost one. */
.coll__body::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--coll-gap) / -2);
  block-size: 1px;
  background: var(--rail);
  transition: background-color .5s var(--ease-luxe);
}
.coll:first-child .coll__body::before {          /* fades off to the right */
  background: linear-gradient(to left, transparent, var(--rail) 16%, var(--rail));
}
.coll:last-child .coll__body::before {           /* fades off to the left */
  background: linear-gradient(to right, transparent, var(--rail) 16%, var(--rail));
}
@media (hover: hover) {
  .coll:hover .coll__body::before { background: var(--gold); }
}

/* The divider between one plate and the next. It runs the full depth of
   the caption so it reads as a real column edge rather than a tick mark,
   and fades out at the bottom so it doesn't collide with the page. */
.coll__rule {
  position: absolute;
  inset-block: 0 .35rem;
  inset-inline-start: calc(var(--coll-gap) / -2);
  inline-size: 1px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--gold) 52%, transparent),
              color-mix(in srgb, var(--gold) 34%, transparent) 62%,
              transparent);
}
.coll:first-child .coll__rule { display: none; }

/* index — straddles the rail and punches a white gap through it */
.coll__index {
  position: relative;
  margin-block-start: calc(-1 * clamp(1.7rem, 2.8vw, 2.4rem) - .5em);
  margin-block-end: clamp(1rem, 1.8vw, 1.5rem);
  padding-inline: 1.15rem;
  background: #fff;
  font: 400 clamp(.78rem, .95vw, .9rem)/1 var(--font-en);
  letter-spacing: .24em;
  color: color-mix(in srgb, var(--gold-deep) 72%, transparent);
  transition: color .45s var(--ease-luxe);
}
.coll:hover .coll__index { color: var(--gold-deep); }

.coll__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.22;
  transition: color .45s var(--ease-luxe);
}
.coll:hover .coll__title { color: var(--gold-deep); }

/* The plate's one action. With the eyebrow and the sub-line gone this
   is the only clickable-looking thing under the title, so it is drawn
   as a proper pill: hairline gold at rest, filled gold on hover, with a
   soft gold glow so it lifts off a page that is otherwise all white. */
.coll__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-block-start: clamp(1rem, 1.8vw, 1.4rem);
  padding: .78rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 999px;
  overflow: hidden;
  font: 600 .89rem/1 var(--font-ar);
  color: var(--gold-deep);
  isolation: isolate;
  transition: color .45s var(--ease-luxe),
              border-color .45s var(--ease-luxe),
              box-shadow .45s var(--ease-luxe);
}

/* the gold fill, wiped in from the start edge rather than faded — a
   wipe reads as deliberate, a fade reads as a hover state that slipped */
.coll__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, var(--gold-deep), var(--gold));
  transform-origin: right;      /* RTL: starts at the start edge */
  scale: 0 1;
  transition: scale .55s var(--ease-luxe);
}

.coll__cta svg {
  inline-size: .95rem; block-size: .95rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease-luxe);
}

@media (hover: hover) {
  .coll:hover .coll__cta {
    color: #fff;
    border-color: var(--gold-deep);
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--gold-deep) 75%, transparent);
  }
  .coll:hover .coll__cta::before { scale: 1 1; }
  .coll:hover .coll__cta svg { transform: translateX(-5px); }   /* RTL: ← */
}

/* ---------------------------------------------------------------
   3. Reveal — class names unchanged, main.js still drives this
   --------------------------------------------------------------- */
.colls.is-ready .coll {
  opacity: 0;
  translate: 0 20px;
  transition: opacity .8s var(--ease-luxe) calc(var(--i, 0) * 120ms),
              translate .8s var(--ease-luxe) calc(var(--i, 0) * 120ms);
}
.colls.is-ready.is-visible .coll { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------------
   4. Responsive
   --------------------------------------------------------------- */
/* dots — desktop hides them, the phone block below turns them on */
.colls__dots { display: none; }

@media (max-width: 700px) {
  /* Phones only. A tablet is wide enough to hold the real three-column
     wall — at 820px each frame is still ~220px, which reads fine, and
     the carousel there blew one frame up to 700px and made the section
     1050px tall. Below 700px the columns get too narrow for the bottles,
     so the carousel takes over.

     Stacked, the three frames are ~1300px of scroll. A snap carousel
     keeps it to one screen — but the desktop drawing has to change with
     it: the rail and the dividers exist to tie three ADJACENT columns
     together, and mid-swipe they were reaching out into cut-off
     neighbours and reading as broken lines. So on a phone each frame
     becomes self-contained: its own rail, fading at both ends, and no
     divider at all. */
  .colls__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86vw;
    gap: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    /* vw units, not %, so the peek can't depend on the padding it sets */
    padding-inline: 7vw;
  }
  .colls__grid::-webkit-scrollbar { display: none; }
  .coll { scroll-snap-align: center; }

  .coll__rule { display: none; }

  .coll__body::before,
  .coll:first-child .coll__body::before,
  .coll:last-child .coll__body::before {
    inset-inline: 0;
    background: linear-gradient(90deg,
                transparent,
                var(--rail) 14%, var(--rail) 86%,
                transparent);
  }

  /* dots */
  .colls__dots {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-block-start: clamp(1.4rem, 5vw, 2rem);
  }
  .colls__dots button {
    inline-size: 6px;
    block-size: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 28%, transparent);
    cursor: pointer;
    transition: inline-size .45s var(--ease-luxe),
                background-color .45s var(--ease-luxe);
  }
  .colls__dots button[aria-selected="true"] {
    inline-size: 20px;
    background: var(--gold);
  }
}

@media (max-width: 560px) {
  .colls { padding-inline: 1.15rem; }
  .colls__grid { grid-auto-columns: 88vw; padding-inline: 6vw; }
}

/* No pointer → no hover to reveal the fill, so the pill is shown solid. */
@media (hover: none) {
  .coll__cta { color: #fff; border-color: var(--gold-deep); }
  .coll__cta::before { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .coll__cta, .coll__cta::before, .coll__cta svg, .coll__stage img,
  .colls.is-ready .coll { transition-duration: .01ms; }
}


/* =====================================================================
   Section separator — brands ⟶ collections
   The wordmark between two hairlines that fade to nothing at their outer
   ends. Turning the divider into the brand name means the space between
   two sections carries a signature instead of an ornament.
   Aligned to the collections container (1120px) so the rules end where
   the frames below them begin.
   ===================================================================== */
.sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, 2.4vw, 1.6rem);
  max-inline-size: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* The divider owns all the space around itself — the sections it
     separates contribute nothing on that side. That way the gap reads
     the same everywhere the signature appears, instead of being the
     sum of whatever two neighbours happened to have. */
  padding-block: clamp(4.5rem, 8vw, 9rem) clamp(3rem, 5.5vw, 6.25rem);
  background: #fff;
}

.sep i {
  flex: 1;
  block-size: 1.5px;
  border-radius: 2px;
  /* each rule is solid gold at the wordmark and dissolves outward */
  background: linear-gradient(90deg,
              transparent,
              color-mix(in srgb, var(--gold) 30%, transparent) 40%,
              var(--gold));
}
.sep i:last-child { transform: scaleX(-1); }

.sep span {
  flex: none;
  font: 500 clamp(.76rem, 1.05vw, .9rem)/1 var(--font-en);
  letter-spacing: .34em;
  text-indent: .34em;         /* letter-spacing pads the last glyph; this re-centres it */
  white-space: nowrap;
  color: var(--gold-deep);
}

.sep--shelf { background: none; }

@media (max-width: 480px) {
  .sep span { letter-spacing: .22em; text-indent: .22em; font-size: .7rem; }
  /* Phones don't need the full desktop breathing room, but the ratio
     between the space above and below stays the same. */
  .sep { padding-block: 3.4rem 2.4rem; }
}