/* ─── Vertical accordion chips (craft-blocks) ───────────────────────────── */

.cb-vac {
  padding: min(5rem, 6vh) clamp(1.25rem, 4vw, 3rem) min(5rem, 6vh);
  background: var(--cb-vac-bg, #f5f5f7);
}

.cb-vac__inner {
  max-width: 120rem;
  margin-inline: auto;
}

.cb-vac__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.cb-vac__heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.2rem;
  color: var(--cb-vac-heading, #111);
}

.cb-vac__intro {
  font-size: 1rem;
  color: var(--cb-vac-intro, #6b7280);
  margin: 0;
}

.cb-vac__nav {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.cb-vac__arrow {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9999px;
  border: 1.5px solid var(--cb-vac-nav-border, #d1d5db);
  background: var(--cb-vac-nav-bg, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--cb-vac-heading, #111);
  transition: border-color 0.2s, background 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.cb-vac__arrow:hover {
  border-color: #6b7280;
  background: #f9fafb;
}

.cb-vac__track {
  display: flex;
  gap: var(--cb-vac-gap, 8px);
  height: clamp(var(--cb-vac-h-min, 280px), 35vw, var(--cb-vac-h-max, 400px));
  max-height: 44vh;
  overflow: hidden;
}

/* Hard corners + clipped bottom-right (chamfer) */
.cb-vac__chip {
  --cb-vac-cut: var(--cb-vac-chamfer, 22px);
  flex: 1;
  min-width: clamp(56px, 6vw, 88px);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cb-vac-cut)),
    calc(100% - var(--cb-vac-cut)) 100%,
    0 100%
  );
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cb-vac-cut)),
    calc(100% - var(--cb-vac-cut)) 100%,
    0 100%
  );
}

