/* ============================================
   syn. — Responsive Styles
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .hex-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

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

    .story__layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .story__visual {
        min-height: 300px;
    }

    .footer__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero__prism {
        width: 35%;
        opacity: 0.7;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Hide custom cursor on touch devices */
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }

    html, body, a, button {
        cursor: auto !important;
    }

    .nav {
        padding: 12px 16px !important;
        flex-direction: column !important;
        height: auto !important;
        align-items: center !important;
        gap: 12px !important;
        background: var(--bg-page) !important;
        border-bottom: 1px solid var(--border-subtle);
    }

    .nav__brand {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .nav__logo {
        font-size: 1.6rem !important;
        margin-left: 0 !important;
    }

    .nav__right {
        position: absolute !important;
        right: 16px !important;
        top: 14px !important;
        gap: 8px !important;
    }

    /* Dedicated scrollable row for nav links */
    .nav__links {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding: 8px 0 !important;
        gap: 24px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-top: 1px solid var(--border-subtle) !important;
    }

    .nav__links::-webkit-scrollbar {
        display: none !important;
    }

    .nav__link {
        white-space: nowrap !important;
        font-size: 0.65rem !important;
        color: var(--text-secondary) !important;
        font-family: var(--font-mono) !important;
        letter-spacing: 0.1em !important;
    }

    .theme-toggle {
        width: 36px !important;
        height: 36px !important;
    }

    .nav__hamburger {
        width: 36px !important;
        height: 36px !important;
    }

    /* Hero */
    .hero {
        flex-direction: column !important;
        padding: 160px 24px 60px !important; /* Even more padding */
        min-height: 100vh !important;
        justify-content: flex-start !important;
        background: var(--bg-hero) !important;
    }

    .hero__content {
        z-index: 10;
        position: relative;
    }

    .hero__prism {
        position: absolute !important; /* Move it behind the text again but with low opacity */
        left: 0 !important;
        top: 40% !important;
        width: 100% !important;
        height: 400px !important;
        opacity: 0.15 !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .hero__scroll {
        display: none;
    }

    .hero__title {
        font-size: 2.6rem !important;
        color: #000000 !important; /* Force true black for maximum visibility */
        margin-top: 10px !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
        position: relative !important;
        z-index: 11 !important;
    }

    [data-theme="dark"] .hero__title {
        color: #F0E8D8 !important;
    }

    .hero__subtitle {
        color: #2D2620 !important; /* Darker charcoal */
        opacity: 1 !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        font-weight: 400 !important;
        position: relative !important;
        z-index: 11 !important;
    }

    [data-theme="dark"] .hero__subtitle {
        color: #B8AA90 !important;
    }

    .eyebrow {
        color: #8A6820 !important; /* Darker gold for visibility */
        opacity: 1 !important;
        font-weight: 500 !important;
    }

    .hero__buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .hero .btn {
        width: 100% !important;
        padding: 16px !important;
    }

    .hero__dots {
        gap: 8px;
    }

    .hero__dot {
        width: 18px;
        height: 18px;
    }

    /* Hex Grid */
    .hex-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
    }

    /* Explorer */
    .explorer {
        flex-direction: column;
    }

    .explorer__sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 32px 24px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(201, 168, 76, 0.1);
        overflow-x: auto;
    }

    .hero .waitlist-form__input {
        background: rgba(201, 168, 76, 0.04);
        border-color: rgba(201, 168, 76, 0.2);
        color: var(--text-primary);
    }

    .explorer__drink-list {
        flex-direction: row;
        gap: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .explorer__drink-item {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .explorer__content {
        padding: 32px 24px;
        min-height: auto;
    }

    .explorer__3d-bg {
        width: 100%;
        height: 150px;
        top: 20px;
        opacity: 0.1;
    }

    /* Trio */
    .trio-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
    }

    /* Foundation */
    .foundation-grid {
        grid-template-columns: 1fr;
    }

    /* Sourcing */
    .sourcing-grid {
        grid-template-columns: 1fr;
    }

    /* Philosophy */
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Story Honeycomb */
    .story__honeycomb {
        grid-template-columns: repeat(3, 70px);
        grid-template-rows: repeat(4, 40px);
        touch-action: pan-y; /* Allow vertical scrolling on hexagons */
    }

    .story__hex {
        width: 60px;
        height: 69px;
        touch-action: pan-y;
    }

    .story__visual {
        min-height: auto;
        margin-top: 40px;
    }

    /* Footer */
    .footer__columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Big Quote */
    .big-quote__text {
        font-size: 1.6rem;
    }

    /* Waitlist */
    .waitlist-form {
        max-width: 100% !important;
        align-items: center !important;
    }

    .waitlist-form__input {
        text-align: center !important;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .hero__title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }
}