/* ==========================================================================
   PG FITNESS — RESPONSIVE STYLESHEET
   Mobile-first breakpoints
   Breakpoints: 480, 640, 768, 1024, 1280, 1440
   ========================================================================== */

/* ==========================================================================
   BASE: 0px - 479px (Mobile small — default styles in style.css)
   ========================================================================== */

/* Mobile bar: visible only on small screens */
.mobile-bar {
  display: flex;
}

/* ==========================================================================
   BREAKPOINT: 480px+
   ========================================================================== */

@media screen and (min-width: 480px) {

  /* Trust strip */
  .trust-strip__item {
    padding: var(--space-5) var(--space-10);
  }

  /* Hero trust row */
  .hero__trust {
    gap: var(--space-8);
  }

  /* Instagram grid: 3 columns */
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Training grid: 2 columns */
  .training__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   BREAKPOINT: 640px+
   ========================================================================== */

@media screen and (min-width: 640px) {

  /* About pillars: always 2-col from this point */
  .about__pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reviews layout */
  .reviews__intro {
    grid-template-columns: 240px 1fr;
    align-items: start;
  }

  /* Why Choose Us: 2-col */
  .why-choose__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Location grid */
  .location__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  /* Footer: 2-col bottom bar */
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   BREAKPOINT: 768px+ (Tablet)
   ========================================================================== */

@media screen and (min-width: 768px) {

  /* === NAVBAR === */
  .hamburger {
    display: none;
  }

  .nav-links {
    display: flex;
  }

  /* === MOBILE BAR === */
  .mobile-bar {
    display: none;
  }

  /* Clear mobile bar body padding */
  body {
    padding-bottom: 0;
  }

  /* === NEW SECTIONS === */
  .includes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .membership__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* === HERO === */
  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: calc(var(--navbar-height) + 6rem);
    padding-bottom: var(--space-20);
  }

  .hero__content {
    max-width: 640px;
  }

  /* === TRUST STRIP === */
  .trust-strip__inner {
    flex-wrap: nowrap;
  }

  /* === ABOUT === */
  .about__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* === GALLERY === */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid--asymmetric {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }

  .gallery-item--tall {
    grid-row: span 2;
  }

  .gallery-item--wide {
    grid-column: span 2;
  }

  .gallery-item {
    min-height: 280px;
  }

  .gallery-item--tall {
    min-height: 0; /* let grid row height control it */
  }

  /* === TRAINING === */
  .training__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* === INSTAGRAM === */
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* === WHY CHOOSE === */
  .why-choose__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* === REVIEWS === */
  .reviews__intro {
    grid-template-columns: 260px 1fr;
  }

  /* === LOCATION === */
  .location__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* === FOOTER === */
  .footer__main {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ==========================================================================
   BREAKPOINT: 1024px+ (Large Tablet / Desktop)
   ========================================================================== */

@media screen and (min-width: 1024px) {

  /* === NEW SECTIONS === */
  .includes__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .membership__inner {
    flex-direction: row;
    align-items: center;
  }

  .membership__content {
    flex: 1;
    min-width: 50%;
  }

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

  .membership__visual {
    flex: 1;
    aspect-ratio: 4/5;
  }

  /* === HERO === */
  .hero__inner {
    grid-template-columns: 55% 45%;
    align-items: center;
    gap: var(--space-12);
    min-height: 100svh;
    padding-top: var(--navbar-height);
    padding-bottom: var(--space-12);
  }

  .hero__content {
    max-width: 560px;
  }

  /* Hero visual (right side) */
  .hero__visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
  }

  .hero__visual-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-amber);
    position: relative;
  }

  .hero__visual-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Amber glow behind visual */
  .hero__visual::before {
    content: '';
    position: absolute;
    inset: -40px;
    background: radial-gradient(
      ellipse at 60% 50%,
      rgba(255, 180, 58, 0.08) 0%,
      transparent 70%
    );
    pointer-events: none;
    z-index: -1;
  }

  /* === TRAINING === */
  .training__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* === GALLERY === */
  .gallery-grid--asymmetric {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 320px 240px;
  }

  .gallery-item--tall {
    grid-row: span 2;
    grid-column: 1;
  }

  .gallery-item {
    min-height: 0;
  }

  /* === ABOUT === */
  .about__pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  /* === INSTAGRAM === */
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  /* === REVIEWS === */
  .reviews__intro {
    grid-template-columns: 300px 1fr;
    gap: var(--space-12);
  }

  /* === WHY CHOOSE === */
  .why-choose__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* === LOCATION === */
  .location__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-16);
    align-items: start;
  }

  /* === FOOTER === */
  .footer__main {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-16);
  }
}

