/* 2026-09-05: restructured per marketing's request into two real columns
   (copy left, doctors right) — was a single centered column stacked above
   a 4-up doctor grid. The doctor carousel itself (auto-advance, expand/
   collapse, corner-sharpening on join) lives in js/pcx-doctor-carousel.js -
   see that file and .pcx-pick-doctor__expand below. */

.pcx-pick-doctor__grid {
  /* Shared with .pcx-pick-doctor__photo's radial gradient below, so the
     card's own background and the expand panel's background read as the
     same blue rather than two similar-but-different ones. */
  --pcx-pick-doctor-tint: color-mix(in oklch, var(--pc-brand) 12%, white);

  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: a bare fr track's minimum size still
     defaults to its content's min-content (same reasoning as pcx-faq's
     grid-template-rows comment) - the doctors carousel's track is
     ~4480rem's worth of cards wide (16 real+duplicate cards at 17.5rem
     each), and without the minmax() floor that intrinsic width was
     winning, forcing this single mobile column - and the copy column
     stacked in the same track - wider than the viewport instead of
     shrinking to fit it. The desktop 2-column override below already
     used minmax(0, ...) for the same reason; this rule just hadn't
     needed it until the carousel introduced content this wide. */
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* Breaks the doctors column out of .pcx-container's max-width/padding on
   its right side only (the left side stays put, aligned with the grid) so
   the carousel runs to the actual browser viewport edge instead of
   stopping at the container's right inset. max(0px, ...) matters below
   1200px (--pc-container's value): once the container is already
   full-bleed itself (no side gap to close), only its own padding-inline
   needs removing, not a negative amount on top of it. Unscoped (not just
   desktop): on mobile the same formula collapses to just
   -1 * --pc-space-gutter, since the container has no outer margin left to
   close there - without this the carousel stopped short of the edge,
   masked by the container's own right padding. */
.pcx-pick-doctor__doctors-viewport {
  margin-right: calc(-1 * (var(--pc-space-gutter) + max(0px, (100vw - var(--pc-container)) / 2)));
}

@media (min-width: 1024px) {
  .pcx-pick-doctor__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
  }
}

.pcx-pick-doctor__title {
  margin-top: 1rem;
  max-width: 32rem;
}

.pcx-pick-doctor__title .pcx-ink,
.pcx-pick-doctor__title .pcx-brand {
  display: block;
}

.pcx-pick-doctor__body {
  margin-top: 1rem;
  max-width: 32rem;
  color: var(--pc-slate);
  text-wrap: pretty;
}

.pcx-pick-doctor__bullets {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 32rem;
}

.pcx-pick-doctor__bullet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 639.98px) {
  /* Centered reads fine at wider widths where the bullet text is a
     single line - on narrow mobile widths this same text often wraps
     to two lines, and centering the icon against that whole two-line
     block floats it noticeably below the first line instead of level
     with it. Top-align there instead. */
  .pcx-pick-doctor__bullet {
    align-items: flex-start;
  }
}

.pcx-pick-doctor__bullet-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--pc-brand);
}

.pcx-pick-doctor__bullet-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* "Brand blue" (lead segment, the asterisked text) vs. a lighter "accent
   blue" for the rest — no dedicated --pc-accent token exists yet, so the
   rest segment is a lighter mix of the same brand blue rather than an
   unrelated color, to read as a tint of the same hue, not a mismatch. */
.pcx-pick-doctor__bullet-lead {
  font-weight: 600;
  /* "Our dark blue" - --pc-ink (midnight navy), not --pc-brand. */
  color: var(--pc-ink);
}

.pcx-pick-doctor__bullet-rest {
  /* Matches .pcx-check-item's own text color (the mental-wellness
     section's bullets, css/pcx/_base.hubl.css) rather than a blue tint. */
  color: var(--pc-slate);
}

.pcx-pick-doctor__copy > .pcx-btn {
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  /* Desktop only: caps the CTA at a sensible width within this column's
     own narrower share of the two-column grid. On mobile this was
     fighting .pcx-btn--full's own width: 100% (see css/pcx/_base.hubl.css)
     - .pcx-pick-doctor__copy > .pcx-btn's higher specificity (0,2,0 vs
     --full's 0,1,0) meant max-width always won even where width:100%
     would otherwise have resolved to something larger, capping the
     button short of actually full width. */
  .pcx-pick-doctor__copy > .pcx-btn {
    max-width: 20rem;
  }
}

