/*
 * About hero — Figma "Website" file, "Pointer - About" 5121:9659, node
 * "Hero" 5121:9660 (1440x780, the header drawn over its top 84). Shared by
 * /about and /vets/about. < 768 is "Pointer - About mobile" 5121:10347;
 * 768–991 has no frame and is ours.
 *
 * One photo (the red collie running through grass) behind the copy, with
 * Figma's warm-brown multiply overlay. The copy sits at the bottom left:
 * an eyebrow pill, the 64 headline, a 497 lead and the Aeonik tagline.
 *
 * Photo geometry. Figma places the image at 104.93% x 128.93% of the frame,
 * offset -17.49% from the top: a 1511x1005.7 box at (0, -136.4). The box is
 * set in rem so the crop is Figma's at every width the rem scale covers
 * (1rem = 1px at 1440; the <style> block in BaseLayout.astro).
 *   992–1439 (no frame): the same box; the section is 1040 wide, so the
 *     right edge (the tail) crops.
 *   ≥ 1920: rem stops scaling, so the photo goes to vw and the section grows
 *     with the width (40.625vw = 780 at 1920) to keep the dog in frame.
 *   768–991: the desktop composition shifted 200 left so the dog stays in
 *     the 768 band.
 *   < 768: Figma "Our mission" 5121:10348 (mobile frame 5121:10347), 760
 *     tall: the photo covers it, a darker vertical scrim, the copy at the
 *     bottom. The 480rem band shows the 393 crop centred.
 *
 * Fonts: headline and tagline Aeonik Medium (--font-display), the rest Inter.
 */

.about-hero {
  --about-hero-text: #fff;
  --about-hero-lead: #ebebeb;
  --about-hero-ground: #1c1a12;

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 780rem;
  /* Figma: 160 above the copy (under the bar), 96 below */
  padding: 160rem 0 96rem;
  overflow: hidden;
  background-color: var(--about-hero-ground);
  color: var(--about-hero-text);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Photo ------------------------------------------------------------------- */

.about-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.about-hero-photo,
.about-hero-photo img {
  display: block;
}

.about-hero-photo img {
  position: absolute;
  left: 0;
  top: -136.4rem;
  width: 1511rem;
  height: 1005.7rem;
  max-width: none;
  object-fit: cover;
}

/* Figma overlay: rgb(45,17,1) 0 at 8.9% → .7 at 75%, 186deg, multiply */
.about-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(186.2deg, rgba(45, 17, 1, 0) 8.93%, rgba(45, 17, 1, 0.7) 74.99%);
  mix-blend-mode: multiply;
}

/* Copy -------------------------------------------------------------------- */

.about-hero .container.about-hero-content {
  position: relative;
  z-index: 2;
}

/* Figma "Copy" 5121:9661: 844 wide, 24 between the pill, headline and lead */
.about-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  max-width: 844rem;
}

/* Figma "Label" 5121:9662: white .2 on a 6px blur, .2 hairline, 6px orange
   dot, Inter 14/20 medium. 32 tall with the stroke inside, so 5 vertical
   padding with our outside border (as .hero-eyebrow). */
.about-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  margin: 0;
  padding: 5rem 16rem 5rem 12rem;
  border: 1px solid rgba(238, 238, 238, 0.2);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 14rem;
  line-height: 20rem;
  font-weight: 500;
  color: var(--about-hero-text);
}

.about-hero-eyebrow-dot {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #ff5900;
}

/* Figma: Aeonik Medium 64/1.05, -1.28px; the break before "from" is Figma's */
.about-hero-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -1.28rem;
  color: var(--about-hero-text);
}

/* Figma 5121:9667: 513 wide less 16 right padding */
.about-hero-lead {
  max-width: 497rem;
}

/* Figma "Body/M": Inter 16/24, -0.32px, mono/300 */
.about-hero-text {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--about-hero-lead);
}

/* Figma: an empty 24 line, then Aeonik Medium 18/24, -0.32px, white */
.about-hero-tagline {
  margin: 24rem 0 0;
  font-family: var(--font-display);
  font-size: 18rem;
  line-height: 24rem;
  font-weight: 500;
  letter-spacing: -0.32rem;
  color: var(--about-hero-text);
}

/* ------------------------------------------------------------------ */
/* ≥ 1920: the photo scales with the viewport, the section with it      */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 1920px) {
  .about-hero {
    min-height: 40.625vw;
  }

  /* 104.93vw wide as in Figma; -12.5vw keeps the dog's head below the bar
     and its feet above the bottom edge */
  .about-hero-photo img {
    top: -12.5vw;
    width: 104.93vw;
    height: 69.83vw;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: the headline steps down; the break goes                       */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .about-hero-br {
    display: none;
  }

  .about-hero-copy {
    max-width: 100%;
  }

  .about-hero-heading {
    font-size: 56rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .about-hero-photo img {
    left: -200rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 768: Figma "Our mission" 5121:10348 (393x760)                      */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  /* Figma pads 280 on top, but its 454 copy overflows that upward: the
     box is 760 and the copy ends 40 from its foot. min-height carries the
     760; the top padding only keeps longer copy clear of the bar. */
  .about-hero {
    min-height: 760rem;
    padding: 160rem 24rem 40rem;
  }

  /* Figma's box: 360.72% x 111.39% at (-120.81%, -11.39%) of the 393x760
     frame, i.e. 1417.6 x 846.6 at (-474.8, -86.6). Figma stretches the
     photo to that box (it is 1.674:1, the photo 1.503:1), so fill, not
     cover. Offset from the centre so 480–767 shows the same crop. */
  .about-hero-photo img {
    left: calc(50% - 671.3rem);
    top: -86.6rem;
    width: 1417.6rem;
    height: 846.6rem;
    object-fit: fill;
  }

  /* Figma "Mission scrim" 5121:10349, normal blend */
  .about-hero-scrim {
    background: linear-gradient(to bottom, rgba(45, 17, 1, 0) 27.89%, rgba(27, 22, 12, 0.72) 63.01%, rgba(21, 23, 13, 0.92));
    mix-blend-mode: normal;
  }

  /* Figma "Mission copy" 5121:10350: 20 between the blocks */
  .about-hero-copy {
    gap: 20rem;
  }

  /* Figma: white .3, where desktop is .2 */
  .about-hero-eyebrow {
    background-color: rgba(255, 255, 255, 0.3);
  }

  /* Figma: Aeonik Medium 36/1.1 */
  .about-hero-heading {
    font-size: 36rem;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .about-hero-lead {
    max-width: none;
  }

  /* Figma: 14 below the lead, Inter Medium 16/24, -0.32px */
  .about-hero-tagline {
    margin-top: 14rem;
    font-family: var(--font-ui);
    font-size: 16rem;
  }
}