/*
 * Bannawang Card Set Motion v3
 * Presentation only. Fully scoped to .bnw-card-set-section.
 * Resting state = colour + oversized letter. Expanded state = full-frame image.
 */

.bnw-card-set-section {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  z-index: 0;
}

.bnw-card-set-section > .quick-grid,
.bnw-card-set-section > .container.quick-grid {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: 22px;
}

.bnw-card-set-section .bnw-dynamic-quick-card {
  position: relative !important;
  isolation: isolate;
  z-index: 0 !important;
  flex: 1 1 0;
  min-width: 0 !important;
  min-height: clamp(142px, 15vw, 190px);
  padding: 18px 12px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--bnw-card-c1, #0e6b72), var(--bnw-card-c2, #14a5a5)) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: flex-grow .56s cubic-bezier(.2,.82,.2,1), filter .38s ease, box-shadow .42s ease;
}

.bnw-card-set-section .bnw-dynamic-quick-card:first-child { border-radius: 22px 0 0 22px !important; }
.bnw-card-set-section .bnw-dynamic-quick-card:last-child { border-radius: 0 22px 22px 0 !important; }

/* Resting letter: dominant visual, coloured card remains fully visible. */
.bnw-card-set-section .bnw-card-letter {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  z-index: 2;
  display: block;
  width: max-content;
  margin: 0 !important;
  color: rgba(255,255,255,.25) !important;
  font-size: clamp(92px, 10vw, 168px) !important;
  font-weight: 950 !important;
  line-height: .72 !important;
  letter-spacing: -.075em !important;
  white-space: nowrap;
  pointer-events: none !important;
  user-select: none;
  transform: translate(-50%,-50%) rotate(-4deg) scale(1.02);
  transform-origin: 50% 55%;
  text-shadow: 0 14px 34px rgba(0,0,0,.12);
  animation: bnwCardLetterSway 5.4s ease-in-out infinite;
  transition: opacity .3s ease, transform .56s cubic-bezier(.2,.82,.2,1), color .3s ease;
}

.bnw-card-set-section .bnw-dynamic-quick-card:nth-child(2n) .bnw-card-letter { animation-delay: -.75s; }
.bnw-card-set-section .bnw-dynamic-quick-card:nth-child(3n) .bnw-card-letter { animation-delay: -1.55s; }
.bnw-card-set-section .bnw-dynamic-quick-card:nth-child(4n) .bnw-card-letter { animation-delay: -2.35s; }
.bnw-card-set-section .bnw-dynamic-quick-card:nth-child(5n) .bnw-card-letter { animation-delay: -3.05s; }

@keyframes bnwCardLetterSway {
  0%,100% { transform: translate(-50%,-50%) rotate(-4deg) scale(1.02); }
  25% { transform: translate(-49%,-52%) rotate(-1.5deg) scale(1.055); }
  50% { transform: translate(-51%,-49%) rotate(3deg) scale(1.015); }
  75% { transform: translate(-50%,-51%) rotate(.5deg) scale(1.045); }
}

/* Configured image exists in the card but is completely hidden at rest. */
.bnw-card-set-section .bnw-card-image {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background-image: linear-gradient(180deg, rgba(5,20,28,.03) 0%, rgba(5,20,28,.08) 48%, rgba(5,20,28,.52) 100%), var(--bnw-card-image, none) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transform: scale(1.12);
  transform-origin: center;
  filter: saturate(.92) brightness(.96);
  box-shadow: none !important;
  transition: opacity .34s ease, transform .62s cubic-bezier(.2,.82,.2,1), filter .42s ease;
}

.bnw-card-set-section .bnw-dynamic-quick-card[style*="--bnw-card-image"] .bnw-card-image { display: block !important; }

/* Details remain hidden until the card expands. */
.bnw-card-set-section .bnw-dynamic-quick-card > b,
.bnw-card-set-section .bnw-dynamic-quick-card > small {
  position: absolute !important;
  left: clamp(12px,1.5vw,22px) !important;
  right: clamp(12px,1.5vw,22px) !important;
  z-index: 3;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(14px) scale(.96);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: opacity .28s ease .1s, transform .48s cubic-bezier(.2,.82,.2,1), visibility 0s linear .32s;
}

