/* ============================================================
   AG SECTION — ag-section.css
   Version : 4.0.0
   Depends : ag-design-tokens.css · ag-layout.css
             ag-animation.css
   Covers  : Section Shell · Container · Section Header
             Section Badge · Section Title · Section Subtitle
             Section Footer · Animate-on-scroll · Divider
   Maps to : All PHP section templates
   Project : Revive Thrive Child Theme
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   SECTION 1 — BASE SECTION SHELL
   .ag-section
   ════════════════════════════════════════════════════════════ */

.ag-section {
  position:      relative;
  width:         100%;
  padding-block: var(--ag-section-py);
  overflow:      hidden;
  isolation:     isolate;
}

/* Ensure pseudo-elements from child variants don't escape */
.ag-section > * { position: relative; z-index: var(--ag-z-base); }


/* ════════════════════════════════════════════════════════════
   SECTION 2 — CONTAINER
   .ag-container
   ════════════════════════════════════════════════════════════ */

.ag-container {
  width:          100%;
  max-width:      var(--ag-container-max, 1280px);
  margin-inline:  auto;
  padding-inline: var(--ag-container-px, clamp(1rem, 5vw, 2rem));
  position:       relative;
  z-index:        var(--ag-z-base);
}

/* Narrow variant — for reading-focused sections */
.ag-container--narrow {
  max-width: var(--ag-container-narrow, 820px);
}

/* Wide variant — full-bleed inside constraint */
.ag-container--wide {
  max-width: var(--ag-container-wide, 1440px);
}


/* ════════════════════════════════════════════════════════════
   SECTION 3 — SECTION HEADER
   .ag-section-header · .ag-section-header-soft
   ════════════════════════════════════════════════════════════ */

.ag-section-header,
.ag-section-header-soft {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--ag-space-4);
  margin-bottom:  clamp(1.5rem, 3vw, 2.5rem);
}

/* Left-aligned variant */
.ag-section-header--start {
  align-items: flex-start;
  text-align:  start;
}

/* Split header: title left / action right */
.ag-section-header--split {
  flex-direction:  row;
  justify-content: space-between;
  align-items:     flex-end;
  flex-wrap:       wrap;
  gap:             var(--ag-space-4) var(--ag-space-6);
  text-align:      start;
}


/* ════════════════════════════════════════════════════════════
   SECTION 4 — SECTION BADGE
   .ag-section-badge · .ag-section-badge-soft
   ════════════════════════════════════════════════════════════ */

.ag-section-badge,
.ag-section-badge-soft {
  display:                 inline-flex;
  align-items:             center;
  gap:                     var(--ag-space-2);
  padding:                 var(--ag-space-2) var(--ag-space-5);
  background:              var(--ag-glass-bg-purple);
  backdrop-filter:         var(--ag-glass-blur-light);
  -webkit-backdrop-filter: var(--ag-glass-blur-light);
  border:                  1px solid var(--ag-glass-border-purple);
  border-radius:           var(--ag-radius-pill);
  font-size:               var(--ag-text-xs);
  font-weight:             var(--ag-weight-semibold);
  color:                   var(--ag-purple-400);
  letter-spacing:          var(--ag-tracking-wider);
  text-transform:          uppercase;
  box-shadow:              var(--ag-shadow-purple);
  white-space:             nowrap;
}

/* Icon inside badge */
.ag-section-badge     i,
.ag-section-badge-soft i {
  font-size:   .75em;
  flex-shrink: 0;
}

/* Colour variants */
.ag-section-badge--pink {
  background:   var(--ag-glass-bg-pink);
  border-color: var(--ag-glass-border-pink);
  color:        var(--ag-fuchsia-500);
  box-shadow:   var(--ag-shadow-pink);
}

.ag-section-badge--blue {
  background:   var(--ag-glass-bg-blue, rgba(179, 218, 247, 0.18));
  border-color: rgba(179, 218, 247, 0.32);
  color:        var(--ag-blue-500, #3b82f6);
  box-shadow:   var(--ag-shadow-xs);
}

.ag-section-badge--peach {
  background:   var(--ag-glass-bg-peach);
  border-color: rgba(255, 167, 114, 0.22);
  color:        var(--ag-orange-500);
  box-shadow:   var(--ag-shadow-xs);
}


/* ════════════════════════════════════════════════════════════
   SECTION 5 — SECTION TITLE
   .ag-section-title
   ════════════════════════════════════════════════════════════ */

.ag-section-title {
  font-size:   var(--ag-text-3xl);
  font-weight: var(--ag-weight-bold);
  line-height: var(--ag-leading-snug);
  color:       var(--ag-text-primary);
  margin:      0;
  max-width:   22ch;
}

/* Gradient text accent — wraps highlighted words */
.ag-section-title .highlight,
.ag-section-title span.highlight {
  background:              var(--ag-gradient-text-brand);
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  color:                   transparent;
  display:                 inline;
}

/* Larger display variant */
.ag-section-title--xl {
  font-size: var(--ag-text-4xl);
  max-width: 20ch;
}

/* Balanced center variant — prevents orphan words */
.ag-section-title--balanced {
  text-wrap: balance;
  max-width: 28ch;
}


/* ════════════════════════════════════════════════════════════
   SECTION 6 — SECTION SUBTITLE
   .ag-section-subtitle
   ════════════════════════════════════════════════════════════ */

.ag-section-subtitle {
  font-size:   var(--ag-text-md);
  font-weight: var(--ag-weight-normal);
  line-height: var(--ag-leading-relaxed);
  color:       var(--ag-text-secondary);
  max-width:   52ch;
  margin:      0;
  text-wrap:   pretty;
}

/* Muted smaller variant */
.ag-section-subtitle--sm {
  font-size: var(--ag-text-sm);
  max-width: 60ch;
}


/* ════════════════════════════════════════════════════════════
   SECTION 7 — SECTION FOOTER / CTA ROW
   .ag-section-footer · .ag-section-footer-soft
   ════════════════════════════════════════════════════════════ */

.ag-section-footer,
.ag-section-footer-soft {
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--ag-space-4);
  margin-top:      clamp(2rem, 4vw, 3rem);
}

