/* Category hub pages (tools/hub-pages.mjs), served at /hubs/hub.css. The rows are the
   captured injectables, /team/ and /faq/ rows, styled by their own CSS plus
   /treatments/page.css and /assets/doctors.css; this file styles only what the hubs
   add: the comparison table, the tier cards (Lasers) and the before/after grid.
   Palette and type are the site's own: black hairlines, FreightNeo Pro text,
   DidotDisplay for names. */

.dr-hub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* centred under the section label, like the label itself (QA: a left box read off-centre) */
.dr-hub-intro { max-width: 62ch; margin: 18px auto 0; font-size: 17px; line-height: 1.55; text-align: center; text-wrap: pretty; }

/* ---- Comparison table ----------------------------------------------------- */
.dr-hub-table-wrap { margin: 36px 0 0; }
.dr-hub-table { width: 100%; border-collapse: collapse; border-top: 1px solid #000; text-align: left; font-size: 16px; line-height: 1.45; }
.dr-hub-table th, .dr-hub-table td { padding: 22px 20px 22px 0; vertical-align: top; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.dr-hub-table td + td, .dr-hub-table th + th { padding-left: 20px; }
.dr-hub-table thead th {
  padding-top: 16px; padding-bottom: 16px; font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.dr-hub-table tbody th { width: 24%; font-weight: 400; }
.dr-hub-table tbody th > a {
  font-family: DidotDisplay, Verdana, Arial, sans-serif; font-size: 26px; line-height: 1.15; color: #000 !important;
  text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.dr-hub-table tbody th > a:hover, .dr-hub-table tbody th > a:focus-visible { text-decoration-thickness: 2px; }
.dr-hub-note { display: block; margin-top: 8px; font-size: 14px; color: #555; }
.dr-hub-note a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; }
.dr-hub-table td:nth-child(2) { width: 34%; }
.dr-hub-also { margin: 22px 0 0; font-size: 15px; line-height: 1.5; text-align: left; color: #444; }
.dr-hub-also span { letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: #000; margin-right: 4px; }

/* Phones: each treatment becomes a block, its three facts labelled (no sideways scroll). */
@media (max-width: 767px) {
  .dr-hub-table, .dr-hub-table tbody, .dr-hub-table tr, .dr-hub-table th, .dr-hub-table td { display: block; width: auto !important; }
  .dr-hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dr-hub-table tr { padding: 22px 0 10px; border-bottom: 1px solid rgba(0, 0, 0, .15); }
  .dr-hub-table th, .dr-hub-table td, .dr-hub-table td + td { padding: 0; border: 0; }
  .dr-hub-table tbody th { margin-bottom: 14px; }
  .dr-hub-table tbody th > a { font-size: 26px; }
  /* label above value, both left-aligned (the label row centres its text; QA: centred
     values drifted away from their labels) */
  .dr-hub-table th, .dr-hub-table th *, .dr-hub-table td, .dr-hub-table td * { text-align: left !important; }
  .dr-hub-table tbody td, .dr-hub-table tbody td + td { padding: 0 0 16px; font-size: 16px; }
  .dr-hub-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #555; }
}

/* ---- Tier cards (Lasers hub) --------------------------------------------- */
/* a tier heading that links to its concern page reads as a link (QA 2026-10-14: the theme dropped the underline) */
.dr-tx-label a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.dr-hub-cards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; }
.dr-hub-card a { color: #000 !important; text-decoration: none !important; display: block; }
.dr-hub-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; }
.dr-hub-card__name { display: block; font-family: DidotDisplay, Verdana, Arial, sans-serif; font-size: 24px; line-height: 1.2; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.dr-hub-card--plain .dr-hub-card__name { text-decoration: none; }
/* In a tier that mixes photo cards and plain-text devices, the plain ones sit level with the
   photo cards' names instead of floating at the top of the empty space. */
.dr-hub-cards:has(img) .dr-hub-card--plain { align-self: end; }
.dr-hub-card__line { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) { .dr-hub-cards { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 560px) { .dr-hub-cards { grid-template-columns: 1fr; } }

/* ---- Before and afters (only once consented images exist) ---------------- */
.dr-hub-ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 28px 0 0; }
.dr-hub-ba__item { margin: 0; }
.dr-hub-ba__item img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .dr-hub-ba { grid-template-columns: 1fr; } }

#compare, #results, #before-after, [id^="tier-"] { scroll-margin-top: 90px; }

/* Doctor cards on a hub: the /team/ chooser's 104px bottom padding plus the next row's
   own top padding read as dead space (QA 2026-10-14). */
#doctors.dr-choose { padding-bottom: 48px; }
#doctors .dr-choose__helper { margin-top: 64px; }

/* "Also offered" as a list (two or more treatments with no page yet, e.g. Regenerative):
   left-aligned under the table, like the single-line version (the label row centres text). */
.dr-hub-also, .dr-hub-also * { text-align: left !important; }
.dr-hub-also p { margin: 0 0 8px; }
.dr-hub-also__list { list-style: none; margin: 0; padding: 0; }
.dr-hub-also__list li { margin: 0 0 8px; }
.dr-hub-also__list strong { font-weight: 600; color: #000; }
/* links inside a hub intro read as links (Regenerative: Sculptra and Radiesse, injectables) */
.dr-hub-intro a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* the reviewer link must read as a link, not only by colour (axe link-in-text-block) */
.dr-tx-byline a { color: inherit; text-decoration: underline !important; text-underline-offset: 3px; }