/**
 * Treatments hub — /treatments/
 * -----------------------------------------------------------------------------
 * ONLY the hub's own additions. Everything shared with the treatment pages
 * below it — tokens, type, hero, facts strip, jump nav, section rhythm,
 * buttons, steps, FAQ, trust band, CTA, disclaimer — comes from
 * service-menu.css, which this file declares as a dependency in
 * lib/treatments-hub.php so the cascade order is guaranteed and nothing here
 * needs !important.
 *
 * New here: the concern router grid, and the category directory with its cards.
 */

/* ---------------------------------------------------------------- jump nav */
/* The shared jump row is `flex` + `overflow-x: auto` with `scrollbar-width:
   none`, and its only affordance that more exists to the right — the fade on
   `.ssm-svc__jump::after` — is inside a `max-width: 900px` query. That is right
   for a treatment page, where the row is at most eight short labels and fits.
   It is wrong here: the hub's row is one link per category plus three fixed
   ones, and the category names are long ("Microneedling & Regenerative"). At
   1440 the last two links measured at 1422..1535 and 1573..1604 — past a
   1425px viewport, with no scrollbar and no fade to say so. They were
   unreachable on desktop.

   So above the phone breakpoint the row wraps instead of scrolling. Below it,
   nothing changes: the scroll row and its fade are still the right answer where
   a wrapped row would eat a third of the viewport. */
@media (min-width: 901px) {
  .ssm-thub .ssm-svc__jump ul {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0.55rem;
  }
}

/* -------------------------------------------------------------------- hero */
/* The shared hero is a two-column grid because a treatment page always has a
   photograph. The hub's image is optional, so when it is unset the copy takes
   the full measure instead of sitting beside an empty column. The lede keeps
   its own max-width, so this widens the heading, not the paragraph. */
.ssm-thub__hero-grid--nomedia {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- concerns */
/* The template's six concern cards. Routes to /concerns/*, so the whole tile is
   the target — no separate "learn more" link to tab past six times. */
.ssm-thub__concerns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssm-thub__concerns > li { margin: 0; }

.ssm-thub__concern {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

a.ssm-thub__concern:hover,
a.ssm-thub__concern:focus-visible {
  border-color: var(--svc-mauve);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(53, 28, 45, 0.08);
}

.ssm-thub__concern-label {
  display: block;
  font-family: var(--svc-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--svc-plum-deep);
  margin-bottom: 0.35rem;
}

.ssm-thub__concern-body {
  display: block;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--svc-plum-mid);
}

/* --------------------------------------------------------------- directory */
/* Categories alternate ground so a reader scrolling 40 cards can see where one
   group ends and the next begins without relying on the heading alone. The
   band is full-bleed; the wrap inside it keeps the content on the grid. */
.ssm-thub__cat {
  padding: 2.6rem 0 2.8rem;
}

.ssm-thub__cat:nth-child(even) {
  background: #fff;
}

/* `scroll-margin-top` is inherited from the catch-all `.ssm-svc [id]` rule in
   service-menu.css, which offsets for the two stacked fixed bars. Nothing to
   repeat here — but do not remove that rule without checking these anchors. */

.ssm-thub__cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--svc-rule);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
}

.ssm-thub__cat-title {
  font-family: var(--svc-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--svc-plum-deep);
  margin: 0;
}

.ssm-thub__cat-count {
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}

.ssm-thub__cat-blurb {
  max-width: 62ch;
  margin: 0 0 1.6rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--svc-plum-mid);
}

/* ------------------------------------------------------------------- cards */
.ssm-thub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Cards in a row must be the same height for the "View treatment" line to sit
     on a common baseline — `margin-top: auto` on it cannot do that if each card
     only grows to its own content, which is what `align-items: start` would
     cause. Same trap as the pricing cards on the HALO page. */
  align-items: stretch;
}

.ssm-thub__item { margin: 0; display: flex; }

.ssm-thub__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--svc-rose);
  border: 1px solid var(--svc-rule);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* The even-category band is white, so a card on it needs the tinted ground to
   stay distinguishable from the section behind it. */
.ssm-thub__cat:nth-child(even) .ssm-thub__card {
  background: var(--svc-rose);
}

.ssm-thub__cat:nth-child(odd) .ssm-thub__card {
  background: #fff;
}

.ssm-thub__card:hover,
.ssm-thub__card:focus-visible {
  border-color: var(--svc-mauve);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(53, 28, 45, 0.10);
}

.ssm-thub__card-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--svc-blush);
  overflow: hidden;
}

.ssm-thub__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ssm-thub__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.15rem 1.25rem 1.25rem;
}

.ssm-thub__card-title {
  display: block;
  font-family: var(--svc-display);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--svc-plum-deep);
}

.ssm-thub__card-sum {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--svc-plum-mid);
}

.ssm-thub__card-more {
  display: block;
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}

.ssm-thub__card-more::after {
  content: " \2192";
}

/* ------------------------------------------------------------ how to choose */
.ssm-thub__choose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}

.ssm-thub__choose-col {
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 18px;
  padding: 1.8rem;
}

.ssm-thub__choose-title {
  font-family: var(--svc-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--svc-plum-deep);
  margin: 0 0 0.9rem;
}

.ssm-thub__choose-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssm-thub__choose-list li {
  position: relative;
  margin: 0 0 0.6rem;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--svc-plum-deep);
}

.ssm-thub__choose-list li:last-child { margin-bottom: 0; }

.ssm-thub__choose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--svc-blush);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .ssm-thub__concerns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssm-thub__grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ssm-thub__concerns { grid-template-columns: minmax(0, 1fr); }
  .ssm-thub__grid     { grid-template-columns: minmax(0, 1fr); }
  .ssm-thub__choose   { grid-template-columns: minmax(0, 1fr); }

  .ssm-thub__cat { padding: 2rem 0 2.2rem; }

  .ssm-thub__cat-head {
    /* The count is a secondary label; at phone width it costs a line that the
       heading needs more. Stack rather than shrink the title. */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .ssm-thub__cat-title { font-size: 1.35rem; }

  /* A 4:3 card image at full phone width is taller than the text it introduces.
     Widen the crop so the card stays scannable in a list of forty. */
  .ssm-thub__card-media { aspect-ratio: 16 / 9; }
}