/* ==========================================================================
   UNIT 10 · FAQ
   --------------------------------------------------------------------------
   • Main column: title + the shared accordion component
     (assets/css/components/accordion.css).
   • Side column: a CSS-sticky panel — meeting photo + "Discuss Your
     Architecture" card. Sticky is native, so accordion reflow above or
     beside it can never desync anything.
   Without JS every answer is visible (panels only collapse once faq.js
   adds .is-enhanced).
   ========================================================================== */

.faq {
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-cloud) 100%);
}

.faq__decor {
  background:
    radial-gradient(ellipse 35% 45% at 100% 20%, rgba(0, 169, 182, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 35% at 0% 85%, rgba(1, 62, 106, 0.06), transparent 70%);
}

[dir="rtl"] .faq__decor {
  scale: -1 1;
}

/* Large, faint question glyph as an ambient motif */
.faq__glyph {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-start: -3rem;
  inline-size: 18rem;
  block-size: auto;
  color: rgba(1, 62, 106, 0.045);
}

.faq__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .faq__grid {
    grid-template-columns: 1.35fr 0.65fr;
  }
}

.faq__main {
  display: grid;
  gap: var(--space-xl);
}

.faq__main h2 {
  text-align: center;
}

@media (min-width: 48rem) {
  .faq__main h2 {
    text-align: start;
  }
}

/* ---------------------------------------------------------------------------
   Sticky side panel
   --------------------------------------------------------------------------- */
.faq__aside {
  position: relative;
  display: grid;
  inline-size: min(100%, 26rem);
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .faq__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
    inline-size: 100%;
  }
}

.faq__photo {
  overflow: hidden;
  border-radius: var(--r-panel);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}

@media (min-width: 64rem) {
  .faq__photo {
    aspect-ratio: 760 / 900;
  }
}

.faq__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* CTA card overlapping the photo's lower half */
.faq__cta {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-block-start: -4rem;
  margin-inline: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--r-card);
  border: 1px solid var(--c-glass-border);
  background-color: rgba(2, 17, 58, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.faq__cta-icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background-color: var(--c-teal);
  color: var(--c-navy);
  box-shadow: 0 0 0 6px rgba(0, 169, 182, 0.18);
}

.faq__cta-icon svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.faq__cta .btn {
  inline-size: 100%;
}