/* ==========================================================================
   FEATURED COLLECTIONS — "architectural editorial frames". The hover-
   expand row behavior is unchanged; this file redraws the RESTING state
   of each panel so it reads as a distinctive object before any hover:
   asymmetric silhouette with one clipped "architectural" corner (a small
   ivory notch holding the collection number), a faint museum-frame inset
   line, layered ambient/contact shadow, and a slightly desaturated,
   editorial image treatment that only fully "develops" on hover.
   ========================================================================== */
.featured-collections{
  width: 100%;
  padding: var(--sp-4) var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
}

.featured-collections .section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-4);
}
.featured-collections h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--text-5), 3.6vw, var(--text-7));
  color: var(--forest);
}

/* ---------------------------------------------------------------------- */
/* Desktop: one horizontal row, 4 panels, hover-expand via flex-grow      */
/* ---------------------------------------------------------------------- */
.editorial-row{
  display: flex;
  gap: var(--sp-3);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  height: clamp(320px, 36vw, 420px);
  padding-top: var(--sp-2); /* breathing room for the default elevation shadow */
}

/* ---- Silhouette: one corner per card is clipped tight (8px) instead of
   the shared 30px — this alternates by position so the row doesn't read
   as four identical rectangles. See --notch-* custom properties, shared
   by both the border-radius and the notch chip placement below. */
.editorial-panel{
  --radius-soft: 30px;
  --radius-cut: 8px;
  --notch-size: 32px;
  position: relative;
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(24,20,14,0.04),
    0 10px 22px -10px rgba(24,20,14,0.20),
    0 26px 48px -30px rgba(24,20,14,0.24);
  transition: flex-grow 650ms var(--ease), box-shadow 650ms var(--ease);
}

.editorial-panel:nth-child(1){ border-radius: var(--radius-soft) var(--radius-soft) var(--radius-soft) var(--radius-cut); }
.editorial-panel:nth-child(2){ border-radius: var(--radius-cut) var(--radius-soft) var(--radius-soft) var(--radius-soft); }
.editorial-panel:nth-child(3){ border-radius: var(--radius-soft) var(--radius-soft) var(--radius-cut) var(--radius-soft); }
.editorial-panel:nth-child(4){ border-radius: var(--radius-soft) var(--radius-cut) var(--radius-soft) var(--radius-soft); }

/* JS toggles these on the row's panels while one is hovered/focused */
.editorial-row.is-active .editorial-panel{ flex-grow: 0.82; }
.editorial-row.is-active .editorial-panel.is-expanded{
  flex-grow: 1.55;
  box-shadow:
    0 2px 4px rgba(24,20,14,0.05),
    0 16px 32px -12px rgba(24,20,14,0.24),
    0 40px 72px -32px rgba(24,20,14,0.28);
}

/* ---- Image: editorial treatment — quietly desaturated at rest,
   develops toward full color/scale on hover. Motion layer order: image
   first, then the frame (+80ms), then text (+160ms) — see below. ---- */
.panel-media{ position: absolute; inset: 0; overflow: hidden; }
.panel-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  filter: saturate(0.95) sepia(0.04);
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
  will-change: transform;
}
.editorial-panel.is-expanded .panel-media img{
  transform: scale(1.055);
  filter: saturate(1) sepia(0);
}

/* ---- Bottom information zone: warm charcoal gradient, confined to the
   lower ~38% of the panel (not a flat overlay across the whole image). */
.panel-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(32,24,17,0.62) 0%,
    rgba(32,24,17,0.38) 16%,
    rgba(32,24,17,0.12) 32%,
    transparent 40%);
  transition: background 650ms var(--ease);
}
.editorial-panel.is-expanded .panel-overlay{
  background: linear-gradient(0deg,
    rgba(32,24,17,0.72) 0%,
    rgba(32,24,17,0.46) 18%,
    rgba(32,24,17,0.16) 34%,
    transparent 42%);
}

/* ---- Double-frame detail: a barely-visible museum-mount line inset
   from the card edge. Follows the image (+80ms) on hover. ---- */
.panel-frame{
  position: absolute;
  inset: 13px;
  border-radius: 20px;
  border: 1px solid rgba(216,194,149,0.3);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 650ms var(--ease);
  transition-delay: 0ms;
}
.editorial-panel.is-expanded .panel-frame{
  opacity: 1;
  border-color: rgba(216,194,149,0.55);
  transition-delay: 80ms;
}

