/* ==========================================================================
   VIR KANYA JEWELS — Collection page
   Layered on css/style.css. Uses only the tokens declared there, so the
   page inherits the house palette, type scale and easing curves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Masthead
   -------------------------------------------------------------------------- */
.coll-hero{
  position:relative;isolation:isolate;
  padding-block:clamp(66px,10vw,132px);
  background:var(--grad-plum);
  color:rgba(255,255,255,.68);
  overflow:hidden;
}

/* The photograph sits far back — it gives the plum some depth without ever
   competing with the type in front of it. */
.coll-hero__bg{
  position:absolute;inset:0;z-index:-2;
}
.coll-hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  opacity:.86;
  filter:saturate(.9);
  transform:scale(1.06);
}
/* The veil is pooled behind the type and thins out towards the edges, so the
   photograph reads at full strength where there is nothing on top of it.
   Tuned for a mid-tone banner: enough to hold white type over skin and pale
   fabric, not so much that the ring goes flat. */
.coll-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(192,176,120,.18) 0%,transparent 58%),
    radial-gradient(78% 72% at 50% 54%,rgba(30,5,25,.6) 0%,rgba(30,5,25,.2) 100%),
    linear-gradient(180deg,rgba(43,8,39,.32) 0%,rgba(43,8,39,.24) 48%,rgba(30,5,25,.58) 100%);
}

/* A hairline gold frame, drawn in from the corners on load. */
.coll-hero__frame{
  position:absolute;inset:clamp(14px,2vw,30px);z-index:0;pointer-events:none;
  border:1px solid rgba(210,186,131,.26);
}
.coll-hero__frame::before,
.coll-hero__frame::after{
  content:"";position:absolute;width:clamp(28px,4vw,62px);height:clamp(28px,4vw,62px);
  border:1px solid var(--gold-400);opacity:.72;
}
.coll-hero__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.coll-hero__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* A soft shadow keeps the type crisp now that the photograph behind it is
   carrying more detail. */
.coll-hero__inner{
  position:relative;z-index:1;text-align:center;
  text-shadow:0 2px 22px rgba(20,3,17,.6);
}

.crumb{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(241,230,198,.5);
}
.crumb a{transition:color var(--t-fast) var(--ease)}
.crumb a:hover{color:var(--gold-300)}
.crumb span{color:var(--gold-600)}
.crumb b{font-weight:400;color:rgba(255,255,255,.82)}

/* .eyebrow is inline-flex, so the centred parent already centres it. */
.coll-hero .eyebrow{margin-top:1.9rem}

.coll-hero h1{
  margin-top:1rem;
  font-size:clamp(2.9rem,7vw,5.6rem);
  color:#fff;
  line-height:1.02;
}
/* --------------------------------------------------------------------------
   2. Filter / sort bar
   -------------------------------------------------------------------------- */
.coll-bar{
  position:sticky;top:74px;z-index:700;
  background:rgba(252,250,247,.9);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.coll-bar__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.4rem;
  padding-block:.9rem;
}

/* Horizontal scroll on small screens beats wrapping into three ragged rows. */
.coll-bar .filters{
  margin-top:0;flex-wrap:nowrap;
  /* min-width:0 lets the strip shrink inside the flex row rather than
     pushing the sort control off the end of the bar. */
  flex:1 1 auto;min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-block:2px;
}
.coll-bar .filters::-webkit-scrollbar{display:none}
.coll-bar .filter{flex:0 0 auto;border-radius:999px}

.coll-tools{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.coll-count{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.coll-count b{
  font-family:var(--font-display);font-size:1.05rem;font-weight:500;
  letter-spacing:0;color:var(--plum-700);
}
.coll-sort{position:relative;display:flex;align-items:center}
.coll-sort select{
  appearance:none;-webkit-appearance:none;
  padding:.7em 2.5em .7em 1.2em;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line);border-radius:999px;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease);
}
.coll-sort select:hover{border-color:var(--line-gold)}
.coll-sort svg{
  position:absolute;right:1.05em;width:11px;height:11px;
  pointer-events:none;color:var(--gold-700);
}

/* --------------------------------------------------------------------------
   3. The gallery
   -------------------------------------------------------------------------- */
