/* Press card sections (tools/doctor-pages.mjs pressRow): the /media/ page's own
   "Media" card grid, used for the three sections of /media/ and the "In the Media"
   row on each doctor page. The cards keep /media/'s Beaver Builder rules (636-layout.css,
   lifted and scoped to #media on the doctor pages); this file only adds the intro,
   the one-line notes and the section nav.
   Selectors use :is(#media, .dr-press) so they carry id specificity on every page:
   on the doctor pages the lifted 636 rules are themselves scoped to #media. */

/* The paragraph under each section heading. */
.dr-press-intro { margin: 0 auto 2.08vw; padding: 0 20px; }
/* the measure sits on the paragraph so "ch" is the paragraph's own font size */
.dr-press-intro p { max-width: 62ch; margin-inline: auto; text-align: center !important; text-wrap: pretty; }
/* any link in an intro must read as a link */
.dr-press-intro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Doctor sections on /media/: "Meet Dr. ..." as a button, not an inline link: the
   site's button (FreightNeo, square corners, black text on the doctor's colour,
   Arrow-1.svg, black on hover). */
.dr-press-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto 2.6vw; padding: 0 20px; }
.dr-press-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px; font-size: 15px; line-height: 1.2; font-weight: 400;
  color: #000 !important; text-decoration: none !important; border: 1px solid transparent; border-radius: 0;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dr-press-btn--pink { background: #FF82C8; }
