/*
 * About "Our beliefs" — Figma "Website" file, "Pointer - About" 5121:9659,
 * node "section-beliefs" 5121:9761 (1440x683); mobile "Our beliefs"
 * 5121:10382 in "Pointer - About mobile" 5121:10347. Shared by /about and
 * /vets/about.
 *
 * A label and headline over four belief cards, on #1b1b1b with the paper
 * texture multiplied (the expert section's image; Figma's fill is the
 * uncropped original). The label is .about-label from about-problem.css in
 * its dark form: Figma lays a white fill over the band in overlay mode,
 * which on #1b1b1b comes out #363636, so that is painted flat.
 *   ≥ 1440: Figma, the four cards in one row, 24 apart.
 *   768–1439 (no frame): 2 x 2; four 210 wide cards would wrap every title.
 *   < 768: the mobile frame, stacked, smaller cards.
 *
 * Fonts: headline and card titles Aeonik Medium (--font-display), the rest
 * Inter.
 */

.about-beliefs {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 116rem 0;
  overflow: hidden;
  background-color: #1b1b1b;
  color: #ccc;
  /* 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);
}

/* Paper texture: Figma's image fill in multiply. The blend sits on the
   picture: its z-index makes it a stacking context, so a blend on the img
   would only see the picture's own empty backdrop. */
.about-beliefs-texture,
.about-beliefs-texture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.about-beliefs-texture {
  z-index: -1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.about-beliefs-texture img {
  object-fit: cover;
}

.about-beliefs .container.about-beliefs-content {
  display: flex;
  flex-direction: column;
  gap: 64rem;
}

/* Headline ---------------------------------------------------------------- */

.about-beliefs-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
}

/* Figma "Label" 5162:346: rgba(235,235,235,.4) hairline, white text */
.about-beliefs .about-label {
  border-color: rgba(235, 235, 235, 0.4);
  background-color: #363636;
  color: #fff;
}

/* Figma: Aeonik Medium 48/1.1, -1.28px, white */
.about-beliefs-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -1.28rem;
  color: #fff;
}

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

.about-beliefs-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma "Belief" 5166:526: #272727, white .2 hairline, 24 radius, 32/24
   padding; drop shadows as Figma's (Figma blur = CSS blur) */
.about-belief {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 31rem 23rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24rem;
  background-color: #272727;
  box-shadow:
    0 5rem 11rem rgba(0, 0, 0, 0.1),
    0 21rem 21rem rgba(0, 0, 0, 0.09),
    0 47rem 28rem rgba(0, 0, 0, 0.05),
    0 83rem 33rem rgba(0, 0, 0, 0.01);
}

.about-belief-icon {
  display: block;
  width: 32rem;
  height: 32rem;
}

/* Figma "Heading/Regular/M": Aeonik Medium 24/28, white; 16 under the icon */
.about-belief-title {
  margin: 16rem 0 0;
  font-family: var(--font-display);
  font-size: 24rem;
  line-height: 28rem;
  font-weight: 500;
  color: #fff;
}

/* Figma "Body/M": Inter 16/24, -0.32px, #ccc; 20 under the title */
.about-belief-text {
  margin: 20rem 0 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: #ccc;
}

/* ------------------------------------------------------------------ */
/* 768–1439 (no frame): 2 x 2                                           */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .about-beliefs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .about-beliefs {
    padding: 96rem 0;
  }

  .about-beliefs .container.about-beliefs-content {
    gap: 48rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 768: Figma mobile "Our beliefs" 5121:10382                         */
/* ------------------------------------------------------------------ */

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

  .about-beliefs .container.about-beliefs-content {
    gap: 40rem;
  }

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

  .about-beliefs-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16rem;
  }

  /* Figma "Belief" 5166:560: 210 tall, 24/20 padding */
  .about-belief {
    min-height: 210rem;
    padding: 23rem 19rem;
  }

  .about-belief-icon {
    width: 24rem;
    height: 24rem;
  }

  /* Figma: Aeonik Medium 20/24, 12 under the icon and 12 above the text */
  .about-belief-title {
    margin-top: 12rem;
    font-size: 20rem;
    line-height: 24rem;
  }

  .about-belief-text {
    margin-top: 12rem;
  }
}