.gallery{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.2rem,3.4vw,3.4rem) clamp(1.2rem,2.2vw,2rem);
  margin-top:clamp(2.6rem,4.5vw,4rem);
}
@media (min-width:600px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .gallery{grid-template-columns:repeat(3,1fr)} }

.gallery .card{position:relative;display:flex;flex-direction:column}
/* Scoped above the generic [data-reveal] rule so the stagger from main.js
   drives this transition rather than the shared one. */
.js .gallery .card{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
}
.js .gallery .card.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .gallery .card{opacity:1 !important;transform:none !important}
}

/* --- the frame ------------------------------------------------------------ */
.piece__media{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:4/5;
  background:var(--plum-950);
  cursor:zoom-in;
}
.piece__media img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
  transform:scale(var(--z,1));
  transition:transform 1.4s var(--ease-out),filter .8s var(--ease);
}
.card:hover .piece__media img,
.piece__media:focus-visible img{
  transform:scale(calc(var(--z,1) * 1.055));
  filter:brightness(1.04) saturate(1.03);
}

/* Veil — keeps the corner index and the hover bar legible over any photo. */
.piece__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,3,17,.3) 0%,transparent 26%,transparent 62%,rgba(20,3,17,.5) 100%);
  opacity:.72;
  transition:opacity .6s var(--ease);
}
.card:hover .piece__media::after{opacity:.94}

/* Gold hairline that draws itself in on hover. */
.piece__rule{
  position:absolute;inset:12px;z-index:2;pointer-events:none;
  border:1px solid rgba(241,230,198,.62);
  opacity:0;transform:scale(1.035);
  transition:opacity .6s var(--ease),transform .8s var(--ease-out);
}
.card:hover .piece__rule,
.piece__media:focus-visible .piece__rule{opacity:1;transform:none}

.piece__no{
  position:absolute;top:14px;left:16px;z-index:3;
  font-family:var(--font-display);font-size:.9rem;letter-spacing:.12em;
  color:rgba(255,255,255,.72);
  text-shadow:0 2px 12px rgba(20,3,17,.6);
}

.piece__view{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95em 1em;
  font-family:var(--font-body);
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--plum-950);
  background:var(--grad-gold-soft);
  transform:translateY(101%);
  transition:transform .6s var(--ease-out);
}
.piece__view svg{width:13px;height:13px}
.card:hover .piece__view,
.piece__media:focus-visible .piece__view{transform:none}

/* The wishlist button is inherited from style.css; only its resting state
   needs nudging so it clears the index numeral. */
.gallery .card__wish{top:12px;right:12px}

/* --- the caption ---------------------------------------------------------- */
.piece__body{
  display:flex;flex-direction:column;gap:.5rem;flex:1;
  padding:1.35rem .2rem 0;
}
.piece__cat{
  font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-700);
}
.piece__name{
  font-size:clamp(1.2rem,1.5vw,1.42rem);line-height:1.28;
  transition:color var(--t-fast) var(--ease);
}
.card:hover .piece__name{color:var(--plum-700)}
.piece__meta{font-size:.86rem;line-height:1.72;color:var(--muted)}
.piece__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:auto;padding-top:.95rem;
  border-top:1px solid var(--line);
}
.piece__price{
  font-family:var(--font-display);font-size:1.02rem;font-style:italic;
  color:var(--plum-700);
}
.piece__enq{
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
  transition:color var(--t-fast) var(--ease);
}
.piece__enq:hover{color:var(--gold-700)}

/* --- empty state / more --------------------------------------------------- */
.gallery__empty{
  grid-column:1/-1;text-align:center;padding:clamp(3rem,7vw,5.5rem) 1rem;
}
.gallery__empty p{color:var(--muted)}
.gallery__empty h3{margin-bottom:.7rem}

/* --------------------------------------------------------------------------
   4. Signature band
   -------------------------------------------------------------------------- */
