/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Briskinfosec Global Responsive Styles
   ═══════════════════════════════════════════════════════════════════════
   DEV NOTES:
   - This file handles responsive behavior for shared/cross-page components
   - Page-specific responsive rules stay in each page's <style> block
   - Breakpoints: 1440px (xl) → 1024px (lg) → 768px (md) → 640px (sm) → 480px (xs) → 375px (xxs)
   - style.css already handles core layout (nav, hero, footer, stats, services, etc.)
   - This file handles: floating widgets, resource pages, enhanced cards, blog, 
     case studies, CTA sections, utility responsive overrides
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   FLOATING WIDGETS — WhatsApp & AI Chatbot
   ══════════════════════════════════════ */

/* Ensure floating buttons don't overlap footer content on small screens */
@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 16px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 999;
  }
  .whatsapp-float svg {
    width: 22px !important;
    height: 22px !important;
  }
  .ai-chat-widget {
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 999;
  }
  .ai-chat-widget svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ══════════════════════════════════════
   RESOURCE / BLOG LISTING PAGES
   ══════════════════════════════════════ */

/* Featured card responsive */
@media (max-width: 768px) {
  .featured-card {
    grid-template-columns: 1fr !important;
  }
  .featured-img {
    min-height: 200px !important;
  }
  .featured-body {
    padding: var(--space-4) !important;
  }
  .featured-body h3 {
    font-size: 1.3rem !important;
  }
}

/* Resource grid responsive */
@media (max-width: 1024px) {
  .res-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .res-grid {
    grid-template-columns: 1fr !important;
  }
  .res-card-img {
    height: 140px !important;
  }
}

/* Enhanced card grid (used in blogs, case studies, resources) */
@media (max-width: 1024px) {
  .enh-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .enh-grid {
    grid-template-columns: 1fr !important;
  }
  .enh-card-img {
    height: 140px !important;
  }
  .enh-card-body {
    padding: var(--space-4) !important;
  }
}

