/* ==========================================================================
   FAQ

   The card-row FAQ from venturegrowthcapital.com, resolved to this site's
   tokens. Geometry is the reference's; colour, type and radius are ours.

     intro        centred, 720px, 56px above the list
     list         820px, 16px between rows
     row          White on Shell, 8px (the house surface radius), a 1px ring
                  instead of a border so the lift can deepen it without the
                  box changing size
     trigger      24px / 28px, 24px gap, question left, ringed plus right
     icon         40px circle, plus rotates 45deg into a cross when open
     panel        grid track 0fr -> 1fr, 350ms on the site curve
     answer       0 28px 28px, 68ch

   No literal colour below: everything comes off tokens.css.
   ========================================================================== */

.yp-faq {
  /* Shell, so it alternates against the Sand of Book a Call directly above. */
  background: rgb(var(--yp-shell-rgb));
  padding: 72px 0;
  --yp-faq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) { .yp-faq { padding: 104px 0; } }

.yp-faq-wrap {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ---- intro --------------------------------------------------------------- */

.yp-faq-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.yp-faq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 22px;
  border-radius: 50%;
  background: rgb(var(--yp-ink-rgb) / 0.05);
  color: rgb(var(--yp-ink-rgb) / 0.62);
}

.yp-faq-badge svg { width: 28px; height: 28px; }

/* Divi pads every heading and zeroes letter-spacing with !important, so both
   are taken back here. Size and tracking follow the site's other section
   heads: caps, wide, at the display scale. */
.yp-faq-title {
  margin: 0;
  padding: 0 !important;
  font-family: var(--yp-serif);
  font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4rem);
  line-height: 1.02;
  font-weight: 560 !important;
  letter-spacing: 0.14em !important;
  /* Tracking adds a trailing gap after the last letter; pull the optical
     centre back by half of it so the word sits on the column's axis. */
  text-indent: 0.14em;
  text-transform: uppercase;
  color: var(--yp-ink);
}

.yp-faq-deck {
  margin: 20px 0 0;
  padding: 0 !important;
  max-width: 54ch;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.68);
  text-wrap: balance;
}

/* ---- rows ---------------------------------------------------------------- */

.yp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

/* overflow clips the glow to the rounded corners; isolate keeps the glow
   behind the row's own content without a z-index on every child. */
.yp-faq-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 8px;
  background: var(--yp-white);
  box-shadow: 0 0 0 1px rgb(var(--yp-ink-rgb) / 0.08);
  transition: box-shadow 400ms var(--yp-faq-ease), transform 400ms var(--yp-faq-ease);
}

/* focus-within matches the lift for keyboard users, who otherwise get none
   of the hover feedback. */
.yp-faq-row:hover,
.yp-faq-row:focus-within { transform: translateY(-2px); }

.yp-faq-row:hover,
.yp-faq-row:focus-within,
.yp-faq-row.is-open {
  box-shadow: 0 0 0 1px rgb(var(--yp-ink-rgb) / 0.14),
              0 16px 32px -16px rgb(var(--yp-ink-rgb) / 0.16);
}

/* Cursor-tracked wash. The reference lights the row in its accent; this site
   has no accent, so the wash is Sand, the darker of the two beiges, on White.
   The 50% fallbacks centre it before the pointer has been read, so a row
   entered by keyboard or touch still lights sensibly. */
.yp-faq-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--faq-x, 50%) var(--faq-y, 50%),
              rgb(var(--yp-sand-rgb) / 0.85), rgb(var(--yp-sand-rgb) / 0) 70%);
  transition: opacity 500ms var(--yp-faq-ease);
}

.yp-faq-row:hover .yp-faq-glow,
.yp-faq-row:focus-within .yp-faq-glow,
.yp-faq-row.is-open .yp-faq-glow { opacity: 1; }

