/*
 * Vets clinical expertise — Figma "Website" file, "Clinical expertise and
 * authority" 5121:9194 (desktop 1440) and "Veterinary expertise" 5121:9483
 * (mobile 393).
 *
 * A #f9f9f9 band under the paper texture (multiply, 20%; the homepage expert
 * section's file). Top: the intro (eyebrow, two-line headline, lead) in a 514
 * column, and in a 734 column two team cards side by side over a full-width
 * "Proven accuracy" card. Below a hairline: Dr. Lang's quote and attribution in
 * one row. Mobile: everything stacked; the team cards turn into rows (60
 * portrait beside the copy) on 80% white, and the quote gets the orange quote
 * glyph above it instead of curly quotes.
 *
 * Layout. ≥ 1440 is the Figma frame. 992–1439 (no frame, the 912 column):
 * the intro sits above the cards, which keep the desktop look; the quote row
 * stays. 768–991 (no frame): same, with the mobile quote block. < 768: the
 * Figma mobile frame.
 *
 * Copy: desktop text at every width. The mobile frame has small variants
 * ("Dr. Maggie Canning", "built and read", "every clinic"); the desktop
 * wording is used, which also keeps "practice".
 *
 * Units: rem, 1rem = 1px at the design widths (the <style> block in
 * vets/index.html). Fonts: headline, names and the fact Aeonik Medium
 * (--font-display), quote PP Pangaia Medium, the rest Inter. Colours are the
 * Figma literals.
 */

.vets-expertise {
  --vets-expertise-text: #000;
  --vets-expertise-subtle: #666;
  --vets-expertise-label: #444;
  --vets-expertise-line: #ebebeb;
  --vets-expertise-brand: #ff5900;

  position: relative;
  z-index: 1;
  padding: 96rem 0 48rem;
  overflow: hidden;
  background-color: #f9f9f9;
  color: var(--vets-expertise-subtle);
  /* 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);
}

/* Figma: the paper image, multiply at 20%, over the whole band */
.vets-expertise-texture,
.vets-expertise-texture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.vets-expertise-texture img {
  object-fit: cover;
  opacity: 0.2;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.vets-expertise .container.vets-expertise-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 48rem;
}

.vets-expertise-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32rem;
}

/* Intro ------------------------------------------------------------------- */

.vets-expertise-intro {
  display: flex;
  flex: 0 0 514rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 20rem;
  min-width: 0;
}

/* Figma "Label": white, #ebebeb hairline, 6px 16px 6px 12px, a 6px brand dot,
   14/20 medium #444. The hairline is inside the box in Figma and outside in
   CSS, so the vertical padding gives up 1px each side. */
.vets-expertise-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  margin: 0;
  padding: 5rem 16rem 5rem 12rem;
  border: 1px solid var(--vets-expertise-line);
  border-radius: 999px;
  background-color: #fff;
  font-size: 14rem;
  line-height: 20rem;
  font-weight: 500;
  color: var(--vets-expertise-label);
  white-space: nowrap;
}

.vets-expertise-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--vets-expertise-brand);
}

/* Figma "Heading/Regular/XL": Aeonik Medium 48/56, -1.6px, two set lines */
.vets-expertise-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48rem;
  line-height: 56rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: var(--vets-expertise-text);
}

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

/* Figma "Body/M" in a 480 column: 16/24, -0.32px, #666 */
.vets-expertise-lead {
  max-width: 480rem;
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--vets-expertise-subtle);
}

/* Cards ------------------------------------------------------------------- */

/* 734 wide: two team cards (16 apart) over the full-width fact card */
.vets-expertise-cards {
  display: grid;
  flex: 0 1 734rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16rem;
  min-width: 0;
}

/* Figma "Credential card": white, #ebebeb hairline (inside, so 23 + 1 = 24
   padding), 12 radius */
.vets-expertise-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  padding: 23rem;
  border: 1px solid var(--vets-expertise-line);
  border-radius: 12rem;
  background-color: #fff;
}

.vets-expertise-person {
  gap: 20rem;
}

/* 80 round portraits, exported from Figma at 3x with the circle crop */
.vets-expertise-portrait,
.vets-expertise-portrait img {
  display: block;
  flex-shrink: 0;
  width: 80rem;
  height: 80rem;
}

.vets-expertise-portrait img {
  border-radius: 50%;
}

.vets-expertise-person-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6rem;
  min-width: 0;
}

/* Aeonik Medium 20/24, black */
.vets-expertise-name,
.vets-expertise-fact-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20rem;
  line-height: 24rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--vets-expertise-text);
}

/* Figma "Label/L": 16/20 medium, -0.16px, brand/500 */
.vets-expertise-role {
  margin: 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--vets-expertise-brand);
}

/* Figma "Body/M": 16/24, -0.32px, #666 */
.vets-expertise-bio {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--vets-expertise-subtle);
}

.vets-expertise-fact {
  grid-column: 1 / -1;
  gap: 16rem;
}

/* Figma "Label" 5121:9220: mono/200 fill, #ebebeb hairline, 4px 16px 4px 8px
   (3 vertical with our outside border), 16 bulb, "Label/S" 12/16 medium */
