/**
 * Brass Tacks Digital Responsive Overrides
 * Defines fluid grid adjustments, typographic scaling across viewports,
 * and adaptive layout parameters for tablet and mobile screens.
 */

/* ==========================================================================
   1. TABLET AND MOBILE OVERRIDES (Max Width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  html {
    font-size: 15px; /* Scale font sizes down globally */
  }

  .container {
    padding: 0 1.5rem;
  }

  .section-padding {
    padding: 80px 0;
  }

  .section-title {
    font-size: 2.5rem;
  }
  
  /* Portfolio & Blog Grids: 3 cols down to 2 cols */
  .grid-3-col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   2. MOBILE LANDSCAPE AND SMALL TABLET (Max Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .section-padding {
    padding: 60px 0;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .section-header {
    margin-bottom: 40px;
  }

  /* Structural sidebars and main layouts collapse to single column */
  .row-flex {
    flex-direction: column !important;
  }

  .col-sidebar, .col-main {
    width: 100% !important;
  }

  /* Grid layouts collapse to single column */
  .grid-2-col, .grid-3-col, .grid-4-col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .card-glass {
    padding: 30px 20px;
  }

  /* Off-align hamburger menu and CTA adjustments */
  .desktop-nav {
    display: none !important;
  }

  .mobile-menu-btn {
    display: flex !important;
  }
}

/* ==========================================================================
   3. SMALL MOBILE PORTRAIT (Max Width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  html {
    font-size: 13px;
  }

  .container {
    padding: 0 1rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .btn {
    width: 100%;
    text-align: center;
    padding: 12px 24px;
  }

  /* Restrict padding inside hero sections */
  .hero-home {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
}

/* ==========================================================================
   4. ULTRA-WIDE SCREENS AND FLUIDITY PREVENTIONS (Min Width: 1400px)
   ========================================================================== */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}