.yp-faq-q {
  margin: 0;
  padding: 0 !important;
  font: inherit;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.yp-faq-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 28px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.yp-faq-trigger:focus-visible {
  outline: 2px solid var(--yp-ink);
  outline-offset: -4px;
  border-radius: 8px;
}

.yp-faq-question {
  font-family: var(--yp-serif);
  font-size: 19px;
  font-weight: 560;
  line-height: 1.4;
  letter-spacing: 0;
  color: rgb(var(--yp-ink-rgb) / 0.74);
  transition: color 300ms var(--yp-faq-ease);
}

.yp-faq-trigger:hover .yp-faq-question,
.yp-faq-row.is-open .yp-faq-question { color: var(--yp-ink); }

/* rotate and scale as individual properties rather than one transform: open
   turns the plus into a cross and hover enlarges it, and written as two
   transform rules they would overwrite each other. */
.yp-faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  rotate: 0deg;
  scale: 1;
  border: 1px solid rgb(var(--yp-ink-rgb) / 0.16);
  border-radius: 50%;
  color: rgb(var(--yp-ink-rgb) / 0.62);
  transition: rotate 300ms var(--yp-faq-ease), scale 400ms var(--yp-faq-ease),
    color 300ms var(--yp-faq-ease), border-color 300ms var(--yp-faq-ease),
    background-color 300ms var(--yp-faq-ease);
}

.yp-faq-icon svg { width: 20px; height: 20px; }

.yp-faq-row:hover .yp-faq-icon {
  scale: 1.06;
  border-color: rgb(var(--yp-ink-rgb) / 0.34);
  background-color: rgb(var(--yp-ink-rgb) / 0.04);
}

.yp-faq-row.is-open .yp-faq-icon {
  rotate: 45deg;
  color: var(--yp-ink);
  border-color: rgb(var(--yp-ink-rgb) / 0.34);
}

/* ---- panel ---------------------------------------------------------------
   A 0fr track collapses the row to nothing and 1fr expands it to exactly its
   content height, so it interpolates cleanly where height:auto cannot, with
   nothing to measure when the viewport changes or a webfont lands. */
.yp-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms var(--yp-faq-ease);
}

.yp-faq-row.is-open .yp-faq-panel { grid-template-rows: 1fr; }

/* min-height:0 lets the track reach 0fr; overflow clips the text while it
   does. The padding lives on the paragraph, inside the clip. */
.yp-faq-panel-inner { overflow: hidden; min-height: 0; }

.yp-faq-answer {
  margin: 0;
  padding: 0 28px 28px !important;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.65;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.78);
  opacity: 0;
  transition: opacity 300ms ease 60ms;
}

.yp-faq-row.is-open .yp-faq-answer { opacity: 1; }

/* No JS, or the script bailed: every answer is simply open and legible. */
.yp-faq-list:not(.is-ready) .yp-faq-panel { grid-template-rows: 1fr; }
.yp-faq-list:not(.is-ready) .yp-faq-answer { opacity: 1; }
.yp-faq-list:not(.is-ready) .yp-faq-icon { display: none; }

@supports not (grid-template-rows: 0fr) {
  .yp-faq-panel { display: block; height: 0; overflow: hidden; transition: none; }
  .yp-faq-row.is-open .yp-faq-panel { height: auto; }
}

/* ---- closing line -------------------------------------------------------- */

.yp-faq-aside {
  margin: 40px auto 0;
  padding: 0 !important;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0 !important;
  color: rgb(var(--yp-ink-rgb) / 0.68);
}

.yp-faq-link {
  color: var(--yp-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--yp-ink-rgb) / 0.3);
  transition: border-color 250ms ease;
}

.yp-faq-link:hover,
.yp-faq-link:focus-visible { border-color: var(--yp-ink); }

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 620px) {
  .yp-faq-wrap { padding: 0 16px; }
  .yp-faq-intro { margin-bottom: 40px; }
  .yp-faq-trigger { padding: 20px; gap: 16px; }
  .yp-faq-question { font-size: 17px; }
  .yp-faq-icon { width: 36px; height: 36px; }
  .yp-faq-answer { padding: 0 20px 22px !important; font-size: 16px; }
}

/* ---- reduced motion ------------------------------------------------------
   The wash is the cursor's own movement rendered back, so it stays. The lift
   and the scale are the parts that move on their own. */
@media (prefers-reduced-motion: reduce) {
  .yp-faq-panel,
  .yp-faq-answer,
  .yp-faq-row { transition: none; }
  .yp-faq-row:hover,
  .yp-faq-row:focus-within { transform: none; }
  .yp-faq-icon,
  .yp-faq-row:hover .yp-faq-icon { scale: 1; transition: color 300ms, border-color 300ms, background-color 300ms; }
}