/* ==========================================================================
   SOLDIER CITY KARACHI — RESPONSIVE DESIGN SYSTEM
   Pixel-Perfect Scaling Across Desktop, Tablet, and Mobile
   Inspired by 2nd Source Solutions Responsive Architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LARGE DESKTOP (>= 1240px)
   -------------------------------------------------------------------------- */
@media (min-width: 1240px) {
  .hamburger-btn {
    display: none !important;
  }
  .mobile-menu-overlay,
  .mobile-menu-drawer,
  .mobile-menu {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   2. TABLETS & SCREENS UNDER 1240px (Switch to sleek slide-over drawer)
   -------------------------------------------------------------------------- */
@media (max-width: 1239px) {
  :root {
    --header-height: 72px;
  }

  /* Navigation Collapse — Absolute Zero Overlap & Zero Shift */
  .nav-links {
    display: none !important;
  }
  .hamburger-btn {
    display: flex !important;
    flex-direction: column !important;
  }
  .main-nav {
    justify-content: space-between !important;
  }
  .brand-main-title {
    font-size: 1.05rem !important;
  }

  /* Smart Customer Portal display on Tablet: Visible next to Hamburger */
  .portal-nav-btn {
    display: inline-flex !important;
    padding: 0.42rem 0.85rem !important;
    font-size: 0.78rem !important;
  }

  /* Hero Section */
  .hero-luxury-blurry {
    min-height: 75vh;
    padding: 4rem 0;
  }
  .hero-title {
    font-size: 3rem;
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
  .walking-ticker-container {
    max-width: 100%;
  }

  /* Grids */
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .home-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .home-map-grid {
    grid-template-columns: 1fr !important;
  }
  .video-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  .footer-grid {
    grid-template-columns: 2fr 1.1fr 1.1fr 1.6fr;
    gap: 2.5rem 1.5rem;
  }
  .about-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Plan Cards */
  .bespoke-plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact Mobile (< 640px): Move Portal Button into Drawer for Clean Header */
@media (max-width: 639px) {
  .portal-nav-btn {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. TABLETS (768px - 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) and (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5rem 2rem !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   4. MOBILE DEVICES (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-height: 66px;
  }

  body {
    padding-bottom: 64px; /* Space for Mobile Sticky Bottom CTA Bar */
  }

  /* Header */
  .site-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  }
  .main-nav {
    height: var(--header-height);
  }
  .nav-brand img {
    height: 40px;
  }
  .brand-main-title {
    font-size: 1.05rem;
  }
  .brand-sub-title {
    font-size: 0.6rem;
    letter-spacing: 1.2px;
  }
  .nav-cta-btn {
    display: none; /* Action handled by mobile sticky bottom bar */
  }

  /* Hero */
  .hero-luxury-blurry {
    min-height: auto;
    padding: 3.5rem 0 4rem;
  }
  .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
  }
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
    text-align: center;
  }
  .hero-actions {
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2.5rem;
  }
  .hero-actions .btn {
    width: 100%;
  }

  /* Walking Ticker */
  .walking-ticker-container {
    padding: 0.4rem 0.85rem;
    margin-bottom: 1.5rem;
    gap: 0.6rem;
  }
  .ticker-label-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.55rem;
  }
  .ticker-walking-content {
    font-size: 0.78rem;
    padding-right: 2rem;
    letter-spacing: 0.8px;
  }
  .hero-walking-stream {
    padding: 0.35rem 0.65rem;
    margin-bottom: 1.75rem;
  }
  .stream-track {
    font-size: 0.75rem;
    gap: 1.5rem;
  }

  /* Marquee */
  .partners-section-clean {
    padding: 1.75rem 0;
  }
  .clean-marquee-track {
    gap: 2.5rem;
  }
  .clean-partner-item img {
    height: 44px;
    max-width: 120px;
  }

  /* Sections */
  .section-padding {
    padding: 3.5rem 0;
  }
  .section-header {
    margin-bottom: 2.25rem;
  }
  .section-title {
    font-size: 2.15rem;
  }
  .section-subtitle {
    font-size: 0.95rem;
  }
  .partners-heading-clean {
    font-size: 1.08rem !important;
    gap: 0.85rem !important;
  }
  .partners-heading-clean::before, .partners-heading-clean::after {
    width: 40px !important;
  }

  /* Plan Toggle & Plan Cards */
  .plan-category-selector {
    flex-direction: column;
    width: 100%;
    margin-bottom: 2rem;
    gap: 0.65rem;
  }
  .plan-toggle-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    text-align: center;
  }
  .bespoke-plans-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .plan-card-top {
    padding: 1.35rem 1.15rem 1.1rem;
  }
  .plan-price-hero {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .price-big-label {
    font-size: 1.65rem;
    letter-spacing: -0.5px;
  }
  .price-sub-label {
    font-size: 0.72rem;
  }
  .plan-card-details {
    padding: 1.1rem 1.15rem;
    gap: 0.55rem;
  }
  .plan-spec-row {
    font-size: 0.78rem;
    min-height: 26px;
    padding-bottom: 0.45rem;
    gap: 0.35rem;
  }
  .spec-title {
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .spec-value {
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .spec-value.blue {
    font-size: 0.83rem;
  }
  .plan-card-action {
    padding: 1.15rem;
  }

  /* Quick Complete Plans CTA Button on Mobile: Identical size and alignment as card button */
  .table-toggle-wrap {
    margin-top: 1.75rem;
    padding: 0 19.4px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }
  .table-toggle-wrap .btn {
    width: 100%;
    max-width: 100%;
    height: 45px;
    padding: 0 1.25rem;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* Video Grid */
  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Footer */
  .site-footer {
    padding-top: 3.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Mobile Sticky Bottom CTA Bar */
  .mobile-cta-bar {
    display: grid !important;
  }

  /* Forms & Modals */
  .home-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
  }
  .contact-form-card {
    padding: 1.5rem 1.15rem !important;
    border-radius: var(--radius-lg) !important;
  }
  .contact-form-card h3 {
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
  }
  .contact-info-item {
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
  }
  .home-map-grid {
    grid-template-columns: 1fr !important;
  }
  .home-map-grid iframe {
    height: 300px !important;
  }
  .home-map-grid > div:last-child {
    padding: 1.5rem 1.25rem !important;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  .video-lightbox-modal {
    padding: 0.75rem;
  }
  .lightbox-topbar {
    padding: 0.75rem 1rem;
  }
  .lightbox-back-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
  }

  /* Stats */
  .about-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem;
  }
  .stat-value {
    font-size: 1.9rem;
  }
  .stat-label {
    font-size: 0.72rem;
  }

  /* Center-aligned Mobile Sections (Preserving Payment Plan Cards) */
  .about-grid > div:first-child {
    text-align: center !important;
  }
  .about-grid > div:first-child p {
    text-align: center !important;
  }
  .home-map-grid > div:last-child {
    text-align: center !important;
    align-items: center !important;
  }
  .home-map-grid > div:last-child p {
    text-align: center !important;
  }
  .contact-info-item {
    justify-content: center !important;
    text-align: center !important;
  }
  .contact-form-card {
    text-align: center !important;
  }
  .contact-form-card p {
    text-align: center !important;
  }

  /* Footer Legal Links on Mobile: Single Line with compact spacing */
  .footer-bottom > div:first-child > div:last-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }
  .footer-bottom .footer-link {
    font-size: 0.73rem !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
  }
  .footer-bottom > div:first-child > div:first-child {
    text-align: center !important;
    width: 100% !important;
  }
  .footer-brand {
    align-items: center !important;
    text-align: center !important;
  }
  .footer-trust-pills {
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   5. SMALL PHONES (<= 390px)
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  .hero-title {
    font-size: 1.95rem;
  }
  .brand-main-title {
    font-size: 0.95rem;
  }
  .btn-lg {
    padding: 0.8rem 1.5rem;
    font-size: 0.92rem;
  }
  .table-toggle-wrap {
    padding: 0 1.15rem;
  }
  .table-toggle-wrap .btn {
    height: 45px;
    padding: 0 0.85rem;
    font-size: 0.86rem;
  }
  .footer-bottom > div:first-child > div:last-child {
    gap: 0.45rem !important;
  }
  .footer-bottom .footer-link {
    font-size: 0.68rem !important;
  }
}