/* ==========================================================================
   Layout system D — CLINICAL
   --------------------------------------------------------------------------
   Used by: halo ($850)
   Reference: a pharmaceutical leaflet done properly. Everything is centred and
   measured, numbers are stated in full, and the ingredient table is the hero
   rather than an afterthought.

   WHAT MAKES THIS DIFFERENT FROM THE OTHER FOUR
     · centred, narrow, 720px measure — nothing else on the site is centred
     · a dosage-style LABEL BLOCK: small caps label, large figure, unit
     · a numbered 1-2-3 routine shown as a connected timeline
     · the ingredient table has a BAR CHART drawn with a div, per row
     · an "excluded" list shown as struck-through entries, not ticks
     · NO cards on the homepage. Rules and space only.

   Requires core.css.
   ========================================================================== */

.clin {
  width: min(720px, 100% - 44px);
  margin-inline: auto;
  text-align: center;
}

.clin-wide {
  width: min(980px, 100% - 44px);
  margin-inline: auto;
}

/* ------------------------------------------------------------------ opening */
.clin-open { padding: clamp(54px, 9vw, 116px) 0 clamp(34px, 5vw, 56px); }

.clin-open h1 {
  font-size: clamp(2.05rem, 5.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 0.45em;
}

.clin-open p {
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.62;
  color: var(--d-muted);
  max-width: 46ch;
  margin-inline: auto;
}

.clin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* --------------------------------------------------------- the label block */
.clin-label {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--d-line);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  overflow: hidden;
  margin: clamp(34px, 5vw, 54px) 0;
  text-align: left;
}

.clin-label > div {
  background: var(--d-surface);
  padding: 20px 18px;
}

.clin-label .clin-k {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-muted);
  display: block;
  margin-bottom: 8px;
}

.clin-label .clin-v {
  font-family: var(--d-font);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  display: block;
}

.clin-label .clin-v i {
  font-style: normal;
  font-size: 0.5em;
  color: var(--d-muted);
  margin-left: 5px;
  letter-spacing: 0;
}

/* --------------------------------------------------------- numbered routine */
.clin-steps {
  counter-reset: cs;
  display: grid;
  gap: 0;
  text-align: left;
  margin: clamp(30px, 4vw, 46px) 0;
  position: relative;
}

.clin-step {
  counter-increment: cs;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  padding: 0 0 26px;
  position: relative;
}

/* the connecting line, drawn between the circles rather than as a border */
.clin-step::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: var(--d-line);
}

.clin-step:last-child::after { display: none; }
.clin-step:last-child { padding-bottom: 0; }

.clin-step::before {
  content: counter(cs);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--d-line);
  background: var(--d-surface);
  display: grid;
  place-items: center;
  font-family: var(--d-font);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--d-accent);
  position: relative;
  z-index: 1;
}

.clin-step h3 { font-size: 1.06rem; margin: 8px 0 4px; }
.clin-step p { margin: 0; font-size: 0.92rem; color: var(--d-muted); }

/* ----------------------------------------------------------- the hero table */
.clin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
  margin: clamp(26px, 4vw, 40px) 0;
}

.clin-table th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--d-muted);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--d-ink);
}

.clin-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--d-line);
  vertical-align: top;
}

.clin-table td:first-child { font-weight: 600; padding-right: 14px; }
.clin-table td:nth-child(2) { color: var(--d-muted); }

.clin-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--d-muted);
}

/* the concentration shown as a bar, so the reader can compare at a glance */
.clin-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--d-accent) 55%, transparent);
  margin-top: 6px;
  min-width: 4px;
}

.clin-barcell { width: 150px; }

/* --------------------------------------------------------------- excluded */
.clin-excluded {
  display: grid;
  gap: 0;
  text-align: left;
  margin: clamp(26px, 4vw, 40px) 0;
  border-top: 1px solid var(--d-line);
}

.clin-excluded div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--d-line);
  font-size: 0.94rem;
}

/* struck through, because these are the things that are NOT in it */
.clin-excluded s {
  color: var(--d-muted);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  flex: none;
}

.clin-excluded span { color: var(--d-muted); font-size: 0.88rem; }

/* ------------------------------------------------------------------- quiet */
.clin-note {
  border-top: 1px solid var(--d-line);
  border-bottom: 1px solid var(--d-line);
  padding: clamp(26px, 4vw, 40px) 0;
  margin: clamp(34px, 5vw, 54px) 0;
}

.clin-note p {
  font-family: var(--d-font);
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.018em;
  margin: 0;
}

.clin-note cite {
  display: block;
  margin-top: 14px;
  font-family: var(--d-sans);
  font-style: normal;
  font-size: 0.83rem;
  color: var(--d-muted);
}

/* ------------------------------------------------------------ the products */
.clin-products {
  display: grid;
  gap: clamp(22px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  text-align: left;
  margin: clamp(30px, 4vw, 44px) 0;
}

.clin-product { text-decoration: none; display: block; }

.clin-product-img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      color-mix(in srgb, var(--d-accent) 24%, var(--d-surface)),
      var(--d-surface) 70%);
  margin-bottom: 16px;
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.clin-product:hover .clin-product-img { transform: scale(1.03); }

.clin-product h3 { font-size: 1.02rem; margin-bottom: 3px; }
.clin-product .clin-size { font-size: 0.82rem; color: var(--d-muted); }
.clin-product .clin-cost {
  font-family: var(--d-font);
  font-size: 1.08rem;
  margin-top: 8px;
  display: block;
}

@media (max-width: 560px) {
  .clin-table td:last-child, .clin-barcell { display: none; }
}