/* ==========================================================================
   Texium Solutions — FAQ Accordion widget
   Two columns: the full accordion list on one side (every question
   stacked, independent of which is open) and a single image area on the
   other that always shows exactly one image — the one belonging to
   whichever question is currently expanded, cross-fading on change.
   Consumes design tokens from theme.css only.
   ========================================================================== */

.texium-faq {
  display: flex;
  align-items: stretch;
  gap: 48px;
}

.texium-faq--image-left {
  flex-direction: row-reverse;
}

.texium-faq__list {
  flex: 1 1 0;
  min-width: 0;
}

.texium-faq__heading-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.texium-faq__heading {
  margin: 0;
  font-family: var(--texium-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: var(--texium-leading-tight);
  color: var(--texium-heading);
}

.texium-faq__subtext {
  margin: 0;
  font-size: 16px;
  line-height: var(--texium-leading-body);
  color: var(--texium-text-muted);
}

/* ---- Accordion item ----
   Only a horizontal divider BETWEEN items: every item gets a bottom
   border except the last, and none get a top border (the previous
   item's bottom border already serves as that divider) — so there is
   no line above the first item or below the last, and no double line
   between adjacent items. */

.texium-faq__item {
  border-bottom: 1px solid var(--texium-border);
}

.texium-faq__item:last-child {
  border-bottom: none;
}

.texium-faq__question {
  margin: 0;
}

.texium-faq__question-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--texium-space-md);
  width: 100%;
  min-height: 44px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.texium-faq__question-text {
  font-family: var(--texium-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texium-heading);
  transition: color var(--texium-transition-fast);
}

.texium-faq__item.is-open .texium-faq__question-text {
  color: var(--texium-primary);
}

.texium-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--texium-text-muted);
  transition: color var(--texium-transition-fast), transform 180ms ease;
}

.texium-faq__icon svg {
  width: 18px;
  height: 18px;
}

.texium-faq__item.is-open .texium-faq__icon {
  color: var(--texium-primary);
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .texium-faq__icon {
    transition: none;
  }
}

/* ---- Answer panel ----
   Height- and opacity-animated together via grid-template-rows
   (0fr -> 1fr), which measures the content's real (variable) height
   itself — no JS height calculation, no fixed height to overflow or
   clip long answers, and no flicker when jumping from one open item
   straight to another (both the old and new panel transition in the
   same frame). [hidden] still gates layout for the very first paint
   (and no-JS/no-CSS fallback) but isn't what drives the animation —
   the is-open class is. */

.texium-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--texium-transition-normal), opacity var(--texium-transition-normal);
}

.texium-faq__answer[hidden] {
  display: grid;
}

.texium-faq__item.is-open .texium-faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.texium-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.texium-faq__answer-inner-content {
  padding-top: 12px;
  padding-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .texium-faq__answer {
    transition: none;
  }
}

.texium-faq__answer-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texium-text-muted);
}

.texium-faq__answer-text p:first-child {
  margin-top: 0;
}

.texium-faq__answer-text p:last-child {
  margin-bottom: 0;
}

/* ---- Visual column ----
   Matches the full height of the list column next to it (both are
   stretched by align-items: stretch on the parent .texium-faq), so the
   image area is exactly as tall as the heading + accordion content,
   not a fixed height of its own. Every item's image is stacked in the
   same spot inside it and only the active one is visible, cross-fading
   on change instead of being swapped abruptly or resizing the column. */

.texium-faq__visual {
  position: relative;
  flex: 0 0 40%;
  width: 40%;
  height: auto;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
}

.texium-faq__image-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--texium-transition-normal);
}

.texium-faq__image-wrap.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .texium-faq__image-wrap {
    transition: none;
  }
}

.texium-faq__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Responsive ----
   Tablet: tighten gap/padding without squeezing the list column.
   Mobile: image column drops out of the side-by-side layout and sits
   above the list instead (full width, no longer sticky — there's no
   tall list beside it to scroll past once stacked), and the list takes
   the full available width with no fixed widths that could overflow. */

@media (max-width: 1024px) {
  .texium-faq {
    gap: 28px;
  }
}

@media (max-width: 782px) {
  .texium-faq,
  .texium-faq--image-left {
    flex-direction: column;
    gap: var(--texium-space-lg);
  }

  .texium-faq__list {
    width: 100%;
  }

  .texium-faq__visual {
    position: static;
    width: 100%;
    flex-basis: auto;
    height: 260px;
    order: -1;
  }

  .texium-faq__question-button {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .texium-faq__question-text {
    font-size: 16px;
  }
}