/* ==========================================================================
   DR. K PHYSIOTHERAPY — RESPONSIVE DESIGN (responsive.css)
   Full support for Mobile Phones (iOS & Android), Tablets, Laptops & Desktops
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Tablets & Laptops (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero-media-wrapper {
    max-width: 640px;
    margin: 0 auto;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .about-media {
    max-width: 600px;
    margin: 0 auto;
  }

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

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

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

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

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

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

  .location-visual-col {
    min-height: 280px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

/* --------------------------------------------------------------------------
   Tablets & Mobile Breakpoint (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-20: 56px;
    --space-16: 44px;
    --space-12: 36px;
    --header-height: 72px;
  }

  /* Sticky Navigation adjustments */
  .nav-menu,
  .header-actions .btn-book-desktop {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hero adjustments */
  .hero-section {
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-12);
  }

  .hero-tagline {
    font-size: 2.35rem;
  }

  .hero-subhead {
    font-size: 1.15rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-image-card img {
    height: 340px;
  }

  .hero-floating-card {
    bottom: -15px;
    left: 10px;
    right: 10px;
    max-width: none;
  }

  /* Trust Cards */
  .trust-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Services Grid */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Conditions Grid */
  .conditions-grid {
    grid-template-columns: 1fr;
  }

  /* How It Works Timeline */
  .timeline-track {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Why Us Grid */
  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Reviews Grid & Trust Bar */
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .reviews-trust-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
  }

  .reviews-score-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }

  .reviews-score-block .flex {
    justify-content: center;
  }

  .reviews-stars-wrap {
    justify-content: center;
  }

  .reviews-trust-bar .btn {
    width: 100%;
    justify-content: center;
  }

  .review-card {
    padding: var(--space-5);
  }

  /* Instagram Grid */
  .instagram-cards-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-6);
  }

  .instagram-wrapper {
    padding: var(--space-8) var(--space-5);
  }

  /* Location Coming Soon */
  .location-content {
    padding: var(--space-8) var(--space-6);
  }

  .location-notify-form {
    flex-direction: column;
  }

  .location-notify-form .btn {
    width: 100%;
  }

  /* CTA Banner */
  .cta-banner-card {
    padding: var(--space-10) var(--space-6);
  }

  .cta-banner-actions {
    flex-direction: column;
  }

  .cta-banner-actions .btn {
    width: 100%;
  }

  /* Mobile Grid Stacking */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  .comparison-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  .services-detailed-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

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

  /* Mobile Sticky Bottom Action Bar — iOS & Android */
  .mobile-action-bar {
    display: block;
  }

  .mobile-action-bar .btn {
    padding: 12px 14px;
    font-size: 0.9rem;
    font-weight: 600;
  }

  /* Footer adjustments */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }

  .footer-legal-links {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Small Mobile Phones (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .brand-symbol {
    width: 38px;
    height: 38px;
  }

  .brand-name {
    font-size: 1.1rem;
  }

  .brand-tag {
    font-size: 0.65rem;
  }

  .hero-tagline {
    font-size: 2rem;
  }

  .hero-image-card img {
    height: 280px;
  }

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

  .trust-chip {
    width: 100%;
    justify-content: center;
  }

  .about-pillars {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   iOS Safe Area Inset Support
   -------------------------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-action-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  
  .mobile-drawer {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
  }
  
  .site-footer {
    padding-bottom: calc(var(--space-12) + var(--mobile-bar-height) + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   Android Tap Targets & Touch Optimization
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-link,
  .mobile-nav-link,
  .accordion-trigger {
    min-height: 48px; /* Material Design recommended touch target */
  }
}