.bnw-card-set-section .bnw-dynamic-quick-card > b {
  bottom: 38px !important;
  color: #fff !important;
  font-size: clamp(15px,1.5vw,23px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.bnw-card-set-section .bnw-dynamic-quick-card > small {
  bottom: 16px !important;
  color: rgba(255,255,255,.95) !important;
  font-size: clamp(10px,.9vw,12px) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

@media (hover:hover) and (pointer:fine) {
  .bnw-card-set-section .quick-grid:hover > .bnw-dynamic-quick-card {
    flex-grow: .78;
    filter: saturate(.9) brightness(.94);
  }

  .bnw-card-set-section .quick-grid > .bnw-dynamic-quick-card:hover,
  .bnw-card-set-section .quick-grid > .bnw-dynamic-quick-card:focus-visible {
    flex-grow: 2.25;
    z-index: 1 !important;
    filter: saturate(1.04) brightness(1.02);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 30px rgba(12,31,40,.16) !important;
  }

  /* On expansion, image replaces the colour/letter as the main visual. */
  .bnw-card-set-section .bnw-dynamic-quick-card[style*="--bnw-card-image"]:hover .bnw-card-image,
  .bnw-card-set-section .bnw-dynamic-quick-card[style*="--bnw-card-image"]:focus-visible .bnw-card-image {
    opacity: 1;
    transform: scale(1.015);
    filter: saturate(1.05) brightness(1);
  }

  .bnw-card-set-section .bnw-dynamic-quick-card:hover .bnw-card-letter,
  .bnw-card-set-section .bnw-dynamic-quick-card:focus-visible .bnw-card-letter {
    animation-play-state: paused;
    opacity: .10;
    transform: translate(-50%,-56%) rotate(6deg) scale(1.14);
  }

  .bnw-card-set-section .bnw-dynamic-quick-card[style*="--bnw-card-image"]:hover .bnw-card-letter,
  .bnw-card-set-section .bnw-dynamic-quick-card[style*="--bnw-card-image"]:focus-visible .bnw-card-letter {
    opacity: 0;
  }

  .bnw-card-set-section .bnw-dynamic-quick-card:hover > b,
  .bnw-card-set-section .bnw-dynamic-quick-card:hover > small,
  .bnw-card-set-section .bnw-dynamic-quick-card:focus-visible > b,
  .bnw-card-set-section .bnw-dynamic-quick-card:focus-visible > small {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: .10s,.10s,0s;
  }
}

/* Touch: preserve safe static cards. No image is exposed without an actual expand state. */
@media (max-width:760px), (hover:none) {
  .bnw-card-set-section > .quick-grid,
  .bnw-card-set-section > .container.quick-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    border-radius: 0;
  }
  .bnw-card-set-section .bnw-dynamic-quick-card {
    min-height: 128px;
    border-radius: 16px !important;
    filter: none !important;
    box-shadow: none !important;
  }
  .bnw-card-set-section .bnw-card-letter {
    font-size: clamp(70px,24vw,112px) !important;
    opacity: .2;
    animation-duration: 6.4s;
  }
  .bnw-card-set-section .bnw-card-image { opacity: 0 !important; }
  .bnw-card-set-section .bnw-dynamic-quick-card > b,
  .bnw-card-set-section .bnw-dynamic-quick-card > small { display: none !important; }
}

@media (max-width:460px) {
  .bnw-card-set-section > .quick-grid,
  .bnw-card-set-section > .container.quick-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion:reduce) {
  .bnw-card-set-section .bnw-dynamic-quick-card,
  .bnw-card-set-section .bnw-card-letter,
  .bnw-card-set-section .bnw-card-image,
  .bnw-card-set-section .bnw-dynamic-quick-card > b,
  .bnw-card-set-section .bnw-dynamic-quick-card > small {
    animation: none !important;
    transition: none !important;
  }
}