// =============================================================================
// CONTENT-ONLY-INTRO — Task #26 (v2)
// Single left-aligned text column on beige background.
// Mobile-first: base = 375px, desktop via respond-to('desktop').
// Measurements: design/measurements-v2.json → "content-only-intro"
// =============================================================================

@import '../mixins';

.content-only-intro {
  // Deliberately double the shared section rhythm at laptop+ (160px, not the
  // usual 80px) — Figma-verified exception (56px mobile+tablet / 160px
  // laptop+), not a bug. Base value matches --section-space's own mobile
  // step; only the breakpoint moves from 1440px to 992px below, same as
  // every other component in this file's family.
  padding-block: var(--section-space); // (horizontal inset via .container)

  &__heading {
    display: flex;
    flex-direction: column;
    gap: var(--gap-eyebrow-title); // 16px eyebrow → title gap
  }

  // color: text-secondary is this component's own choice — eyebrow-text's
  // default is a color-agnostic label style (see .section-eyebrow for the
  // nandor-toned sibling); content-only-intro keeps its original tone.
  &__eyebrow {
    @include eyebrow-text($mobile-weight: 500, $uppercase: false); // uppercase applied via f:format.case in the template
    color: var(--color-text-secondary);
  }

  &__title {
    @include display-heading;
  }

  &__body {
    @include body-text;
    margin: var(--gap-title-body-mobile) 0 0; // 16px gap on mobile (standardized spacing system)
  }

  @include respond-to('laptop') {
    padding-block: var(--space-40); // py-160 — moved from 'desktop' (1440px) to 'laptop' (992px)
  }

  @include respond-to('desktop') {
    &__eyebrow {
      max-width: 536px;
    }

    &__body {
      margin-top: var(--gap-title-body); // 24px gap on desktop (standardized spacing system)
      max-width: 722px;
    }
  }
}