/* =========================================================
   Tool Zino — Responsive rules
   Breakpoints: ≤1199 (small desktop) · ≤991 (tablet) ·
                ≤767 (large phone / tablet portrait) ·
                ≤575 (phone) · ≤380 (small phone)
   ========================================================= */

/* ---------- ≤1199px : small desktop / large tablet ---------- */
@media (max-width: 1199px) {
  .container-max { padding: 0 20px; }
  .tz-hero-inner { max-width: 680px; }
  .tz-chip.c5, .tz-chip.c6 { display: none; }
}

/* ---------- ≤991px : tablet ---------- */
@media (max-width: 991px) {
  .tz-nav {
    position: fixed; top: var(--header-height); left: 0; right: 0;
    background: var(--surface-white);
    flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-130%);
    transition: transform var(--dur-mid) var(--ease-out);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .tz-nav.active { transform: translateY(0); }
  .tz-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 10; flex-shrink: 0; }
  .tz-burger span { width: 24px; height: 2px; background: var(--text-heading); border-radius: 2px; }

  /* Guarantee the logo and burger never crowd each other, however narrow the screen */
  .tz-header-left { flex-shrink: 1; overflow: hidden; }
  .tz-header-right { flex-shrink: 0; }

  .tz-chip.c3, .tz-chip.c4 { display: none; }
  .tz-stats { padding: 44px 24px; }
  .section { padding: 84px 0; }

  /* Theme + language controls: shrink slightly on tablets, keep visible */
  .tz-theme-toggle { width: 34px; height: 34px; font-size: 0.85rem; }
  .tz-lang-select { font-size: 0.76rem; padding: 7px 26px 7px 12px; }

  /* Tool pages */
  .tool-panel { padding: 28px; }
  .tool-page-head .tool-icon { width: 48px; height: 48px; font-size: 1.25rem; }
  .related-strip { gap: 10px; }

  /* Weather badge: shrink and drop the city label on tablets */
  .tz-weather-city { display: none; }
  .tz-weather { padding: 6px 11px; font-size: 0.78rem; }
}

/* ---------- ≤767px : large phone / tablet portrait ---------- */
@media (max-width: 767px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }

  /* Hero */
  .tz-hero { padding: calc(var(--header-height) + 46px) 0 70px; }
  .tz-chip { display: none !important; }
  .tz-search-card { flex-wrap: wrap; padding: 16px; }
  .tz-search-card button { width: 100%; }
  .tz-search-input { padding: 8px 0; width: 100%; }
  .tz-hero-cta { flex-direction: column; align-items: stretch; }
  .tz-hero-cta a { text-align: center; }

  /* On phones the header only has room for logo + burger; hide the weather pill */
  .tz-weather { display: none; }
  /* On phones, hide the language label text width by shrinking the select further */
  .tz-lang-select { padding: 6px 22px 6px 10px; font-size: 0.72rem; }
  .tz-controls { gap: 8px; }

  .why-item { flex-direction: column; }
  .tz-footer-bottom { flex-direction: column; text-align: center; }
  .tz-footer { padding: 54px 0 20px; text-align: center; }
  .tz-footer .col-lg-4 .tz-logo,
  .tz-footer .tz-social { justify-content: center; }
  .tz-footer .col-lg-4 p { margin-left: auto; margin-right: auto; }

  .tz-stats { border-radius: var(--radius-md); }
  .stat-item { margin-bottom: 6px; }

  /* Tool pages */
  .tool-page-hero { padding: calc(var(--header-height) + 30px) 0 10px; }
  .tool-page-head { flex-wrap: wrap; }
  .tool-panel { padding: 22px; border-radius: var(--radius-md); }
  .tz-row { flex-direction: column; gap: 0; }
  .tz-row > .tz-field { min-width: 100%; }
  .tz-btn-group { gap: 8px; }
  .tz-chip-btn { padding: 8px 14px; font-size: 0.8rem; }
  .tz-result { padding: 18px; }
  .tz-result-grid { grid-template-columns: repeat(2, 1fr); }
  .tz-gauge-track { margin-top: 26px; }
  .related-strip { flex-direction: column; align-items: stretch; }
  .related-chip { justify-content: center; }
}

/* ---------- ≤575px : phone ---------- */
@media (max-width: 575px) {
  .container-max { padding: 0 16px; }
  .tz-logo { font-size: 1.05rem; padding-left: 16px; gap: 8px; }
  .tz-logo .mark { width: 32px; height: 32px; font-size: 0.95rem; border-radius: 10px; }
  .tz-wordmark { white-space: nowrap; }
  .tz-header-right { padding-right: 14px; gap: 14px; }

  .tz-hero h1 { font-size: 1.9rem; }
  .tz-hero p.lead { font-size: 1rem; }
  .eyebrow { font-size: 0.7rem; padding: 5px 12px; }

  .section-head h2 { font-size: 1.5rem; }
  .section-head p { font-size: 0.95rem; }

  .btn-primary-tz, .btn-ghost-tz { width: 100%; justify-content: center; padding: 13px 20px; }

  .tool-card { padding: 22px 18px; }
  .cat-card { padding: 24px 20px; }

  .stat-num { font-size: 1.7rem; }
  .stat-label { font-size: 0.82rem; }

  /* Tool pages */
  .tool-breadcrumb { font-size: 0.78rem; }
  .tool-page-head h1 { font-size: 1.4rem; }
  .tool-page-desc { font-size: 0.92rem; }
  .tz-result-value { font-size: 1.5rem; }
  .tz-result-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tz-stat-box { padding: 12px; }
  .tz-stat-box .n { font-size: 1.2rem; }
  .tz-textarea { min-height: 140px; font-size: 0.85rem; }
  .tz-copy-btn { padding: 7px 12px; font-size: 0.75rem; }
}

/* ---------- ≤380px : small phone ---------- */
@media (max-width: 380px) {
  .tz-hero h1 { font-size: 1.65rem; }
  .tz-search-card { padding: 12px; }
  .tool-page-head { gap: 10px; }
  .tool-page-head .tool-icon { width: 42px; height: 42px; font-size: 1.1rem; }
  .tz-result-grid { grid-template-columns: 1fr 1fr; }
  .tz-badge { font-size: 0.75rem; }

  /* Very small phones: shrink the wordmark further, keep logo pinned left with clear separation */
  .tz-logo { font-size: 0.95rem; padding-left: 14px; gap: 6px; }
  .tz-logo .mark { width: 28px; height: 28px; font-size: 0.85rem; border-radius: 9px; }
  .tz-header-right { padding-right: 12px; gap: 8px; }
  .tz-controls { gap: 6px; }
  .tz-theme-toggle { width: 30px; height: 30px; font-size: 0.78rem; }
  .tz-lang-select { padding: 5px 18px 5px 8px; font-size: 0.68rem; }
  .tz-header .container-max { gap: 8px; }
}

/* ---------- Universal safety net ---------- */
@media (max-width: 991px) {
  img, svg, pre, table { max-width: 100%; }
  pre { overflow-x: auto; }
}