/* Start-aligned footer */
.ag-section-footer--start {
  justify-content: flex-start;
}

/* Space-between footer: text left / link right */
.ag-section-footer--split {
  justify-content: space-between;
}


/* ════════════════════════════════════════════════════════════
   SECTION 8 — SECTION DIVIDER
   .ag-section-divider
   ════════════════════════════════════════════════════════════ */

.ag-section-divider {
  width:         100%;
  height:        1px;
  border:        none;
  margin-block:  0;
  background:    linear-gradient(
    90deg,
    transparent  0%,
    var(--ag-border-default) 20%,
    var(--ag-border-default) 80%,
    transparent 100%
  );
}

/* Thicker decorative divider */
.ag-section-divider--thick {
  height:     2px;
  background: var(--ag-gradient-primary);
  opacity:    0.25;
  max-width:  120px;
  margin-inline: auto;
  border-radius: var(--ag-radius-pill);
}


/* ════════════════════════════════════════════════════════════
   SECTION 9 — ANIMATE ON SCROLL
   [data-animate] — triggered by ag-core.js IntersectionObserver
   ════════════════════════════════════════════════════════════ */

[data-animate] {
  opacity:    0;
  transition:
    opacity   var(--ag-duration-slow) var(--ag-ease-out),
    transform var(--ag-duration-slow) var(--ag-ease-out);
}

[data-animate="fade-up"]    { transform: translateY(24px); }
[data-animate="fade-down"]  { transform: translateY(-24px); }
[data-animate="fade-right"] { transform: translateX(-24px); }
[data-animate="fade-left"]  { transform: translateX(24px);  }
[data-animate="zoom-in"]    { transform: scale(0.94);        }

/* Delay steps — via data-delay="100" / "200" etc. */
[data-delay="50"]  { transition-delay:  50ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="350"] { transition-delay: 350ms; }
[data-delay="400"] { transition-delay: 400ms; }

/* Visible state — added by JS when element enters viewport */
[data-animate].is-visible {
  opacity:   1;
  transform: none;
}


/* ════════════════════════════════════════════════════════════
   SECTION 10 — SECTION TINT VARIANTS
   Background atmosphere modifiers
   ════════════════════════════════════════════════════════════ */

/* Soft purple tint */
.ag-section--purple {
  background:
    radial-gradient(ellipse 70% 55% at 90% 0%,   rgba(240, 237, 251, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(240, 237, 251, 0.30) 0%, transparent 60%),
    var(--ag-bg-body);
}

/* Soft pink tint */
.ag-section--pink {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,  rgba(254, 232, 239, 0.40) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 100% 80%, rgba(247, 164, 188, 0.18) 0%, transparent 55%),
    var(--ag-bg-body);
}

/* Soft blue tint */
.ag-section--blue {
  background:
    radial-gradient(ellipse 60% 50% at 0% 50%,   rgba(235, 245, 253, 0.40) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 100% 50%, rgba(179, 218, 247, 0.20) 0%, transparent 55%),
    var(--ag-bg-body);
}

/* Elevated surface */
.ag-section--elevated {
  background: var(--ag-bg-surface-2);
  box-shadow: inset 0 1px 0 var(--ag-glass-border),
              inset 0 -1px 0 var(--ag-glass-border);
}

/* Glassmorphism section */
.ag-section--glass {
  background:              var(--ag-glass-bg-heavy);
  backdrop-filter:         var(--ag-glass-blur);
  -webkit-backdrop-filter: var(--ag-glass-blur);
  border-block:            1px solid var(--ag-glass-border);
  box-shadow:              var(--ag-shadow-sm);
}


/* ════════════════════════════════════════════════════════════
   SECTION 11 — EMPTY STATE
   .ag-section-empty
   ════════════════════════════════════════════════════════════ */

.ag-section-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding-block:   clamp(3rem, 8vw, 6rem);
  gap:             var(--ag-space-4);
  color:           var(--ag-text-muted);
}

.ag-section-empty__icon {
  font-size:   clamp(2rem, 5vw, 3rem);
  opacity:     0.35;
  line-height: 1;
}

.ag-section-empty__title {
  font-size:   var(--ag-text-lg);
  font-weight: var(--ag-weight-semibold);
  color:       var(--ag-text-secondary);
  margin:      0;
}

.ag-section-empty__text {
  font-size: var(--ag-text-sm);
  max-width: 38ch;
  margin:    0;
}


/* ════════════════════════════════════════════════════════════
   SECTION 12 — REDUCED MOTION
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════
   SECTION 13 — RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 768px ───────────────────────────────────────── */
@media (max-width: 768px) {

  .ag-section-title    { font-size: var(--ag-text-2xl); max-width: 100%; }
  .ag-section-title--xl { font-size: var(--ag-text-3xl); }
  .ag-section-subtitle { max-width: 100%; }

  .ag-section-header--split {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--ag-space-3);
  }

  .ag-section-footer--split {
    flex-direction: column;
    align-items:    stretch;
    text-align:     center;
  }
}

/* ── Mobile ≤ 480px ───────────────────────────────────────── */
@media (max-width: 480px) {

  .ag-section-title { font-size: var(--ag-text-xl); }

  .ag-section-badge,
  .ag-section-badge-soft {
    font-size: calc(var(--ag-text-xs) * 0.9);
    padding:   var(--ag-space-1) var(--ag-space-4);
  }
}