/* ==========================================================================
   Section Component
   Reusable content section with consistent padding
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Section Block
   -------------------------------------------------------------------------- */
.section {
  padding-block: clamp(7rem, 18vh, 11rem);
  padding-inline: clamp(2.5rem, 10vw, 8rem);
}

/* Modifier: Larger vertical padding */
.section--lg {
  padding-block: clamp(8rem, 20vh, 12rem);
}

/* Modifier: CTA/Footer style with different background */
.section--cta {
  background-color: #f2f2f2;
  padding-block: clamp(6rem, 15vh, 10rem);
  text-align: center;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   Section Header (Intro)
   -------------------------------------------------------------------------- */
.section__header {
  max-width: min(58ch, 780px);
  margin: 0 auto clamp(4rem, 10vh, 5rem);
  text-align: left;
}

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

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.8vw, 3.6rem);
  line-height: 1.08;
}

.section__subtitle {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Section Grid Layouts
   -------------------------------------------------------------------------- */
.section__grid {
  display: grid;
  gap: clamp(3rem, 8vw, 5rem);
  align-items: center;
}

/* Two column: content + image */
.section__grid--2col {
  grid-template-columns: 1fr 0.8fr;
}

/* Two column: image + content (reversed) */
.section__grid--2col-reverse {
  grid-template-columns: 0.8fr 1fr;
}

/* --------------------------------------------------------------------------
   Section Content
   -------------------------------------------------------------------------- */
.section__content {
  display: grid;
  gap: 1.8rem;
  max-width: 54ch;
}

.section__content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.4vw, 4rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.section__content p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.section__content p + p {
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   Section Media (Images)
   -------------------------------------------------------------------------- */
.section__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.section__media img {
  width: 100%;
  height: auto;
  display: block;
}

.section__media--portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface);
}

.section__media--portrait img {
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .section {
    padding-inline: clamp(1.8rem, 8vw, 3.2rem);
  }

  .section__grid--2col,
  .section__grid--2col-reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .section {
    padding-inline: clamp(1.5rem, 8vw, 2.5rem);
    padding-block: clamp(5.5rem, 16vh, 7rem);
  }
}