/* Section Shell component */

.section-shell {
  position: relative;
  overflow: hidden;

  min-height: auto;

  display: flex;
  flex-direction: column;

  padding:
    var(--section-padding-block)
    var(--section-padding-x);

  background: transparent;
  color: var(--text-primary);
}

.section-shell[data-theme="dark"],
.section-shell[data-theme="blue"],
.section-shell[data-theme="mineral"],
.section-shell[data-theme="mineral-deep"] {
  color: var(--text-inverse);
}

.section-shell[data-theme="light"],
.section-shell[data-theme="surface"],
.section-shell[data-theme="surface-darker"],
.section-shell[data-theme="mineral-soft"],
.section-shell[data-theme="surface-elevated"] {
  color: var(--text-primary);
}

/* Inner containers */

.section-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: var(--container-lg);

  margin-inline: auto;
}

@media (min-width: 1900px) {

  .section-inner {
    max-width: var(--container-xl);
  }

}

/* Hero layout */

.hero-layout {
  width: 100%;
  max-width: 1240px;

  margin-left: 0;
  margin-right: auto;
}

/* Showcase layout */

.showcase-layout {
  width: 100%;
}

/* Hero alignment */

.section--hero .section-title,
.section--hero .section-lead {
  margin-left: 0;
}

/* Section archetypes */

.section--hero {
  min-height: 100vh;
  justify-content: center;

  padding-top: var(--section-hero-padding-top);
  padding-bottom: var(--section-hero-padding-bottom);
}

.section--showcase {
  min-height: auto;
  justify-content: flex-start;

  padding-top: var(--section-archetype-padding-y);
  padding-bottom: var(--section-archetype-padding-y);
}

.section--system {
  min-height: auto;
  justify-content: flex-start;

  padding-top: var(--section-archetype-padding-y);
  padding-bottom: var(--section-archetype-padding-y);
}

.section--editorial {
  min-height: auto;
  justify-content: center;

  padding-top: var(--section-archetype-padding-y);
  padding-bottom: var(--section-archetype-padding-y);
}

.section--cta {
  min-height: auto;
  justify-content: flex-start;

  padding-top: var(--section-cta-padding-top);
  padding-bottom: var(--section-padding-x);
}

.section--footer {
  min-height: auto;
  justify-content: flex-start;

  padding-top: 0;
  padding-bottom: var(--section-padding-x);
}



/* Shared typography */

.section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: var(--section-kicker-title-gap);

  /* Tuned to glyph ink box (wide-tracked uppercase) */
  padding-top: calc(var(--space-2) + 0.15em);
  padding-bottom: calc(var(--space-2) + 0.05em);
  padding-inline: var(--space-5);

  border-radius: var(--radius-kicker);

  background: var(--section-kicker-bg);

  font-size: calc(var(--text-xs) - 0.0625rem);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--weight-medium);

  color: var(--text-secondary);
}

.section-shell[data-theme="dark"] .section-kicker,
.section-shell[data-theme="blue"] .section-kicker,
.section-shell[data-theme="mineral"] .section-kicker,
.section-shell[data-theme="mineral-deep"] .section-kicker {
  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.52);
}

.section-shell[data-theme="dark"] .section-lead,
.section-shell[data-theme="blue"] .section-lead,
.section-shell[data-theme="mineral"] .section-lead,
.section-shell[data-theme="mineral-deep"] .section-lead {
  opacity: 0.74;
}

.section-title {
  max-width: 18ch;

  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: var(--weight-medium);

  text-wrap: balance;
}

.section-lead {
  max-width: 52ch;

  margin-top: clamp(var(--space-7-0), 3vw, var(--space-11-0));

  font-size: clamp(var(--text-lg), 1.4vw, var(--text-xl));
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-body);

  opacity: 0.78;
  text-wrap: pretty;
}

/* Section-specific typography */

.section--hero .section-title {
   max-width: 14ch;

  font-size: clamp(2.75rem, 5vw, 5rem);
}
.section--hero .section-lead {
  max-width: 44ch;

  font-size: clamp(var(--text-lg), 1.7vw, 1.6rem);

  opacity: 0.82;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-5);

  margin-top: clamp(var(--space-7), 5vw, var(--space-9));
}

.section--editorial .section-title {
  max-width: 18ch;
}

.section--cta .section-title {
  max-width: 18ch;
}

/* Mobile */

@media (max-width: 980px) and (min-width: 761px) {

  .section--hero {
    min-height: auto;

    padding-top: var(--section-hero-padding-top-tablet);
    padding-bottom: var(--space-14-0);
  }

  .section--hero .section-title {
    max-width: 11ch;

    font-size: clamp(2.75rem, 5vw, 5rem);

    line-height: var(--leading-tight);
  }

  .section--hero .section-lead {
    max-width: 34ch;

    margin-top: var(--space-5);

    font-size: var(--text-xl);

    line-height: var(--leading-base);
  }

  .section--hero .hero-cta {
    margin-top: var(--space-7);
  }

}
@media (max-width: 760px) {

  .section-kicker {
    font-size: calc(var(--text-xs) * 0.9);
  }

  .section-shell {

    padding:
      var(--section-padding-block-mobile)
      var(--section-padding-x);
  }

  .section--hero {
    min-height: auto;

    justify-content: center;

    padding-top: var(--space-11);
    padding-bottom: calc(var(--space-8) + var(--space-4));
  }

  .hero-layout {
    max-width: none;
  }

  .section-title {
    max-width: 10ch;

    font-size: clamp(2.9rem, 12vw, 4.75rem);

    line-height: var(--leading-tight);
  }

  .section--hero .section-title {
    max-width: 12ch;

    font-size: clamp(2.75rem, 5vw, 4.75rem);

    line-height: var(--leading-tight);

    letter-spacing: var(--tracking-heading);
  }

  .section--hero .section-lead {
    max-width: 28ch;

    margin-top: var(--space-5);

    font-size: var(--text-xl);

    line-height: var(--leading-base);
  }

  .section--hero .hero-cta {
    gap: var(--space-5) var(--space-6);

    margin-top: var(--space-7);
  }

  .section-lead {
    margin-top: var(--space-5);
  }

}