/* =========================================
   HATAN THEME — RESPONSIVE STYLESHEET
   All breakpoints & mobile-first overrides
   ========================================= */

/* ══ Tablet (≤1100px) ══ */
@media (max-width: 1100px) {
    .hero-inner       { gap: var(--space-lg); }
    .hero-bag__img    { max-height: 50vh; }
    .categories-grid  { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .carousel-slide   { padding: 0 var(--space-xl); gap: var(--space-xl); }
}

/* ══ Medium (≤900px) ══ */
@media (max-width: 900px) {
    :root { --space-2xl: 4rem; }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-xl);
        padding-top: calc(var(--header-h) + var(--space-xl));
    }
    .hero-bag        { order: -1; }
    .hero-bag__img   { max-height: 45vh; }
    .hero-ctas       { justify-content: center; }
    .hero-subtext    { margin-left: auto; margin-right: auto; }

    .story-inner     { grid-template-columns: 1fr; }
    .story-text      { padding-right: 0; }
    .brew-teaser-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .footer-inner    { grid-template-columns: 1fr; gap: var(--space-xl); }
    .footer-columns  { grid-template-columns: repeat(2, 1fr); }
    .col2-set        { grid-template-columns: 1fr; }
    .posts-grid      { grid-template-columns: repeat(2, 1fr); }
    .about-values    { grid-template-columns: 1fr; }
    .contact-grid    { grid-template-columns: 1fr; }
    .brew-method-detail { grid-template-columns: 1fr; }
    .carousel-slide  { grid-template-columns: 1fr; text-align: center; padding: 0 var(--space-lg); }
    .carousel-slide__info { padding: var(--space-lg); }
}

/* ══ Mobile (≤600px) ══ */
@media (max-width: 600px) {
    :root {
        --space-xl:    2.5rem;
        --header-h:    68px;
    }

    /* Header */
    .header-inner        { padding: 0 1.25rem; }
    .header-nav          { display: none; }
    .mobile-menu-toggle  { display: flex; }
    .header-nav.open {
        display: flex;
        position: fixed;
        top: var(--header-h); left: 0; right: 0;
        background: rgba(20, 12, 6, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 1.5rem 1.25rem;
        flex-direction: column;
        gap: 1.25rem;
        z-index: 999;
        border-bottom: 1px solid rgba(193,176,148,0.12);
    }
    .header-nav.open .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 0;
        display: flex;
    }
    .header-nav.open .nav-list li a {
        font-size: 1rem;
        font-weight: 500;
        color: rgba(245,240,232,0.85);
        padding: 0.75rem 0;
        display: block;
        border-bottom: 1px solid rgba(193,176,148,0.1);
    }

    /* Hero */
    .hero-inner    { text-align: center; padding-inline: 1.25rem; }
    .hero-bag      { display: none; }
    .hero-ctas     { justify-content: center; flex-direction: column; align-items: center; gap: 0.7rem; }
    .hero-ctas .btn { width: 100%; max-width: 300px; }
    .hero-headline { font-size: clamp(1.9rem, 9vw, 2.8rem) !important; line-height: 1.4; }
    .hero-subtext  { font-size: clamp(0.95rem, 3.5vw, 1.05rem); line-height: 1.85; max-width: 100%; }

    /* Sections */
    .section-title { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
    section        { padding: 3rem 0; }
    .container     { padding-inline: 1.25rem; }

    /* Products — grid handled entirely in product-cards.css */
    .categories-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    /* Carousel */
    .carousel-slide            { padding: 0 1.25rem; text-align: center; }
    .carousel-slide__info      { order: 2; padding: var(--space-md); }
    .carousel-slide__visual    { order: 1; }

    /* Brew methods */
    .brew-teaser-methods { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .brew-method-card    { padding: 1.25rem 1rem; }

    /* Footer */
    .footer-columns { grid-template-columns: 1fr; }
    .footer-bottom .container { flex-direction: column; text-align: center; gap: 0.5rem; }

    /* Blog grid */
    .posts-grid       { grid-template-columns: 1fr; }
    .blog-card__title { font-size: 1rem; line-height: 1.55; }
    .blog-card__excerpt { font-size: 0.88rem; line-height: 1.8; }

    /* Touch targets */
    .btn,
    .button,
    input[type="submit"] {
        padding: 0.8rem 1.4rem;
        min-height: 44px;
    }
}

/* ══ Small Mobile (≤380px) ══ */
@media (max-width: 380px) {
    .categories-grid { grid-template-columns: 1fr; }
    .brew-teaser-methods { grid-template-columns: 1fr; }
    .hero-headline { font-size: clamp(1.7rem, 10vw, 2.2rem) !important; }
}

/* ══ Large screens (≥1400px) ══ */
@media (min-width: 1400px) {
    :root { --max-width: 1440px; }
    .hero-headline { font-size: clamp(4rem, 5vw, 6rem); }
}

/* ══ Smooth scrolling & 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;
    }
}

/* ══ High DPI / Retina ══ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-bg {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ══ Print ══ */
@media print {
    .site-header,
    .site-footer,
    .header-nav,
    .hero-ctas,
    .carousel-section { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}