/* ============================================================
   Hani Len — Category lobby page (taxonomy-treatment_category.php)
   Builds on main.css + treatment.css (ht-hero/ht-steps/ht-faq/ht-form).
   Prefix: hc-
   ============================================================ */

/* ---- Category hero (uses ht-hero base, extra bits) --------------- */
.hc-hero__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hc-hero__tag { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: .95rem; color: rgba(255,255,255,.9); }
.hc-hero__tag svg { width: 15px; height: 15px; stroke-width: 1.9; color: var(--gold); }

/* ---- Treatments grid (the lobby list) --------------------------- */
.hc-treatments { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 36px); margin-top: clamp(40px, 5vw, 64px); }
.hc-tcard { display: grid; grid-template-columns: 200px 1fr; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); text-decoration: none; }
.hc-tcard:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.hc-tcard__media { position: relative; overflow: hidden; }
.hc-tcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.12) saturate(1.08) contrast(.98); transition: transform .5s var(--ease-out); }
.hc-tcard:hover .hc-tcard__media img { transform: scale(1.06); }
.hc-tcard__badge { position: absolute; top: 14px; inset-inline-start: 14px; background: rgba(0,36,49,.82); color: #fff; font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .06em; padding: 7px 13px; border-radius: var(--radius-pill); }
.hc-tcard__body { padding: 28px 30px; display: flex; flex-direction: column; }
.hc-tcard__body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.65rem; color: var(--ink); margin: 0 0 8px; line-height: 1.1; }
.hc-tcard__body p { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.hc-tcard__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; }
.hc-tcard__metaitem { font-family: var(--font-body); font-size: .875rem; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
.hc-tcard__metaitem svg { width: 15px; height: 15px; stroke-width: 1.9; color: var(--gold-deep); }
.hc-tcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: var(--navy); transition: gap .2s, color .2s; }
.hc-tcard:hover .hc-tcard__link { gap: 13px; color: var(--gold-deep); }
.hc-tcard__link svg { width: 17px; height: 17px; stroke-width: 2; }

/* ---- Materials (what we inject) --------------------------------- */
.hc-materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.hc-mat { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 34px 30px; box-shadow: var(--shadow-soft); }
.hc-mat__ic { width: 54px; height: 54px; border-radius: 50%; background: var(--sand); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.hc-mat__ic svg { width: 25px; height: 25px; stroke-width: 1.7; }
.hc-mat h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--ink); margin: 0 0 10px; }
.hc-mat p { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0; }
.hc-mat__tag { display: inline-block; margin-top: 16px; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--gold-deep-text); background: rgba(201,169,110,.14); padding: 6px 12px; border-radius: var(--radius-pill); }

/* ---- Brands (navy strip) ---------------------------------------- */
.hc-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(44px, 5vw, 64px); }
.hc-brand { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-card); padding: 30px 24px; text-align: center; transition: border-color .3s, background .3s; }
.hc-brand:hover { border-color: rgba(201,169,110,.5); background: rgba(255,255,255,.03); }
.hc-brand__name { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; color: #fff; letter-spacing: .02em; }
.hc-brand__note { font-family: var(--font-body); font-size: .875rem; color: rgba(255,255,255,.62); margin-top: 8px; }

/* ---- Injector profile (split) ----------------------------------- */
.hc-injector { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.hc-injector__media { position: relative; border-radius: var(--radius-arch); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/5; max-height: min(70vh, 640px); }
.hc-injector__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: sepia(.12) saturate(1.08) contrast(.98); }
.hc-injector__cred { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hc-cred { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--hairline); background: #fff; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: .95rem; color: var(--ink); box-shadow: var(--shadow-soft); }
.hc-cred svg { width: 17px; height: 17px; stroke-width: 1.9; color: var(--teal); }
.hc-injector__quote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.45rem; line-height: 1.5; color: var(--ink); margin: 26px 0 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--gold); }

/* ---- Trust / safety row ----------------------------------------- */
.hc-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
.hc-trust__item { text-align: center; padding: 10px; }
.hc-trust__ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: rgba(201,169,110,.16); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; }
.hc-trust__ic svg { width: 26px; height: 26px; stroke-width: 1.7; }
.hc-trust__item h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; color: var(--ink); margin: 0 0 6px; }
.hc-trust__item p { font-family: var(--font-body); font-size: .9375rem; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 1000px) {
  .hc-materials { grid-template-columns: 1fr; }
  .hc-brands { grid-template-columns: repeat(2, 1fr); }
  .hc-trust { grid-template-columns: repeat(2, 1fr); }
  .hc-injector { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hc-treatments { grid-template-columns: 1fr; }
  .hc-tcard { grid-template-columns: 1fr; }
  .hc-tcard__media { height: 200px; }
}