.cb-vac__chip:focus-visible {
  outline: 2px solid var(--cb-vac-heading, #111);
  outline-offset: 3px;
}

.cb-vac__chip.is-active {
  flex: 3.8;
}

.cb-vac__visual {
  position: absolute;
  inset: -4%;
  transition: transform 0.6s ease;
  z-index: 0;
}

.cb-vac__chip.is-active .cb-vac__visual,
.cb-vac__chip:hover .cb-vac__visual {
  transform: scale(1.06);
}

/* Gradient presets (match animated-blocks happenings) */
.cb-vac__chip--g1 .cb-vac__visual {
  background:
    radial-gradient(ellipse at 25% 55%, rgba(192, 132, 252, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(99, 102, 241, 0.35) 0%, transparent 50%),
    linear-gradient(135deg, #3b0764 0%, #5b21b6 38%, #7c3aed 65%, #a855f7 100%);
}

.cb-vac__chip--g1 .cb-vac__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -52deg,
    transparent,
    transparent 55px,
    rgba(255, 255, 255, 0.035) 55px,
    rgba(255, 255, 255, 0.035) 110px
  );
}

.cb-vac__chip--g2 .cb-vac__visual {
  background: linear-gradient(155deg, #1c1917 0%, #292524 35%, #7c4d12 90%, #d97706 130%);
}

.cb-vac__chip--g3 .cb-vac__visual {
  background: linear-gradient(155deg, #0c4a6e 0%, #0369a1 45%, #0ea5e9 90%, #7dd3fc 130%);
}

.cb-vac__chip--g4 .cb-vac__visual {
  background: linear-gradient(155deg, #1c1917 0%, #292524 30%, #78350f 80%, #b45309 130%);
}

.cb-vac__chip--g5 .cb-vac__visual {
  background: linear-gradient(148deg, #022c22 0%, #064e3b 40%, #059669 78%, #34d399 115%);
}

.cb-vac__chip--g6 .cb-vac__visual {
  background: linear-gradient(160deg, #4a044e 0%, #86198f 35%, #db2777 70%, #fb7185 108%);
}

.cb-vac__chip--g7 .cb-vac__visual {
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 38%, #475569 72%, #94a3b8 105%);
}

.cb-vac__chip--g8 .cb-vac__visual {
  background: linear-gradient(152deg, #042f2e 0%, #115e59 42%, #14b8a6 75%, #5eead4 118%);
}

.cb-vac__chip--g9 .cb-vac__visual {
  background: linear-gradient(145deg, #7f1d1d 0%, #c2410c 38%, #ea580c 68%, #fb923c 95%, #fda4af 125%);
}

.cb-vac__chip--g10 .cb-vac__visual {
  background: linear-gradient(158deg, #3b0764 0%, #6d28d9 45%, #a855f7 72%, #e879f9 110%);
}

.cb-vac__chip--g11 .cb-vac__visual {
  background: linear-gradient(155deg, #1a2e05 0%, #365314 35%, #4d7c0f 68%, #84cc16 108%);
}

.cb-vac__chip--g12 .cb-vac__visual {
  background: linear-gradient(150deg, #020617 0%, #0c4a6e 40%, #0284c7 72%, #22d3ee 115%);
}

.cb-vac__chip--g13 .cb-vac__visual {
  background: linear-gradient(162deg, #1c1917 0%, #450a0a 32%, #7f1d1d 62%, #be123c 95%, #fb7185 128%);
}

.cb-vac__chip--g14 .cb-vac__visual {
  background: linear-gradient(160deg, #14532d 0%, #166534 38%, #22c55e 70%, #bef264 112%);
}

.cb-vac__chip--g15 .cb-vac__visual {
  background: linear-gradient(154deg, #292524 0%, #78350f 36%, #b45309 68%, #ea580c 98%, #fdba74 130%);
}

.cb-vac__chip--g16 .cb-vac__visual {
  background: linear-gradient(156deg, #1e1b4b 0%, #4c1d95 38%, #7c3aed 68%, #a78bfa 100%, #e9d5ff 128%);
}

/* CTA inherits shared .cb-btn via --cb-btn-bg; themed per gradient preset */
.cb-vac__chip--g1 {
  --cb-btn-bg: #6d28d9;
}
.cb-vac__chip--g2 {
  --cb-btn-bg: #92400e;
}
.cb-vac__chip--g3 {
  --cb-btn-bg: #0369a1;
}
.cb-vac__chip--g4 {
  --cb-btn-bg: #9a3412;
}
.cb-vac__chip--g5 {
  --cb-btn-bg: #047857;
}
.cb-vac__chip--g6 {
  --cb-btn-bg: #be185d;
}
.cb-vac__chip--g7 {
  --cb-btn-bg: #334155;
}
.cb-vac__chip--g8 {
  --cb-btn-bg: #0f766e;
}
.cb-vac__chip--g9 {
  --cb-btn-bg: #c2410c;
}
.cb-vac__chip--g10 {
  --cb-btn-bg: #7c3aed;
}
.cb-vac__chip--g11 {
  --cb-btn-bg: #3f6212;
}
.cb-vac__chip--g12 {
  --cb-btn-bg: #075985;
}
.cb-vac__chip--g13 {
  --cb-btn-bg: #9f1239;
}
.cb-vac__chip--g14 {
  --cb-btn-bg: #166534;
}
.cb-vac__chip--g15 {
  --cb-btn-bg: #b45309;
}
.cb-vac__chip--g16 {
  --cb-btn-bg: #5b21b6;
}

/* Chamfered chip button: match block chamfer setting, stay slightly subtler than the card */
.cb-vac__chip .cb-vac__btn.cb-btn--chamfer-br {
  --cb-vac-btn-cut: min(16px, var(--cb-vac-cut, 22px));
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cb-vac-btn-cut)),
    calc(100% - var(--cb-vac-btn-cut)) 100%,
    0 100%
  );
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cb-vac-btn-cut)),
    calc(100% - var(--cb-vac-btn-cut)) 100%,
    0 100%
  );
}

.cb-vac__btn {
  display: inline-block;
  margin-top: 0.1rem;
}

.cb-vac__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.cb-vac__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.5rem 1.25rem 1.35rem;
  padding-right: max(1.25rem, var(--cb-vac-cut, 22px));
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.72) 100%);
  transform: translateY(18%);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.4s ease;
  pointer-events: none;
}

.cb-vac__chip.is-active .cb-vac__overlay {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cb-vac__title {
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 0.45rem;
}

.cb-vac__desc {
  font-size: clamp(0.78rem, 1.1vw, 0.9rem);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  margin: 0 0 0.85rem;
  max-width: 52ch;
}

/* Phones / small tablets: stack chips so copy is readable (row layout is too narrow) */
@media (max-width: 768px) {
  .cb-vac {
    padding: min(3rem, 5vh) 1.25rem;
  }

  .cb-vac__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cb-vac__nav {
    align-self: flex-end;
  }

  .cb-vac__track {
    flex-direction: column;
    height: auto;
    max-height: none;
    gap: 0.65rem;
    overflow: visible;
  }

  .cb-vac__chip {
    flex: 0 0 auto !important;
    min-width: 0;
    width: 100%;
    min-height: 4.75rem;
    clip-path: none;
    -webkit-clip-path: none;
    border-radius: 10px;
  }

  .cb-vac__chip.is-active {
    min-height: min(48vh, 22rem);
  }

  .cb-vac__chip:not(.is-active) {
    max-height: 5.75rem;
  }

  .cb-vac__chip:not(.is-active) .cb-vac__visual {
    transform: none;
  }

  .cb-vac__overlay {
    padding: 1rem 1rem 1.15rem;
    padding-right: 1rem;
  }

  .cb-vac__desc {
    max-width: none;
  }

  .cb-vac__chip .cb-vac__btn.cb-btn--chamfer-br {
    clip-path: none;
    -webkit-clip-path: none;
    border-radius: 6px;
  }
}

@media (max-width: 480px) {
  .cb-vac {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}