/*
 * ============================================================
 * 03-section-styles.css
 * Page section styles extracted from the Figma Make
 * "Design elegant landing page" export.
 * ============================================================
 *
 * CONTENTS
 *   1. Layout Container
 *   2. Navigation / Header
 *   3. Hero Section
 *   4. Stats Section
 *   5. About Section
 *   6. Events Section
 *   7. Rankings Section
 *   8. Benefits / Features Section
 *   9. Membership / Pricing Section
 *  10. Footer / CTA Section
 *  11. Common Section Utilities
 * ============================================================
 *
 * Requires: 01-html-elements.css (tokens)
 */


/* ============================================================
   1. Layout Container
   ============================================================ */

/*
 * Fluid container that maxes out at 80 rem (1280 px).
 * Mirrors the .container utility in the Tailwind v4 config.
 */
.container {
  width:   100%;
  padding-inline: calc(var(--spacing) * 6);   /* 1.5 rem side gutters */
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
  margin-inline:  auto;
}

@media (width >= 40rem)  { .container { max-width: 40rem; } }
@media (width >= 48rem)  { .container { max-width: 48rem; } }
@media (width >= 64rem)  { .container { max-width: 64rem; } }
@media (width >= 80rem)  { .container { max-width: 80rem; } }
@media (width >= 96rem)  { .container { max-width: 96rem; } }


/* ============================================================
   2. Navigation / Header
   ============================================================ */

.site-header {
  /* position: fixed;
  top:      0;
  left:     0;
  right:    0;
  z-index:  50; */

  /* Frosted-glass background */
  background-color: color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter:  blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));

  border-bottom: 1px solid var(--border);
}

/* Keep fixed header below WP admin bar when logged in */
body.admin-bar .site-header {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }
}

.site-header__inner {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             calc(var(--spacing) * 2);
  min-height:      calc(var(--spacing) * 20);
  padding-inline:  calc(var(--spacing) * 6);
  padding-block:   calc(var(--spacing) * 2);
  max-width:       var(--container-8xl);
  margin-inline:   auto;
}

.site-header__top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 4);
}
@media (width >= 48rem) {
  .site-header__top {
    flex-direction: row;
  }
}

.site-header__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure page content starts below admin bar + fixed header */
/* body.admin-bar {
  position: sticky;
} */

/* @media (max-width: 782px) {
  body.admin-bar {
    padding-top: calc(var(--spacing) * 20 + 46px) !important;
  }
} */

/* Logo / wordmark area */
.site-header__brand {
  display:     flex;
  align-items: center;
  gap:         calc(var(--spacing) * 3);
}

.site-header__logo {
  width:       75px;
  height:      75px;
}

