/* =====================================================================
   NAGHAM — Gift sets  «هدايا لكل مناسبة»
   ---------------------------------------------------------------------
   Follows the collections wall. Its job is to NOT look like another
   wall or a shelf, so it drops the card grammar entirely: a centred
   title, one button, one photograph. No rule under the copy — the
   picture's own shelf line is the only horizontal the section needs.

   Copy and button both sit ABOVE the picture, so the shelf photograph
   closes the section instead of leaving stray controls hanging under
   it.

   What marks it as a different kind of section is the photograph: a
   wall of colour where the shelves either side are sparse bottles on
   white. That is enough, so the page keeps its pure white with no
   tint, panel or border added for the occasion.

   Two files, one per layout — the desktop plate is a two-tier shelf
   (1768×730), the phone plate a three-tier vitrine (922×1328). Each
   simply scales to the width its layout gives it; there is no srcset
   ladder to keep in sync. Both were cut at the plinth base and their
   paper ramped to true #fff, so neither shows an edge against the
   page. The aspect ratios below are locked to those two crops —
   swap a file and its ratio has to move with it, or the boxes
   letterbox.

   Size: the stage stops at 1080px. The desktop plate is 2.4:1, so any
   wider and it eats a laptop viewport whole — 1080 puts it at ~446px,
   the same visual weight as the collections wall above.
   ===================================================================== */

.gifts {
  --gifts-stage: 1080px;
  --gifts-sep-space: clamp(2.9rem, 5.4vw, 6rem);

  padding-block-end: clamp(3rem, 5vw, 4.5rem);   /* top space comes from .sep */
  background: #fff;
  overflow: clip;
}

.gifts__inner {
  inline-size: min(100% - var(--gutter), var(--gifts-stage));
  margin-inline: auto;
  text-align: center;         /* also centres the inline-flex button */
}

/* The signature divider is normally sized to the 1120px container. In
   here it has to end where the photograph ends, or the only two
   horizontals in the section sit 50px apart and read as a mistake. */
.gifts .sep {
  max-inline-size: none;
  padding-inline: 0;

  /* Every other .sep on the page is deliberately top-heavy, which works
     when it follows a shelf that ends flush. The collections wall does
     not: it ends with its own bottom padding and, on phones, a row of
     carousel dots. Stacked on the top-heavy rhythm that left the
     wordmark sitting near the title instead of between the two
     sections — 95px of air above it against 45px below on a phone.
     Equal padding here, and the wall's own bottom padding cancelled
     below, put it in the middle of the gap. */
  padding-block: var(--gifts-sep-space);
}

.colls:has(+ .gifts) { padding-block-end: 0; }

/* ---------------------------------------------------------------
   1. Title
   --------------------------------------------------------------- */
.gifts__title { margin-block-end: clamp(1.2rem, 2.2vw, 1.8rem); }

.gifts__title 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;
}
.gifts__title h2 em { font-style: normal; color: var(--gold); }

.gifts__lead {
  margin: clamp(.6rem, 1.2vw, 1rem) auto 0;
  max-inline-size: 44ch;                 /* keeps the line under 80 chars */
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
   2. Stage — the photograph, one file, scaled by the layout.
   It repeats the button's link so the whole display is tappable;
   it is aria-hidden and out of the tab order, since the button
   already announces the same destination.
   --------------------------------------------------------------- */
.gifts__stage { display: block; }

.gifts__stage img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1768 / 730;              /* desktop plate */
  object-fit: contain;
}

/* ---------------------------------------------------------------
   3. Button — same pill as the hero, between the copy and the goods
   --------------------------------------------------------------- */
.gifts__cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-block-end: clamp(1.9rem, 3.4vw, 3rem);
  padding: .85rem 1.9rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: clamp(.84rem, .8rem + .2vw, .96rem);
  font-weight: 400;
  white-space: nowrap;
  transition: background-color .4s var(--ease-luxe);
}

.gifts__cta:hover { background: var(--gold-deep); }
.gifts__cta:hover .gifts__cta-arrow { translate: -5px 0; }
.gifts__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.gifts__cta-arrow {
  display: grid;
  place-items: center;
  transition: translate .45s var(--ease-out-expo);
}
.gifts__cta-arrow svg { inline-size: 16px; block-size: 16px; }

/* ---------------------------------------------------------------
   4. Phone — the tall vitrine plate takes over
   --------------------------------------------------------------- */
@media (max-width: 720px) {
  .gifts__inner { inline-size: min(100% - 2rem, 460px); }
  .gifts__stage img { aspect-ratio: 922 / 1328; }   /* phone plate */
}

@media (prefers-reduced-motion: reduce) {
  .gifts__cta,
  .gifts__cta-arrow { transition: none; }
}