.pcx-pick-doctor__footnote {
  margin-top: 1.5rem;
  max-width: 32rem;
  font-size: 0.75rem;
  color: var(--pc-slate-light);
}

/* Clips the third (peeking) group's card and hides the horizontal reflow
   js/pcx-doctor-carousel.js's transform performs on .pcx-pick-doctor__doctors
   - overflow: visible here would show the whole track at once instead of a
   3-groups-wide window. */
.pcx-pick-doctor__doctors-viewport {
  overflow: hidden;
  /* Same technique pcx-service-cards-alt uses for its swipe rail: pan-y
     tells the browser to keep handling vertical scroll natively, but
     leave horizontal gestures alone instead of trying to pan/scroll the
     element itself - without this, a swipe reads as an ambiguous
     diagonal gesture to the browser and vertical page scroll fights the
     horizontal swipe instead of being cleanly excluded. */
  touch-action: pan-y;
}

.pcx-pick-doctor__doctors {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  /* js/pcx-doctor-carousel.js drives transform: translateX(...) here to
     slide the track and reveal the newly-expanded group at the left edge -
     the transition is what makes the advance read as a "push". */
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.pcx-pick-doctor__doctor-group {
  flex: none;
  display: flex;
  align-items: stretch;
  /* No gap between the card and its own expand panel — they should read
     as one continuous shape when expanded (rounded outer corners, sharp
     where the two halves meet), not two separate tiles. Spacing between
     different doctors' groups is .pcx-pick-doctor__doctors' own gap. */
  gap: 0;
}

/* Ported from `flex flex-col overflow-visible rounded-media bg-cream` —
   the whole card (photo + text) is one cream tile, not just the photo.
   Width is the previous 4-up-grid card's natural size (~14rem at this
   container's typical width) x1.25, per the "cards 25% bigger" request -
   font-size is untouched (see .pcx-pick-doctor__name/__specialty/__bio
   below), only the box itself and its padding scale up. */
/* This is a <button> now (click-to-expand), which means two site-wide
   rules land on it that a <div> never had to fight: mws's global
   `button, .button { padding, border, display: flex, font-size }` reset
   (atoms/button/button.hubl.css), and _base.hubl.css's own
   `.pcx-home button:not(.pcx-btn) { corner-shape: round }` (added to keep
   the carousel-dot/accordion-trigger buttons elsewhere on this page from
   inheriting squircle at a size too small for it to read as anything but
   distorted). Neither is wanted here - explicit resets below counter the
   first, and the higher-specificity selector further down counters the
   second so this card keeps its real squircle treatment. */
.pcx-pick-doctor__doctor {
  flex: none;
  width: 17.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  padding: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: var(--pc-radius-media);
  background: var(--pc-cream);
  /* Animates alongside the sibling panel's width transition below - see
     .pcx-pick-doctor__doctor-group.is-expanded. */
  transition: border-radius 0.6s ease;
}

@media (min-width: 1024px) {
  @supports (corner-shape: squircle) {
    .pcx-home .pcx-pick-doctor__doctor.pcx-squircle {
      corner-shape: var(--pc-corner-shape);
    }
  }
}

/* The card's two corners adjacent to the expand panel go sharp while
   expanded, so the card + panel read as one continuous rounded shape
   (rounded outer corners only) instead of two separate tiles touching. */
.pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__doctor {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pcx-pick-doctor__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at bottom left, var(--pcx-pick-doctor-tint), var(--pc-cream) 65%);
  /* On expand: grows 35% (originally 15%, bumped per request) and slides
     down into the space .pcx-pick-doctor__info vacates below (see that
     rule) - transform only, so it doesn't affect the card's own layout/
     height, just visually overlaps further down.

     transform-origin: BOTTOM, not top: anchoring growth at the top made
     the scale "zoom in" from the top, pushing the shoulders/coat that
     are visible in the collapsed crop further down and off the bottom
     of the fixed-height window before the card's overflow: hidden even
     needs to clip anything - visibly less of the photo than the
     collapsed state shows, reported directly ("more image at the bottom
     in the collapsed state that is not there in the expanded state").
     Anchoring at the bottom instead keeps that same lower framing
     intact; any clipping instead happens at the top, where portraits
     like these already carry spare headroom above the head. */
  transform-origin: bottom center;
  transition: transform 0.5s ease;
}

.pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__photo {
  /* With a bottom-anchored scale, the box's bottom edge doesn't move on
     its own - translateY still has to push it down into __info's
     vacated space. Back to a plain fixed value: the dynamic per-doctor
     measurement (js/pcx-doctor-carousel.js reading __info's real height
     into a --pcx-info-h custom property) was meant to make this
     immune to exactly this kind of drift, but it left an unexplained
     gap for single-line-name doctors that a font-loading-race fix and a
     safety buffer both failed to close - not worth continuing to chase
     blind. 6rem was confirmed correct before .pcx-pick-doctor__name's
     font-size went to 1.5rem (24px, larger than before); 7.5rem
     accounted for that but still left a small, consistent ~4-8px gap
     across every doctor - bumped to 8.25rem, then a still-visible hairline gap (reported
     directly, screenshot) meant one more bump to 8.5rem. Overshoot is safe (clipped
     by .pcx-pick-doctor__doctor's own overflow: hidden, cost lands as
     slightly less spare headroom above the head, not a bottom gap). */
  /* +1px on top of the 8.5rem rem-based value: a leftover hairline gap
     (reported directly, screenshot) even after that bump looks like
     sub-pixel rounding in the transform/overflow:hidden clip boundary,
     not a real "not enough overlap" shortfall - a flat 1px nudge closes
     that kind of rounding gap directly. */
  transform: translateY(calc(8.5rem + 1px)) scale(1.35);
}

.pcx-pick-doctor__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.pcx-pick-doctor__info {
  padding: 0.9375rem 1.5625rem 1.5625rem;
  /* On expand: slides out below the card (clipped by .pcx-pick-doctor__doctor's
     own overflow: hidden) and fades - the name/specialty it shows move
     into the expand panel instead (see .pcx-pick-doctor__expand-header),
     so this vacates the space the photo grows into rather than sitting
     underneath it. */
  transition:
    transform 0.4s ease,
    opacity 0.3s ease;
}

.pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__info {
  transform: translateY(100%);
  opacity: 0;
}

.pcx-pick-doctor__name {
  margin: 0;
  /* One weight step lighter than the original 600, per request. */
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--pc-ink);
}

.pcx-pick-doctor__specialty {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #a8a29e; /* Tailwind stone-400 — no --pc-stone-400 token exists */
}

/* --- Expand panel (appended to the right of the active/expanded doctor's
   card — see module.hubl.html's header comment for how the carousel script
   toggles is-expanded) -------------------------------------------------- */

.pcx-pick-doctor__expand {
  flex: none;
  width: 0;
  overflow: hidden;
  position: relative;
  /* Left side (adjacent to the card) is always sharp, not animated - it
     should look flush-joined the instant any width is visible at all.
     Only the card's own corners (above) need to animate, since they start
     visibly rounded at rest. */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--pc-radius-media);
  border-bottom-right-radius: var(--pc-radius-media);
  /* Same --pcx-pick-doctor-tint as .pcx-pick-doctor__photo's radial
     gradient (defined on .pcx-pick-doctor__grid) - originally "light dull
     blue from the application (pcx-app-bridge) section", whose own
     primary-action card uses
     color-mix(in oklch, var(--pc-brand) 10%, transparent) as a tint over
     its cream background; this is that same tint made opaque. */
  background: var(--pcx-pick-doctor-tint);
  transition: width 0.6s ease;
}

.pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__expand {
  /* Fixed, not the group's photo-driven width — this panel's own content
     (bio copy) sizes it, not the sibling card. */
  width: 14rem;
}

.pcx-pick-doctor__expand-inner {
  /* Matches the expanded width above so the inner content doesn't reflow/
     wrap mid-transition - it should read as a wipe reveal, not a resize. */
  width: 14rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5625rem;
  text-align: left;
}

.pcx-pick-doctor__expand-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pcx-pick-doctor__expand-name {
  margin: 0;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--pc-ink);
}

.pcx-pick-doctor__expand-specialty {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pc-slate);
}

.pcx-pick-doctor__expand-bio {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #808080; /* 50% gray, per request */
}

/* Was two logos (a small natural-color one inline, plus a large
   low-opacity white "watermark" copy) - collapsed into one per feedback:
   the watermark's size read better at this panel's width, but with the
   small one's actual color/opacity, not washed out to white. Anchored to
   the panel's own bottom edge (not the inner content flow, which is why
   this is a sibling of .pcx-pick-doctor__expand-inner and absolutely
   positioned, rather than living inside it). */
