/*
 * Vets hero — Figma "Website" file, "Alternate hero" 5121:8943 (desktop
 * 1440x700) and "Opening promise" 5121:9362 + "Veterinarian and patient"
 * 5121:9397 (mobile 393).
 *
 * One photo (the vet examining Zena's ear) behind both layouts. Desktop: copy
 * at the bottom left over the photo, Zena's forecast readouts on the right.
 * Mobile: the copy on a solid #222 block under the header, then the photo as
 * a 340px band with its own, smaller set of readouts.
 *
 * The readouts are exported from Figma as SVG with the text converted to
 * paths, so they render without the Geist Mono face. Each export's box
 * includes its drop-shadow padding; the positions below are those boxes.
 *
 * Desktop geometry: Figma draws the photo 113.82% x 131.71% of the hero,
 * pinned left, 6.67% above the top — 1639 x 922 at 1440. That box is the
 * "stage": the photo fills it and the readouts are positioned in % of it, so
 * they stay on the dog wherever the stage goes. Below 1440 the stage keeps
 * its 1639rem and stays anchored by its right edge (199rem past the hero's),
 * which keeps the dog and readouts in a 1040rem-wide hero. From 1920 (1rem =
 * 1px) it is sized in % of the hero instead, so it keeps covering.
 *
 * Fonts: the headline is Aeonik Medium (--font-display), as in Figma;
 * everything else is Inter. Loaded after pointer-by-shakuro.css; overrides
 * its global h1 / p / a rules for this section only.
 */