.site-header__name {
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* Desktop nav links */
.site-nav {
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-wrap:   wrap;
  gap:         calc(var(--spacing) * 5);
}

.site-header__contact {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}

.site-header__contact-item {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  color: color-mix(in oklab, var(--foreground) 75%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms var(--ease-in-out);
}

.site-header__contact-item .iconify {
  font-size: 18px;
}

.site-header__contact-item:hover {
  color: var(--foreground);
}

.site-header__contact-item:not(:first-child) {
  font-size: var(--text-xs);
}

.site-nav__link {
  font-size:   var(--text-sm);
  color:       color-mix(in oklab, var(--foreground) 70%, transparent);
  transition:  color 150ms var(--ease-in-out);
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link--active {
  color: var(--foreground);
}

/* Header CTA button */
.site-header__cta {
  padding:          calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  background-color: var(--primary);
  color:            var(--primary-foreground);
  border:           none;
  border-radius:    9999px;
  font-size:        var(--text-sm);
  font-weight:      var(--font-weight-medium);
  cursor:           pointer;
  transition:       background-color 150ms var(--ease-in-out);
}

.site-header__cta:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}


/* ============================================================
   3. Hero Section
   ============================================================ */

.hero {
  position:          relative;
  min-height:        100dvh;
  display:           flex;
  align-items:       center;
  justify-content:   center;
  overflow:          hidden;
  background-color:  var(--background);
}

/* Full-bleed background image */
.hero__bg-carousel {
  position: absolute;
  inset: 0;
}

.hero__bg-image {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.15;
}

.hero__bg-image--slide {
  opacity: 0;
  transition: opacity 800ms var(--ease-in-out);
}

.hero__bg-image--slide.is-active {
  opacity: 0.15;
}

.fade-slide {
  opacity: 0;
}

.fade-slide.is-active {
  opacity: 1;
}

/* Gradient veil on top of the image */
.hero__bg-gradient {
  position: absolute;
  inset:    0;
  background-image: linear-gradient(to top in oklab, var(--background) 0%, 
  color-mix(in oklab, var(--background) 95%, transparent) 10%, 
  color-mix(in oklab, var(--background) 80%, transparent) 50%)
}

/* Content wrapper */
.hero__content {
  position:  relative;
  z-index:   10;
  text-align: center;
  padding-inline: calc(var(--spacing) * 6);
  max-width: var(--container-5xl);
  margin-inline: auto;
}

/* Label pill above headline */
.hero__pill {
  display:          inline-flex;
  align-items:      center;
  gap:              calc(var(--spacing) * 2);
  padding:          calc(var(--spacing) * 1) calc(var(--spacing) * 4);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  border:           1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  border-radius:    9999px;
  margin-bottom:    calc(var(--spacing) * 8);
}

.hero__pill-dot {
  width:            6px;
  height:           6px;
  border-radius:    9999px;
  background-color: var(--primary);
  animation:        pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.hero__pill-text {
  font-size:      var(--text-sm);
  color:          var(--primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Main headline */
.hero__headline {
  font-size:      var(--text-5xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 8);
}

.hero__headline--accent {
  color: var(--primary);
}

/* Sub-headline */
.hero__subheadline {
  font-size:     var(--text-xl);
  color:         color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height:   var(--leading-relaxed);
  max-width:     var(--container-2xl);
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 12);
}

/* CTA button group */
.hero__actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             calc(var(--spacing) * 4);
  flex-wrap:       wrap;
}

.hero__cta-primary {
  display:          inline-flex;
  align-items:      center;
  gap:              calc(var(--spacing) * 2);
  padding:          calc(var(--spacing) * 4) calc(var(--spacing) * 8);
  background-color: var(--primary);
  color:            var(--primary-foreground);
  border:           none;
  border-radius:    9999px;
  font-size:        var(--text-base);
  font-weight:      var(--font-weight-medium);
  cursor:           pointer;
  transition:       background-color 150ms var(--ease-in-out);
}

.hero__cta-primary:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}

.hero__cta-secondary {
  display:      inline-flex;
  align-items:  center;
  gap:          calc(var(--spacing) * 2);
  padding:      calc(var(--spacing) * 4) calc(var(--spacing) * 8);
  background-color: transparent;
  color:        var(--foreground);
  border:       1px solid var(--border);
  border-radius: 9999px;
  font-size:    var(--text-base);
  font-weight:  var(--font-weight-medium);
  cursor:       pointer;
  transition:   border-color 150ms var(--ease-in-out);
}

.hero__cta-secondary:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

/* Decorative corner blobs */
.hero__deco {
  position:      absolute;
  border-radius: 9999px;
  pointer-events: none;
}

.hero__deco--tl {
  top:    60%;
  left:   50%;
  width:  calc(var(--spacing) * 48);
  height: calc(var(--spacing) * 48);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  filter: blur(80px);
  transform: translate(-50%, -50%);
}


/* ============================================================
   4. Stats Section
   ============================================================ */

.stats-section {
  padding-block: calc(var(--spacing) * 24);   /* 6 rem */
  background-color: var(--secondary);
}

.stats-section__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   calc(var(--spacing) * 12);
}

@media (width >= 64rem) {
  .stats-section__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   5. About Section
   ============================================================ */

.about-section {
  padding-block: calc(var(--spacing) * 24);
}

.about-section__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   calc(var(--spacing) * 16);
  align-items:           center;
}

@media (width >= 48rem) {
  .about-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Text column */
.about-section__body {
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--spacing) * 6);
  font-size:      var(--text-lg);
  color:          color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height:    var(--leading-relaxed);
}

.about-section__headline {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

/* Image column */
.about-section__image-wrap {
  position:      relative;
  aspect-ratio:  4 / 3;
  border-radius: var(--radius-2xl);
  overflow:      hidden;
  border:        1px solid var(--border);
  box-shadow:    var(--shadow-2xl);
}

.about-section__image-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-section__image-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease-in-out);
}

.about-section__image-slide.is-active {
  opacity: 1;
}

/* Gold-tinted decorative square behind image */
.about-section__deco {
  position:         absolute;
  bottom:           calc(var(--spacing) * -6);
  right:            calc(var(--spacing) * -6);
  width:            calc(var(--spacing) * 32);
  height:           calc(var(--spacing) * 32);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  border-radius:    var(--radius-2xl);
  z-index:          -1;
}


/* ============================================================
   6. Events Section
   ============================================================ */

.events-section {
  padding-block:    calc(var(--spacing) * 24);
  background-color: var(--secondary);
}

.events-section__header {
  max-width:     var(--container-2xl);
  margin-bottom: calc(var(--spacing) * 16);
}

.events-section__headline {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

.events-section__sub {
  font-size:   var(--text-xl);
  color:       color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height: var(--leading-relaxed);
}

/* Responsive card grid */
.events-section__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   calc(var(--spacing) * 8);
}