.pcx-pick-doctor__expand-logo {
  position: absolute;
  left: 1.5625rem;
  bottom: 1.25rem;
  height: 3.5rem;
  width: auto;
  max-width: calc(100% - 3.125rem);
  object-fit: contain;
  pointer-events: none;
}

/* --- Mobile doctor card: simpler than the desktop version -----------------
   Desktop's card+panel sit side by side, the card's own name/specialty
   slide away on expand (making room for the panel's duplicate copy of
   them plus the bio), and the photo grows into the vacated space. Mobile
   keeps it simpler per request: name/specialty in .pcx-pick-doctor__info
   stay put whether expanded or not (no duplicate in the panel, no photo
   animation), and the panel just opens downward below the card, showing
   only the bio and logo. Same markup as desktop throughout - only the
   layout direction, what's hidden, and which corners sharpen differ. */
@media (max-width: 1023.98px) {
  /* .pcx-pick-doctor__doctors (the track) defaults to align-items: stretch,
     which never mattered on desktop since expanding never changed a
     group's overall height there. On mobile it does (the panel opens
     downward) - without this, every collapsed neighbor in the row would
     stretch to match the expanded group's taller height instead of
     sizing to its own content. */
  .pcx-pick-doctor__doctors {
    align-items: flex-start;
  }

  .pcx-pick-doctor__doctor-group {
    /* Explicit, matching .pcx-pick-doctor__doctor's own fixed width -
       needed for the panel's width: 100% below to resolve correctly.
       Percentage widths on a flex item, when the flex container's own
       width is otherwise auto (sized to its content, as this group would
       be in column direction), are treated as auto instead of actually
       resolving to a real value per spec - a plain width: 100% on the
       panel with no explicit width here left it sized to its own content
       (the bio text) rather than matching the card. */
    width: 17.5rem;
    flex-direction: column;
  }

  /* Card's own name/specialty always visible - nothing to slide away for,
     since the panel below no longer repeats them. */
  .pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__info {
    transform: none;
    opacity: 1;
  }

  /* No vacated space for the photo to grow into either. */
  .pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__photo {
    transform: none;
  }

  /* Sharp corners move from the card's right side (desktop: panel is
     beside it) to its bottom (mobile: panel is below it). */
  .pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__doctor {
    border-top-right-radius: var(--pc-radius-media);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .pcx-pick-doctor__expand {
    /* Width-based reveal (desktop) -> height-based, via the same
       grid-template-rows 0fr -> 1fr technique pcx-faq's accordion answer
       uses (see that module's module.hubl.css) - minmax(0, ...) is what
       actually lets the track collapse to 0 rather than clamping to the
       content's min-content height. */
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    width: 100%;
    height: auto;
    transition: grid-template-rows 0.35s ease;
    /* Sharp corners move from the panel's left side to its top, matching
       the card's own corner change above. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--pc-radius-media);
    border-bottom-right-radius: var(--pc-radius-media);
  }

  .pcx-pick-doctor__doctor-group.is-expanded .pcx-pick-doctor__expand {
    /* Explicit width here, not just on the unqualified rule above: the
       desktop .is-expanded .expand { width: 14rem } rule is unscoped and
       three classes deep (0,3,0), beating this file's mobile base rule
       (0,1,0) on specificity alone regardless of media query, so without
       this it would win back on mobile whenever a card is expanded. */
    width: 100%;
    grid-template-rows: minmax(0, 1fr);
  }

  .pcx-pick-doctor__expand-inner {
    /* min-height: 0 + overflow: hidden is what actually lets this shrink
       below its content's height when the grid row above collapses to
       0fr - same reasoning as pcx-faq__answer-inner. height: auto,
       not the desktop rule's 100%, since the parent's own height is now
       auto (sized to content) rather than matching a fixed sibling. */
    min-height: 0;
    height: auto;
    overflow: hidden;
    width: 100%;
  }

  /* Name/specialty already shown in .pcx-pick-doctor__info above - the
     panel's content is bio + logo only, per request. */
  .pcx-pick-doctor__expand-header {
    display: none;
  }

  /* Desktop keeps this absolutely positioned (anchored to
     .pcx-pick-doctor__expand, the nearest positioned ancestor - true
     regardless of the logo now living inside .expand-inner in the
     markup) because the panel's height always matches the sibling
     card's fixed height there, so there's always room. On mobile the
     panel's height comes from .expand-inner's own content instead - an
     absolutely-positioned (out-of-flow) logo doesn't count toward that,
     so a short bio left the panel too short and the logo overlapped
     the card above it. Back into normal flex-column flow instead, where
     it correctly adds to the height being measured. */
  .pcx-pick-doctor__expand-logo {
    position: static;
    left: auto;
    bottom: auto;
    max-width: 100%;
  }

  /* One step (1px) larger than .pcx-pick-doctor__specialty's 0.875rem,
     per request - was 0.8125rem. */
  .pcx-pick-doctor__expand-bio {
    font-size: 0.9375rem;
  }

  /* Bottom-up gradient (dull blue at the bottom, fading to sand at the
     top) instead of the flat --pcx-pick-doctor-tint desktop uses -
     linear-gradient(to top, A, B) puts A at 0% (bottom) and B at 100%
     (top). */
  .pcx-pick-doctor__expand {
    background: linear-gradient(to top, var(--pcx-pick-doctor-tint), var(--pc-cream));
  }

  .pcx-pick-doctor__expand-inner {
    padding-top: 0;
  }

  .pcx-pick-doctor__expand-logo {
    align-self: flex-start;
  }
}

/* --- Dot navigator - same look/values as
   pcx-service-cards-alt__dots/__dot/__dot--active, kept as its own set of
   classes (not a cross-module reuse) since each module owns its own
   styling in this codebase even where two look identical. ------------- */

.pcx-pick-doctor__dots {
  /* Hidden site-wide (desktop included) per feedback - kept in markup/JS
     rather than removed, in case the navigator comes back later. The
     mobile-specific display: none further down this file is now
     redundant but harmless - left as-is rather than removed, since it
     documents the source-order bug that motivated its placement. */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .pcx-pick-doctor__dots {
    /* Left-aligned within the doctors column itself, not the whole
       section - .pcx-pick-doctor__doctors-col is what the dots container
       lives in, so justify-content here is relative to that column's own
       width, not the full-bleed carousel viewport it wraps. */
    justify-content: flex-start;
  }
}

.pcx-pick-doctor__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  border: none;
  padding: 0;
  /* --pc-stone-200 (what pcx-service-cards-alt__dot uses) is nearly the
     same tone as this section's own pale background - low enough contrast
     to read as invisible rather than just subtle. --pc-stone-400 instead,
     for a dot that's actually visible against this section's own tone,
     matching intent (a visible, working dot navigator) over copying an
     exact value that happens to fail here. */
  background: var(--pc-stone-400);
  cursor: pointer;
  transition:
    width 0.3s ease-out,
    background-color 0.3s ease-out;
}

