/* §2 "Does Micro-Infusion Hurt?" — Figma 1344:1893 (desktop) / 1344:1878 (mobile).
   Deliberate breakpoint divergence: light grey on desktop, near-black on mobile. Osh:
   "I've tweaked the mobile section to be darker, so it's more of a pattern-interrupt,
   otherwise the flow is too white." (Slack, 2026-09-18) */

.po-section {
  background: var(--rd-surface);
}
.po-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: start;
}
.po-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.po-copy .rd-h2 {
  margin-bottom: 8px;
}

.po-quote {
  position: relative;
  overflow: hidden;
  margin: 0;
  /* measured on the 1600 frame: card 547x239, text starts 29px in and 33px down,
     and the portrait column takes the right ~200px */
  padding: 33px 200px 28px 29px;
  border-radius: var(--rd-radius-card);
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  min-height: 248px;
}
.po-quote__text {
  margin: 0 0 18px;
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-size: var(--rd-fs-body);
  /* 23px on the frame, not the 1.5 body default — that alone made the card 77px taller */
  line-height: 23px;
  color: var(--rd-body);
}
.po-quote__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.po-quote__name {
  font-family: var(--base-font-family), system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--rd-fs-label);
  color: var(--rd-ink);
}
.po-quote__followers {
  font-size: var(--rd-fs-label);
  color: var(--rd-muted);
}
/* The badge sits on its own line but must hug its text. flex-basis:100% forced the
   line break AND the full width — a zero-height spacer breaks the line instead, so the
   badge can size to content. */
.po-quote__by::before {
  content: "";
  flex-basis: 100%;
  height: 0;
  order: 1;
}
.po-quote__badge {
  order: 2;
  flex: 0 0 auto;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--rd-mint);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #14483a;
}
.po-quote__portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 236px;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
}

@media (max-width: 1023px) {
  .po-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Mobile pattern-interrupt. Measured on Osh's 360 frame: the dark band is 488px and
     the section is 641px, so it stops 152px short of the bottom and the quote card
     straddles the edge — 97px of it on dark, 102px on white. The band is therefore a
     pseudo-element that ends above the section bottom rather than the section's own
     background, and the card is lifted above it. */
  .po-section {
    position: relative;
    background: #fff;
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .po-section::before {
    content: "";
    position: absolute;
    /* --po-band is measured in redesign.js; the constant is the no-JS fallback. */
    inset: 0 0 var(--po-band, 150px) 0;
    background: var(--rd-dark);
  }
  .po-section > .rd-container {
    position: relative;
    z-index: 1;
  }
  .po-quote {
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.06);
  }
  .po-section .rd-h2,
  .po-section .rd-body {
    color: #fff;
  }
  /* Osh's 360 frame runs Dr. Shah the FULL height of the card, flush to its top and
     right edges, with the quote and attribution stacked to his left. Sizing him inside a
     grid row started him 55px down and scaled him smaller than the frame. He is absolute
     instead, and the card reserves his column as right padding. */
  .po-quote {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 14px 110px 14px 14px;
    min-height: 0;
  }
  .po-quote__text {
    margin-bottom: 14px;
    /* measured off the 360 frame: 16px on a 20px line, not the 17/1.5 body default */
    font-size: 16px;
    line-height: 20px;
  }
  .po-quote__portrait {
    /* Osh renders him at ~0.317 of the source (165x174 cropped to 110 wide), bottom
       anchored, with air above his head. Stretching to the card's full height instead
       forced 0.397 and zoomed ~25% in, cutting his shoulder. Height is explicit for
       that reason — it must not follow the card. */
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    width: 110px;
    height: 174px;
    object-fit: cover;
    /* 26% not 50%: shifts him right in the column so the crop lands just past the end of
       the text on his coat, matching the frame. */
    object-position: 26% top;
    margin: 0;
  }
}