/* premium-article.css — resource/blog article typography scale + table styling
   ---------------------------------------------------------------------------
   Loaded LAST in index.html, so everything here wins the cascade without
   touching styles.css / premium-content.css.

   Scope rule: every selector below is prefixed with .resource-article,
   .resource-article-hero or .resource-article-layout. Nothing here can reach
   the homepage, service pages, or the generic .article used by legal/static
   pages (which shares the element but not the .resource-article class).
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   1. TYPE SCALE — a proportional trim, not a redesign
   The body column is 626px wide (left column of the two-column layout). The
   inherited scale was tuned for a full-width measure, so headings in
   particular ran oversized against it. Headings come down ~13-15%, the lede
   ~6%, body copy ~4% (it stays at 16.6px, comfortably above the 16px floor).
   Hierarchy and every ratio between levels is preserved.
   --------------------------------------------------------------------------- */

/* Hero h1: 69.1px -> 60.2px at 1280 */
.resource-article-hero h1{
  font-size:clamp(2.6rem,4.7vw,5rem);
}
/* Hero standfirst */
.resource-article-hero__copy > p:last-child{
  font-size:1rem;
}

/* Body copy: 17.4px -> 16.6px */
.resource-article{
  font-size:1.04rem;
  line-height:1.78;
}

/* Lede: 19.5px -> 18.2px */
.resource-article__body > p:first-of-type{
  font-size:1.14rem;
  line-height:1.62;
}

/* Section heads: 43.2px -> 36.8px */
.resource-article h2{
  font-size:clamp(1.6rem,2.9vw,2.3rem);
}
/* Sub-heads: 21.6px -> 19.2px */
.resource-article h3{
  font-size:1.2rem;
}
.resource-article h4{
  font-size:1.06rem;
}
.resource-article h6{
  font-size:.98rem;
}
.resource-article blockquote{
  font-size:1.04rem;
}

@media(max-width:700px){
  .resource-article-hero h1{font-size:clamp(2.3rem,11vw,3.6rem)}
  .resource-article-hero__copy > p:last-child{font-size:.97rem}
  .resource-article{font-size:1rem}
  .resource-article__body > p:first-of-type{font-size:1.08rem}
  .resource-article h3{font-size:1.14rem}
  .resource-article blockquote{font-size:1rem}
}


/* ---------------------------------------------------------------------------
   2. TABLES
   The imported WordPress markup gives us a bare <table> with no wrapper
   element (cleanContent() strips classes and flattens the original wrapper
   divs), so the table itself has to be both the card and, on narrow screens,
   the scroll container. Two regimes:

   Desktop — the 626px measure is enough for up to four columns, so the table
   stays a real table at width:100% with `table-layout:fixed`. Fixed layout
   sizes columns from the table box rather than from the content, so the table
   is *always* exactly the width of the text column and can never push past it
   — that is the guarantee against page-level horizontal scroll. It also
   divides the measure evenly, which suits these comparison tables (a stub
   column plus 1-3 like-for-like columns) and stops a long prose column from
   starving the row labels. `overflow-wrap:anywhere` is the safety valve for a
   token wider than its column; with fixed layout the columns are already wide
   enough that ordinary words never break.

   <=700px — 3-4 columns in 350px would collapse into word fragments, so the
   table becomes `display:block; overflow-x:auto` (a block-level scroller;
   thead/tbody are re-wrapped into one anonymous table box, so header/body
   columns stay aligned) with a per-cell min-width. The scroll therefore lives
   inside the table element. The page never gains a horizontal scrollbar —
   which matters here, because page-level overflow inflates the layout
   viewport on mobile and pushes the fixed chat launcher off-screen.
   --------------------------------------------------------------------------- */

.resource-article table{
  width:100%;
  max-width:100%;
  table-layout:fixed;
  margin:var(--space-4) 0;
  border:1px solid #d8e8f4;
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--elev-1);
  border-collapse:separate;
  border-spacing:0;
  font-size:1rem;
  line-height:1.5;
  /* Numeric and price columns are common in this content; lining figures keep
     them optically aligned without needing per-column classes we don't have. */
  font-variant-numeric:tabular-nums;
}