.pcx-pick-doctor__dot:hover {
  /* Darkens on hover now that the resting state itself is --pc-stone-400
     (see that rule) - --pc-stone-300 would have gone lighter than rest,
     the wrong direction for a hover state. */
  background: var(--pc-stone-600);
}

/* Compound selector, not just .pcx-pick-doctor__dot--active alone: devtools
   showed this rule's width taking effect but its background losing to
   .pcx-pick-doctor__dot's own background at the same (0,1,0) specificity -
   both classes together (0,2,0) removes any ambiguity about which wins,
   regardless of what was causing that split in the first place. */
.pcx-pick-doctor__dot.pcx-pick-doctor__dot--active {
  width: 2.5rem;
  background: var(--pc-service-card);
}

.pcx-pick-doctor__marquee-wrap {
  margin-top: 4rem;
}

@media (max-width: 1023.98px) {
  /* Moved here from the earlier mobile block on purpose: that block comes
     before .pcx-pick-doctor__dots' own base display: flex rule (further
     up this file, added later chronologically when the dot navigator was
     built as its own feature), and at equal (0,1,0) specificity the
     later-declared rule wins regardless of which media query matches -
     so a display: none placed earlier in the file was silently losing to
     the base rule's display: flex. Placing it after fixes the ordering. */
  .pcx-pick-doctor__dots {
    /* Stayed too low-contrast/hard to notice against this section's own
       background even after fixing the color bug and darkening it - not
       worth it on mobile, where js/pcx-doctor-carousel.js's swipe support
       (see that file) is the real navigation method anyway. */
    display: none;
  }

  .pcx-pick-doctor__marquee-wrap {
    /* Faster loop on mobile. */
    --pcx-marquee-duration: 20s;
  }

  /* .pcx-marquee's edge mask-image (css/base.css) combined with the
     track's ongoing transform animation renders unreliably on mobile
     WebKit — logos flicker between rendering correctly, not rendering at
     all, and rendering a single logo clipped mid-way through. Dropping the
     mask on mobile only trades the edge-fade for a plain hard edge, which
     is a much smaller visual cost than the flicker. */
  .pcx-pick-doctor__marquee-wrap .pcx-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* -25% per request, 2026-09-17 - was mobile-only (see the now-removed
   override that used to live here), extended to every width since this
   size is now wanted on desktop too; both breakpoints land on the exact
   same value so the separate mobile rule became redundant.

   Fixed width (not auto) + object-fit: contain, instead of just a fixed
   height - per request, the row's logo-to-logo spacing read as uneven
   because each source logo has a different intrinsic aspect ratio (a
   wide wordmark vs. a narrower one), so a fixed height alone let each
   logo's own width vary, and the *visual* gap between logo artwork
   varied with it even though the flex `gap` below is a constant. Giving
   every logo the same fixed-width box and centering its contents inside
   it (object-fit: contain scales each logo down to fit without
   distorting it) normalizes each logo's total footprint, so the
   constant gap between boxes now reads as a constant gap between logos
   too. */
.pcx-pick-doctor__school {
  height: calc(var(--pc-school-logo-h) * 0.75);
  width: 6rem;
  object-fit: contain;
  object-position: center;
  flex: none;
  filter: grayscale(1);
  opacity: 0.6;
}

/* Tighter than the shared .pcx-marquee/.pcx-marquee__track default
   (4rem, css/pcx/_base.hubl.css) - per request ("logos should be
   generally closer to each other"). Scoped to this module's own marquee
   instance via the wrapper class, not a change to the shared class
   itself (which pcx-hero's/pcx-insurance's marquees also use). */
.pcx-pick-doctor__marquee-wrap .pcx-marquee,
.pcx-pick-doctor__marquee-wrap .pcx-marquee__track {
  gap: 2.5rem;
}

@media (max-width: 1023.98px) {
  /* Full-bleed on the LEFT too now (was right-only, from the desktop
     "run to the browser edge" treatment near the top of this file) -
     per request, so the active card can sit centered with the next/
     previous cards peeking in on both sides, not flush against the
     viewport's left edge. js/pcx-doctor-carousel.js adds the matching
     center offset to its translateX on mobile (gated the same way -
     max-width: 1023.98px). Placed at the end of the file, after every
     other rule touching this selector, for the same reason documented
     throughout this file - source order wins ties, media queries don't
     add specificity. */
  .pcx-pick-doctor__doctors-viewport {
    margin-left: calc(-1 * var(--pc-space-gutter));
  }

  /* Back to a genuinely fixed height (2026-09-19, per direct request:
     "the section's height should stay fixed") - min-height (see git
     history for the full back-and-forth) intentionally let a
     taller-than-usual bio grow this container to avoid clipping it,
     but that still meant a visible height change switching between an
     outlier card and a normal one, which is exactly what was reported
     here. A fixed height brings back the original clipping risk this
     was written to avoid - mitigated below by letting the bio itself
     scroll internally instead of the whole viewport resizing or the
     text being cut off with no way to read the rest.

     2026-09-20 follow-up: 34rem clipped the bottom of an EXPANDED
     card's own photo (scaled 1.35x + translated down, see
     .doctor-group.is-expanded .photo above) for at least one doctor,
     not just an outlier-length bio - this viewport's overflow: hidden
     (needed to clip the horizontally-peeking side cards, see that
     rule's own comment) clips vertically too, so anything taller than
     this box gets cut off regardless of the bio-scroll fix below.
     Bumped to 40rem, then still clipped for at least one other doctor
     (long specialty + long bio combined) - rather than keep guessing a
     bigger fixed number, split the overflow axes below instead (only
     ever needed overflow-x: hidden for the horizontal peek effect;
     overflow-y was hidden as a side effect of the shorthand, not on
     purpose) so vertical content can never clip again regardless of
     length, while this height still sets the normal/no-jump baseline. */
  .pcx-pick-doctor__doctors-viewport {
    height: 44rem;
    overflow-y: auto;
  }

  /* Scrolls internally if a bio is taller than the fixed 34rem above
     leaves room for - .expand-inner itself must keep overflow: hidden
     (needed for the grid-template-rows 0fr collapse animation, see
     that rule's own comment), so the scroll boundary goes on this
     child instead. flex: 1 + min-height: 0 is the standard "scrollable
     middle item in a flex column" pattern - .expand-logo (not flexed)
     keeps its own fixed size below it regardless of how much the bio
     scrolls. */
  .pcx-pick-doctor__expand-bio {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}