/* Health-specific additions to the shared premium grooming article contract. */
.health-hub-hero--quiet {
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
}

.health-editorial-note {
  max-width: 590px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(184, 154, 98, .38);
  color: rgba(255, 249, 239, .86);
  font-size: 14px;
  line-height: 1.65;
}

.health-quiet-visual {
  position: relative;
  display: grid;
  min-height: 520px;
  place-items: center;
  overflow: hidden;
  background: #ebe1d1;
}

.health-quiet-visual::before,
.health-quiet-visual::after,
.health-quiet-visual span {
  position: absolute;
  content: "";
  border: 1px solid rgba(23, 35, 31, .16);
  border-radius: 50%;
}

.health-quiet-visual::before { width: 360px; height: 360px; }
.health-quiet-visual::after { width: 230px; height: 230px; }
.health-quiet-visual span { width: 104px; height: 104px; background: rgba(255, 253, 248, .55); }
.health-quiet-visual strong { position: relative; z-index: 1; color: #17231f; font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; letter-spacing: .08em; }

.health-section-link {
  color: var(--grooming-ink);
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 4px;
}

.health-catalog-heading {
  margin: 0 0 42px;
  padding: clamp(34px, 6vw, 70px);
  border-radius: 3px 34px 3px 3px;
  color: var(--grooming-ivory);
  background: var(--grooming-night);
  box-shadow: var(--grooming-shadow);
}

.health-catalog-heading h1 {
  max-width: 850px;
  margin: 12px 0 18px;
  color: var(--grooming-ivory);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.health-catalog-heading > p:not(.grooming-eyebrow) { max-width: 700px; color: rgba(255, 249, 239, .8); font-size: 17px; line-height: 1.65; }
.health-catalog-heading > span,
.health-catalog-heading > aside { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(184, 154, 98, .38); color: var(--grooming-ivory); font-size: 14px; font-style: normal; }
.health-catalog .grooming-card h2 { margin: 10px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.08; }

.health-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 46px; }
.health-pagination a { display: inline-grid; min-width: 44px; min-height: 44px; padding: 0 13px; place-items: center; border: 1px solid var(--grooming-line); color: var(--grooming-ink); background: var(--grooming-surface); font-size: 13px; font-weight: 700; text-decoration: none; }
.health-pagination a[aria-current="page"] { color: var(--grooming-ivory); background: var(--grooming-night); }

.health-review-boundary,
.health-medical-boundary {
  margin: 0 0 36px;
  padding: 24px 28px;
  border: 1px solid rgba(128, 102, 50, .24);
  border-left: 4px solid var(--grooming-brass);
  background: #fffaf0;
  box-shadow: 0 12px 30px rgba(23, 35, 31, .05);
}

.health-review-boundary strong { color: var(--grooming-night); font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; line-height: 1.15; }
.health-review-date { margin: 18px 0 0; color: var(--grooming-ink-soft); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.health-review-boundary p,
.health-medical-boundary p { margin: 10px 0 0; color: var(--grooming-ink-soft); line-height: 1.7; }
.health-medical-boundary { margin: 48px 0 0; }
.health-medical-boundary h2 { margin: 8px 0 0; color: var(--grooming-night); font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; line-height: 1.08; }

@media (max-width: 860px) {
  .health-hub-hero--quiet { grid-template-columns: 1fr; }
  .health-quiet-visual { min-height: 280px; }
}

@media (max-width: 600px) {
  .health-article .grooming-breadcrumbs a {
    flex: 0 0 auto;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }
  .health-article .grooming-breadcrumbs > a:nth-of-type(1),
  .health-article .grooming-breadcrumbs > a:nth-of-type(1) + span,
  .health-article .grooming-breadcrumbs > a:nth-of-type(2),
  .health-article .grooming-breadcrumbs > a:nth-of-type(2) + span,
  .health-article .grooming-breadcrumbs > a:nth-of-type(4) + span,
  .health-article .grooming-breadcrumbs > [aria-current="page"] {
    display: none;
  }
  .health-catalog-heading { padding: 28px 20px; border-radius: 3px 24px 3px 3px; }
  .health-catalog-heading h1 {
    max-width: none;
    font-size: clamp(37px, 11.5vw, 44px);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .health-review-boundary,
  .health-medical-boundary { padding: 20px; }
}
