/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

/* ===========================================
   BREAKPOINTS
   =========================================== */
/*
  xs: 0 - 479px   (Mobile portrait)
  sm: 480px - 767px  (Mobile landscape)
  md: 768px - 1023px (Tablet)
  lg: 1024px - 1279px (Desktop)
  xl: 1280px - 1535px (Large desktop)
  2xl: 1536px+ (Extra large)
*/

/* ===========================================
   CONTAINER RESPONSIVE
   =========================================== */
.container {
  --container-padding: 16px;
}

@media (min-width: 640px) {
  .container { --container-padding: 24px; }
}

@media (min-width: 1024px) {
  .container { --container-padding: 32px; }
}

@media (min-width: 1280px) {
  .container { --container-padding: 48px; }
}

/* ===========================================
   TYPOGRAPHY RESPONSIVE
   =========================================== */
html {
  font-size: 15px;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

@media (min-width: 1280px) {
  html { font-size: 16px; }
}

/* Fluid typography using clamp */
.text-fluid-xs { font-size: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem); }
.text-fluid-sm { font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem); }
.text-fluid-base { font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); }
.text-fluid-lg { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); }
.text-fluid-xl { font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); }
.text-fluid-2xl { font-size: clamp(1.375rem, 1.125rem + 1.25vw, 1.5rem); }
.text-fluid-3xl { font-size: clamp(1.75rem, 1.25rem + 2.5vw, 1.875rem); }
.text-fluid-4xl { font-size: clamp(2rem, 1.5rem + 2.5vw, 2.25rem); }
.text-fluid-5xl { font-size: clamp(2.5rem, 1.75rem + 3.75vw, 3rem); }
.text-fluid-6xl { font-size: clamp(3rem, 2rem + 5vw, 3.75rem); }

/* ===========================================
   SPACING RESPONSIVE
   =========================================== */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* ===========================================
   GRID RESPONSIVE
   =========================================== */
.grid-responsive-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-responsive-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-responsive-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-responsive-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-responsive-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-responsive-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ===========================================
   FLEX RESPONSIVE
   =========================================== */
