/* =============================================================
   PROJECT PHOENIX — LOVELY JAISWAL WEBSITE
   FILE: assets/css/responsive.css
   PURPOSE: Global responsive breakpoints, mobile-first
            layout overrides and fluid typography scaling.
   Breakpoints:
     sm:  480px  (landscape phones)
     md:  768px  (tablets)
     lg:  1024px (small laptops)
     xl:  1280px (desktops)
     2xl: 1440px (large screens)
   ============================================================= */


/* -----------------------------------------------------------
   FLUID TYPOGRAPHY — root font-size scaling
   Scales smoothly from 14px (mobile) to 16px (desktop)
   using clamp() for a fluid reading experience.
   ----------------------------------------------------------- */
html {
  font-size: clamp(14px, 1.2vw, 16px);
}


/* -----------------------------------------------------------
   CONTAINER — Responsive padding
   ----------------------------------------------------------- */
@media (max-width: 1279px) {
  .container {
    padding-inline: var(--space-10);
  }
}

@media (max-width: 1023px) {
  .container {
    padding-inline: var(--space-8);
  }
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--space-5);
  }
}

@media (max-width: 479px) {
  .container {
    padding-inline: var(--space-4);
  }
}


/* -----------------------------------------------------------
   SECTION PADDING — Responsive
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .section {
    padding-block: var(--space-20);
  }

  .section--lg {
    padding-block: var(--space-24);
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-16);
  }

  .section--lg {
    padding-block: var(--space-20);
  }

  .section--sm {
    padding-block: var(--space-10);
  }
}

@media (max-width: 479px) {
  .section {
    padding-block: var(--space-12);
  }
}


/* -----------------------------------------------------------
   OVERFLOW GUARD — Prevent horizontal scroll
   ----------------------------------------------------------- */
main,
.site-footer {
  overflow-x: hidden;
  max-width: 100%;
}


/* -----------------------------------------------------------
   TYPOGRAPHY — Responsive scale
   ----------------------------------------------------------- */

/* Display headings compress on smaller screens */
@media (max-width: 1023px) {
  .display-xl { font-size: var(--text-5xl); }
  .display-lg { font-size: var(--text-4xl); }
  .display-md { font-size: var(--text-3xl); }
}

@media (max-width: 767px) {
  .display-xl { font-size: var(--text-4xl); }
  .display-lg { font-size: var(--text-3xl); }
  .display-md { font-size: var(--text-2xl); }

  .heading-1  { font-size: var(--text-3xl); }
  .heading-2  { font-size: var(--text-2xl); }
  .heading-3  { font-size: var(--text-xl);  }

  /* Prevent p max-width from causing overflow in narrow containers */
  p {
    max-width: 100%;
  }
}

@media (max-width: 479px) {
  .display-xl { font-size: var(--text-3xl); }
  .display-lg { font-size: var(--text-2xl); }

  .heading-1  { font-size: var(--text-2xl); }
  .heading-2  { font-size: var(--text-xl);  }
}

/* Section title */
@media (max-width: 767px) {
  .section-title .title {
    font-size: var(--text-2xl);
  }

  .section-title {
    margin-bottom: var(--space-8);
  }
}


/* -----------------------------------------------------------
   GRID RESPONSIVE HELPERS
   ----------------------------------------------------------- */

/* 4 cols → 2 cols on tablet → 1 col on mobile */
@media (max-width: 1023px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-cols-4,
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------
   FLEXBOX RESPONSIVE HELPERS
   ----------------------------------------------------------- */

/* Stack on mobile */
@media (max-width: 767px) {
  .flex-md-col {
    flex-direction: column;
  }
}

@media (max-width: 479px) {
  .flex-sm-col {
    flex-direction: column;
  }
}


/* -----------------------------------------------------------
   SHOW / HIDE BY BREAKPOINT
   ----------------------------------------------------------- */

/* Show only on mobile */
.show-sm  { display: none; }
.show-md  { display: none; }

@media (max-width: 479px)  { .show-sm  { display: block; } }
@media (max-width: 767px)  { .show-md  { display: block; } }

/* Hide only on mobile */
@media (max-width: 479px)  { .hide-sm  { display: none !important; } }
@media (max-width: 767px)  { .hide-md  { display: none !important; } }
@media (max-width: 1023px) { .hide-lg  { display: none !important; } }


/* -----------------------------------------------------------
   SPACING RESPONSIVE OVERRIDES
   ----------------------------------------------------------- */

@media (max-width: 767px) {
  .gap-8  { gap: var(--space-5);  }
  .gap-10 { gap: var(--space-6);  }
  .gap-12 { gap: var(--space-8);  }
  .gap-16 { gap: var(--space-10); }
}


/* -----------------------------------------------------------
   BUTTON RESPONSIVE
   ----------------------------------------------------------- */

/* Full width buttons on small mobile */
@media (max-width: 479px) {
  .btn--full-sm {
    width: 100%;
    justify-content: center;
  }
}

/* Button group stacks on mobile */
@media (max-width: 479px) {
  .btn-group--sm-stack {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group--sm-stack .btn {
    width: 100%;
    justify-content: center;
  }
}


/* -----------------------------------------------------------
   FOOTER RESPONSIVE — handled in footer.css
   HEADER RESPONSIVE — handled in header.css
   These files manage their own breakpoints.
   ----------------------------------------------------------- */


/* -----------------------------------------------------------
   PRINT — LAYOUT ADJUSTMENTS
   ----------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .scroll-top-btn,
  .whatsapp-float {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .container {
    max-width: 100%;
    padding-inline: 0;
  }

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