/* ==========================================================================
   IVIROS RESPONSIVE STYLESHEET
   Brand: IVIROS (iviros.com)
   Breakpoints: 1440px, 1280px, 1024px, 768px, 430px, 390px, 375px, 320px
   Strict: Zero Horizontal Overflow, Intentional Mobile-First Experience
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LARGE DESKTOP & WIDE SCREENS (1440px - 1920px)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
    --container-wide: 1440px;
  }

  .hero-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-4xl);
  }
}

/* --------------------------------------------------------------------------
   2. DESKTOP & LAPTOP (1025px - 1280px)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .desktop-nav {
    gap: 1.15rem;
  }

  .nav-link {
    font-size: 0.8125rem;
  }

  .hero-grid {
    gap: var(--space-2xl);
  }

  .footer-top-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   3. TABLETS & SMALL LAPTOPS (769px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --space-4xl: 4.5rem;
    --space-3xl: 3.5rem;
    --container-pad: 1.25rem;
  }

  /* Header adjustments */
  .desktop-nav {
    gap: 0.85rem;
  }

  .nav-link {
    font-size: 0.775rem;
    padding: 0.25rem 0.15rem;
  }

  .header-actions .btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.8125rem;
  }

  /* Layout grids */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .growth-flow-card {
    max-width: 650px;
    margin: 0 auto;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .services-grid-6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .funnel-journey-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .seo-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .outcome-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-studies-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-study-placeholder:last-child {
    grid-column: span 2;
  }

  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .insight-card:last-child {
    grid-column: span 2;
  }

  .footer-top-grid {
    grid-template-columns: 1.5fr repeat(2, 1fr);
    row-gap: var(--space-2xl);
  }

  .footer-brand-column {
    grid-column: span 3;
    max-width: 100%;
  }

  .workflow-steps-track {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   4. TABLETS & MOBILE PHONES (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-4xl: 3.75rem;
    --space-3xl: 2.75rem;
    --space-2xl: 2rem;
    --container-pad: 1.25rem;
  }

  /* Navigation: Hide Desktop, Show Mobile Toggle & Drawer */
  .desktop-nav,
  .header-actions .btn {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-nav-overlay {
    display: block;
  }

  .mobile-nav-drawer {
    display: flex;
  }

  /* Hero Section */
  .hero-section {
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-3xl);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Introduction Section */
  .intro-content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .intro-punchline {
    font-size: 1.125rem;
  }

  .workflow-steps-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Capabilities */
  .capabilities-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .capability-card {
    padding: 1.75rem;
    min-height: auto;
  }

  /* Services */
  .services-grid,
  .services-grid-6 {
    grid-template-columns: 1fr;
  }

  .service-column,
  .service-column-agency {
    padding: 1.5rem;
  }

  /* Funnel Journey & SEO Pillars & Tech Support */
  .funnel-journey-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .seo-pillars-grid,
  .tech-support-grid {
    grid-template-columns: 1fr;
  }

  .backend-pipeline-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .backend-step:last-child {
    grid-column: span 2;
  }

  /* Outcome Selector */
  .outcome-container {
    padding: 1.75rem 1.25rem;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .outcome-recommendation-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .outcome-recommendation-card .btn {
    width: 100%;
  }

  /* Software Section */
  .software-grid {
    grid-template-columns: 1fr;
  }

  .software-card {
    padding: 1.75rem;
  }

  /* Practical AI Section */
  .ai-section-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .ai-capabilities-panel {
    padding: 1.5rem 1.25rem;
  }

  /* Industries */
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .industry-card {
    padding: 1rem;
  }

  /* Global Section */
  .global-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

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

  .region-item-worldwide {
    grid-column: span 1;
  }

  /* Process Timeline */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .process-step-card {
    padding: 1.5rem;
  }

  /* Principles */
  .principle-row {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }

  .principle-statement {
    font-size: 1.0625rem;
  }

  /* Case Studies & Insights */
  .case-studies-grid,
  .insights-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .case-study-placeholder:last-child,
  .insight-card:last-child {
    grid-column: span 1;
  }

  .insights-header-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .categories-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .category-pill {
    flex-shrink: 0;
  }

  /* CTA Section */
  .cta-section {
    padding: var(--space-4xl) 0;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions .btn {
    width: 100%;
  }

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

  .footer-brand-column {
    grid-column: span 2;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Positioning Bar */
  .positioning-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   5. SMALL PHONES (320px - 430px)
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  :root {
    --space-4xl: 3rem;
    --space-3xl: 2.25rem;
    --container-pad: 1rem;
  }

  h1 {
    font-size: 2.15rem;
  }

  h2 {
    font-size: 1.65rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.95rem;
  }

  .lead-text {
    font-size: 1rem;
  }

  /* Growth Flow Card */
  .growth-flow-card,
  .marketing-flow-card {
    padding: 1.25rem 1rem;
  }

  .funnel-journey-track {
    grid-template-columns: 1fr;
  }

  .backend-pipeline-track {
    grid-template-columns: 1fr;
  }

  .backend-step:last-child {
    grid-column: span 1;
  }

  .hero-tag-strip {
    font-size: 0.6875rem;
    gap: 0.5rem;
  }

  .flow-node {
    padding: 0.75rem 0.85rem;
  }

  .node-label {
    font-size: 0.875rem;
  }

  .node-subtext {
    font-size: 0.6875rem;
  }

  /* Workflow Steps */
  .workflow-steps-track {
    grid-template-columns: 1fr;
  }

  /* Industries Matrix */
  .industries-grid {
    grid-template-columns: 1fr;
  }

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

  .footer-brand-column {
    grid-column: span 1;
  }

  /* Contact Modal */
  .contact-modal-window {
    padding: 1.75rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. EXTRA SMALL / COMPACT (≤ 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
  :root {
    --container-pad: 0.85rem;
  }

  .brand-logo .brand-name {
    font-size: 1.125rem;
  }

  .node-meta {
    display: none;
  }

  .capability-title {
    font-size: 1.25rem;
  }
}