/* ---- Signature corner notch: a small ivory chip that sits exactly over
   the panel's clipped (8px) corner, reading as a physical cut in the
   image — purely architectural, no label or content inside. A faint
   champagne inset line gives the cut its own quiet edge definition. */
.panel-notch{
  position: absolute;
  width: var(--notch-size);
  height: var(--notch-size);
  z-index: 2;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(200,168,107,0.28);
  transition: box-shadow 650ms var(--ease);
  transition-delay: 0ms;
}
.editorial-panel.is-expanded .panel-notch{
  box-shadow: inset 0 0 0 1px rgba(200,168,107,0.5);
  transition-delay: 80ms;
}
.editorial-panel:nth-child(1) .panel-notch{ inset-inline-start: 0; bottom: 0; border-radius: 0 20px 0 var(--radius-cut); }
.editorial-panel:nth-child(2) .panel-notch{ inset-inline-start: 0; top: 0; border-radius: var(--radius-cut) 0 20px 0; }
.editorial-panel:nth-child(3) .panel-notch{ inset-inline-end: 0; bottom: 0; border-radius: 20px 0 var(--radius-cut) 0; }
.editorial-panel:nth-child(4) .panel-notch{ inset-inline-end: 0; top: 0; border-radius: 0 var(--radius-cut) 0 20px; }

/* Thin champagne line along the bottom edge, revealed on hover */
.editorial-panel::after{
  content: "";
  position: absolute;
  inset-inline: var(--sp-4);
  bottom: var(--sp-2);
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  opacity: .8;
  transition: transform 650ms var(--ease);
  transition-delay: 160ms;
}
.editorial-panel.is-expanded::after{ transform: scaleX(1); }

.panel-content{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Text layer follows the frame (+80ms), so it settles ~160ms after image */
.panel-text{
  transition: transform 550ms var(--ease);
  transition-delay: 0ms;
  min-width: 0;
}
.editorial-panel.is-expanded .panel-text{ transform: translateY(-4px); transition-delay: 160ms; }

.panel-text h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--text-4), 2vw, var(--text-5));
  color: var(--ivory);
  white-space: nowrap;
}
.panel-desc{
  margin-top: 4px;
  font-size: var(--text-small);
  color: rgba(247,242,231,.82);
  opacity: 0;
  transform: translateY(6px);
  white-space: nowrap;
  transition: opacity 550ms var(--ease), transform 550ms var(--ease);
  transition-delay: 0ms;
}
.editorial-panel.is-expanded .panel-desc{ opacity: 1; transform: translateY(0); transition-delay: 160ms; }

.panel-arrow{
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(247,242,231,.4);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 550ms var(--ease), color 550ms var(--ease), border-color 550ms var(--ease);
  transition-delay: 0ms;
}
.panel-arrow svg{ width: 16px; height: 16px; }
.editorial-panel.is-expanded .panel-arrow{
  transform: translate(-6px, -6px); /* RTL: forward = up-left */
  color: var(--gold-soft);
  border-color: rgba(216,194,149,.6);
  transition-delay: 160ms;
}

.editorial-panel:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce){
  .editorial-panel, .panel-media img, .panel-overlay, .panel-frame, .panel-text,
  .panel-desc, .panel-arrow, .editorial-panel::after{
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .editorial-row.is-active .editorial-panel,
  .editorial-row.is-active .editorial-panel.is-expanded{ flex-grow: 1; }
  .editorial-panel.is-expanded .panel-media img{ transform: scale(1.02); }
}

/* ---------------------------------------------------------------------- */
/* Tablet: 2 full panels, horizontal scroll-snap, no hover-expand         */
/* ---------------------------------------------------------------------- */
@media (max-width: 1023px){
  .editorial-row{
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
  }
  .editorial-row::-webkit-scrollbar{ display: none; }
  .editorial-panel{
    flex: 0 0 auto;
    width: calc(50% - var(--sp-2));
    height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
  .editorial-row.is-active .editorial-panel,
  .editorial-row.is-active .editorial-panel.is-expanded{ flex-grow: 0; }
  .panel-desc{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Mobile: 1 full panel per view, no partial cards                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px){
  .featured-collections{ padding: var(--sp-6) var(--sp-4); }
  .editorial-row{ gap: var(--sp-3); scroll-padding-inline: var(--sp-4); }
  .editorial-panel{ width: 100%; aspect-ratio: 4 / 3; }
  .panel-text h3{ white-space: normal; }
  .panel-desc{ white-space: normal; }
}