/* ICONIC 14F — Before & After Editorial Auto Showcase
   Mirrors the premium Men/Women result-showcase motion: one featured result,
   three supporting results, a brand panel, 5-second rotation, manual arrows and mobile swipe. */

.iconic-ba-gallery[data-ba-auto-showcase] {
  --iba-auto-duration: 5000ms;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-viewport {
  margin-inline: 0 !important;
  overflow: visible !important;
  padding-inline: 0 !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-track {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: minmax(430px, 1.42fr) repeat(3, minmax(180px, .58fr)) !important;
  grid-template-rows: minmax(205px, 1fr) minmax(188px, .88fr) !important;
  min-width: 1120px !important;
  position: relative;
  width: 100% !important;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-panel[data-ba-auto-showcase-panel] {
  aspect-ratio: auto !important;
  display: contents !important;
  flex: none !important;
  min-height: 0 !important;
  scroll-snap-align: none !important;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  opacity: 1;
  transform: translateZ(0);
  transition: border-color .38s ease, box-shadow .38s ease, filter .38s ease;
  will-change: transform, opacity;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="0"] {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  min-height: 500px !important;
  box-shadow: 0 34px 80px rgba(0,0,0,.28), inset 0 0 0 1px rgba(172,211,104,.04);
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="1"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="2"] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="3"] {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="1"],
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="2"],
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="3"] {
  min-height: 205px !important;
  filter: saturate(.92) brightness(.94);
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="hidden"] {
  display: none !important;
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card img {
  transition: transform 1.1s cubic-bezier(.2,.75,.25,1), filter .55s ease !important;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="0"] img {
  transform: scale(1.018);
}
.iconic-ba-gallery[data-ba-auto-showcase]:hover .iconic-ba-result-card[data-ba-showcase-slot="0"] img {
  transform: scale(1.035);
}

.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] {
  align-items: flex-end !important;
  background:
    radial-gradient(circle at 12% 40%, rgba(126,190,76,.16), transparent 33%),
    linear-gradient(112deg, #0b2414 0%, #06150c 58%, #071a0e 100%) !important;
  border: 1px solid rgba(172,211,104,.2) !important;
  border-radius: 26px !important;
  display: grid !important;
  gap: 5px 24px;
  grid-column: 2 / span 3 !important;
  grid-row: 2 !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto auto;
  min-height: 188px !important;
  overflow: hidden;
  padding: 28px 32px !important;
  position: relative;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand]::before {
  background: linear-gradient(96deg, transparent 0 48%, rgba(174,220,102,.11) 52%, transparent 58%);
  content: '';
  inset: -40% -15%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-24%);
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] span,
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] strong {
  align-self: end;
  grid-column: 1;
  position: relative;
  z-index: 1;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] span {
  font-size: .58rem !important;
  grid-row: 2;
  left: auto !important;
  position: relative !important;
  top: auto !important;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] strong {
  font-size: clamp(30px,2.6vw,46px) !important;
  grid-row: 3;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] small {
  align-self: end;
  color: rgba(244,241,229,.58) !important;
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  max-width: 320px;
  position: relative;
  text-align: right;
  z-index: 1;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-extra-brand] {
  display: none !important;
}

/* Existing arrows now rotate one result at a time and the line becomes a true 5s timer. */
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-controls {
  position: relative;
  z-index: 9;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-progress {
  background: rgba(172,211,104,.14) !important;
  border-radius: 99px;
  height: 3px !important;
  overflow: hidden;
  position: relative;
  width: 112px !important;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-progress > span {
  background: transparent !important;
  display: block;
  height: 100%;
  position: relative;
  transform: none !important;
  width: 100%;
}
.iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-progress > span::after {
  background: #b9db72;
  border-radius: inherit;
  content: '';
  inset: 0 auto 0 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  width: 100%;
}
.iconic-ba-gallery[data-ba-auto-showcase].is-auto-timing .iconic-ba-gallery-progress > span::after {
  animation: iconic-ba-showcase-progress var(--iba-auto-duration) linear forwards;
}
.iconic-ba-gallery[data-ba-auto-showcase].is-auto-paused .iconic-ba-gallery-progress > span::after {
  animation-play-state: paused;
}
@keyframes iconic-ba-showcase-progress { to { transform: scaleX(1); } }

/* Mobile keeps the desktop editorial composition as a horizontally swipeable canvas. */
@media (max-width:767px) {
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-viewport {
    margin-inline: -18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 18px 10px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-viewport::-webkit-scrollbar { display:none; }

  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-track {
    gap: 10px !important;
    grid-template-columns: 340px repeat(3,148px) !important;
    grid-template-rows: 160px 160px !important;
    min-width: 814px !important;
    scroll-snap-align: start;
    width: 814px !important;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="0"] {
    border-radius: 22px !important;
    min-height: 330px !important;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="1"],
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="2"],
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-result-card[data-ba-showcase-slot="3"] {
    border-radius: 18px !important;
    min-height: 160px !important;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] {
    border-radius: 18px !important;
    gap: 3px 14px;
    min-height: 160px !important;
    padding: 18px 20px !important;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] strong {
    font-size: 28px !important;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-editorial[data-ba-auto-showcase-brand] small {
    font-size: 9px !important;
    max-width: 180px;
  }
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-progress { width:80px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .iconic-ba-gallery[data-ba-auto-showcase] .iconic-ba-gallery-progress > span::after {
    animation: none !important;
    transform: scaleX(1);
  }
}