/* ══════════════════════════════════════
   RESPONSIVE — Wiseboard Plus™ Dashboard
   Tablet + Mobile breakpoints
   ══════════════════════════════════════ */

/* ─── TABLET (768px – 1024px) ─── */
@media (max-width: 1024px) {

  .wb-hero-body {
    gap: 2.5rem;
    padding: 120px 4vw 60px;
  }

  .wb-hero-glow {
    width: 450px;
    height: 450px;
  }

  .wb-split {
    gap: 3rem;
  }

  .wb-section {
    padding: 5rem 4vw;
  }

  .wb-metrics {
    margin-top: 3rem;
  }

  .wb-metric {
    padding: 1.5rem 1rem;
  }

  .wb-metric-val {
    font-size: 2.2rem;
  }

  /* Inline grid (Goal Management section) */
  [style*="grid-template-columns:1fr 1fr;gap:5rem"] {
    gap: 2.5rem !important;
  }
}

/* ─── TABLET PORTRAIT & LARGE PHONES (max-width: 900px) ─── */
@media (max-width: 900px) {

  .wb-hero-body {
    grid-template-columns: 1fr;
    padding: 110px 5vw 50px;
    gap: 2.5rem;
  }

  .wb-hero-screen {
    transform: none;
    max-width: 520px;
    margin: 0 auto;
  }

  .wb-hero-screen:hover {
    transform: none;
  }

  .wb-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .wb-split.rev {
    direction: ltr;
  }

  /* Inline 2-col grid (Goal Management) → stack */
  [style*="grid-template-columns:1fr 1fr;gap:5rem"] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Inline 3-col grid (Adamis Care packages) → 2 cols */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .wb-goals-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wb-frame {
    max-width: 100%;
  }
}

/* ─── MOBILE (max-width: 640px) ─── */
@media (max-width: 640px) {

  /* Hero */
  .wb-hero {
    min-height: auto;
  }

  .wb-hero-body {
    padding: 100px 5vw 40px;
    gap: 2rem;
  }

  .wb-hero-left h1 {
    font-size: 2.2rem;
  }

  .wb-hero-left p {
    font-size: .82rem;
    margin-bottom: 1.8rem;
  }

  .wb-hero-pills {
    gap: .5rem;
    margin-bottom: 1.8rem;
  }

  .wb-pill {
    font-size: .55rem;
    padding: .35rem .7rem;
  }

  .wb-hero-glow {
    width: 300px;
    height: 300px;
  }

  /* Sections */
  .wb-section {
    padding: 3.5rem 5vw;
  }

  .wb-sec-h2 {
    font-size: 1.8rem;
  }

  .wb-sec-p {
    font-size: .8rem;
  }

  /* Features */
  .wb-feat {
    gap: .7rem;
  }

  .wb-feat-icon {
    width: 32px;
    height: 32px;
    font-size: .8rem;
  }

  .wb-feat-title {
    font-size: .68rem;
  }

  .wb-feat-desc {
    font-size: .68rem;
  }

  /* Data tags */
  .wb-data-tags {
    gap: .4rem;
  }

  .wb-tag {
    font-size: .52rem;
    padding: .3rem .6rem;
  }

  /* Metrics strip → 2 col */
  .wb-metrics {
    grid-template-columns: 1fr 1fr;
    margin-top: 2.5rem;
  }

  .wb-metric {
    padding: 1.2rem .8rem;
  }

  .wb-metric-val {
    font-size: 1.9rem;
  }

  .wb-metric-label {
    font-size: .5rem;
  }

  /* Goals grid → 1 col on small phones */
  .wb-goals-grid {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }

  .wb-goal-card {
    padding: 1.1rem;
  }

  .wb-goal-num {
    font-size: 1.6rem;
  }

  /* Inline 3-col grid (Adamis Care packages) → 1 col */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }

  /* CTA section */
  .wb-cta {
    padding: 4rem 5vw;
  }

  /* Frame screenshots */
  .wb-frame {
    border-radius: 8px;
  }

  .wb-frame-bar {
    padding: .35rem .6rem;
  }

  .wb-frame-dot {
    width: 7px;
    height: 7px;
  }
}

/* ─── SMALL PHONES (max-width: 420px) ─── */
@media (max-width: 420px) {

  .wb-hero-body {
    padding: 90px 4vw 30px;
  }

  .wb-hero-left h1 {
    font-size: 1.85rem;
  }

  .wb-hero-eyebrow {
    font-size: .5rem;
    padding: .35rem .8rem;
  }

  .wb-pill {
    font-size: .5rem;
    padding: .3rem .6rem;
  }

  .wb-sec-h2 {
    font-size: 1.55rem;
  }

  .wb-section {
    padding: 2.8rem 4vw;
  }

  .wb-metrics {
    grid-template-columns: 1fr;
  }

  .wb-metric-val {
    font-size: 1.7rem;
  }

  .wb-split {
    gap: 1.8rem;
  }

  .wb-cta {
    padding: 3rem 4vw;
  }
}

/* ─── TOUCH & HOVER HANDLING ─── */
@media (hover: none) {
  .wb-hero-screen {
    transform: none;
  }

  .wb-hero-screen:hover {
    transform: none;
  }

  .wb-goal-card:hover {
    border-color: #ede8df;
    box-shadow: none;
  }
}

/* ─── LANDSCAPE PHONES ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .wb-hero {
    min-height: auto;
  }

  .wb-hero-body {
    padding: 80px 4vw 40px;
  }
}

/* ─── SAFE AREA (notch devices) ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  .wb-cta {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }
}