/* =============================================================
   VANTAGE — business.css
   Sidebar nav layout for the Business Insurance page
   ============================================================= */

/* ── Intro stats section ─────────────────────────────────── */
.biz-intro{
  padding:72px 0;
  background:var(--graphite);
}
.biz-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.biz-stat-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);
  padding:28px;
  text-align:center;
}
.biz-stat-card.teal{background:var(--teal);border-color:transparent}
.biz-stat-card.amber{background:var(--amber);border-color:transparent}
.biz-stat-num{
  font-family:var(--ff-display);
  font-size:2.6rem;font-weight:700;
  color:#fff;line-height:1;
}
.biz-stat-card.amber .biz-stat-num{color:var(--graphite)}
.biz-stat-lbl{
  font-size:.75rem;color:rgba(255,255,255,.45);
  margin-top:6px;letter-spacing:.06em;text-transform:uppercase;
}
.biz-stat-card.teal .biz-stat-lbl{color:rgba(255,255,255,.75)}

/* ── Sidebar layout ──────────────────────────────────────── */
.biz-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  align-items:start;
  padding-top:56px;
  padding-bottom:80px;
  max-width:var(--max-w);
  margin:0 auto;
  padding-left:clamp(20px,4vw,40px);
  padding-right:clamp(20px,4vw,40px);
}

/* ── Sticky sidebar ──────────────────────────────────────── */
.biz-sidebar{
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  align-self:start; /* keeps it anchored at top of grid cell */
  max-height:calc(100vh - var(--nav-h) - 48px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.biz-sidebar::-webkit-scrollbar{width:4px}
.biz-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.biz-sidebar-inner{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-sm);
}
.biz-sidebar-label{
  padding:16px 20px 10px;
  font-size:.65rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--pewter);
  border-bottom:1px solid var(--border);
}
.biz-sidenav{
  display:flex;flex-direction:column;
  padding:8px 0;
}
.biz-sidenav-link{
  display:flex;align-items:center;gap:10px;
  padding:11px 20px;
  font-size:.86rem;font-weight:500;
  color:var(--text-mid);
  border-left:3px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.biz-sidenav-link:hover{
  background:var(--snow);
  color:var(--graphite);
  border-left-color:var(--pewter-light);
}
.biz-sidenav-link.active{
  background:var(--teal-soft);
  color:var(--teal);
  font-weight:600;
  border-left-color:var(--teal);
}
.biz-sidenav-icon{
  font-size:1rem;width:22px;
  text-align:center;flex-shrink:0;
}
.biz-sidebar-cta{
  padding:16px 20px;
  border-top:1px solid var(--border);
}

/* ── Content sections ────────────────────────────────────── */
.biz-content{
  min-width:0; /* prevents grid blowout */
}
.biz-section{
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.biz-section-header{
  margin-bottom:36px;
}
.biz-section-header .h2{
  margin:10px 0 16px;
  font-size:clamp(1.8rem,2.5vw,2.4rem);
}
.biz-section-header .lead{
  max-width:680px;
}

/* Four-column feature cards */
.biz-features-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:28px;
}
.biz-feat-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:22px 18px;
  transition:border-color .2s,box-shadow .2s,transform .25s;
}
.biz-feat-card:hover{
  border-color:var(--teal);
  box-shadow:var(--sh-sm);
  transform:translateY(-2px);
}
.biz-feat-icon{
  font-size:1.6rem;margin-bottom:12px;
}
.biz-feat-card h3{
  font-family:var(--ff-display);
  font-size:1.05rem;font-weight:600;
  color:var(--graphite);margin-bottom:8px;
}
.biz-feat-card p{
  font-size:.82rem;color:var(--pewter);
  line-height:1.65;margin:0;
}

/* Checklist */
.biz-checklist{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:28px;
}
.biz-check-item{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--snow);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:10px 14px;
  font-size:.86rem;color:var(--graphite);
  transition:border-color .15s;
}
.biz-check-item:hover{border-color:var(--teal)}

/* Section divider */
.biz-divider{
  height:1px;
  background:var(--border);
  margin:56px 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1100px){
  .biz-layout{grid-template-columns:200px 1fr;gap:32px}
}
@media(max-width:1024px){
  .biz-features-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:860px){
  /* Intro */
  .biz-intro-grid{grid-template-columns:1fr;gap:40px}

  /* Stack layout vertically */
  .biz-layout{
    display:block;
    padding:0;
  }

  /* Reset desktop sticky/scroll behaviour */
  .biz-sidebar{
    position:sticky;
    top:var(--nav-h);
    z-index:90;
    width:100%;
    max-height:none;      /* remove desktop max-height */
    overflow-y:visible;   /* remove desktop scroll */
    align-self:auto;
  }
  .biz-sidebar-inner{
    border-radius:0;
    border:none;
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 8px rgba(28,35,51,.06);
    background:var(--white);
    /* Allow horizontal overflow for the tab row */
    overflow:visible;
  }

  /* Hide desktop-only elements */
  .biz-sidebar-label{display:none}
  .biz-sidebar-cta{display:none}

  /* Nav → horizontal scrolling tab row */
  .biz-sidenav{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--teal) var(--border);
    -webkit-overflow-scrolling:touch;
    padding:0 0 8px;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .biz-sidenav::-webkit-scrollbar{display:block;height:3px}
  .biz-sidenav::-webkit-scrollbar-track{background:var(--border)}
  .biz-sidenav::-webkit-scrollbar-thumb{background:var(--teal);border-radius:3px}

  /* Each tab */
  .biz-sidenav-link{
    flex-direction:row;
    align-items:center;
    gap:6px;
    padding:13px 16px;
    border-left:none;
    border-bottom:0px solid transparent;
    white-space:nowrap;
    font-size:.82rem;
    flex-shrink:0;        /* never squish */
    min-height:48px;      /* easy tap target */
  }
  .biz-sidenav-link:hover{
    background:var(--snow);
    border-left-color:transparent;
    border-bottom-color:var(--pewter-light);
  }
  .biz-sidenav-link.active{
    color:var(--teal);
    background:transparent;
    border-left-color:transparent;
    border-bottom-color:var(--teal);
    font-weight:600;
  }
  .biz-sidenav-icon{font-size:.9rem;width:auto}

  /* Content */
  .biz-content{
    padding:36px clamp(20px,4vw,40px) 60px;
  }
  .biz-section{
    scroll-margin-top:calc(var(--nav-h) + 14px);
  }
  .biz-checklist{grid-template-columns:1fr}
  .biz-divider{margin:40px 0}
}

@media(max-width:600px){
  .biz-features-grid{grid-template-columns:1fr}
  .biz-section-header .h2{font-size:1.6rem}
  .biz-sidenav-link{
    padding:12px 14px;
    font-size:.78rem;
  }
  /* Hide icons on very small screens to fit more tabs */
  .biz-sidenav-icon{display:none}
  .biz-section{
    
  }	
}