/* =========================================================================
   Aster — Common questions
   The panels open by animating grid-template-rows from 0fr to 1fr, so the
   height is never measured in JavaScript and the transition is CSS-only.
   ========================================================================= */

.aster-questions__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--wp--custom--grid-gap) clamp(var(--wp--preset--spacing--60), 6vw, var(--wp--preset--spacing--100));
  align-items: start;
}

.aster-questions__figure {
  width: min(100%, 20rem);
  margin-top: var(--wp--preset--spacing--80);
}
.aster-questions__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--ratio-portrait);
  object-fit: cover;
  object-position: center 30%;
  background: var(--wp--custom--image-fill);
}


/* -------------------------------------------------------------------------
   The accordion
   ------------------------------------------------------------------------- */
.aster-accordion {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
}

.aster-accordion__item {
  border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
}

.aster-accordion__heading {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.aster-accordion__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--wp--preset--spacing--50);
  width: 100%;
  padding: var(--wp--preset--spacing--60) 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.aster-accordion__index {
  padding-top: 0.42em;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking-label);
  color: var(--wp--preset--color--accent);
}

.aster-accordion__label {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-normal);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--contrast);
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-accordion__trigger:hover .aster-accordion__label {
  color: var(--wp--preset--color--accent);
}

/* A plus that loses its vertical stroke rather than rotating into an X. */
.aster-accordion__sign {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.45em;
}
.aster-accordion__sign::before,
.aster-accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--wp--preset--color--contrast);
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.aster-accordion__sign::after { transform: rotate(90deg); }
.aster-accordion__trigger[aria-expanded="true"] .aster-accordion__sign::after { transform: rotate(0deg); }

.aster-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.aster-accordion__panel > * { overflow: hidden; }

/* The trigger is nested inside its heading, so match on the item rather than
   reaching for a sibling selector. */
.aster-accordion__item:has(.aster-accordion__trigger[aria-expanded="true"]) .aster-accordion__panel {
  grid-template-rows: 1fr;
}

.aster-accordion__panel-inner {
  padding-left: calc(var(--wp--preset--font-size--xs) * 2.6 + var(--wp--preset--spacing--50));
  padding-right: var(--wp--preset--spacing--80);
}
.aster-accordion__panel-inner > :first-child { padding-top: 0; }
.aster-accordion__panel-inner > :last-child { padding-bottom: var(--wp--preset--spacing--60); }

.aster-accordion__panel-inner p {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--ink-secondary);
}
.aster-accordion__panel-inner p:last-child { margin-bottom: 0; }


/* -------------------------------------------------------------------------
   Tablet — the photograph gives way to the questions
   ------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .aster-questions__layout { grid-template-columns: minmax(0, 1fr); }
  .aster-questions__figure { display: none; }
  .aster-questions__list { margin-top: var(--wp--preset--spacing--70); }
}


/* -------------------------------------------------------------------------
   Phone
   ------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  .aster-accordion__trigger { gap: var(--wp--preset--spacing--40); }
  .aster-accordion__panel-inner {
    padding-left: 0;
    padding-right: 0;
  }
}