/* ==========================================================================
   Collections section — five card layouts, driven by CollectionsUI.

   Everything keys off [data-col-layout] on the section, and off the CSS
   variables the layout emits. Loaded on every page but scoped to
   .collections-sec, so nothing else is affected.

   Guidance applied:
   - One aspect ratio per layout so the grid reads as a set.
   - Hover zoom is transform:scale inside overflow:hidden — compositor only,
     never reflows the grid.
   - Hover is not an input method on touch, so overlay copy is revealed
     unconditionally there instead of being hidden behind an interaction.
   ========================================================================== */

.collections-sec {
  --c-gap: 26px;
  --c-radius: 6px;
  --c-ratio: 3 / 4;
  --c-cols: 2;
  --c-scrim: .55;
}

/* ---------------- shared card ---------------- */
.c-card {
  position: relative;
  display: block;
  border-radius: var(--c-radius);
  overflow: hidden;
  background: var(--blush, #faf6f2);
  transition: transform .35s ease, box-shadow .35s ease;
}
.collections-sec[data-col-shadow="1"] .c-card { box-shadow: var(--shadow, 0 18px 40px -30px rgba(46,26,36,.6)); }

.c-media {
  position: relative;
  display: block;
  aspect-ratio: var(--c-ratio);
  overflow: hidden;
  background: linear-gradient(160deg, var(--wine, #6d2b4a), var(--plum, #2e1a24));
}
.c-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
}

/* ---------------- hover behaviours ---------------- */
.collections-sec[data-col-hover="zoom"] .c-card:hover .c-media img { transform: scale(1.08); }
.collections-sec[data-col-hover="lift"] .c-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(46,26,36,.75); }
.collections-sec[data-col-hover="reveal"] .c-card:hover .c-media img { transform: scale(1.04); }

/* ---------------- caption: overlay ---------------- */
.collections-sec[data-col-caption="overlay"] .c-media::after,
.collections-sec[data-col-caption="hover"] .c-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 38%, rgba(46, 26, 36, var(--c-scrim)));
  transition: opacity .35s ease;
}
.collections-sec[data-col-caption="overlay"] .c-cap,
.collections-sec[data-col-caption="hover"] .c-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 26px 28px;
  color: #fff;
  z-index: 2;
}
.collections-sec[data-col-caption="overlay"] .c-cap h3,
.collections-sec[data-col-caption="hover"] .c-cap h3 { color: #fff; }

/* caption revealed on hover only */
.collections-sec[data-col-caption="hover"] .c-cap {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.collections-sec[data-col-caption="hover"] .c-card:hover .c-cap,
.collections-sec[data-col-caption="hover"] .c-card:focus-within .c-cap {
  opacity: 1;
  transform: none;
}

/* Touch devices cannot hover — never hide the label behind an interaction
   the device does not support. */
@media (hover: none) {
  .collections-sec[data-col-caption="hover"] .c-cap {
    opacity: 1;
    transform: none;
  }
}

/* ---------------- caption: below the image ---------------- */
.collections-sec[data-col-caption="below"] .c-cap {
  padding: 16px 4px 4px;
  color: var(--ink, #2e1a24);
}
.collections-sec[data-col-caption="below"] .c-cap h3 { color: var(--plum, #2e1a24); }
.collections-sec[data-col-caption="below"] .c-card { background: transparent; box-shadow: none; }
.collections-sec[data-col-caption="below"][data-col-shadow="1"] .c-media { box-shadow: var(--shadow, 0 18px 40px -30px rgba(46,26,36,.6)); }

/* ---------------- caption typography ---------------- */
.c-cap .eyebrow { color: var(--gold-soft, #e6d3a3); display: block; }
.collections-sec[data-col-caption="below"] .c-cap .eyebrow { color: var(--muted, #8a7b82); }
.c-cap h3 { font-size: clamp(1.15rem, 1.1vw + .7rem, 1.7rem); margin-top: 8px; }
.c-cap .go {
  margin-top: 12px;
  font-family: var(--serif2, serif);
  letter-spacing: .14em;
  font-size: .78rem;
  text-transform: uppercase;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s ease, color .3s ease;
}
html[dir="rtl"] .c-cap .go { font-family: var(--ar, sans-serif); letter-spacing: 0; text-transform: none; }
.c-card:hover .c-cap .go { gap: 14px; color: var(--gold-soft, #e6d3a3); }
.c-cap .count { display: block; font-size: .78rem; opacity: .72; margin-top: 6px; }

.collections-sec[data-col-align="center"] .c-cap { text-align: center; }
.collections-sec[data-col-align="center"] .c-cap .go { justify-content: center; }

/* ==========================================================================
   Layouts
   ========================================================================== */

/* --- grid: the dependable default --- */
.c-wrap[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--c-cols), minmax(0, 1fr));
  gap: var(--c-gap);
}

/* --- masonry: staggered heights, still one column set --- */
.c-wrap[data-layout="masonry"] {
  columns: var(--c-cols);
  column-gap: var(--c-gap);
}
.c-wrap[data-layout="masonry"] .c-card {
  break-inside: avoid;
  margin-bottom: var(--c-gap);
  display: inline-block;
  width: 100%;
}
/* Masonry only reads as masonry if the cards differ — vary the ratio in a
   repeating cycle rather than leaving every tile identical. */
.c-wrap[data-layout="masonry"] .c-card:nth-child(3n+1) .c-media { aspect-ratio: 3 / 4; }
.c-wrap[data-layout="masonry"] .c-card:nth-child(3n+2) .c-media { aspect-ratio: 1 / 1; }
.c-wrap[data-layout="masonry"] .c-card:nth-child(3n+3) .c-media { aspect-ratio: 4 / 5; }

/* --- carousel: horizontal scroll with snap --- */
.c-wrap[data-layout="carousel"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--c-cols) - 1) * var(--c-gap)) / var(--c-cols));
  gap: var(--c-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.c-wrap[data-layout="carousel"] .c-card { scroll-snap-align: start; }
.c-wrap[data-layout="carousel"]::-webkit-scrollbar { height: 5px; }
.c-wrap[data-layout="carousel"]::-webkit-scrollbar-thumb { background: var(--line, #e7ded9); border-radius: 5px; }

/* --- split: one hero card beside a stack of smaller ones --- */
.c-wrap[data-layout="split"] {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--c-gap);
}
.c-wrap[data-layout="split"] .c-card:first-child { grid-row: span 2; }
.c-wrap[data-layout="split"] .c-card:first-child .c-media { aspect-ratio: 3 / 4; height: 100%; }
.c-wrap[data-layout="split"] .c-card:not(:first-child) .c-media { aspect-ratio: 16 / 9; }

/* --- list: wide rows, image beside copy --- */
.c-wrap[data-layout="list"] { display: flex; flex-direction: column; gap: var(--c-gap); }
.c-wrap[data-layout="list"] .c-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  background: #fff;
}
.c-wrap[data-layout="list"] .c-media { aspect-ratio: 4 / 3; }
.c-wrap[data-layout="list"] .c-media::after { display: none; }
.c-wrap[data-layout="list"] .c-cap {
  position: static;
  padding: 24px 28px;
  color: var(--ink, #2e1a24);
}
.c-wrap[data-layout="list"] .c-cap h3 { color: var(--plum, #2e1a24); }
.c-wrap[data-layout="list"] .c-cap .eyebrow { color: var(--muted, #8a7b82); }

/* ---------------- section header alignment ---------------- */
.collections-sec[data-col-head="start"] .sec-head { text-align: start; margin-inline: 0; }
.collections-sec[data-col-head="start"] .sec-head .divider { margin-inline: 0; }

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
  .c-wrap[data-layout="grid"],
  .c-wrap[data-layout="carousel"] { --c-cols: var(--c-cols-tablet, 2); }
  .c-wrap[data-layout="masonry"] { columns: var(--c-cols-tablet, 2); }
  .c-wrap[data-layout="split"] { grid-template-columns: 1fr; }
  .c-wrap[data-layout="split"] .c-card:first-child { grid-row: auto; }
}

@media (max-width: 860px) {
  .c-wrap[data-layout="grid"] { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .c-wrap[data-layout="masonry"] { columns: 1; }
  .c-wrap[data-layout="carousel"] { grid-auto-columns: 82%; }
  .c-wrap[data-layout="list"] .c-card { grid-template-columns: 1fr; }
  .c-wrap[data-layout="list"] .c-media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .c-card, .c-media img, .c-cap, .c-cap .go { transition: none !important; }
  .c-card:hover .c-media img { transform: none; }
}