/**
 * responsive.css
 * Journey Stories Travel Blog
 *
 * Mobile-first breakpoints for all pages.
 * Load order: variables.css → style.css → animations.css → responsive.css
 *
 * Breakpoints:
 *   1024px — Tablet landscape / small desktop
 *    768px — Tablet portrait
 *    480px — Mobile large
 *    375px — Mobile small
 *
 * Contents:
 * 1.  Navigation
 * 2.  Hero — horizontal scroll (index.html)
 * 3.  Page heroes (all inner pages)
 * 4.  Featured section (index.html)
 * 5.  Destinations grid
 * 6.  Gallery grid + lightbox
 * 7.  Tips grid + gear + resources
 * 8.  Contact form
 * 9.  Guide page
 * 10. Footer
 * 11. Utility — filter buttons, scroll indicator, back to top
 * 12. Mobile small (375px)
 */

/* ==========================================
   1. NAVIGATION
   ========================================== */

@media (max-width: 768px) {

  .nav-container {
    padding: 0 var(--spacing-lg);
  }

  /* Show hamburger */
  .mobile-toggle {
    display: flex;
    z-index: calc(var(--z-fixed) + 1);
  }

  /* Mobile menu — full screen overlay */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xl);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: var(--z-fixed);
  }

  .nav-menu.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link {
    font-size: var(--font-size-xl);
  }

  .logo {
    font-size: var(--font-size-large);
    position: relative;
    z-index: calc(var(--z-fixed) + 1);
  }
}

/* ==========================================
   2. HERO — HORIZONTAL SCROLL (index.html)
   ========================================== */

@media (max-width: 1024px) {

  /* Reduce card width on smaller screens */
  .blog-card {
    width: 300px;
    padding: var(--spacing-lg);
  }

  .card-image {
    height: 160px;
  }
}

