/* FAQ Accordion — section styles
   The question list, the aside photo and the help card.
   Loads with the Tour Ceylon +94 theme. Depends on the shared styles
   snippet for the section shell, the container and the small pieces.
   -------------------------------------------------------------------- */

.tc94-faq__layout {
  display: grid;
  gap: var(--wp--preset--spacing--80);
  align-items: start;
}

@media (min-width: 62rem) {
  .tc94-faq__layout {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
      gap: var(--wp--preset--spacing--100);
    }
}

.tc94-faq__aside { display: grid; gap: var(--wp--preset--spacing--60); }

@media (min-width: 62rem) {
  .tc94-faq__aside {
      position: sticky;
      top: calc(var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--70));
    }
}

.tc94-faq__figure {
  position: relative;
  margin: 0;
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--md);
  aspect-ratio: 5 / 4;
}

.tc94-faq__figure img { width: 100%; height: 100%; object-fit: cover; }

.tc94-faq__help {
  padding: var(--wp--preset--spacing--60);
  background-color: var(--wp--preset--color--surface-subtle);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
}

.tc94-faq__help h3 {
  font-size: var(--wp--preset--font-size--base);
  margin-bottom: var(--wp--preset--spacing--30);
}

.tc94-faq__help p {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--50);
}

.tc94-accordion {
  border-top: 1px solid var(--wp--preset--color--line);
}

.tc94-accordion__item { border-bottom: 1px solid var(--wp--preset--color--line); }

.tc94-accordion__heading { margin: 0; }

.tc94-accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  width: 100%;
  padding: var(--wp--preset--spacing--50) 0;
  cursor: pointer;
  text-align: left;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--heading);
  color: var(--wp--custom--color--text);
  transition: color var(--tc94-transition-base);
}

.tc94-accordion__trigger:hover { color: var(--wp--preset--color--ocean-deep); }

.tc94-accordion__marker {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--circle);
  color: var(--wp--preset--color--ocean-deep);
  transition: transform var(--tc94-transition-base),
              background-color var(--tc94-transition-base),
              border-color var(--tc94-transition-base),
              color var(--tc94-transition-base);
}

.tc94-accordion__marker .tc94-icon { width: var(--wp--custom--icon--size-sm); height: var(--wp--custom--icon--size-sm); }

.tc94-accordion__trigger[aria-expanded="true"] .tc94-accordion__marker {
  transform: rotate(180deg);
  background-color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--custom--color--on-accent);
}

.tc94-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tc94-transition-base);
}

.tc94-accordion__panel[data-open] { grid-template-rows: 1fr; }

.tc94-accordion__panel > div { overflow: hidden; }

.tc94-accordion__panel p {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--custom--color--text-muted);
  max-width: var(--wp--custom--measure--prose);
}

.tc94-accordion__panel p + p { margin-top: var(--wp--preset--spacing--40); }

.tc94-accordion__panel > div > :last-child { margin-bottom: var(--wp--preset--spacing--60); }

/* --------------------------------------------------------------------------
   In the editor only
   The accordion script does not run there, so every answer would sit
   collapsed and the owner could not read what they are editing. The front
   end is untouched by this.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .tc94-accordion__panel { grid-template-rows: 1fr; }
.editor-styles-wrapper .tc94-accordion__marker { transform: rotate(180deg); }