/* ============================================================
   A2Z Salesforce — Responsive Stylesheet
   Breakpoints: 1024px | 768px | 576px | 400px
   ============================================================ */

/* ---------- Large Tablets (≤1100px) ---------- */
@media (max-width: 1100px) {
  .features-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cert-index-grid    { grid-template-columns: repeat(2, 1fr); }
  .blog-featured      { grid-template-columns: 1fr; }
  .blog-featured-img  { height: 200px; }
  .blog-sidebar-cards { flex-direction: row; flex-wrap: wrap; }
  .blog-side-card     { flex: 1 1 260px; }
}

/* ---------- Tablets (≤900px) ---------- */
@media (max-width: 900px) {
  section { padding: 60px 0; }

  /* Nav */
  .nav-toggle { display: flex; }
  .nav-links  {
    display: none;
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 12px 20px 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    gap: 0;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    border-top: 1px solid var(--border);
    z-index: 999;
  }

  .nav-links.open { display: flex; }

  .nav-links > li > a {
    height: auto !important;
    padding: 13px 8px !important;
    border-bottom: 1px solid var(--border) !important;
    border-left: none;
    border-right: none;
    font-size: 0.92rem;
    width: 100%;
    border-radius: 0 !important;
  }

  .nav-links > li > a:hover,
  .nav-links > li > a.active {
    border-bottom-color: var(--border) !important;
    background: var(--off-white) !important;
  }

  .nav-cta {
    margin-left: 0 !important;
    padding: 12px 0 0;
    align-self: flex-start;
  }

  .nav-cta > a {
    width: auto !important;
  }

  /* Hero */
  .hero { padding: 70px 0 60px; }
  .hero-row { flex-direction: column !important; gap: 40px; }
  .hero-visual { justify-content: center; }
  .hero-card-stack { max-width: 100%; }
  .hero-stats { gap: 24px; }

  /* Grids */
  .cert-cards-grid  { grid-template-columns: 1fr; }
  .iq-section .iq-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid        { grid-template-columns: repeat(2, 1fr); }
  .contact-grid     { grid-template-columns: 1fr; }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .result-stats     { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Small Tablets / Large Phones (≤768px) ---------- */
@media (max-width: 768px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }

  .hero { padding: 55px 0 50px; }
  .hero-desc { font-size: 0.975rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }

  .features-grid  { grid-template-columns: 1fr; }
  .blog-grid      { grid-template-columns: 1fr; }
  .iq-section .iq-grid { grid-template-columns: 1fr; }
  .cert-index-grid { grid-template-columns: 1fr; }

  .cert-card-footer { flex-direction: column; align-items: flex-start; gap: 12px; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; }

  .contact-form-card { padding: 28px 20px; }

  .test-wrapper { padding: 32px 16px; }
  .question-card { padding: 20px; }
}

/* ---------- Phones (≤576px) ---------- */
@media (max-width: 576px) {
  .container-xl { padding: 0 16px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item  { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat-item:last-child,
  .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  .hero-stats { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .hero-stat .stat-num { font-size: 1.5rem; }

  .cta-banner { padding: 50px 0; }
  .cta-banner .cta-actions { flex-direction: column; align-items: center; }

  section { padding: 48px 0; }

  .blog-meta { flex-direction: column; align-items: flex-start; gap: 6px; }

  .result-stats { grid-template-columns: 1fr 1fr 1fr; }
  .result-score { font-size: 3rem; }
  .result-card  { padding: 28px 20px; }
}

/* ---------- Very Small Phones (≤400px) ---------- */
@media (max-width: 400px) {
  .btn-lg { padding: 12px 24px; font-size: 0.9rem; }
  .hero h1 { font-size: 1.65rem; }

  .footer-social { flex-wrap: wrap; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item  { border-right: none; }
}

/* ---------- Bootstrap overrides / integration ---------- */
/* Ensure Bootstrap's container works with our layout */
.navbar-toggler { border: none; padding: 0; }
.navbar-toggler:focus { box-shadow: none; }