@media (width >= 48rem) {
  .events-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 64rem) {
  .events-section__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   7. Rankings Section
   ============================================================ */

.rankings-section {
  padding-block: calc(var(--spacing) * 24);
}

.rankings-section__layout {
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--spacing) * 16);
}

@media (width >= 64rem) {
  .rankings-section__layout {
    flex-direction:  row;
    align-items:     flex-start;
  }

  .rankings-section__sidebar {
    flex:       0 0 320px;
    position:   sticky;
    top:        calc(var(--spacing) * 28);   /* below fixed header */
  }

  .rankings-section__main {
    flex: 1;
  }
}

/* Sidebar headline */
.rankings-section__headline {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

.rankings-section__sub {
  font-size:     var(--text-lg);
  color:         color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height:   var(--leading-relaxed);
  margin-bottom: calc(var(--spacing) * 8);
}


/* ============================================================
   8. Benefits / Features Section
   ============================================================ */

.benefits-section {
  padding-block:    calc(var(--spacing) * 24);
  background-color: var(--secondary);
}

.benefits-section__header {
  text-align:    center;
  max-width:     var(--container-3xl);
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 16);
}

.benefits-section__headline {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

.benefits-section__sub {
  font-size:   var(--text-xl);
  color:       color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height: var(--leading-relaxed);
}

.benefits-section__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   calc(var(--spacing) * 8);
}

@media (width >= 48rem) {
  .benefits-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 64rem) {
  .benefits-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   9. Membership / Pricing Section
   ============================================================ */

.membership-section {
  padding-block: calc(var(--spacing) * 24);
}

.membership-section__header {
  text-align:    center;
  max-width:     var(--container-3xl);
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 16);
}

.membership-section__headline {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

.membership-section__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   calc(var(--spacing) * 8);
  align-items:           start;
}

@media (width >= 48rem) {
  .membership-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 64rem) {
  .membership-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
  10. Footer / CTA Section
   ============================================================ */

.cta-section {
  padding-block:    calc(var(--spacing) * 24);
  background-color: var(--secondary);
  text-align:       center;
}

.cta-section__eyebrow {
  font-size:      var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--primary);
  margin-bottom:  calc(var(--spacing) * 4);
}

.cta-section__headline {
  font-size:      var(--text-5xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

.cta-section__sub {
  font-size:     var(--text-xl);
  color:         color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height:   var(--leading-relaxed);
  max-width:     var(--container-2xl);
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 12);
}

.cta-section__actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             calc(var(--spacing) * 4);
  flex-wrap:       wrap;
}

/* Main footer */
.site-footer {
  padding-block:    calc(var(--spacing) * 12);
  border-top:       1px solid var(--border);
  background-color: var(--background);
}

.site-footer__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   calc(var(--spacing) * 12);
}

@media (width >= 48rem) {
  .site-footer__grid {
    grid-template-columns: 1fr repeat(3, auto);
  }
}

.site-footer__brand-name {
  font-size:      var(--text-xl);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  calc(var(--spacing) * 3);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color:     var(--muted-foreground);
}

.site-footer__col-title {
  font-size:      var(--text-sm);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom:  calc(var(--spacing) * 4);
}

.site-footer__link-list {
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--spacing) * 2);
}

.site-footer__link {
  font-size: var(--text-sm);
  color:     var(--muted-foreground);
  transition: color 150ms var(--ease-in-out);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--foreground);
}

.site-footer__bottom {
  margin-top:    calc(var(--spacing) * 12);
  padding-top:   calc(var(--spacing) * 8);
  border-top:    1px solid var(--border);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           calc(var(--spacing) * 4);
  text-align:    center;
  font-size:     var(--text-sm);
  color:         var(--muted-foreground);
}

.site-footer__mobile-contact {
  display: none;
  margin-top: calc(var(--spacing) * 6);
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--border);
  gap: calc(var(--spacing) * 3);
  flex-direction: column;
}

@media (width >= 48rem) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ============================================================
  11. Common Section Utilities
   ============================================================ */

/* Standard vertical rhythm for all top-level sections */
.section {
  padding-block: calc(var(--spacing) * 24);    /* 6 rem */
}

.section--secondary {
  background-color: var(--secondary);
}

/* Standard section header block */
.section-header {
  margin-bottom: calc(var(--spacing) * 16);    /* 4 rem */
}

.section-header--center {
  text-align:    center;
  max-width:     var(--container-3xl);
  margin-inline: auto;
}

.section-headline {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-tight);
  margin-bottom:  calc(var(--spacing) * 6);
}

.section-sub {
  font-size:   var(--text-xl);
  color:       color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height: var(--leading-relaxed);
}

/* Accent-coloured word inside a headline */
.text-accent {
  color: var(--primary);
}