/*
  FILE: responsive.css
  ══════════════════════════════════════════════════
  PURPOSE:
  Global responsive typography scaling adjustments, viewport overrides, and mobile touch helpers.

  RESPONSIBILITIES:
  - Documents canonical breakpoint values used across all page-specific styles.
  - Controls cross-page responsive structural padding and container widths.
  - Implements mobile-specific helpers (touch target sizing, hide/show classes, text centers).

  ARCHITECTURE NOTES:
  - Page-specific styles should place media queries inline at the end of their respective stylesheet rather than in this file.

  DEVELOPED BY : MIRRO
  CODED BY     : SIVASURYA
  ══════════════════════════════════════════════════
*/

/* ═════════ BREAKPOINT DICTIONARY ═════════ */
/* 
  Use these standard breakpoints consistently in other stylesheets:

  XL Desktop:  min-width: 1280px
  Desktop:     max-width: 1280px
  Tablet:      max-width: 1024px
  Mobile L:    max-width: 768px
  Mobile S:    max-width: 480px
  Mobile XS:   max-width: 360px
*/

/* ═════════ ULTRA-WIDE SCREEN SUPPORT ═════════ */
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* ═════════ TABLET RESPONSIVE FIXES ═════════ */
@media (max-width: 1024px) {
  /* Responsive section spacing */
  .section    { padding: var(--s6) 0; }
  .section-lg { padding: var(--s7) 0; }
}

/* ═════════ MOBILE RESPONSIVE FIXES ═════════ */
@media (max-width: 768px) {
  /* Touch-friendly tap targets */
  button,
  a,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Section padding scales */
  .section    { padding: var(--s5) 0; }
  .section-sm { padding: var(--s4) 0; }
  .section-lg { padding: var(--s6) 0; }

  /* Utility classes */
  .hide-mobile { display: none !important; }
  .mobile-center { text-align: center; }
  .mobile-left   { text-align: left; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 480px) {
  /* Compact container padding */
  .container { padding: 0 var(--s2); }

  /* Typography compression */
  .sec-title {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  .sec-sub {
    font-size: 1.05rem;
  }
}

/* ═════════ PRINT UTILITIES ═════════ */
@media print {
  .plus33-nav,
  .plus33-nav__panel,
  .plus33-footer {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
}