/* =====================================================
   WAZIRWIN - Responsive Stylesheet (Full Rewrite)
   Breakpoints: 1440 | 1200 | 1024 | 768 | 480 | 360
   ===================================================== */

/* =====================================================
   BASE LAYOUT COMPONENTS (no breakpoint — used everywhere)
   ===================================================== */

/* Hero two-col */
.hero-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* Contact grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

/* Sidebar layout */
.page-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-2xl);
  align-items: start;
}

.sidebar-sticky {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-lg));
}


/* =====================================================
   LARGE DESKTOP  ≤ 1440px
   ===================================================== */
@media (max-width: 1440px) {
  :root { --container-max: 1200px; }
}


/* =====================================================
   LAPTOP  ≤ 1200px
   ===================================================== */
@media (max-width: 1200px) {
  :root {
    --container-max: 1000px;
    --space-3xl: 72px;
  }

  .hero-title { font-size: clamp(3rem, 6vw, 5rem); }

  /* Footer: drop to 3-col + spanning last col */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer-grid .footer-col:last-child {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    align-items: flex-start;
  }

  .footer-grid .footer-col:last-child .newsletter-form {
    min-width: 260px;
    flex: 1;
  }
}


/* =====================================================
   TABLET LANDSCAPE  ≤ 1024px
   ===================================================== */
@media (max-width: 1024px) {
  :root {
    --space-3xl: 64px;
    --space-2xl: 48px;
  }

  /* ---- Navbar ---- */
  .navbar-nav  { display: none; }
  .hamburger   { display: flex; }
  .navbar-inner { padding-inline: var(--space-lg); }

  /* ---- Hero ---- */
  .hero-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
  }

  /* Image first on tablet */
  .hero-visual { order: -1; }

  .hero-image-wrap img {
    max-width: 100%;
    height: 320px;
  }

  .hero-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: var(--space-md);
    display: inline-flex;
  }

  /* ---- Why section image ---- */
  .why-section .hero-two-col { align-items: start; }
  .why-image-wrap img { height: 360px !important; }

  /* ---- Grids ---- */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* ---- Blog featured card ---- */
  .blog-card-featured { grid-template-columns: 1fr; }
  .blog-card-featured .blog-card-img-wrap { height: 260px; }

  /* ---- Stats ---- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Footer ---- */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .footer-grid .footer-col:first-child  { grid-column: 1 / -1; }
  .footer-grid .footer-col:last-child   { grid-column: auto; display: block; }

  /* ---- Sidebar ---- */
  .page-with-sidebar { grid-template-columns: 1fr; }
  .sidebar { order: -1; }
  .sidebar-sticky {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* ---- Post navigation ---- */
  .post-navigation { grid-template-columns: 1fr; }
}


/* =====================================================
   TABLET PORTRAIT  ≤ 768px
   ===================================================== */
@media (max-width: 768px) {
  :root {
    --space-3xl: 56px;
    --space-2xl: 40px;
    --space-xl: 28px;
  }

  /* ---- Container ---- */
  .container { padding-inline: var(--space-md); }

  /* ---- Grids ---- */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  /* ---- Typography ---- */
  .hero-title    { font-size: clamp(2.2rem, 7vw, 3.5rem); }
  .section-title { font-size: clamp(1.75rem, 5vw, 2.5rem); }

  /* ---- Hero ---- */
  .hero { min-height: auto; padding-bottom: var(--space-3xl); }

  .hero-two-col {
    padding-block: var(--space-lg) var(--space-xl);
    gap: var(--space-lg);
  }

  .hero-content { padding-block: 0; }

  .hero-subtitle {
    max-width: 100%;
    font-size: 1rem;
  }

  .hero-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    flex-direction: row;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-image-wrap img { height: 260px; }

  /* ---- Why section ---- */
  .why-section .hero-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .why-image-wrap img { height: 260px !important; }

  /* ---- Stats ---- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Category cards ---- */
  .category-card-img { height: 240px; }

  /* ---- Blog featured card ---- */
  .blog-card-featured { grid-template-columns: 1fr; }
  .blog-card-featured .blog-card-img-wrap { height: 220px; }

  /* Reduce the huge padding inside the featured card body */
  .blog-card-featured .blog-card-body {
    padding: var(--space-lg) !important;
  }

  .blog-card-featured .blog-card-title {
    font-size: 1.25rem !important;
  }

  /* ---- Testimonials ---- */
  .testimonial-card { padding: var(--space-lg); }

  /* ---- Newsletter ---- */
  .newsletter-inner {
    padding: var(--space-xl) var(--space-lg);
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
    max-width: 100% !important;
    width: 100%;
  }

  .newsletter-form .newsletter-input {
    max-width: 100% !important;
    width: 100%;
  }

  .newsletter-form .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- CTA Banner ---- */
  .cta-banner {
    padding: var(--space-2xl) var(--space-lg);
  }

  .cta-banner .btn-group,
  .cta-banner > div[style*="display:flex"],
  .cta-banner > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
  }

  .cta-banner .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* ---- Footer ---- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-grid .footer-col:first-child  { grid-column: auto; }
  .footer-grid .footer-col:last-child   { grid-column: auto; display: block; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .footer-legal { justify-content: center; }

  /* ---- Misc ---- */
  .whatsapp-btn  { bottom: 20px; right: 20px; width: 50px; height: 50px; }
  .back-to-top   { bottom: 82px; right: 20px; }

  /* Hide desktop CTA buttons from navbar on mobile */
  .navbar-actions .btn:not(.hamburger) { display: none; }

  .share-buttons { flex-wrap: wrap; }

  .contact-grid { grid-template-columns: 1fr; }

  .post-navigation { grid-template-columns: 1fr; }
  .post-nav-item.next { text-align: left; }
}