@media (max-width: 768px) {

  /* On mobile, switch horizontal scroll to vertical stack */
  .hero-section {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    cursor: default;
  }

  .scroll-container {
    width: 100%;
    height: auto;
    flex-direction: column;
    padding-top: calc(var(--nav-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-3xl);
    align-items: center;
    gap: var(--spacing-2xl);
  }

  /* Destinations stack vertically */
  .destination {
    position: relative;
    top: auto;
    left: auto !important; /* Override inline left: Npx styles */
    transform: none;
    width: 90%;
    max-width: 400px;
  }

  /* Blog cards full width */
  .blog-card {
    width: 100%;
    opacity: 1;           /* Always visible on mobile — no scroll reveal */
    transform: none;
  }

  /* Hide path SVG and plane on mobile */
  .path-svg,
  .plane,
  .parallax-layer {
    display: none;
  }

  /* Markers still show but smaller */
  .destination-marker {
    opacity: 1;
    transform: scale(1);
  }

  /* Scroll indicator hidden on mobile */
  .scroll-indicator {
    display: none;
  }
}

/* ==========================================
   3. PAGE HEROES (all inner pages)
   ========================================== */

@media (max-width: 768px) {

  .page-hero {
    height: 40vh;
    min-height: 280px;
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
    padding: 0 var(--spacing-md);
  }

  .hero-breadcrumb {
    font-size: var(--font-size-small);
  }
}

@media (max-width: 480px) {

  .page-hero {
    height: 35vh;
    min-height: 240px;
  }

  .hero-title {
    font-size: var(--font-size-xl);
  }
}

/* ==========================================
   4. FEATURED SECTION (index.html)
   ========================================== */

@media (max-width: 1024px) {

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

@media (max-width: 480px) {

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

  .featured-card {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================
   5. DESTINATIONS GRID
   ========================================== */

@media (max-width: 1024px) {

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

@media (max-width: 768px) {

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

  /* Always show cards on mobile — no filter animation opacity */
  .destination-card {
    opacity: 1;
    transform: none;
  }

  .destination-card.hidden {
    display: none;
  }

  /* Filter buttons scroll horizontally on mobile */
  .filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--spacing-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-buttons::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ==========================================
   6. GALLERY GRID + LIGHTBOX
   ========================================== */

@media (max-width: 1024px) {

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

@media (max-width: 768px) {

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .gallery-item {
    height: 200px;
    opacity: 1;
    transform: none;
  }

  /* Lightbox full screen on mobile */
  .lightbox-content {
    max-width: 100%;
    max-height: 100%;
    padding: var(--spacing-lg);
  }

  .lightbox-image {
    max-height: 50vh;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
    font-size: 28px;
    width: 40px;
    height: 40px;
  }

  .lightbox-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .lightbox-info h3 {
    font-size: var(--font-size-large);
  }
}

@media (max-width: 480px) {

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

  .gallery-item {
    height: 250px;
  }

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

/* ==========================================
   7. TIPS GRID + GEAR + RESOURCES
   ========================================== */

@media (max-width: 1024px) {

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

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

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

@media (max-width: 768px) {

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

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

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

  .tip-card {
    padding: var(--spacing-lg);
  }

  .gear-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .gear-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
  }

  .quick-tips-banner {
    padding: var(--spacing-lg);
    text-align: center;
  }
}

@media (max-width: 480px) {

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

  .gear-card {
    flex-direction: column;
  }

  .gear-image {
    width: 100%;
    height: 180px;
  }
}

/* ==========================================
   8. CONTACT FORM
   ========================================== */

@media (max-width: 1024px) {

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

  .contact-info-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {

  .contact-info-sidebar {
    grid-template-columns: 1fr;
  }

  .contact-form-container {
    padding: var(--spacing-lg);
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-input {
    width: 100%;
  }
}

/* ==========================================
   9. GUIDE PAGE
   ========================================== */

@media (max-width: 1024px) {

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px) {

  .guide-sidebar {
    grid-template-columns: 1fr;
  }

  .guide-content h2 {
    font-size: var(--font-size-xl);
  }

  .guide-footer-cta {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .guide-footer-cta .btn {
    width: 100%;
    text-align: center;
  }

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

@media (max-width: 480px) {

  .related-tips-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   10. FOOTER
   ========================================== */

@media (max-width: 1024px) {

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
  }
}

@media (max-width: 768px) {

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .footer-section:first-child {
    /* Brand section gets more space on mobile */
    margin-bottom: var(--spacing-lg);
  }

  .social-links {
    flex-wrap: wrap;
  }
}

/* ==========================================
   11. UTILITY — FILTER BUTTONS, BACK TO TOP
   ========================================== */

@media (max-width: 768px) {

  /* Back to top — move up so it doesn't overlap mobile nav */
  #backToTop {
    bottom: 20px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* Toast — full width on mobile */
  .toast {
    width: 90%;
    white-space: normal;
    text-align: center;
    font-size: 13px;
  }

  /* FAQ grid */
  .faq-grid {
    grid-template-columns: 1fr;
  }

  /* Section titles */
  .section-title {
    font-size: var(--font-size-2xl);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
  }

  /* CTA section */
  .cta-content h2 {
    font-size: var(--font-size-2xl);
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }

  /* Container padding */
  .container {
    padding: 0 var(--spacing-lg);
  }
}

/* ==========================================
   12. MOBILE SMALL (375px)
   Handles very small phones.
   ========================================== */

@media (max-width: 375px) {

  .hero-title {
    font-size: var(--font-size-large);
  }

  .hero-subtitle {
    font-size: var(--font-size-small);
  }

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

  .nav-link {
    font-size: var(--font-size-large);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .gallery-item {
    height: 220px;
  }

  .filter-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-small);
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-small);
  }

  .footer-content {
    gap: var(--spacing-lg);
  }

  /* Lightbox on very small screens */
  .lightbox-prev,
  .lightbox-next {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
}