.vets-hero {
  --vets-hero-orange: var(--_colors---colors-brand-orange, #ff6000);

  position: relative;
  z-index: 1;
  min-height: 700rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #222;
  color: #fff;
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Photo, overlay, readouts ------------------------------------------------- */

.vets-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vets-hero-stage {
  position: absolute;
  top: -46.7rem;
  right: -199rem;
  width: 1639rem;
  height: 922rem;
}

.vets-hero-photo,
.vets-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.vets-hero-photo img {
  max-width: none;
  object-fit: cover;
}

/* Figma overlays the photo with hard-light layers. The scrim is not a
   stacking context, so its pseudo-elements blend with the photo under it. */
.vets-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vets-hero-scrim::before,
.vets-hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Desktop: rgb(20,8,1) .7 on the left → rgb(45,17,1) .5 on the right */
.vets-hero-scrim::after {
  background: linear-gradient(to right, rgba(20, 8, 1, 0.7), rgba(45, 17, 1, 0.5));
  mix-blend-mode: hard-light;
}

.vets-hero-tags,
.vets-hero-tags-mobile {
  display: none;
  pointer-events: none;
}

.vets-hero-tags img,
.vets-hero-tags-mobile img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Figma 1440 frame coordinates of each export, as % of the 1639 x 922 stage
   (whose top is 46.7 above the hero's). */
@media screen and (min-width: 992px) {
  .vets-hero-tags {
    display: block;
  }

  .vets-hero-tags .vets-hero-tag-zena {
    left: 50.671%;
    top: 14.279%;
    width: 108rem;
    height: 81rem;
  }

  /* The creatinine tag, the CKD card, the next-step card and the two lines
     that join them keep their spacing as one cluster. */
  .vets-hero-readouts {
    position: absolute;
    left: 68.928%;
    top: 19.045%;
    width: 311rem;
    height: 518rem;
  }

  .vets-hero-readouts .vets-hero-tag-creatinine {
    left: 10.59rem;
    top: 0;
    width: 178rem;
    height: 24rem;
  }

  .vets-hero-readouts .vets-hero-line-creatinine {
    left: 88.87rem;
    top: 23.47rem;
    width: 8rem;
    height: 69rem;
  }

  .vets-hero-readouts .vets-hero-card-ckd {
    left: 10.15rem;
    top: 76.26rem;
    width: 301rem;
    height: 230rem;
  }

  .vets-hero-readouts .vets-hero-line-ckd {
    left: 200.99rem;
    top: 154.94rem;
    width: 8rem;
    height: 219rem;
  }

  .vets-hero-readouts .vets-hero-card-next {
    left: 0;
    top: 366rem;
    width: 244rem;
    height: 152rem;
  }
}

/* From 1920 the stage grows with the viewport but the hero stays 700 tall,
   so a fixed top would crop the dog out. Instead the readouts are held in
   view: from the ZENA tag's top (14.279% of the 64.02vw stage height) to the
   next-step card's bottom (19.045% + 518) is centred on the hero's 350, then
   nudged 19 down so ZENA clears the 76 header: top = 110 - 10.67vw. */
@media screen and (min-width: 1920px) {
  .vets-hero-stage {
    top: calc(110rem - 10.67vw);
    right: -13.82%;
    width: 113.82%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

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

/* Figma: 180 top / 120 bottom padding, copy pinned to the bottom */
.vets-hero .container.vets-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 700rem;
  padding: 180rem 0 120rem;
}

/* Figma: Aeonik Medium 64/64, -1.6px, one sentence per line */
.vets-hero-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64rem;
  line-height: 64rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: #fff;
}

.vets-hero-heading-line {
  display: block;
}

/* Figma: 18/26, -0.48px, 16 below the headline */
.vets-hero-subheading {
  margin: 16rem 0 0;
  font-size: 18rem;
  line-height: 26rem;
  font-weight: 400;
  letter-spacing: -0.48rem;
  color: #fff;
}

/* The 40 above the button is the column's 16 gap plus the Action frame's
   24 top padding. */
.vets-hero-cta-row {
  display: flex;
  align-items: center;
  margin-top: 40rem;
}

/* Figma "button-large" 5121:8963: 52 tall, 14/64 padding with the hairline
   inside, so our outside border takes 13 vertical — as in hero.css. */
.button-pill.vets-hero-cta {
  margin: 0;
  max-height: none;
  padding: 13rem 64rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: -0.32rem;
}

/* Mobile only — the desktop header carries this link */
.vets-hero-petowner {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Tablet (768–991): desktop composition in a narrower column          */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  /* No Figma frame. The headline spans the column here and would run into
     the readouts, so they are ≥ 992 only — the homepage hero does the same. */
  .vets-hero-heading {
    font-size: 56rem;
    line-height: 58rem;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): copy on #222, then the photo band        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  /* The bar sits on the copy's solid #222 here, not the photo: no scrim
     (css/header.css draws it for the other vets pages) */
  .site-header--vets::before {
    content: none;
  }

  .vets-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Figma "Opening promise": 76 header + 40 above the headline, 24 gutters,
     40 below the link */
  .vets-hero .container.vets-hero-content {
    order: 1;
    min-height: 0;
    padding: 116rem 24rem 40rem;
  }

  /* "Veterinarian and patient": a 340-tall band under the copy */
  .vets-hero-media {
    position: relative;
    inset: auto;
    order: 2;
    height: 340rem;
  }

  /* Figma fills the band with the photo at its height, its centre 249 from
     the left edge (604 wide at 340 tall, so 53 off the left). In rem, like
     the readouts, so the two stay together between 480 and 767. */
  .vets-hero-stage {
    top: 0;
    right: auto;
    left: -53.2rem;
    width: 604.4rem;
    height: 340rem;
  }

  /* Figma mobile overlay: rgb(45,17,1) .2 multiply, then #6c5d55 hard-light */
  .vets-hero-scrim::before {
    background-color: rgba(45, 17, 1, 0.2);
    mix-blend-mode: multiply;
  }

  .vets-hero-scrim::after {
    background: #6c5d55;
  }

  /* Figma mobile frame coordinates of each export, less the band's 468 */
  .vets-hero-tags-mobile {
    display: block;
  }

  .vets-hero-tags-mobile .vets-hero-tag-zena {
    left: 225rem;
    top: 26rem;
    width: 64rem;
    height: 52rem;
  }

  .vets-hero-tags-mobile .vets-hero-tag-creatinine {
    left: 23.47rem;
    top: 200rem;
    width: 134rem;
    height: 18rem;
  }

  .vets-hero-tags-mobile .vets-hero-line-creatinine {
    left: 119.33rem;
    top: 218rem;
    width: 6rem;
    height: 15rem;
  }

  .vets-hero-tags-mobile .vets-hero-card-ckd {
    left: 51rem;
    top: 218rem;
    width: 317rem;
    height: 211rem;
  }

  .vets-hero-tags-mobile .vets-hero-line-ckd {
    left: 224.66rem;
    top: 252.25rem;
    width: 50rem;
    height: 6rem;
  }

  .vets-hero-tags-mobile .vets-hero-card-next {
    left: 236.01rem;
    top: 237.41rem;
    width: 157rem;
    height: 115rem;
  }

  /* Figma: Aeonik 40/44, -1.6px, the two sentences run on */
  .vets-hero-heading {
    font-size: 40rem;
    line-height: 44rem;
  }

  .vets-hero-heading-line {
    display: inline;
  }

  /* 16/24 mono/300, 12 below the headline */
  .vets-hero-subheading {
    margin-top: 12rem;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: -0.32rem;
    color: #ebebeb;
  }

  /* Button full width, the pet-owner link centred under it, 12 apart; 24
     above (the column's 12 gap plus the button frame's 12 top padding) */
  .vets-hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12rem;
    margin-top: 24rem;
  }

  /* 345 x 48, 12/64 padding — 11 with our outside border */
  .button-pill.vets-hero-cta {
    display: flex;
    width: 100%;
    padding: 11rem 64rem;
  }

  /* 5121:9394: 14/20, 8 apart, 8/12 padding */
  .vets-hero-petowner {
    display: inline-flex;
    align-self: center;
  }
}