:root {
  --faq-card-light-bg: var(--color-card-light, #ffffff);
  --faq-card-light-fg: var(--color-primary, #11263b);
  --faq-card-light-subtitle: var(--color-muted, #4b5565);
  --faq-card-light-button: var(--color-primary, #11263b);
  --faq-card-dark-bg: var(--color-primary, #0a4d7a);
  --faq-card-dark-fg: #ffffff;
  --faq-card-dark-subtitle: rgba(255, 255, 255, 0.9);
  --faq-card-dark-button: rgba(255, 255, 255, 0.95);
  /* Base card height used to compute a proportional masonry offset (2/5 of card height) */
  --faq-card-height: 200px;
  --faq-masonry-offset: calc(var(--faq-card-height) * 0.4);
}

/* Optional full-bleed wrapper (used on the landing page) */
.faq-bleed {
  /* Full-bleed band: panel background, radius and shadow live here so the
     colored band spans the viewport while inner content can remain centered. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  /* background: var(--color-surface); */
  padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 48px);
  /* box-shadow: 0 12px 30px rgba(11, 19, 32, 0.06); */
}

@media (max-width: 699px) {
  .faq-bleed {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.faq-grid-section {
  /* Inner section becomes transparent — the full-bleed wrapper holds the
     visual treatment. Keep a small inner padding so grid items don't touch
     the rounded corners when placed flush inside the band. */
  background: transparent;
  padding: 8px 0; /* small vertical padding only; horizontal padding comes from .faq-bleed */
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.faq-grid-heading {
  text-align: center;
  margin: 0 0 24px;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-primary);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  grid-auto-rows: auto;
}

.faq-grid a.faq-card,
.faq-card {
  --faq-card-bg: var(--faq-card-light-bg);
  --faq-card-fg: var(--faq-card-light-fg);
  --faq-card-subtitle-color: var(--faq-card-light-subtitle);
  --faq-card-button-color: var(--faq-card-light-button);

  background: var(--faq-card-bg);
  color: var(--faq-card-fg);
  border-radius: 12px;
  padding: 20px 18px;
  border: 1px solid rgba(11, 19, 32, 0.04);
  box-shadow: 0 10px 24px rgba(11, 19, 32, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: var(--faq-card-height);
  position: relative; /* allow absolute positioning of inner elements */
  text-decoration: none; /* if the card is an anchor, remove default link decoration */
  transform: translateY(0);
  transition: transform 0.25s ease;
}

.faq-card-body {
  /* absolutely center the title/subtitle block within the card */
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.faq-card-title {
  margin: 0;
  font-size: 1rem; /* slightly smaller */
  background: transparent; /* ensure no boxed field around title */
  padding: 0;
  text-align: left;
  color: var(--faq-card-fg);
  font-weight: 700;
}

.faq-card:hover .faq-card-title {
  text-decoration: underline;
}

.faq-card-subtitle {
  margin: 6px 0 0; /* small gap beneath title */
  color: var(--faq-card-subtitle-color);
  font-size: 0.92rem; /* slightly smaller */
  line-height: 1.35;
}

.faq-card-actions {
  position: absolute; /* pin the CTA to the bottom-right */
  right: 18px;
  bottom: 12px;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.faq-card-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--faq-card-fg); /* match the title color so it contrasts correctly */
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.faq-card-button:hover,
.faq-card-button:focus {
  text-decoration: underline;
}

/* Default pattern: single-column & >=1024px fallback uses simple odd/even */
.faq-grid a.faq-card:nth-of-type(even) {
  --faq-card-bg: var(--faq-card-dark-bg);
  --faq-card-fg: var(--faq-card-dark-fg);
  --faq-card-subtitle-color: var(--faq-card-dark-subtitle);
  --faq-card-button-color: var(--faq-card-dark-button);
}

/* Two-column brick pattern (checkerboard across rows) */
@media (min-width: 600px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-card {
    padding: 24px 22px;
  }

  .faq-grid a.faq-card:nth-of-type(4n),
  .faq-grid a.faq-card:nth-of-type(4n + 1) {
    --faq-card-bg: var(--faq-card-light-bg);
    --faq-card-fg: var(--faq-card-light-fg);
    --faq-card-subtitle-color: var(--faq-card-light-subtitle);
    --faq-card-button-color: var(--faq-card-light-button);
  }

  .faq-grid a.faq-card:nth-of-type(4n + 2),
  .faq-grid a.faq-card:nth-of-type(4n + 3) {
    --faq-card-bg: var(--faq-card-dark-bg);
    --faq-card-fg: var(--faq-card-dark-fg);
    --faq-card-subtitle-color: var(--faq-card-dark-subtitle);
    --faq-card-button-color: var(--faq-card-dark-button);
  }
}

/* Three-column layout restores a simple alternating pattern */
@media (min-width: 1024px) {
  .faq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .faq-grid a.faq-card:nth-of-type(odd) {
    --faq-card-bg: var(--faq-card-light-bg);
    --faq-card-fg: var(--faq-card-light-fg);
    --faq-card-subtitle-color: var(--faq-card-light-subtitle);
    --faq-card-button-color: var(--faq-card-light-button);
  }

  .faq-grid a.faq-card:nth-of-type(even) {
    --faq-card-bg: var(--faq-card-dark-bg);
    --faq-card-fg: var(--faq-card-dark-fg);
    --faq-card-subtitle-color: var(--faq-card-dark-subtitle);
    --faq-card-button-color: var(--faq-card-dark-button);
  }

  .faq-grid a.faq-card:nth-of-type(3n + 2) {
    transform: translateY(var(--faq-masonry-offset));
  }

  .faq-grid-heading {
    position: absolute;
    top: clamp(18px, 4vw, 40px);
    left: 50%;
    /* make the heading match the width of one grid column (three-column layout) */
    width: calc((100% - 32px) / 3);
    transform: translate(-50%, 0);
    margin: 0;
    padding: 0; /* float on top with no extra padding */
    background: transparent; /* remove pill background so it floats */
    border-radius: 0;
    box-shadow: none;
    z-index: 2;
    pointer-events: none;
    text-align: center;
    font-size: 1.6rem; /* slightly larger to match column width */
  }

  .faq-grid {
    margin-top: calc(var(--faq-masonry-offset) / 2);
    margin-bottom: var(--faq-masonry-offset);
  }
}

/* On very wide screens increase the stagger for a stronger masonry feel */
@media (min-width: 1400px) {
  :root {
    /* increase card height on very wide screens, offset stays 2/5 of card height */
    --faq-card-height: 260px;
  }
}