/* ==========================================================================
   Editorial and contact
   FAQ accordion · testimonials · gallery · destinations · contact form ·
   legal pages.
   ========================================================================== */

/* --- FAQ ------------------------------------------------------------------ */
/* <details>/<summary>, so open/close and keyboard support are the browser's.
   Nothing here depends on script having run. */

/* The header sits ABOVE the panes, not beside them.

   Placing it in its own column made the section a three-column grid — a
   short heading, then the question index, then the answer. The heading
   column ran out of content a third of the way down and left a tall empty
   void on the left of the section. Stacking it gives both panes the full
   width and removes the hole entirely. */
.faq-layout {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.faq-layout > .section-head {
  max-width: none;
}

@media (min-width: 920px) {
  /* The heading and its supporting line share the top row, so the lead text
     is not a lonely column of its own. */
  .faq-layout > .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: end;
  }
}

.faq-layout__more {
  display: inline-block;
  margin-block-start: var(--space-3);
  font-weight: 600;
}

.faq-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq + .faq {
  border-block-start: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  /* 44px touch target comes from the padding, not a min-height, so a long
     two-line question grows rather than clipping. */
  padding: var(--space-4) clamp(16px, 2vw, 24px);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  background: var(--color-surface);
  transition: background var(--transition-fast);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  background: var(--color-surface-muted);
}

.faq__question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Plus that becomes a minus. Drawn with two pseudo-elements so it needs no
   icon font and rotates on transform alone. */
.faq__question::after {
  content: '';
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  margin-block-start: 4px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--color-accent-strong);
  transition: transform var(--transition-normal);
}

.faq[open] .faq__question::after {
  /* Rotating 90° hides the vertical bar behind the horizontal one, so the
     plus reads as a minus without swapping any markup. */
  transform: rotate(90deg);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.faq__answer {
  padding: 0 clamp(16px, 2vw, 24px) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  max-inline-size: var(--measure);
}

.faq-list--compact .faq__question {
  padding-block: var(--space-3);
  font-size: var(--fs-small);
}

/* --- Destinations --------------------------------------------------------- */

.destination-grid {
  display: grid;
  gap: var(--stack);
  padding: 0;
  margin: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.destination-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.destination-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.destination-card__link {
  display: grid;
  block-size: 100%;
  text-decoration: none;
  color: inherit;
}

.destination-card__media {
  border-radius: 0;
}

.destination-card__text {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: clamp(18px, 2vw, 26px);
}

.destination-card__title {
  font-size: var(--fs-h4);
}

.destination-card__body {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.destination-card__more {
  margin-block-start: var(--space-2);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
}

.destination-card:hover .record-image__img {
  transform: scale(1.05);
}

.destination-support {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.destination-support__title {
  margin-block-end: var(--space-4);
  font-size: var(--fs-h4);
}

.destination-support__list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  font-size: var(--fs-small);
}

.destination-support__list li {
  position: relative;
  padding-inline-start: 26px;
}

.destination-support__list li::before {
  position: absolute;
  content: '';
  inset-inline-start: 2px;
  inset-block-start: 0.45em;
  inline-size: 11px;
  block-size: 6px;
  border-inline-start: 2px solid var(--color-accent-strong);
  border-block-end: 2px solid var(--color-accent-strong);
  rotate: -45deg;
}

.destination-detail {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .destination-detail {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  }
}

.destination-detail__main {
  display: grid;
  gap: var(--space-5);
}

.destination-detail__media {
  border-radius: var(--radius-lg);
}

.destination-hospital {
  padding: var(--space-4) 0;
  border-block-start: 1px solid var(--color-border);
}

.destination-hospital__name {
  font-size: var(--fs-h4);
}

.destination-hospital__where {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.destination-detail__aside .fact-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

/* --- Contact -------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 920px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
  }
}

.contact-form-card {
  padding: clamp(22px, 2.8vw, 38px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.contact-form-card__title {
  font-size: var(--fs-h3);
}

.contact-form-card__hint {
  margin-block: var(--space-2) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.contact-aside {
  display: grid;
  gap: var(--stack);
}

.contact-detail {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.contact-detail__title {
  margin-block-end: var(--space-4);
  font-size: var(--fs-h4);
}

.contact-detail__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.contact-detail__list dt {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.contact-detail__list dd {
  margin: 0;
  font-weight: 600;
}

/* --- Forms ---------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-4);
}

.form__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 620px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form__field {
  display: grid;
  gap: 6px;
}

.form__field label {
  font-size: var(--fs-small);
  font-weight: 600;
}

.form__field label span {
  color: var(--color-accent-strong);
}

/* `select` included: the enquiry panel introduced the first <select> in a
   public form, and without it the control rendered at its 23px browser
   default — half the 44px touch target §46 requires, and visually unrelated
   to the fields above and below it. */
.form__field input,
.form__field select,
.form__field textarea {
  inline-size: 100%;
  min-block-size: 46px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-small);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__field textarea {
  min-block-size: auto;
  resize: vertical;
}

.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(0 164 188 / 0.22);
}

/* Error state is a colour AND a message — colour alone is not an accessible
   signal. */
.form__field [aria-invalid="true"] {
  border-color: var(--color-danger, #b3261e);
}

.form__error {
  color: var(--color-danger, #b3261e);
  font-size: var(--fs-caption);
}

.form__help {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-small);
}

.form__consent input {
  /* 24px, the WCAG 2.5.8 control minimum (§45 pass, 2026-08-09) — and the
     label beside it is the larger target either way. */
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 2px;
  accent-color: var(--color-primary);
}

.form__consent .form__error {
  grid-column: 1 / -1;
}

/*
 * Honeypot. Removed from the accessibility tree by `aria-hidden` on the
 * wrapper AND from the layout here. `display: none` alone is skipped by some
 * bots that look for it, so this is moved off-canvas instead while staying
 * genuinely unreachable: no tab stop, no pointer events.
 */
.form__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.form-success,
.form-errors {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
}

.form-success {
  border: 1px solid var(--color-accent);
  background: rgb(0 164 188 / 0.10);
}

.form-errors {
  border: 1px solid var(--color-danger, #b3261e);
  background: rgb(179 38 30 / 0.07);
  color: var(--color-danger, #b3261e);
}

.form-errors ul {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-5);
}

button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --- Legal ---------------------------------------------------------------- */

.legal-layout {
  display: grid;
  justify-content: center;
}

.legal-body {
  max-inline-size: 72ch;
}

.legal-body__meta {
  margin-block-end: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.legal-body__content h2 {
  margin-block: var(--space-6) var(--space-3);
  font-size: var(--fs-h4);
}

.legal-body__content p,
.legal-body__content li {
  color: var(--color-text-muted);
}

.legal-body__content ul {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding-inline-start: var(--space-6);
}

.legal-body__contact {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-small);
}

@media (prefers-reduced-motion: reduce) {
  .faq__question::after,
  .destination-card,
  .gallery__item .record-image__img,
  .destination-card .record-image__img {
    transition: none;
    transform: none;
  }
}

/*
   A row left holding ONE field spans the full width.

   The compact rail form drops the country input, which left the phone field
   alone in a two-column row — half width, with its own label above a box too
   narrow to show what had been typed. `:has()` fixes it from the layout rather
   than by adding a modifier class at every call site that might one day drop a
   field.
*/
@media (min-width: 620px) {
  .form__row:has(> .form__field:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}