.vets-expertise-fact-label {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  margin: 0;
  padding: 3rem 16rem 3rem 8rem;
  border: 1px solid var(--vets-expertise-line);
  border-radius: 999px;
  background-color: #f5f5f5;
  font-size: 12rem;
  line-height: 16rem;
  font-weight: 500;
  letter-spacing: -0.12rem;
  color: var(--vets-expertise-label);
  white-space: nowrap;
}

.vets-expertise-fact-label img {
  display: block;
  width: 16rem;
  height: 16rem;
}

/* 14/18 medium, -0.14px, #666, underlined. The Webflow `a` rule makes links
   flex blocks with 8px padding; this one is a plain text link. */
.vets-expertise-fact-link {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 14rem;
  line-height: 18rem;
  font-weight: 500;
  letter-spacing: -0.14rem;
  color: var(--vets-expertise-subtle);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

.vets-expertise-fact-link:hover {
  color: var(--_colors---colors-brand-orange, #ff6000);
}

.vets-expertise-fact-link:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px;
}

/* Quote ------------------------------------------------------------------- */

/* Figma "Testimonial": #ccc rule on top, 32 above and below, 16 right */
.vets-expertise-quote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32rem;
  margin: 0;
  padding: 32rem 16rem 32rem 0;
  border-top: 1px solid #ccc;
}

.vets-expertise-quote-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Mobile only; desktop sets curly quotes around the text instead */
.vets-expertise-quote-mark {
  display: none;
  width: 24rem;
  height: 24rem;
}

/* Figma "Heading/Accent/L": PP Pangaia Medium 32/38, -0.64px, black */
.vets-expertise-quote-text {
  margin: 0;
  font-family: "PP Pangaia", var(--font-display);
  font-size: 32rem;
  line-height: 38rem;
  font-weight: 500;
  letter-spacing: -0.64rem;
  color: var(--vets-expertise-text);
}

.vets-expertise-quote-text::before {
  content: "\201C";
}

.vets-expertise-quote-text::after {
  content: "\201D";
}

.vets-expertise-author {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16rem;
  margin: 0;
}

/* Dr. Lang's portrait, the homepage file (Figma ellipse at 4x), 64 here */
.vets-expertise-avatar,
.vets-expertise-avatar img {
  display: block;
  flex-shrink: 0;
  width: 64rem;
  height: 64rem;
}

.vets-expertise-avatar img {
  border-radius: 50%;
  object-fit: cover;
}

.vets-expertise-author-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  white-space: nowrap;
}

/* Figma "Label/L": 16/20 medium, -0.16px, black */
.vets-expertise-author-name {
  margin: 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--vets-expertise-text);
}

/* Figma "Body/M": 16/24, -0.32px, #666 */
.vets-expertise-author-org {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--vets-expertise-subtle);
}

/* ------------------------------------------------------------------ */
/* < 1440: the intro above the cards (no Figma frame)                   */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .vets-expertise-top {
    flex-direction: column;
    align-items: stretch;
    gap: 40rem;
  }

  .vets-expertise-intro,
  .vets-expertise-cards {
    flex: none;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: the mobile quote block (no Figma frame for 768–991)           */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .vets-expertise {
    padding: 72rem 0;
  }

  .vets-expertise .container.vets-expertise-inner {
    gap: 32rem;
  }

  /* Figma 5121:9513: #ebebeb rule, 32 above, glyph + quote, then the
     attribution 24 below */
  .vets-expertise-quote {
    flex-direction: column;
    align-items: flex-start;
    gap: 24rem;
    padding: 32rem 0 0;
    border-top-color: var(--vets-expertise-line);
  }

  .vets-expertise-quote-mark {
    display: block;
  }

  .vets-expertise-quote-text::before,
  .vets-expertise-quote-text::after {
    content: none;
  }

  .vets-expertise-author {
    gap: 12rem;
  }

  .vets-expertise-avatar,
  .vets-expertise-avatar img {
    width: 48rem;
    height: 48rem;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): own 24 gutter, cards as rows              */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .vets-expertise {
    padding: 64rem 24rem;
  }

  .vets-expertise-top {
    gap: 32rem;
  }

  /* Figma "Heading/Regular/L": 32/38, -0.64px */
  .vets-expertise-heading {
    font-size: 32rem;
    line-height: 38rem;
    letter-spacing: -0.64rem;
  }

  .vets-expertise-lead {
    max-width: none;
  }

  .vets-expertise-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12rem;
  }

  /* Figma "Credential card" (mobile): 80% white, 20 padding (19 + hairline) */
  .vets-expertise-card {
    padding: 19rem;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .vets-expertise-person {
    flex-direction: row;
    gap: 16rem;
  }

  .vets-expertise-portrait,
  .vets-expertise-portrait img {
    width: 60rem;
    height: 60rem;
  }

  .vets-expertise-person-copy {
    flex: 1 1 0;
    gap: 4rem;
  }

  .vets-expertise-author-copy {
    white-space: normal;
  }
}