/* ==========================================================================
   Section Common Styles
   ADVANCE v2 Theme

   All sections share the .s-section base class + common header/footer.
   Layout-specific styles are in individual section CSS files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Base
   -------------------------------------------------------------------------- */
.s-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Spacing variants */
.s-section--spacing-s {
  padding-top: var(--spacing-section-s);
  padding-bottom: var(--spacing-section-s);
}

.s-section--spacing-m {
  padding-top: var(--spacing-section-m);
  padding-bottom: var(--spacing-section-m);
}

.s-section--spacing-l {
  padding-top: var(--spacing-section-l);
  padding-bottom: var(--spacing-section-l);
}

.s-section--spacing-xl {
  padding-top: var(--spacing-section-xl);
  padding-bottom: var(--spacing-section-xl);
}

/* --------------------------------------------------------------------------
   Section Inner (Container)
   -------------------------------------------------------------------------- */
.s-section__inner {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Background Overlay
   -------------------------------------------------------------------------- */
.s-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section Common Header
   -------------------------------------------------------------------------- */
.s-section__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.s-section__header--left {
  text-align: left;
}

.s-section__header--center {
  text-align: center;
}

.s-section__header--right {
  text-align: right;
}

.s-section__sub-heading {
  display: block;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

.s-section__heading {
  font-family: var(--font-family);
  font-weight: var(--font-weight-heading);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--color-text);
  line-height: 1.4;
  margin: 0;
}

.s-section__description {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: var(--color-text-light);
  line-height: 1.8;
  margin-top: 0.8em;
  max-width: 700px;
}

.s-section__header--center .s-section__description {
  margin-left: auto;
  margin-right: auto;
}

/* On dark/image backgrounds, invert text colors */
.s-section[style*="background-image"] .s-section__heading,
.s-section[style*="background-image"] .s-section__description,
.s-section[style*="background-image"] .s-section__sub-heading {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Section Common Footer (Buttons Area)
   -------------------------------------------------------------------------- */
.s-section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.s-section__buttons--left {
  justify-content: flex-start;
}

.s-section__buttons--center {
  justify-content: center;
}

.s-section__buttons--right {
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Animation Base (JS adds .is-animated when in viewport)
   -------------------------------------------------------------------------- */
.s-section--animate {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Initial animation states (before entering viewport) */
/* fade */
.s-section--animate[data-animation="fade"] {
  opacity: 0;
}

/* slide-up */
.s-section--animate[data-animation="slide-up"] {
  opacity: 0;
  transform: translateY(30px);
}

/* slide-left */
.s-section--animate[data-animation="slide-left"] {
  opacity: 0;
  transform: translateX(-30px);
}

/* slide-right */
.s-section--animate[data-animation="slide-right"] {
  opacity: 0;
  transform: translateX(30px);
}

/* Animated state — MUST come after initial states to override */
.s-section--animate.is-animated {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Layout Container
   -------------------------------------------------------------------------- */
.l-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --------------------------------------------------------------------------
   Main content area
   -------------------------------------------------------------------------- */
.l-main {
  min-height: 50vh;
}

/* --------------------------------------------------------------------------
   Responsive: Smartphone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .s-section__buttons {
    flex-direction: column;
    align-items: center;
  }

  .s-section__buttons .c-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}