/* ==========================================================================
   Storage Station — about.css
   Page: about.html  (Figma node 217:1352 — hero only in the design)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: full-bleed sloth photo, text block on the right
   -------------------------------------------------------------------------- */
.about-hero {
  display: flex;
  align-items: center;
  min-height: clamp(520px, 48.3vw, 927px);        /* 927px @1920 */
  background: #CFE6F6 url("../assets/about/hero-sloth.jpg") left center / cover no-repeat;
}
.about-hero__inner {
  padding-block: clamp(48px, 5vw, 96px);
  padding-inline-start: calc(var(--gutter) + clamp(0px, 0.33vw, 6px));   /* text edge ~126px from the right @1920 */
}
.about-hero__content { max-width: 800px; }

.about-hero__breadcrumb {
  font-size: clamp(18px, 1.82vw, 34.9px);
  line-height: 1.09;
  letter-spacing: -0.03em;
}

.about-hero__title {
  margin-top: clamp(16px, 1.8vw, 34px);
  font-size: clamp(44px, 5.99vw, 115px);
  font-weight: var(--fw-bold);
  line-height: 0.846;                              /* 97.3 / 115 */
  letter-spacing: -0.03em;
  color: var(--color-blue-dark);
}
.about-hero__title-strong { font-weight: var(--fw-black); }

.about-hero__text {
  max-width: 791px;
  margin-top: clamp(20px, 1.7vw, 32px);
  font-size: clamp(18px, 1.73vw, 33.25px);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .about-hero__content { max-width: 60%; }
}

/* ==========================================================================
   ≤768px — MOBILE (Figma mobile frame 341:7257, 400px wide)
   Centered text on the page background, then the sloth photo as a
   416 × 499 block (left part of the same wide photo, cropped from the left).
   ========================================================================== */
@media (max-width: 768px) {
  .about-hero {
    display: block;
    min-height: 0;
    background: var(--color-bg);
    overflow-x: clip;
  }
  .about-hero::after {                   /* the photo block */
    content: "";
    display: block;
    height: 499px;
    margin: 36.6px -9px 0 -7px;          /* Figma: x = -7 … 409 */
    background: #CFE6F6 url("../assets/about/hero-sloth.jpg") left top / auto 100% no-repeat;
  }
  .about-hero__inner { padding: 13.4px var(--gutter) 0; }
  .about-hero__content { max-width: none; text-align: center; }
  .about-hero__breadcrumb { display: none; }   /* not in the mobile design */
  .about-hero__title {
    margin-top: 0;
    font-size: min(52.99px, 13.1vw);
    line-height: 44.82px;
  }
  .about-hero__text {
    max-width: 364px;
    margin: 18.4px auto 0;
    font-size: 15.32px;
    line-height: 18.67px;
  }
}