/* ==========================================================================
   FAQ Accordion Module — layout/spacing/color only (typography via utilities)
   ========================================================================== */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 40px);
  width: 100%;
  text-align: left;
}

.faq-accordion__item {
  border-top: 1px solid var(--color-neutral-100, #b59fc1);
  padding-top: var(--space-2xs, 8px);
}

.faq-accordion__question-heading {
  margin: 0;
}

/* Trigger button fills the question row */
.faq-accordion__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 24px);
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary, #002846);
  -webkit-appearance: none;
  appearance: none;
}

.faq-accordion__question-text {
  color: var(--text-primary, #002846);
}

.faq-accordion__question:focus-visible {
  outline: 2px solid var(--btn-primary, #00e4f5);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Toggle: 32px circle. Closed = white "+", open = cyan "-".
   Bars stay dark in both states; only the circle background flips.
   -------------------------------------------------------------------------- */
.faq-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-neutral-00, #ffffff);
  transition: background-color 0.2s ease;
}

.faq-accordion__toggle::before,
.faq-accordion__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--icon-primary, #002846);
  border-radius: 1px;
}

/* Horizontal bar (the minus) — always visible */
.faq-accordion__toggle::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

/* Vertical bar — hidden when open so "+" becomes "-" */
.faq-accordion__toggle::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq-accordion__item.is-open .faq-accordion__toggle {
  background-color: var(--btn-primary, #00e4f5);
}

.faq-accordion__item.is-open .faq-accordion__toggle::after {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-accordion__toggle::before,
  .faq-accordion__toggle::after {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
}

/* --------------------------------------------------------------------------
   Answer panel — grid-rows expand/collapse (handles any content height)
   -------------------------------------------------------------------------- */
.faq-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-accordion__panel {
    transition: grid-template-rows 0.3s ease;
  }
}

.faq-accordion__item.is-open .faq-accordion__panel {
  grid-template-rows: 1fr;
}

/* min-height:0 + overflow:hidden are REQUIRED for the grid track to collapse */
.faq-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-accordion__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 24px);
  padding-top: var(--space-xs, 12px);
}

/* Two-column layout when the item has a photo/video: text left, media right.
   Text-only items stay full-width single-column. */
.faq-accordion__answer--has-media {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg, 40px);
}

.faq-accordion__answer-text {
  max-width: 844px;
}

/* Answer body sits a step below the 24px semibold question.
   Higher specificity (.faq-accordion + class) beats the .text-body-m utility. */
.faq-accordion .faq-accordion__answer-text {
  font-size: 18px;
}

/* Desktop: text takes one third, media two thirds (1:2 grow ratio handles the gap) */
.faq-accordion__answer--has-media .faq-accordion__answer-text {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.faq-accordion__answer-media {
  flex: 2 1 0;
  min-width: 0;
}

.faq-accordion__answer-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-cards, 8px);
  background-color: var(--color-lilac-30, #ecd8ff);
}

/* --------------------------------------------------------------------------
   Video media (photo-or-video slot) — mirrors video-split-content.module:
   thumbnail + frosted-glass play button, swapped to a 16:9 iframe on click.
   -------------------------------------------------------------------------- */
.faq-accordion__video-container {
  position: relative;
  width: 100%;
}

.faq-accordion__thumbnail-wrapper {
  position: relative;
  border-radius: var(--radius-cards, 8px);
  overflow: hidden;
}

.faq-accordion__thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-cards, 8px);
}

.faq-accordion__thumbnail-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-ink-100, #002846);
  border-radius: var(--radius-cards, 8px);
}

