/* ============================================================
   HAIR COLOR LA — utility additions
   Small classes that supplement style.css
   ============================================================ */

/* card-link: makes entire card clickable via <a> wrapper */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-link:hover { color: inherit; }

/* index-cta-row: spacing for the "See full ranking" CTA under tierband */
.index-cta-row {
  padding: 6px 0 clamp(58px, 7vw, 96px);
}

/* note-row and note-lead link headings */
.note-row h4 a { color: inherit; text-decoration: none; }
.note-row h4 a:hover { color: var(--accent); }
.note-lead h3 a { color: inherit; text-decoration: none; }
.note-lead h3 a:hover { color: var(--accent); }

/* compare-back: spacing for back-link on studio pages */
.compare-back { margin-top: 32px; }

/* visually-hidden: accessible hiding for honeypot fields etc. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* form-hint: small helper text under form fields */
.form-hint {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 5px;
  letter-spacing: .04em;
}

/* author-hero: dark band for author pages */
.author-hero {
  background: var(--black);
  color: var(--on-black);
  padding: clamp(56px, 8vw, 96px) var(--pad) clamp(48px, 6vw, 80px);
}

/* page-section utility variants */
.page-section--light { background: #F7F6F3; border-bottom: 1px solid var(--line); }