.dr-press-btn--blue { background: #96F0FC; }
.dr-press-btn img { width: 6px; height: auto; }
.dr-press-btn:hover, .dr-press-btn:focus-visible { background: #000; color: #fff !important; border-color: #000; }
.dr-press-btn:hover img, .dr-press-btn:focus-visible img { filter: invert(1); }
.dr-press-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (max-width: 767px) {
  .dr-press-actions { flex-direction: column; align-items: stretch; margin-bottom: 20px; }
  .dr-press-btn { justify-content: space-between; }
}

/* Logos sized by height, not the /media/ 120px box: some wordmarks are wider (up to
   10:1) than the original /media/ logos (about 3:1), so a fixed width drew them at
   half the letter height. 30px matches the original logos' measured lettering. */
:is(#media, .dr-press) .fl-node-gjkdp9xt3ae4 .fl-photo-content { width: auto; }
:is(#media, .dr-press) .fl-node-gjkdp9xt3ae4 .fl-photo-img { width: auto; height: 30px; max-width: 100% !important; aspect-ratio: auto; object-fit: contain; }

/* What each piece covers: one line under the headline, in the body font, a step
   down from the card headline (0.93vw desktop, 16px phone). */
:is(#media, .dr-press) .dr-press-note { margin: 0 0 0.84vw; font-size: max(13px, 0.83vw); line-height: 1.5; text-align: left; }
@media (max-width: 767px) { :is(#media, .dr-press) .dr-press-note { font-size: 14px; margin-bottom: 12px; } }
/* The card headline scales with the viewport (0.93vw), down to 9.5px on a tablet,
   which put the note above it in size; give it a 13px floor (phones keep 16px). */
@media (min-width: 768px) { :is(#media, .dr-press) h4.fl-node-4pbogzkd1mni { font-size: max(13px, 0.93vw) !important; } }
@media (min-width: 768px) and (max-width: 1199px) { :is(#media, .dr-press) .dr-press-note { font-size: 12px; } }

/* Three columns on desktop instead of /media/'s four: with a note under each
   headline the cards read better wider. Tablet (2) and phone (1) stay as lifted. */
@media (min-width: 1025px) {
  :is(#media, .dr-press) .fl-node-spg78w2knad4 > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }
}

/* /media/: sections stacked with room between them, and the jump links above the first. */
.dr-press + .dr-press { margin-top: 4vw; }
@media (max-width: 767px) { .dr-press + .dr-press { margin-top: 48px; } }
.dr-press-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 0 0 3vw; padding: 0 20px; }
.dr-press-nav a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.dr-press-nav a:hover { text-decoration-thickness: 2px; }
.dr-press { scroll-margin-top: 90px; }
@media (max-width: 767px) { .dr-press-nav { margin-bottom: 28px; } }

/* Doctor sections on /media/: a small cut-out portrait beside the name. The heading
   stays centred as a unit; the portrait (the doctor rising out of a colour disc in a
   site button colour) sits on the baseline. */
.dr-press h2:has(.dr-press-cutout) { display: flex; align-items: flex-end; justify-content: center; gap: 1.1vw; }
.dr-press-cutout img { display: block; height: max(96px, 6.6vw); width: auto; }
@media (max-width: 767px) {
  .dr-press h2:has(.dr-press-cutout) { gap: 12px; }
  .dr-press-cutout img { height: 80px; }
}

/* QA 2026-10-13: the portrait must never shrink when the name wraps (it squashed to
   56x80 on phones); on phones it sits centred beside a two-line name. */
.dr-press-cutout { flex: 0 0 auto; }
.dr-press-cutout img { aspect-ratio: 1; object-fit: contain; }
/* phones: portrait above a centred name (beside it, the name wrapped to three lines) */
@media (max-width: 767px) { .dr-press h2:has(.dr-press-cutout) { flex-direction: column; align-items: center; gap: 10px; text-align: center; } }

/* Very wide wordmarks (Into The Gloss is 10:1) are capped so no logo outweighs the headline. */
:is(#media, .dr-press) .fl-node-gjkdp9xt3ae4 .fl-photo-img { max-width: min(100%, 200px) !important; }

/* The practice section has four items: four columns on desktop, no orphan card. */
@media (min-width: 1025px) {
  #practice .fl-node-spg78w2knad4 > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}

/* Room before the newsletter row after the last /media/ section. */
#dr-juliya-fisher.dr-press { margin-bottom: 4vw; }
@media (max-width: 767px) { #dr-juliya-fisher.dr-press { margin-bottom: 48px; } }

/* ---------------------------------------------------------------------------
   Phones: each section is a compact list instead of a column of full cards
   (2026-10-13: 22 cards at ~500px made /media/ ~13,800px, 16 screens). Each item
   is one row: square thumbnail, "OUTLET · Mon YYYY", headline, a two-line note.
   The whole row is the link (the card's own button, stretched; its label stays
   for screen readers). Sections over four items show four, then "Show all N"
   (press.js). Desktop keeps the cards and never shows the meta line or button. */
.dr-press-meta, .dr-press-more { display: none; }
@media (max-width: 767px) {
  :is(#media, .dr-press) .fl-node-spg78w2knad4 > ul { row-gap: 0 !important; }
  :is(#media, .dr-press) .fl-node-ms0ah4w26brn {
    position: relative; display: grid !important; grid-template-columns: 88px 1fr;
    grid-template-areas: "thumb meta" "thumb title" "thumb note";
    grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 4px; align-content: start;
    padding: 16px 0 !important; border-width: 0 0 1px !important; border-color: #E6E6E6 !important;
  }
  :is(#media, .dr-press) .fl-loop-item:first-child .fl-node-ms0ah4w26brn { border-top-width: 1px !important; }
  :is(#media, .dr-press) .fl-node-ms0ah4w26brn > style { display: none; }
  :is(#media, .dr-press) .fl-node-kd42u8i19bpn { grid-area: thumb; margin: 0 !important; }
  :is(#media, .dr-press) .fl-node-kd42u8i19bpn .fl-photo-img { width: 88px !important; height: 88px; object-fit: cover; }
  :is(#media, .dr-press) .fl-node-gjkdp9xt3ae4 { display: none; }
  :is(#media, .dr-press) .dr-press-meta {
    display: block; grid-area: meta; margin: 0; font-size: 11px; line-height: 1.3;
    letter-spacing: 0.08em; text-transform: uppercase; color: #6B6B6B;
  }
  :is(#media, .dr-press) h4.fl-node-4pbogzkd1mni { grid-area: title; margin: 0 !important; font-size: 16px !important; line-height: 1.3 !important; }
  :is(#media, .dr-press) .dr-press-note {
    grid-area: note; margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* the card's button becomes an invisible link over the whole row */
  :is(#media, .dr-press) .fl-node-7tx34kbdrwsa { position: static !important; margin: 0 !important; height: 0; }
  :is(#media, .dr-press) .fl-node-7tx34kbdrwsa a.fl-button { position: static !important; padding: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; }
  :is(#media, .dr-press) .fl-node-7tx34kbdrwsa a.fl-button::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  :is(#media, .dr-press) .fl-node-7tx34kbdrwsa a.fl-button:focus-visible::after { outline: 2px solid #000; outline-offset: -2px; }
  :is(#media, .dr-press) .fl-node-7tx34kbdrwsa .fl-button-text {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* four, then "Show all N" */
  .dr-press-collapsible:not(.dr-press-open) .dr-press-extra { display: none; }
  .dr-press-collapsible .dr-press-more:not([hidden]) {
    display: block; width: calc(100% - 40px); margin: 16px 20px 0; padding: 14px 18px;
    font: inherit; font-size: 15px; color: #000; background: #fff; border: 1px solid #000; border-radius: 0; cursor: pointer;
  }
  .dr-press-collapsible .dr-press-more:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  .dr-press-more[hidden] { display: none !important; }
  /* intro paragraph a touch tighter above the list */
  .dr-press-intro { margin-bottom: 16px; }
}