/* About page: layout + readability overrides (scoped) */

.page-about .cards,
.page-about .list-grid {
  justify-content: center;
}

.page-about section.glass.section-center { padding: 16px !important; }

.page-about .hero .lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* Center the last row inside tiles (3 + 1, 3 + 2, etc.) */
.page-about .section-center .list-grid.rich-tiles {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
}
.page-about .section-center .list-grid.rich-tiles .list-item {
  width: 100%;
  max-width: 340px;
  flex: 0 1 340px;
}
@media (max-width: 640px) {
  .page-about .section-center .list-grid.rich-tiles .list-item {
    max-width: 520px;
    flex-basis: 100%;
  }
}

/* Center the last row inside the "5 key numbers" list */
.page-about #platform .desc-card .list-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.page-about #platform .desc-card .list-grid .list-item {
  width: 100%;
  max-width: 340px;
  flex: 0 1 340px;
}
@media (max-width: 640px) {
  .page-about #platform .desc-card .list-grid .list-item {
    max-width: 520px;
    flex-basis: 100%;
  }
}

/* One-row (desktop) blocks: Media + FAQ (no inner scroll) */
.page-about .cards.about-carousel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  overflow: visible;
}
@media (max-width: 900px) {
  .page-about .cards.about-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .page-about .cards.about-carousel { grid-template-columns: minmax(0, 1fr) !important; }
}
.page-about #media.cards.about-carousel > .card { cursor: zoom-in; text-align: center; }
.page-about #media.cards.about-carousel > .card strong {
  display: block;
  font-family: "Qunterra", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.2;
  color: var(--brand-primary);
  text-align: center;
}
.page-about #media.cards.about-carousel > .card,
.page-about #faq .cards.about-carousel > .card { padding: 12px !important; }

.page-about #media.cards.about-carousel > .card strong { min-height: unset !important; }
.page-about #media > .card > img { height: 140px !important; }
.page-about #media .about-slider { height: 140px; }

/* Center card grids on desktop by using fixed-width tracks */
@media (min-width: 769px) {
  .page-about .cards:not(.about-carousel) {
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  }
  .page-about .section-center .list-grid.rich-tiles {
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  }
  .page-about #numbers.cards { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); }
}

/* About tiles: make headings readable and centered */
.page-about .section-center .list-grid.rich-tiles .list-item {
  text-align: center;
  align-items: center;
}
.page-about .section-center .list-grid.rich-tiles .list-item strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--accent);
  filter: none;
}
.page-about .section-center .list-grid.rich-tiles .list-item .muted { text-align: center; }

/* About stats */
.page-about .about-stat {
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1;
  color: var(--accent);
  font-family: "Qunterra", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing: .01em;
}
.page-about .about-stat-caption {
  font-weight: 750;
  color: var(--text);
  text-align: center;
}

/* Media slider */
.page-about .about-slider {
  width: 100%;
  height: 170px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 10px;
  background: rgba(15, 23, 42, .04);
}
.page-about .about-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.page-about .about-slider:not(.is-ready) img:first-child { opacity: 1; }
.page-about .about-slider img.is-active { opacity: 1; }
.page-about .about-slider--ui img { object-position: 50% 30%; }

.page-about #about-gallery img { touch-action: pan-y; }

@media (max-width: 768px) {
  .page-about section.glass { padding: 14px !important; }
  .page-about #media > .card > img { height: 140px !important; }
  .page-about .about-slider { height: 140px; }

  /* Center single-column grids instead of full-width stretch */
  .page-about .cards:not(.about-carousel) { grid-template-columns: minmax(0, 520px) !important; justify-content: center; }
  .page-about .section-center .list-grid.rich-tiles { grid-template-columns: minmax(0, 640px) !important; }

  /* Make non-hero CTAs comfortable on mobile */
  .page-about #numbers .cta,
  .page-about #faq .cta {
    flex-direction: column;
    align-items: stretch;
  }
  .page-about #numbers .cta .btn,
  .page-about #faq .cta .btn { width: 100%; }
}

/* On larger phones: avoid an overly long one-column scroll */
@media (min-width: 520px) and (max-width: 768px) {
  .page-about #numbers.cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .page-about #why .list-grid,
  .page-about #platform .list-grid,
  .page-about #mission .list-grid,
  .page-about #trust .list-grid,
  .page-about #what-we-do .list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-about #platform .desc-card .list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}