/* ============================================================
   about.css — AboutSection

   Two layouts:
   - Desktop + Tablet (≥ 768px): cup 797×1130, centred, same styling
   - Mobile  (< 768px):          cup 496×704, centred

   Almost entirely absolutely positioned. Only SeeMoreLink is in flow.
   overflow: visible — cup overlaps upward into previous section.
   ============================================================ */


/* ============================================================
   Section container
   ============================================================ */

.about-section {
  position: relative;
  width: 100%;
  height: 1290px;          /* desktop + tablet (+40px for divider clearance) */
  overflow: visible;        /* cup extends above section top */
  background: var(--color-surface-bold);
}

@media (max-width: 767px) {
  .about-section {
    height: 820px;          /* mobile (+40px for divider clearance) */
  }
}


/* ============================================================
   AboutBackground — full-bleed, ABSOLUTE
   ============================================================ */

.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   about-cup — cup illustration + content overlay
   Absolute within section. Overflows upward (negative top).
   ============================================================ */

.about-cup {
  position: absolute;
  z-index: 1;
  overflow: visible;         /* let full cup PNG show — transparency handles the rest */

  /* Desktop + Tablet: centred horizontally */
  width: 797px;
  height: 1130px;
  left: 50%;
  top: -94px;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .about-cup {
    /* Mobile: centred horizontally, 95% of original */
    width: 471px;
    height: 669px;
    top: -60px;
  }
}


/* Cup image — fills the about-cup frame.
   Same pattern as HowItWorks cups: absolute, height 100%,
   width > 100% to preserve aspect ratio, overflow visible
   lets full cup shape show through transparent PNG. */
.about-cup__img {
  position: absolute;
  height: 100%;
  max-width: none;           /* override base.css img { max-width: 100% } */
  display: block;
  filter: drop-shadow(var(--shadow-card));

  left: calc(50% + 35px);
  top: 0;
  transform: translateX(-50%);
}


/* ============================================================
   AboutContent — heading + body column, inside about-cup
   Fixed sizing. Absolutely positioned within cup.
   ============================================================ */

.about-content {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;

  /* Desktop + Tablet */
  width: 629px;
  height: 800px;
  left: 100px;
  top: 127px;
  gap: 40px;
}

@media (max-width: 767px) {
  .about-content {
    width: 257px;
    height: 472px;
    left: 86px;
    top: 99px;
    gap: 59px;
  }
}


/* ----------------------------------------------------------
   AboutHeading
   ---------------------------------------------------------- */

.about-heading {
  font-family: var(--type-family-display);
  letter-spacing: 0.03em;
  font-size: var(--type-size-display);     /* 96px desktop/tablet, 40px mobile */
  font-weight: var(--type-weight-regular);
  line-height: normal;
  color: var(--color-text-highlight);
  margin: 0;
  text-align: center;

  /* Stretches to fill available width */
  flex: 1 0 0;
  min-width: 0;
}


/* ----------------------------------------------------------
   AboutText — body paragraph(s)
   Two variants: --default (desktop/tablet) and --mobile.
   Only the appropriate one is shown visually; both stay in
   the DOM for screen readers.
   ---------------------------------------------------------- */

.about-text {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body-lg);     /* 24px desktop/tablet, 20px mobile */
  font-weight: var(--type-weight-regular);
  line-height: normal;
  color: var(--color-text-default);
  margin: 0;
}

.about-text p {
  margin: 0;
}

.about-text p + p {
  margin-top: 1em;
}

/* Desktop/Tablet text — visible on ≥768px, sr-only on mobile */
.about-text--default {
  padding: 70px 0px 0px 70px;
  max-width: 380px;
}

/* Mobile text — sr-only on ≥768px, visible on mobile */
.about-text--mobile {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .about-text--default {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .about-text--mobile {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0;
    max-width: none;
  }
}


/* ============================================================
   Ultra-wide breakpoint (≥ 2600px) — 1.3× scale
   ============================================================ */

@media (min-width: 2600px) {
  .about-section {
    height: 1625px;
  }

  .about-cup {
    width: 1036px;
    height: 1469px;
    top: -92px;
  }

  .about-cup__img {
    left: calc(50% + 46px);
  }

  .about-content {
    width: 818px;
    height: 1040px;
    left: 130px;
    top: 165px;
    gap: 52px;
  }
}


/* ============================================================
   SeeMoreLink positioning within AboutSection
   Sole flow child — docks to bottom of section.
   ============================================================ */

.about-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* docks SeeMoreLink to bottom */
}

.about-section > .see-more-link {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-component-5xl);
}


/* ============================================================
   PreText active state
   JS adds .about-cup--pretext-active after successful init.
   Hides the CSS fallback content visually (keeps it for SR).
   Shows the PreText visual layer.
   ============================================================ */

.about-cup__pretext-visual {
  display: none;
}

.about-cup--pretext-active .about-content {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.about-cup--pretext-active .about-cup__pretext-visual {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* PreText-rendered text spans */
.about-pretext-line {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}
.about-pretext-line--heading {
  font-family: var(--type-family-display);
  letter-spacing: 0.03em;
  font-weight: var(--type-weight-regular);
  color: var(--color-text-highlight);
}
.about-pretext-line--body {
  font-family: var(--type-family-body);
  font-weight: var(--type-weight-regular);
  color: var(--color-text-default);
}