.faq-accordion__play-button {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 25px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 156px;
  background: linear-gradient(187.34deg, rgba(255, 255, 255, 0.4) 3.95%, rgba(255, 255, 255, 0) 88.76%),
              linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(5.74px);
  -webkit-backdrop-filter: blur(5.74px);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-accordion__play-button:hover {
  transform: translateX(-50%) scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.faq-accordion__play-button:focus-visible {
  outline: 2px solid var(--btn-primary, #00e4f5);
  outline-offset: 2px;
}

/* Dark frosted variant — works on lighter thumbnails (base is the light variant) */
.faq-accordion__play-button--dark {
  border-color: transparent;
  background: linear-gradient(
    40.94deg,
    rgba(18, 70, 97, 0.6) 0%,
    rgba(6, 53, 88, 0.6) 37.03%,
    rgba(6, 53, 88, 0.6) 54.32%,
    rgba(63, 76, 133, 0.6) 99.96%
  );
}

.faq-accordion__play-button--dark .faq-accordion__play-icon,
.faq-accordion__play-button--dark .faq-accordion__play-text {
  color: var(--color-neutral-00, #ffffff);
}

.faq-accordion__play-icon {
  flex-shrink: 0;
  color: var(--color-ink-100, #002846);
}

.faq-accordion__play-text {
  font-family: var(--font-family-body, 'Denim', sans-serif);
  font-size: 20px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 23px;
  color: var(--color-ink-100, #002846);
  white-space: nowrap;
}

.faq-accordion__iframe-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-cards, 8px);
  overflow: hidden;
}

.faq-accordion__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-cards, 8px);
}

/* --------------------------------------------------------------------------
   Lightbox (images + video) — reuses the text-image-split lightbox pattern.
   The .faq-accordion__lightbox is rendered OUTSIDE the panel, so position:fixed
   covers the viewport and is not affected by the panel's inert/overflow.
   -------------------------------------------------------------------------- */
.faq-accordion__lightbox-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-cards, 8px);
}

.faq-accordion__lightbox-trigger:focus-visible {
  outline: 2px solid var(--btn-primary, #00e4f5);
  outline-offset: 2px;
}

.faq-accordion__expand-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(0, 40, 70, 0.6);
  color: var(--color-neutral-00, #ffffff);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.faq-accordion__lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.faq-accordion__lightbox.is-active {
  opacity: 1;
  visibility: visible;
}

.faq-accordion__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
}

.faq-accordion__lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-accordion__lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-cards, 8px);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.faq-accordion__lightbox.is-active .faq-accordion__lightbox-img {
  transform: scale(1);
}

.faq-accordion__lightbox-video {
  position: relative;
  width: min(90vw, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;
}

.faq-accordion__lightbox-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-cards, 8px);
}

.faq-accordion__lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.faq-accordion__lightbox-close:hover,
.faq-accordion__lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.faq-accordion__lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Scroll lock applied to <html> while a lightbox is open (shared class name) */
html.lightbox-scroll-lock {
  overflow-y: hidden;
}

html.lightbox-scroll-lock body {
  overflow-y: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

/* Fallback: open without animation on engines that can't animate fr tracks */
@supports not (grid-template-rows: 1fr) {
  .faq-accordion__panel {
    display: block;
    height: 0;
    overflow: hidden;
  }
  .faq-accordion__item.is-open .faq-accordion__panel {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .faq-accordion {
    gap: var(--space-md, 32px);
  }
  /* Stack the two-column answer: media drops below the text */
  .faq-accordion__answer--has-media {
    flex-direction: column;
    gap: var(--space-md, 32px);
  }
  .faq-accordion__answer--has-media .faq-accordion__answer-text,
  .faq-accordion__answer-media {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
  }
  /* Tablet & mobile: media always fills the available width (aspect ratio kept
     via height:auto). !important overrides the per-item Media Scale inline width. */
  .faq-accordion__answer-image,
  .faq-accordion__lightbox-trigger,
  .faq-accordion__video-container {
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .faq-accordion {
    gap: var(--space-sm, 24px);
  }
  .faq-accordion__question {
    gap: var(--space-xs, 12px);
  }
  .faq-accordion__play-button {
    padding: 8px 16px;
    gap: 8px;
    bottom: 16px;
  }
  .faq-accordion__play-icon {
    width: 24px;
    height: 24px;
  }
  .faq-accordion__play-text {
    font-size: 14px;
    line-height: 18px;
  }
}