/* ==========================================================================
       Heritage Coffee — Responsive Breakpoints & Mobile Optimization
       ========================================================================== */
    
    /* --------------------------------------------------------------------------
       Large Desktops & Ultrawide (1440px - 1920px+)
       -------------------------------------------------------------------------- */
    @media (min-width: 1440px) {
      :root {
        --container-max: 1380px;
        --container-padding: 3rem;
      }
    
      .section {
        padding-top: 8.5rem;
        padding-bottom: 8.5rem;
      }
    
      .hero-title {
        font-size: 7.25rem;
      }
    
      .coffee-split-content {
        padding: 7rem 6.5rem;
      }
    }
    
    @media (min-width: 1600px) {
      :root {
        --container-max: 1480px;
      }
    
      .hero-section {
        min-height: 100vh;
      }
    
      .gallery-grid {
        grid-auto-rows: 280px;
      }
    }
    
    /* --------------------------------------------------------------------------
       Laptops & Medium Desktops (1025px - 1200px)
       -------------------------------------------------------------------------- */
    @media (max-width: 1200px) {
      :root {
        --container-padding: 2rem;
      }
    
      .intro-grid {
        grid-template-columns: 220px 1fr;
        gap: 3.5rem;
      }
    
      .coffee-split-content {
        padding: 4.5rem 3.5rem;
      }
    
      .heritage-grid {
        grid-template-columns: 280px 1fr;
        gap: 3.5rem;
      }
    
      .footer-top-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
        gap: 2.5rem;
      }
    }
    
    /* --------------------------------------------------------------------------
       Tablets Landscape & Standard (821px - 1024px)
       -------------------------------------------------------------------------- */
    @media (max-width: 1024px) {
      .section {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
      }
    
      /* Navigation */
      .desktop-nav,
      .header-actions .btn {
        display: none;
      }
    
      .menu-toggle {
        display: flex;
      }
    
      /* Layout grids */
      .intro-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    
      .intro-label-column {
        position: static;
      }
    
      .intro-vertical-line {
        display: none;
      }
    
      .story-collage-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    
      .collage-floating-badge {
        position: static;
        margin-top: 1.5rem;
        max-width: 100%;
      }
    
      .cards-grid-3 {
        grid-template-columns: 1fr;
        gap: 1.75rem;
      }
    
      .menu-grid-2col {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    
      .coffee-split-grid {
        grid-template-columns: 1fr;
      }
    
      .coffee-split-img-wrapper {
        min-height: 380px;
        height: 380px;
      }
    
      .venue-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    
      .heritage-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    
      .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
      }
    
      .gallery-item.col-span-2 {
        grid-column: span 1;
      }
    
      .gallery-item.row-span-2 {
        grid-row: span 1;
      }
    
      .hours-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    
      .footer-top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
      }
    
      /* Hero Slider Banner (Tablet) */
      .hero-slider-dock {
        bottom: 1.5rem;
        width: calc(100% - 2.5rem);
        padding: 0.55rem 1rem;
        gap: 1rem;
      }
    
      .tab-label {
        display: none;
      }
    
      .hero-progress-tab {
        padding: 0.4rem 0.5rem;
        max-width: 90px;
      }
    
      .tab-text-wrap {
        justify-content: center;
      }
    
      .hero-scroll-indicator {
        display: none;
      }
    }
    
    /* --------------------------------------------------------------------------
       Small Tablets & Large Phones (577px - 820px)
       -------------------------------------------------------------------------- */
    @media (max-width: 820px) {
      :root {
        --header-height: 80px;
        --container-padding: 1.75rem;
      }
    
      .hero-section,
      .hero-slider-section {
        padding: 0;
        min-height: 640px;
      }
    
      .hero-content {
        margin-top: -1rem;
        padding: 0 1.25rem;
      }
    
      .hero-slider-dock {
        bottom: 1.25rem;
        width: calc(100% - 2rem);
        padding: 0.5rem 0.85rem;
        gap: 0.75rem;
      }
    
      .hero-controls-cluster {
        gap: 0.5rem;
        padding-left: 0.5rem;
      }
    
      .hero-arrow-btn {
        width: 32px;
        height: 32px;
      }
    
      .hero-playpause-btn {
        width: 30px;
        height: 30px;
      }
    
      .hero-slide-counter {
        font-size: 0.85rem;
        padding: 0 0.2rem;
      }
    
      .counter-current {
        font-size: 0.95rem;
      }
    
      .hero-cta-group {
        flex-direction: column;
        width: 100%;
        max-width: 360px;
      }
    
      .hero-cta-group .btn {
        width: 100%;
      }
    
      .intro-details-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
    
      .heritage-specs-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
    
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 1rem;
      }
    
      .venue-tags-grid {
        grid-template-columns: 1fr;
      }
    
      .contact-form-card {
        padding: 2.25rem 1.75rem;
      }
    
      .map-container {
        min-height: 340px;
      }
    }
    
    /* --------------------------------------------------------------------------
       Standard Mobile Phones (360px - 576px)
       -------------------------------------------------------------------------- */
    @media (max-width: 576px) {
      :root {
        --header-height: 74px;
        --container-padding: 1.25rem;
      }
    
      .section {
        padding-top: 4.25rem;
        padding-bottom: 4.25rem;
      }
    
      .section-sm {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
    
      .site-logo .logo-main {
        font-size: 1.25rem;
      }
    
      .site-logo .logo-sub {
        font-size: 0.58rem;
      }
    
      .live-status-badge {
        padding: 0.25rem 0.6rem;
        font-size: 0.625rem;
      }
    
      .hero-slider-section {
        min-height: 580px;
        height: 100svh;
      }
    
      .hero-content {
        margin-top: -0.5rem;
        padding: 0 1rem;
      }
    
      .hero-badge-pill {
        padding: 0.35rem 0.85rem;
        font-size: 0.68rem;
        margin-bottom: 0.95rem;
        letter-spacing: 0.16em;
      }
    
      .hero-title {
        font-size: clamp(2.35rem, 8.8vw, 3.25rem);
        letter-spacing: -0.02em;
        line-height: 1.02;
        margin-bottom: 0.95rem;
      }
    
      .hero-subtitle {
        font-size: 1.08rem;
        line-height: 1.4;
        margin-bottom: 0.95rem;
      }
    
      .hero-meta-pill {
        font-size: 0.68rem;
        padding: 0.35rem 0.85rem;
        margin-bottom: 1.65rem;
        letter-spacing: 0.08em;
      }
    
      .hero-slider-dock {
        bottom: 0.85rem;
        width: calc(100% - 1.25rem);
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
      }
    
      .hero-progress-tabs {
        gap: 0.35rem;
      }
    
      .hero-progress-tab {
        padding: 0.25rem 0.25rem;
        max-width: 55px;
      }
    
      .tab-indicator-bar {
        height: 2.5px;
        margin-bottom: 0.2rem;
      }
    
      .tab-num {
        font-size: 0.72rem;
      }
    
      .hero-arrow-btn {
        width: 28px;
        height: 28px;
      }
    
      .hero-arrow-btn svg {
        width: 14px;
        height: 14px;
      }
    
      .hero-playpause-btn {
        display: none;
      }
    
      .hero-scroll-indicator {
        display: none;
      }
    
      .experience-card {
        padding: 2.25rem 1.5rem;
      }
    
      .coffee-split-content {
        padding: 3.5rem 1.5rem;
      }
    
      .hours-schedule-card {
        padding: 2.25rem 1.5rem;
      }
    
      .hours-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }
    
      .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
    
      .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }
    
      .lightbox-nav-btn {
        width: 42px;
        height: 42px;
      }
    
      .lightbox-nav-prev { left: 0.75rem; }
      .lightbox-nav-next { right: 0.75rem; }
    
      .page-hero {
        padding-top: 9rem;
        padding-bottom: 4rem;
      }
    
      .menu-tabs {
        gap: 0.5rem;
      }
    
      .menu-tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.6875rem;
      }
    
      .menu-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }
    
      .menu-item-price {
        font-size: 1.15rem;
      }
    }
    
    /* --------------------------------------------------------------------------
       Small Mobile Phones (320px - 359px)
       -------------------------------------------------------------------------- */
    @media (max-width: 359px) {
      :root {
        --container-padding: 1rem;
      }
    
      .hero-title {
        font-size: 2.35rem;
      }
    
      .btn {
        padding: 0.85rem 1.4rem;
        font-size: 0.75rem;
      }
    
      .gallery-grid {
        grid-template-columns: 1fr;
      }
    
      .oversized-num {
        font-size: 4.5rem;
      }
    }
    
    /* --------------------------------------------------------------------------
       Accessibility: Reduced Motion
       -------------------------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    
      .hero-bg-img {
        transform: none !important;
        transition: none !important;
      }
    
      .live-status-dot {
        animation: none !important;
      }
    
      .scroll-wheel {
        animation: none !important;
      }
    }