/* ══════════════════════════════════════════════════════════
   Rise Training Club — About Page
   Matched to live site screenshot
   ══════════════════════════════════════════════════════════ */

/* ── 1. Hero — dark bg ── */
.about-hero {
  min-height: var(--hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  padding-top: 160px;
  padding-bottom: 160px;
  padding-left: max(80px, calc(50vw - 640px));
  padding-right: max(80px, calc(50vw - 640px));
  background-image: url('../Assets/images/Background-1.webp');
  background-size: cover;
  background-position: center center;
}
.about-hero h1 { color: var(--color-white); max-width: 700px; }
.about-hero p { color: var(--color-white); max-width: 600px; }
.about-hero .btn-group { align-self: flex-start; }

/* ── 2. Mission — LIGHT bg, image left + text right ── */
.about-mission {
  background-image: url('../Assets/images/Frame-47788-scaled-1.png');
  background-size: cover;
}

/* ── 3. Values — DARK bg, logo centered + heading + text ── */
.about-values {
  background-image: url('../Assets/images/Frame-47624-1-1.png');
  background-size: cover;
  text-align: center;
}
.about-values h2 { color: var(--color-white); }
.about-values p { color: var(--color-white); max-width: 800px; margin: var(--space-md) auto 0; }
.about-values__logo {
  display: block;
  max-width: 250px;
  margin: 0 auto var(--space-xl);
}

/* ── 4. Why Choose — light bg, PHOTO cards ── */
.about-why {
  background-image: url('../Assets/images/Frame-47788-scaled-1.png');
  background-size: cover;
}
.about-why__heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.about-why__grid {
  display: flex;
  gap: var(--card-gap);
  overflow: hidden;
  position: relative;
}

.about-why__grid .about-why-card {
  flex: 0 0 calc(33.333% - 16px);
  transition: transform 0.6s ease;
}
.about-why-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: 22px;
  border-radius: 15px;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
}
.about-why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.about-why-card > * { position: relative; z-index: 1; }
.about-why-card h3 { color: var(--color-white); font-size: 20px; }
.about-why-card p { color: rgba(255,255,255,0.85); }
.about-why__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ── 5. Amenities — DARK bg, text left + image right ── */
.about-amenities {
  background-image: url('../Assets/images/Frame-47616-1-2.png');
  background-size: cover;
}
.about-amenities h2 { color: var(--color-white); }
.about-amenities p { color: var(--color-white); }
.about-amenities .two-col__right img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ── 6. Community — LIGHT bg, heading+text top, wide image below ── */
.about-community {
  background-image: url('../Assets/images/Frame-47788-scaled-1.png');
  background-size: cover;
}
.about-community__top {
  display: flex;
  justify-content: space-between;
  gap: var(--column-gap);
  margin-bottom: var(--space-xl);
}
.about-community__top h2 {
  flex: 0 0 45%;
  color: var(--color-primary);
}
.about-community__top p {
  flex: 0 0 50%;
}
.about-community__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ── 7. Inclusivity — DARK bg, image left + text right ── */
.about-inclusivity {
  background-image: url('../Assets/images/Frame-47624-1-1.png');
  background-size: cover;
}
.about-inclusivity h2 { color: var(--color-white); }
.about-inclusivity p { color: var(--color-white); }
.about-inclusivity .two-col__left img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ── 8. Final CTA — WHITE bg, centered heading + staggered gallery ── */
.about-cta {
  background-color: var(--color-white);
  text-align: center;
}
.about-cta h2 { color: var(--color-primary); }
.about-cta p { color: var(--color-text); margin-top: var(--space-md); }
.about-cta__gallery-wrapper {
  margin-top: var(--space-xl);
  margin-left: calc(-1 * max(80px, calc(50vw - 640px)));
  margin-right: calc(-1 * max(80px, calc(50vw - 640px)));
  overflow: hidden;
}

.about-cta__gallery {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  animation: gallery-scroll 30s linear infinite;
  width: max-content;
}

@keyframes gallery-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.about-cta__gallery img {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  border-radius: 0;
}
.about-cta__gallery img {
  border-radius: 15px;
}
/* Staggered heights — repeating wave pattern every 5 images */
.about-cta__gallery img:nth-child(5n+1) { height: 280px; margin-top: 60px; flex: 0 0 260px; }
.about-cta__gallery img:nth-child(5n+2) { height: 320px; margin-top: 30px; flex: 0 0 280px; }
.about-cta__gallery img:nth-child(5n+3) { height: 380px; margin-top: 0;   flex: 0 0 320px; }
.about-cta__gallery img:nth-child(5n+4) { height: 320px; margin-top: 30px; flex: 0 0 280px; }
.about-cta__gallery img:nth-child(5n+5) { height: 280px; margin-top: 60px; flex: 0 0 260px; }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1280px) {
  .about-hero { padding: 140px 20px; }
}
@media (max-width: 1024px) {
  .about-hero { padding: 100px 20px; }
  .about-why__grid { grid-template-columns: 1fr; }
  .about-community__top { flex-direction: column; }
  .about-community__top h2, .about-community__top p { flex: 1 1 100%; }
  .about-cta__gallery img:nth-child(1) { height: 200px; margin-top: 40px; }
  .about-cta__gallery img:nth-child(2) { height: 240px; margin-top: 20px; }
  .about-cta__gallery img:nth-child(3) { height: 280px; margin-top: 0; }
  .about-cta__gallery img:nth-child(4) { height: 240px; margin-top: 20px; }
  .about-cta__gallery img:nth-child(5) { height: 200px; margin-top: 40px; }
}
@media (max-width: 767px) {
  .about-hero { padding: 80px 20px; min-height: auto; }
  .about-cta__gallery { flex-wrap: wrap; justify-content: center; }
  .about-cta__gallery img { flex: 0 0 45%; height: 200px !important; margin-top: 0 !important; }
  .about-values__logo { max-width: 180px; }
}