/* =========================================================================
   PRATHAMSATYA WEBSITE — RESPONSIVE BREAKPOINTS
   =========================================================================
   The base styles in style.css are written for small / mobile screens
   first. This file adds "min-width" rules that switch the layout to
   tablet and desktop versions on bigger screens (mobile-first approach).

   BREAKPOINTS USED ON THIS SITE:
     480px  -> large phones
     768px  -> tablets
     1024px -> small laptops / desktop
     1280px -> large desktop
   ========================================================================= */

/* ---------------------------------------------------------------------
   480px and up — large phones
   --------------------------------------------------------------------- */
@media (min-width: 480px) {
  .trust-strip__row { grid-template-columns: repeat(4, 1fr); }
  .spec-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   768px and up — tablets: nav becomes a horizontal bar, grids go 2-col
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  h1 { font-size: 3.1rem; }
  h2 { font-size: 2.5rem; }

  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split--reverse { direction: rtl; }
  .split--reverse > * { direction: ltr; }

  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }

  .client-logos { gap: var(--space-2xl); }

  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }

  .hero__title { font-size: clamp(3rem, 6vw, 4.2rem); }
}

/* ---------------------------------------------------------------------
   1024px and up — desktop: full horizontal nav, 3/4-col grids
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Desktop primary navigation replaces the hamburger menu */
  .main-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  .nav-toggle { display: none; }
  .header-call { display: flex; }

  /* TASK 1 – HEADER ALIGNMENT:
     Switch header-inner to a 2-column grid on desktop: logo (auto) and
     nav (1fr). Previously the third column (header-actions) was included
     but its only content – the hamburger – is already display:none at this
     breakpoint, so it was occupying a 40px gap for nothing and keeping the
     nav 80px from the right edge. Removing it brings the nav to within
     ~40px of the right edge (just the container padding) on all desktop
     and laptop viewports.
     NOTE: We match the two-class selector specificity from style.css so
     this media-query rule correctly overrides the base flex layout. */
  .site-header .header-inner {
    display: grid;
    grid-template-columns: auto 1fr;   /* logo | nav — no empty third column */
    align-items: center;
    gap: var(--space-lg);
  }
  .main-nav {
    margin-left: 0;           /* grid handles positioning */
    display: flex;
    align-items: center;
    justify-content: flex-end; /* push nav items to the right edge of the 1fr column */
  }
  /* Hamburger button is already display:none here; hide the wrapper too
     so it doesn't create an implicit grid row and affect layout. */
  .header-actions { display: none; }

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

  .hero__inner { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); }
  .spec-strip { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .container { padding: 0 var(--space-lg); }
}

/* ---------------------------------------------------------------------
   1280px and up — large desktop refinements
   --------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero__title { font-size: 4.4rem; }
  .section { padding: 7.5rem 0; }
}

/* ---------------------------------------------------------------------
   Below 768px — mobile-only overrides
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hero__media { order: -1; }
  .hero__media img { max-height: 320px; object-fit: cover; width: 100%; }
  .cta-band h2 { font-size: 1.8rem; }
  .float-stack { right: var(--space-sm); bottom: var(--space-sm); }
  .fab { width: 50px; height: 50px; }

  /* Prevent the logo and header button crowding/overlapping on narrow phones —
     the mobile hamburger menu already has its own "Get a Quote" button. */
  .brand img { height: 26px; }
  .header-actions .btn.btn-primary { display: none; }
  /* Match two-class selector specificity so this overrides the base gap */
  .site-header .header-inner { gap: var(--space-xs); }
}

@media (max-width: 380px) {
  .brand img { height: 22px; }
}