/* See the note above: this is what guarantees the table can always be laid
   out inside the text column, at any viewport width. */
.resource-article table th,
.resource-article table td{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:none;
}

/* Header row: a tinted band with small caps so it reads as a header, not a
   first data row. */
.resource-article table th{
  padding:13px 16px;
  background:#eef6fc;
  border-bottom:1px solid #cfe3f1;
  color:#07528f;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.35;
  text-transform:uppercase;
  text-align:left;
  vertical-align:bottom;
  white-space:normal;
}
.resource-article table thead th:first-child{border-top-left-radius:var(--r-lg)}
.resource-article table thead th:last-child{border-top-right-radius:var(--r-lg)}

.resource-article table td{
  padding:13px 16px;
  border-top:1px solid #e6f0f8;
  color:#31607f;
  vertical-align:top;
  text-align:left;
}
.resource-article table tbody tr:first-child td{border-top:0}

/* Zebra banding — the main scanning aid at these row counts. */
.resource-article table tbody tr:nth-child(even) td{background:#f7fbfe}

/* Row-label column carries the weight, like a stub column in print. */
.resource-article table tbody td:first-child{
  color:#0d4c7d;
  font-weight:650;
}
.resource-article table tbody td:first-child strong,
.resource-article table td strong,
.resource-article table td b{color:#0d4c7d}

/* Column separators, kept faint so the grid never competes with the copy. */
.resource-article table th + th,
.resource-article table td + td{border-left:1px solid #edf4fa}

.resource-article table tbody tr:hover td{background:#f2f9fd}

/* The imported cells sometimes contain <p>/<ul> from the original CMS. */
.resource-article table p{margin:0 0 6px}
.resource-article table p:last-child{margin-bottom:0}
.resource-article table ul{margin:0;padding:0}
.resource-article table li{margin:4px 0;padding-left:16px}
.resource-article table li:before{top:.62em;width:5px;height:5px}
.resource-article table sup{font-size:.68em}
.resource-article table sup a{font-weight:600;text-decoration:none}

/* Scrollbar: visible enough to advertise that a wide table can be scrolled,
   quiet enough to belong to the card. */
.resource-article table::-webkit-scrollbar{height:9px}
.resource-article table::-webkit-scrollbar-track{
  background:#f2f8fc;
  border-bottom-left-radius:var(--r-lg);
  border-bottom-right-radius:var(--r-lg);
}
.resource-article table::-webkit-scrollbar-thumb{
  border-radius:99px;
  background:#b6d5e9;
  border:2px solid #f2f8fc;
}
.resource-article table::-webkit-scrollbar-thumb:hover{background:#8fbedb}
.resource-article table{scrollbar-width:thin;scrollbar-color:#b6d5e9 #f2f8fc}

@media(max-width:700px){
  .resource-article table{
    display:block;
    table-layout:auto;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    font-size:.9rem;
    /* Full-bleed to the article's own gutter: the table reclaims the 2 x 20px
       of body padding, a whole extra column of legibility at 390px. The
       negative margin exactly cancels that padding, so the page's own
       scrollWidth is untouched. */
    width:calc(100% + 40px);
    max-width:calc(100% + 40px);
    margin:var(--space-3) -20px;
  }
  .resource-article table th{padding:11px 13px;font-size:.68rem}
  .resource-article table td{padding:11px 13px}
  /* Below the text measure, cells need a floor so a 3-4 column table stays
     readable and simply scrolls rather than collapsing into word fragments
     and towering rows. */
  .resource-article table th,
  .resource-article table td{min-width:10rem}
  .resource-article table th:first-child,
  .resource-article table td:first-child{min-width:8rem}
}


/* ============================================================================
   Demo variant: the team banner runs as a single full-width bar.
   The portrait column and the Google-reviews block were removed at the
   client's request, so collapse the two-column grid rather than leaving an
   empty track where the cut-out used to sit.
   ============================================================================ */
.doctor-consultation{
  grid-template-columns:minmax(0,1fr);
  min-height:0;
}
.doctor-consultation__copy{
  max-width:1180px;
  margin-inline:auto;
  padding-block:var(--space-5);
  padding-inline:max(28px,calc((100vw - 1180px)/2));
}