/* Services accordion — 6 panel vertikal; panel .is-open melebar.
   Fase 2: expand via CSS saja (flex-grow); Fase 3: GSAP Flip/width tween. */

.accordion {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.accordion-strip {
  display: flex;
  gap: var(--space-l);
  height: min(55.5rem, 90svh);
}

/* flex-grow dianimasikan GSAP (js/motion/accordion.js); transisi CSS hanya
   untuk fallback no-motion supaya klik tetap berfungsi tanpa tween. */
.accordion-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.no-motion .accordion-panel {
  transition: flex-grow var(--duration-normal) var(--ease-in-out-smooth);
}

.accordion-panel.is-open {
  flex-grow: 6.4;
  box-shadow: var(--shadow-soft);
}

.accordion-bg {
  position: absolute;
  inset: 0;
}

.accordion-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(48 48 48 / 0.6);
  transition: background-color var(--duration-normal) var(--ease-in-out-smooth);
}

.accordion-panel.is-open::after {
  background-color: rgb(48 48 48 / 0.9);
}

.accordion-title {
  position: absolute;
  left: var(--space-l);
  bottom: var(--space-l);
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* Panel terbuka penuh (class dari JS setelah tween lebar selesai):
   judul pindah horizontal di atas copy, keduanya mengalir di kiri-bawah. */
.accordion-panel.is-expanded {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.accordion-panel.is-expanded .accordion-title {
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  writing-mode: horizontal-tb;
  transform: none;
  white-space: normal;
  z-index: 1;
  margin: 0 var(--space-l) var(--space-s) var(--space-xl);
}

.accordion-panel.is-expanded .accordion-copy {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  margin: 0 var(--space-l) var(--space-l) var(--space-xl);
}

/* Lebar teks dikunci saat expanded: ketika panel menyempit waktu ditutup,
   teks ter-clip oleh overflow panel alih-alih reflow (hide terlihat mulus). */
.accordion-panel.is-expanded .accordion-title,
.accordion-panel.is-expanded .accordion-copy {
  width: 26.6875rem;
  max-width: none;
}

@media screen and (max-width: 767px) {
  .accordion-panel.is-expanded .accordion-title,
  .accordion-panel.is-expanded .accordion-copy {
    width: auto;
  }
}

.accordion-copy {
  position: absolute;
  left: clamp(2rem, 1rem + 4vw, 7.625rem);
  right: var(--space-l);
  bottom: var(--space-l);
  z-index: 1;
  max-width: 26.6875rem;
  opacity: 0;
}

.no-motion .accordion-copy {
  transition: opacity var(--duration-normal) var(--ease-in-out-smooth);
}

.no-motion .accordion-panel.is-open .accordion-copy {
  opacity: 1;
  transition-delay: 200ms;
}

@media screen and (max-width: 767px) {
  .accordion-strip {
    flex-direction: column;
    height: auto;
  }

  .accordion-panel {
    min-height: 4.5rem;
  }

  .accordion-panel.is-open {
    min-height: 28rem;
  }

  .accordion-title {
    writing-mode: horizontal-tb;
    transform: none;
    top: var(--space-s);
    bottom: auto;
  }

  .accordion-copy {
    left: var(--space-l);
  }
}