.signature{
  display:grid;gap:clamp(2rem,4vw,3.6rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){ .signature{grid-template-columns:.9fr 1.1fr} }

.signature__notes{display:grid;gap:1.6rem;margin-top:2.2rem}
.signature__note{display:flex;gap:1.1rem}
.signature__note svg{width:19px;height:19px;flex:0 0 auto;margin-top:5px;color:var(--gold-500)}
.signature__note h4{color:#fff;margin-bottom:.35rem}
.signature__note p{font-size:.9rem;line-height:1.8;color:rgba(255,255,255,.58)}

/* A three-up stack of stills, offset so it reads as a hand-laid arrangement. */
.signature__stack{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px);
}
.signature__stack figure{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;
  background:var(--plum-950);
  border:1px solid rgba(210,186,131,.22);
}
.signature__stack figure:nth-child(1){transform:translateY(clamp(10px,2vw,26px))}
.signature__stack figure:nth-child(3){transform:translateY(clamp(-26px,-2vw,-10px))}
.signature__stack img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out);
}
.signature__stack figure:hover img{transform:scale(1.06)}

/* --------------------------------------------------------------------------
   5. Closing call to action
   -------------------------------------------------------------------------- */
.viewing{text-align:center}
.viewing h2{margin-top:.8rem}
.viewing p{max-width:54ch;margin:1.3rem auto 0;color:var(--muted)}
.viewing__acts{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;
  margin-top:2.4rem;
}

/* --------------------------------------------------------------------------
   6. Lightbox
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:1200;
  display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__veil{
  position:absolute;inset:0;
  background:rgba(24,4,20,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.lightbox__bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(14px,2vw,24px) clamp(16px,3vw,34px);
  color:rgba(255,255,255,.6);
}
.lightbox__idx{
  font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;
  color:rgba(255,255,255,.78);
}
.lightbox__idx em{font-style:normal;color:var(--gold-500)}
.lightbox__close{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.16);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.lightbox__close svg{width:17px;height:17px}
.lightbox__close:hover{background:var(--grad-gold-soft);color:var(--plum-950);border-color:transparent;transform:rotate(90deg)}

/* The image is a direct grid item of a row sized 1fr, which is what lets
   max-height:100% resolve — an intermediate <figure> of indefinite height
   would leave the percentage with nothing to measure against. */
.lightbox__stage{
  position:relative;z-index:2;
  display:grid;place-items:center;
  padding-inline:clamp(16px,7vw,90px);
  min-height:0;overflow:hidden;
}
.lightbox__img{
  max-width:min(100%,780px);max-height:100%;
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9);
  opacity:0;transform:scale(.985);
  transition:opacity .5s var(--ease),transform .7s var(--ease-out);
}
.lightbox.is-ready .lightbox__img{opacity:1;transform:none}

.lightbox__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:clamp(42px,4vw,54px);height:clamp(42px,4vw,54px);
  display:grid;place-items:center;border-radius:50%;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(30,5,25,.4);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.lightbox__nav svg{width:18px;height:18px}
.lightbox__nav:hover{background:var(--grad-gold-soft);color:var(--plum-950);border-color:transparent}
.lightbox__nav--prev{left:clamp(8px,2vw,26px)}
.lightbox__nav--next{right:clamp(8px,2vw,26px)}

.lightbox__cap{
  position:relative;z-index:2;
  padding:clamp(16px,2.4vw,30px) clamp(16px,3vw,34px) clamp(22px,3vw,36px);
  text-align:center;
}
.lightbox__cap .rule-gold{max-width:120px;margin:0 auto 1.1rem}
.lightbox__cap-cat{
  display:block;
  font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-400);
}
.lightbox__cap h3{margin-top:.65rem;color:#fff;font-size:clamp(1.3rem,2.2vw,1.9rem)}
.lightbox__cap p{
  max-width:56ch;margin:.7rem auto 0;
  font-size:.9rem;line-height:1.75;color:rgba(255,255,255,.56);
}

@media (prefers-reduced-motion:reduce){
  .lightbox__img,
  .piece__media img,
  .signature__stack img{transition:none !important}
}

/* --------------------------------------------------------------------------
   7. Touch and small screens
   -------------------------------------------------------------------------- */

/* A touch device never fires :hover, so anything that would only appear on
   hover has to rest visible instead. */
@media (hover:none){
  .piece__view{transform:none}
  .gallery .card__wish{opacity:1;transform:none}
  .piece__rule{opacity:1;transform:none}
}

@media (max-width:599px){
  .coll-bar__inner{padding-block:.7rem}
  .coll-tools{width:100%;justify-content:space-between;margin-left:0}
  .coll-bar .filters{flex:0 0 100%}
  .piece__rule{inset:9px}
  .lightbox__cap p{display:none}
}