/* Category filter bar — horizontal scroll on mobile */
@media (max-width: 640px) {
  .cat-bar,
  .res-filter {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-bar::-webkit-scrollbar,
  .res-filter::-webkit-scrollbar {
    display: none;
  }
  .cat-pill,
  .res-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Stats row in blog pages */
@media (max-width: 640px) {
  .blog-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }
}

/* Most Popular section - horizontal cards */
@media (max-width: 768px) {
  .popular-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Explore More Resources section */
@media (max-width: 768px) {
  .explore-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
}

/* ══════════════════════════════════════
   BLOG DETAIL / ARTICLE PAGES
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .article-header {
    padding: var(--space-8) var(--content-padding) !important;
  }
  .article-header h1 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
  }
  .article-meta {
    flex-direction: column !important;
    gap: var(--space-2) !important;
  }
  .article-body {
    padding: var(--space-6) var(--content-padding) !important;
  }
  .article-body h2 {
    font-size: 1.25rem !important;
  }
  .article-body h3 {
    font-size: 1.1rem !important;
  }
  .article-toc {
    display: none !important;
  }
  .article-sidebar {
    display: none !important;
  }
}

/* Article content max-width for readability */
@media (min-width: 769px) {
  .article-content {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Related articles responsive */
@media (max-width: 640px) {
  .related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   CASE STUDY PAGES
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .cs-hero-inner {
    grid-template-columns: 1fr !important;
  }
  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cs-timeline {
    padding-left: 20px !important;
  }
}
@media (max-width: 480px) {
  .cs-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   SERVICE PAGES — Why Briskinfosec sections
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .why-grid,
  .why-bento-grid {
    grid-template-columns: 1fr !important;
  }
  .why-card,
  .why-bento-card {
    padding: var(--space-5) !important;
  }
}

/* ══════════════════════════════════════
   CTA SECTIONS — Multi-color gradient CTAs
   ══════════════════════════════════════ */

@media (max-width: 640px) {
  .enhanced-cta-grid {
    grid-template-columns: 1fr !important;
  }
  .cta-section {
    padding: var(--space-10) var(--content-padding) !important;
  }
  .cta-section h2 {
    font-size: clamp(1.3rem, 4vw, 1.75rem) !important;
  }
}

/* ══════════════════════════════════════
   COMPLIANCE / SOLUTIONS INDEX PAGES
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  .compliance-grid,
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .compliance-grid,
  .solutions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   NEWSLETTER / CONTACT FORMS
   ══════════════════════════════════════ */

@media (max-width: 640px) {
  .newsletter-form,
  .contact-form {
    flex-direction: column !important;
  }
  .newsletter-form input,
  .contact-form input,
  .contact-form textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
    min-height: 48px !important;
  }
  .newsletter-form button,
  .contact-form button {
    min-height: 48px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════
   GET EXPERT HELP — Multi-channel CTA
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .help-channels-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .help-channels-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   FAQ SECTIONS
   ══════════════════════════════════════ */

@media (max-width: 640px) {
  .faq-question {
    font-size: var(--text-sm) !important;
    padding: var(--space-4) 0 !important;
    min-height: 48px !important;
  }
  .faq-answer {
    font-size: var(--text-sm) !important;
    padding: 0 0 var(--space-4) !important;
  }
}

/* ══════════════════════════════════════
   GENERAL UTILITY RESPONSIVE
   ══════════════════════════════════════ */

/* Prevent horizontal overflow */
@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }
  img,
  svg,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }
  /* Ensure all tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Ensure code blocks don't overflow */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  a, button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Don't apply min sizes to inline text links */
  p a, li a, .article-body a,
  .footer-col a, .nav-links a {
    min-height: auto;
    min-width: auto;
  }
}

/* Print styles */
@media print {
  .main-nav,
  .emergency-bar,
  .whatsapp-float,
  .ai-chat-widget,
  .mobile-drawer,
  .mega-menu,
  .footer {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .section {
    padding: 20px 0;
  }
}


/* ══════════════════════════════════════
   SERVICE PAGE RESPONSIVE (all services/compliance)
   DEV NOTE: Covers service-hero, stats-strip, threat/feature/method grids
   ══════════════════════════════════════ */

/* Service hero responsive */
@media (max-width: 768px) {
  .service-hero {
    padding: var(--space-10) var(--content-padding) var(--space-8) !important;
  }
  .service-hero h1 {
    font-size: var(--text-2xl) !important;
    line-height: 1.15 !important;
  }
  .service-hero p {
    font-size: var(--text-sm) !important;
    max-width: 100% !important;
  }
  .service-hero .hero-ctas {
    flex-direction: column !important;
  }
  .service-hero .hero-ctas .btn-primary,
  .service-hero .hero-ctas .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
  .trust-badges-hero {
    gap: var(--space-3) !important;
  }
  .trust-badges-hero img {
    height: 32px !important;
  }
}
@media (max-width: 480px) {
  .service-hero {
    padding: var(--space-8) var(--content-padding) var(--space-6) !important;
  }
  .service-hero h1 {
    font-size: var(--text-xl) !important;
  }
}

/* Stats strip responsive */
@media (max-width: 640px) {
  .stats-strip-inner {
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    justify-content: center !important;
  }
  .stat-item {
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
  .stat-number {
    font-size: var(--text-xl) !important;
  }
}

/* Threat/Challenge grids responsive */
@media (max-width: 768px) {
  .threat-grid {
    grid-template-columns: 1fr !important;
  }
  .threat-card-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .threat-card-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Feature/Method/Scope grids responsive */
@media (max-width: 768px) {
  .features-grid,
  .method-grid,
  .scope-grid {
    grid-template-columns: 1fr !important;
  }
  .deliverables-list {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   SOLUTIONS PAGE RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .solutions-hero-inner {
    flex-direction: column !important;
    text-align: center !important;
  }
  .solution-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .solution-steps {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   INDUSTRY PAGES RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .industry-hero-inner {
    flex-direction: column !important;
    text-align: center !important;
  }
  .challenges-grid,
  .services-offered-grid,
  .industry-features-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   ABOUT PAGE RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .about-hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .timeline-grid {
    grid-template-columns: 1fr !important;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }
  .values-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   CONTACT PAGE RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-form-wrapper {
    padding: var(--space-6) !important;
  }
  .office-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   BLOG DETAIL — 3-Column Grid Responsive
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  .blog-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-detail-sidebar,
  .blog-detail-toc {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
    order: 2 !important;
  }
  .blog-detail-article {
    order: 1 !important;
  }
}
@media (max-width: 640px) {
  .blog-detail-sidebar,
  .blog-detail-toc {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   RESOURCE DETAIL PAGES — Sidebar Responsive
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  .resource-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .resource-sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
    order: 2 !important;
  }
  .resource-main {
    order: 1 !important;
  }
}
@media (max-width: 640px) {
  .resource-sidebar {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   PRODUCTS PAGE RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .product-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .product-features-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   GLOBAL SVG CONSTRAINT
   Prevents oversized SVGs in card bodies
   ══════════════════════════════════════ */

.threat-card svg:not(.threat-card-icon svg),
.feature-card svg:not(.feature-icon svg),
.method-step svg,
.scope-item svg:not(.scope-check svg),
.why-card svg,
section svg:not(.nav-logo svg):not(.chevron):not(.hamburger svg):not(.float-widget svg) {
  max-width: 48px;
  max-height: 48px;
}

/* ══════════════════════════════════════
   MOBILE DRAWER ENHANCEMENTS
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  .mobile-drawer {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 100vh !important;
  }
  .mobile-accordion-content.active {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
}

/* ══════════════════════════════════════
   GLOBAL OVERFLOW PREVENTION
   ══════════════════════════════════════ */

/* Prevent ANY horizontal overflow at all breakpoints */
html, body {
  max-width: 100vw;
}

@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }
  /* Constrain ALL images */
  img, svg, video, iframe, canvas {
    max-width: 100%;
  }
  /* Prevent sections from causing overflow */
  .section, section, .service-hero, .why-section, .cta-section,
  .stats-section, .stats-strip {
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════
   TABLET-SPECIFIC FIXES (768px)
   ══════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 1024px) {
  /* 2-column grids for tablet */
  .threat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .method-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══════════════════════════════════════
   COMPARISON / DATA TABLES
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .why-comparison-table,
  .comparison-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .why-comparison-table table,
  .comparison-table-wrapper table {
    min-width: 500px !important;
  }
}

/* ══════════════════════════════════════
   STICKY NAV — Ensure proper z-index at all sizes
   ══════════════════════════════════════ */

.main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ══════════════════════════════════════
   VERTICAL BADGE — Responsive
   ══════════════════════════════════════ */

@media (max-width: 480px) {
  .vertical-badge {
    font-size: 10px !important;
    padding: 3px 10px !important;
  }
  .section-label {
    font-size: 10px !important;
  }
}

/* ══════════════════════════════════════
   WHY-STATS / WHY-TIMELINE Responsive
   ══════════════════════════════════════ */

@media (max-width: 640px) {
  .why-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .why-timeline {
    padding-left: var(--space-6) !important;
  }
}
@media (max-width: 480px) {
  .why-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   LAYER PHILOSOPHY / QUADRANT Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .quadrant-container,
  .layer-philosophy-grid {
    grid-template-columns: 1fr !important;
  }
  .quadrant-item {
    padding: var(--space-4) !important;
  }
}

/* ══════════════════════════════════════
   ENHANCED CTA Multi-Color Cards Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .enhanced-cta-grid,
  .multi-cta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   VIDEO / INSIGHT LISTING Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .video-grid,
  .insight-grid {
    grid-template-columns: 1fr !important;
  }
  .video-card,
  .insight-card {
    flex-direction: column !important;
  }
}

/* ══════════════════════════════════════
   FLYERS PAGE Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .flyers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .flyers-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════
   ENSURE SMOOTH SCROLL BEHAVIOR
   ══════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}