/* ==========================================================================
   BREAKPOINT: 1280px+
   ========================================================================== */

@media screen and (min-width: 1280px) {

  /* Wider training grid layout */
  .training-card {
    padding: var(--space-10);
  }

  /* Larger gallery items */
  .gallery-grid--asymmetric {
    grid-template-rows: 360px 280px;
  }

  /* Increased section spacing */
  .hero__inner {
    gap: var(--space-20);
  }

  /* Instagram 3-col with larger tiles */
  .instagram-grid {
    gap: var(--space-4);
  }
}

/* ==========================================================================
   BREAKPOINT: 1440px+
   ========================================================================== */

@media screen and (min-width: 1440px) {

  .gallery-grid--asymmetric {
    grid-template-rows: 400px 300px;
  }

  .gallery-item {
    border-radius: var(--radius-lg);
  }
}

/* ==========================================================================
   BREAKPOINT: Max 767px (Mobile-specific overrides)
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* === NAVBAR === */
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  .nav-right .btn {
    display: none; /* Hide CTA on mobile nav, it's in mobile menu */
  }

  /* === MOBILE BAR PADDING === */
  /* Add space so footer content isn't hidden behind mobile bar */
  .footer {
    padding-bottom: calc(var(--mobile-bar-height) + env(safe-area-inset-bottom));
  }

  /* === HERO === */
  .hero__heading {
    font-size: clamp(3rem, 12vw, 5rem);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }

  /* === TRUST STRIP === */
  .trust-strip__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .trust-strip__item {
    border-right: none;
    border-bottom: 1px solid rgba(8, 9, 9, 0.1);
    padding: var(--space-4) var(--space-5);
  }

  .trust-strip__item:nth-child(odd) {
    border-right: 1px solid rgba(8, 9, 9, 0.1);
  }

  .trust-strip__item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  /* === TRAINING === */
  .training__grid {
    grid-template-columns: 1fr;
  }

  .training-card {
    padding: var(--space-6);
  }

  /* === CTA BAND === */
  .cta-band__actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-band__actions .btn {
    width: 100%;
    max-width: 360px;
  }

  /* === FAQ === */
  .faq__trigger {
    font-size: var(--text-base);
  }

  /* === LOCATION === */
  .location__map-visual {
    aspect-ratio: 4/3;
  }

  /* === FOOTER === */
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    max-width: none;
  }

  /* === INSTAGRAM GRID === */
  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* === REVIEWS === */
  .reviews__intro {
    grid-template-columns: 1fr;
  }

  .reviews__summary-card {
    padding: var(--space-8);
  }
}

/* ==========================================================================
   BREAKPOINT: Max 479px (Very small mobile)
   ========================================================================== */

@media screen and (max-width: 479px) {

  :root {
    --container-pad: 1rem;
  }

  .hero__heading {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .hero__copy {
    font-size: var(--text-base);
  }

  .section-heading {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  /* Instagram: 2 columns on tiny screens */
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

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

  .mobile-menu__link {
    font-size: var(--text-2xl);
  }

  /* Compact trust strip */
  .trust-strip__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
  }

  .trust-strip__icon {
    width: 24px;
    height: 24px;
  }

  /* Transformation slider smaller */
  .transform-demo {
    padding: var(--space-6);
  }

  .why-choose__grid {
    grid-template-columns: 1fr;
  }

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

/* ==========================================================================
   BREAKPOINT: 320px (Minimum supported width)
   ========================================================================== */

@media screen and (max-width: 359px) {
  :root {
    --container-pad: 0.875rem;
  }

  .hero__heading {
    font-size: 2.5rem;
  }

  .btn {
    padding: 0.75em 1.25em;
    font-size: 0.75rem;
  }

  .mobile-bar__btn {
    font-size: 0.65rem;
    gap: var(--space-1);
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .navbar,
  .mobile-bar,
  .hero__scroll,
  .mobile-menu {
    display: none !important;
  }

  .hero {
    min-height: auto;
  }

  body {
    color: #000;
    background: #fff;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}