/* =====================================================
   MOBILE  ≤ 480px
   ===================================================== */
@media (max-width: 480px) {
  :root {
    --space-3xl: 48px;
    --space-2xl: 32px;
    --space-xl: 24px;
    --space-lg: 20px;
    --navbar-height: 64px;
  }

  /* ---- Container ---- */
  .container { padding-inline: 16px; }

  /* ---- Typography ---- */
  .hero-title    { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .display-xl    { font-size: clamp(2rem, 8vw, 3rem); }

  /* ---- Hero ---- */
  .hero-eyebrow  { font-size: 0.65rem; }
  .hero-image-wrap img { height: 220px; }

  /* ---- Why section ---- */
  .why-image-wrap img { height: 220px !important; }

  /* ---- Stats ---- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item  { padding: var(--space-lg); }
  .stat-number { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* ---- Category cards ---- */
  .category-card-img { height: 200px; }

  /* ---- Feature cards ---- */
  .feature-card { padding: var(--space-lg); }

  /* ---- Section header ---- */
  .section-header { margin-bottom: var(--space-xl); }
  .section-label  { font-size: 0.65rem; letter-spacing: 0.15em; }

  /* ---- Newsletter ---- */
  .newsletter-inner { padding: var(--space-xl) var(--space-md); }

  /* ---- CTA Banner ---- */
  .cta-banner {
    padding: var(--space-xl) var(--space-md);
    border-radius: var(--radius-lg);
  }

  /* ---- Blog cards ---- */
  .blog-card-body { padding: var(--space-md); }

  /* ---- Footer social ---- */
  .footer-social { justify-content: flex-start; }

  /* ---- Pagination ---- */
  .pagination .page-btn:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }

  /* ---- Filter pills – horizontal scroll ---- */
  .filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-sm);
  }

  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { white-space: nowrap; flex-shrink: 0; }

  /* ---- Article body ---- */
  .article-body h2 { font-size: 1.3rem; }
  .article-body h3 { font-size: 1.1rem; }

  /* ---- TOC ---- */
  .toc { padding: var(--space-md); }

  /* ---- Breadcrumb ---- */
  .breadcrumb { font-size: 0.8rem; }

  /* ---- Modal ---- */
  .modal { padding: var(--space-lg); border-radius: var(--radius-lg); }

  /* ---- 404 page ---- */
  .error-code { font-size: clamp(5rem, 20vw, 8rem); }

  /* ---- Sidebar ---- */
  .sidebar-sticky { grid-template-columns: 1fr; }
}


/* =====================================================
   VERY SMALL  ≤ 360px
   ===================================================== */
@media (max-width: 360px) {
  :root {
    --space-xl: 20px;
    --space-lg: 16px;
  }

  .stats-grid { grid-template-columns: 1fr; }

  .hero-title { font-size: 1.85rem; }

  .navbar-logo img { height: 34px; }

  .hero-image-wrap img  { height: 180px; }
  .why-image-wrap img   { height: 180px !important; }

  .category-card-img    { height: 180px; }
}


/* =====================================================
   PRINT
   ===================================================== */
@media print {
  #navbar, .whatsapp-btn, .back-to-top,
  .mobile-menu, .page-loader { display: none !important; }

  body { background: white; color: black; }
  .hero { min-height: auto; padding-block: 40px; }
}


/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:      0.01ms !important;
    scroll-behavior: auto          !important;
  }

  .reveal, .reveal-left, .reveal-right {
    opacity: 1   !important;
    transform: none !important;
  }
}


/* =====================================================
   COMPONENT OVERRIDES (mobile specific)
   ===================================================== */

/* ---- Cookie Banner ---- */
@media (max-width: 480px) {
  .cookie-banner {
    left: var(--space-sm);
    right: var(--space-sm);
    max-width: none;
    bottom: var(--space-sm);
    padding: var(--space-md);
  }
}

/* ---- Search Overlay ---- */
@media (max-width: 480px) {
  .search-overlay { padding-top: 80px; }
  .search-overlay-input { font-size: 1rem; }
}

/* ---- Mobile nav button spacing ---- */
@media (max-width: 1024px) {
  .mobile-menu {
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
  }
}

/* ---- Prevent horizontal overflow globally ---- */
html, body { overflow-x: hidden; }

/* ---- Ensure images never overflow ---- */
img { max-width: 100%; height: auto; }

/* ---- CTA section on tablet ---- */
@media (max-width: 768px) {
  .cta-banner {
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-lg);
  }
}

/* ---- Why section — image goes above text on tablet ---- */
@media (max-width: 1024px) {
  .why-section .hero-two-col { grid-template-columns: 1fr; }
  .why-section .reveal-right { order: -1; }
}

/* ---- Section spacing ---- */
@media (max-width: 768px) {
  .section    { padding-block: 40px; }
  .section-sm { padding-block: 28px; }
}

@media (max-width: 480px) {
  .section    { padding-block: 32px; }
  .section-sm { padding-block: 24px; }
  .promo-strip-actions {
    display: grid !important;
    flex-wrap: wrap;
    flex-shrink:0;
  }
}