@media (max-width: 767px) {
  .mobile-flex-col { flex-direction: column; }
  .mobile-flex-wrap { flex-wrap: wrap; }
  .mobile-items-center { align-items: center; }
  .mobile-justify-center { justify-content: center; }
  .mobile-justify-between { justify-content: space-between; }
  .mobile-gap-2 { gap: var(--space-2); }
  .mobile-gap-3 { gap: var(--space-3); }
  .mobile-gap-4 { gap: var(--space-4); }
  .mobile-text-center { text-align: center; }
  .mobile-w-full { width: 100%; }
  .mobile-hidden { display: none !important; }
  .mobile-block { display: block !important; }
  .mobile-flex { display: flex !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-flex-col { flex-direction: column; }
  .tablet-flex-wrap { flex-wrap: wrap; }
  .tablet-items-center { align-items: center; }
  .tablet-justify-center { justify-content: center; }
  .tablet-justify-between { justify-content: space-between; }
  .tablet-gap-4 { gap: var(--space-4); }
  .tablet-gap-6 { gap: var(--space-6); }
  .tablet-w-full { width: 100%; }
  .tablet-w-1\/2 { width: 50%; }
  .tablet-hidden { display: none !important; }
}

/* ===========================================
   MAP LAYOUT RESPONSIVE
   =========================================== */

@media (max-width: 767px) {
  .map-controls {
    top: auto;
    bottom: var(--space-4);
    right: var(--space-3);
    transform: none;
    flex-direction: column;
    gap: var(--space-2);
  }

  .map-control-btn {
    width: 44px;
    height: 44px;
  }

  .map-control-btn .tooltip {
    display: none;
  }

  .search-bar {
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
    transform: none;
  }

  .search-bar-inner {
    border-radius: var(--radius-lg);
  }

  .park-info-card {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .bottom-card-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .bottom-stat-value {
    font-size: var(--text-xl);
  }

  .navbar {
    height: 56px;
    padding: 0 var(--space-4);
  }

  .navbar-brand span {
    display: none;
  }

  .navbar-menu {
    top: 56px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .map-controls {
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    flex-direction: column;
  }

  .search-bar {
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    max-width: 520px;
  }
}

@media (min-width: 1024px) {
  .map-controls {
    top: 50%;
    right: var(--space-6);
    transform: translateY(-50%);
  }

  .search-bar {
    top: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    max-width: 560px;
  }

  .navbar {
    height: 64px;
    padding: 0 var(--space-8);
  }
}

/* ===========================================
   CARD RESPONSIVE
   =========================================== */

@media (max-width: 639px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===========================================
   MODAL RESPONSIVE
   =========================================== */

@media (max-width: 479px) {
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
  }

  .modal-backdrop.open .modal {
    transform: translateY(0);
  }

  .modal-body {
    max-height: 60vh;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .modal {
    max-width: 92%;
    margin: 0 auto;
  }
}

@media (min-width: 768px) {
  .modal {
    max-width: 560px;
  }

  .modal-lg {
    max-width: 720px;
  }

  .modal-xl {
    max-width: 960px;
  }
}

/* ===========================================
   NAVIGATION RESPONSIVE
   =========================================== */

@media (max-width: 1023px) {
  .navbar-toggle {
    display: flex;
  }

  .navbar-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-base) var(--ease-out);
    gap: var(--space-2);
    z-index: var(--z-fixed);
  }

  .navbar-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar-link {
    justify-content: center;
    padding: var(--space-4);
    font-size: var(--text-base);
  }
}

/* ===========================================
   FOOTER RESPONSIVE
   =========================================== */

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

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

/* ===========================================
   FORM RESPONSIVE
   =========================================== */

@media (max-width: 639px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .input-group {
    flex-direction: column;
  }

  .input-group .btn {
    width: 100%;
  }
}

/* ===========================================
   TABLE RESPONSIVE
   =========================================== */

@media (max-width: 767px) {
  .table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table {
    min-width: 600px;
  }
}

/* ===========================================
   IMAGE RESPONSIVE
   =========================================== */
img.responsive {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.picture-responsive {
  display: block;
  width: 100%;
}

.picture-responsive img {
  width: 100%;
  height: auto;
}

/* ===========================================
   UTILITY RESPONSIVE
   =========================================== */

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

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* Show only on mobile */
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* Show only on tablet */
@media (max-width: 767px), (min-width: 1024px) {
  .tablet-only { display: none !important; }
}

/* Show only on desktop */
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}

/* ===========================================
   TOUCH TARGETS
   =========================================== */
@media (pointer: coarse) {
  .btn,
  .map-control-btn,
  .sidebar-nav-item,
  .navbar-link,
  .dropdown-item,
  .tab-trigger,
  .accordion-trigger,
  .pagination-item {
    min-height: 44px;
    min-width: 44px;
  }

  .input,
  .select,
  .textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .checkbox,
  .radio,
  .switch-input {
    min-width: 22px;
    min-height: 22px;
  }
}

/* ===========================================
   SAFE AREA INSETS (iOS)
   =========================================== */
@supports (padding: max(0px)) {
  .safe-top {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .safe-bottom {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .safe-left {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
  }

  .safe-right {
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }

  .safe-inset {
    padding: max(var(--space-4), env(safe-area-inset-top))
             max(var(--space-4), env(safe-area-inset-right))
             max(var(--space-4), env(safe-area-inset-bottom))
             max(var(--space-4), env(safe-area-inset-left));
  }
}

/* ===========================================
   LANDSCAPE MOBILE
   =========================================== */
@media (max-width: 899px) and (orientation: landscape) {
  .park-info-card {
    max-height: 90vh;
  }

  .modal {
    max-height: 85vh;
  }
}

/* ===========================================
   HIGH DPI / RETINA
   =========================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina-bg {
    background-size: 50% 50%;
  }
}

/* ===========================================
   DARK MODE RESPONSIVE
   =========================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark mode variables defined in variables.css */
  }
}

/* ===========================================
   PRINT
   =========================================== */
@media print {
  .no-print,
  .navbar,
  .sidebar,
  .map-controls,
  .search-bar,
  .park-info-card,
  .modal,
  .toast,
  .map-loading {
    display: none !important;
  }

  #map {
    position: static !important;
    height: 100vh !important;
    page-break-inside: avoid;
  }

  body {
    background: white !important;
    color: black !important;
  }

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

  a {
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ===========================================
   KEYBOARD ONLY
   =========================================== */
@media (prefers-reduced-motion: no-preference) {
  :focus:not(:focus-visible) {
    outline: none;
  }
}

/* ===========================================
   CONTAINER QUERIES (Future-proof)
   =========================================== */
@container (min-width: 400px) {
  .cq-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 600px) {
  .cq-card-grid { grid-template-columns: repeat(3, 1fr); }
}

@container (min-width: 800px) {
  .cq-card-grid { grid-template-columns: repeat(4, 1fr); }
}