/* responsive-system.css (file kept as mobile-polish.css for build compatibility)
   Plan 073 — content-agnostic responsive SYSTEM + phone/tablet polish.
   Loaded AFTER style.css. Desktop (>=900px) visual parity is preserved; this layer adds
   universal safety rules so FUTURE content (longer strings, more items) cannot re-break
   the layout, plus targeted phone/tablet refinements. See docs: responsive_standard.md. */

/* ================= 1. UNIVERSAL CONTENT-SAFETY (all viewports — the root guarantees) ================= */

/* 1a. Long entity strings (email, phone, URL, handle, address, cert codes) can never push width */
.hauff { overflow-wrap: break-word; }
.hauff a[href^="mailto:"], .hauff a[href^="tel:"],
.hauff .hf-dl dd, .hauff .hf-dl dd a, .hauff .hf-foot__addr,
.hauff .hf-social a, .hauff .hf-prose a, .hauff .hf-break,
.hauff .hf-tag, .hauff .hf-chip, .hauff .hf-shop, .hauff .hf-prod__kicker,
.hauff .hf-prod__name, .hauff .hf-detail__name, .hauff .hf-step__title {
  overflow-wrap: anywhere; word-break: break-word;
}

/* 1b. Kill grid/flex min-content blowout: text children must be allowed to shrink below content */
.hauff [class*="__grid"] > *, .hauff [class*="__cols"] > *,
.hauff .hf-promise__item, .hauff .hf-hero__grid > *, .hauff .hf-contact > * { min-width: 0; }
.hauff .hf-promise__t, .hauff .hf-promise__t strong { overflow-wrap: anywhere; }

/* 1c. Checklist / stats strips collapse by rule (auto-fit) so any item count reflows safely */
.hauff .hf-freelist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hauff .hf-stats    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

/* 1d. Pills/tags/labels WRAP gracefully (never nowrap — nowrap overflows on long labels).
   The pill ROW wraps between pills; a long label wraps inside its pill instead of clipping. */

/* 1e. Touch hit-area floor on REAL controls only (never inline text links) */
@media (pointer: coarse) {
  .hauff .hf-btn, .hauff .hf-navtoggle, .hauff .hf-social a, .hauff .hf-faq__item summary { min-height: 44px; }
}

/* ================= 2. PHONE (<= 559px) ================= */
@media (max-width: 559px) {
  .hf-hero h1       { font-size: clamp(34px, 10vw, 46px); line-height: 1.03; }
  .hf-hero--dark h1 { font-size: clamp(33px, 9.4vw, 44px); line-height: 1.05; }
  .hf-display       { font-size: clamp(30px, 8.8vw, 40px); }
  .hf-pagehead h1   { font-size: clamp(27px, 8vw, 36px); }
  .hf-step__no      { font-size: 40px; }

  .hf-hero__content { padding: 50px 0 38px; }
  .hf-section       { padding: 38px 0; }
  .hf-products      { padding: 44px 0 6px; }
  .hf-steps         { gap: 28px; }
  .hf-pagehead      { padding: 40px 0 26px; }
  .hf-prod__name    { font-size: 17.5px; }

  /* promise/trust strip: stack to 1 column (fixes the 360px clip + uneven wrap) */
  .hf-promise__grid { grid-template-columns: 1fr; }
  .hf-promise__item { border-left: none; }

  /* footer stacks to 1 column (2-col clipped KONTAK/email) */
  .hf-foot__cols    { grid-template-columns: 1fr; gap: 26px; }

  /* nav WhatsApp: compact "WhatsApp" text on ONE line (owner: shortened from "Chat WhatsApp") */
  .hf-nav__cta .hf-btn      { padding: 9px 12px; font-size: 12.5px; gap: 6px; white-space: nowrap; }
  .hf-nav__cta .hf-btn svg  { width: 16px; height: 16px; }
  .hf-brand__desc           { display: none; }  /* free nav width on phones */
  .hf-nav .hf-wrap          { padding-left: 15px; padding-right: 15px; }
  .hf-nav__inner            { gap: 8px; }
  .hf-navtoggle             { padding: 9px 13px; }
}

/* ================= 3. TABLET (560–899px) — stop desktop measures leaking; polish ================= */
@media (min-width: 560px) and (max-width: 899px) {
  /* heading floors on tablet (previously only floored at <=559px -> oversized on tablet) */
  .hf-hero h1       { font-size: clamp(40px, 7vw, 64px); }
  .hf-hero--dark h1 { font-size: clamp(38px, 6.5vw, 58px); }
  .hf-display       { font-size: clamp(34px, 6vw, 52px); }
  .hf-pagehead h1   { font-size: clamp(32px, 6vw, 54px); }

  /* neutralize desktop ch-measures so tablet bands aren't half-empty */
  .hf-story h2, .hf-story__body p, .hf-sec-head p { max-width: none; }
  .hf-hero__content { max-width: 620px; }

  /* contact 2-col; single product cards capped + centered so they don't span the tablet */
  .hf-contact       { grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
  .hf-step__cards:not(.hf-step__cards--two) { max-width: 620px; margin-left: auto; margin-right: auto; }

  /* keep a comfortable 2x2 promise grid on tablet (don't flip to cramped 4-col at 820px) */
  .hf-promise__grid { grid-template-columns: 1fr 1fr; }
}

/* ================= 4. Dark image bands: guarantee text contrast below desktop ================= */
@media (max-width: 899px) {
  .hf-smoke__overlay { background: linear-gradient(180deg, rgba(9,14,24,0.74), rgba(9,14,24,0.55) 45%, rgba(9,14,24,0.80)); }
}

/* ================= 5. Type polish (identity-preserving) + cross-OS smoothing ================= */
.hauff { -moz-osx-font-smoothing: grayscale; }
.hauff .hf-hero h1, .hauff .hf-pagehead h1 { letter-spacing: -0.012em; }
.hauff .hf-hero__sub, .hauff .hf-prod__benefit, .hauff .hf-story__body p, .hauff .hf-prose p { font-weight: 450; }

/* ================= 6. Kill tap-lag: no sticky hover-transform on touch ================= */
@media (hover: none) {
  .hauff .hf-btn:hover, .hauff .hf-prod:hover, .hauff .hf-shop:hover { transform: none; }
}

/* ================= 8. Social pills: uniform 2-col grid + centered text (phone/tablet) ================= */
@media (max-width: 899px) {
  .hauff .hf-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
  /* flex-center so the text sits centered vertically inside the 44px touch-target pill (not stuck to the top) */
  .hauff .hf-social a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; }
}

/* ================= 7. Marketplace picker (4-store disclosure) ================= */
.hauff .hf-mp { display: inline-block; }
.hauff .hf-mp > summary { list-style: none; cursor: pointer; display: inline-flex; }
.hauff .hf-mp > summary::-webkit-details-marker { display: none; }
.hauff .hf-mp__menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }