/* ============================================================
   mobile.css — Mobile & Responsive Overrides for Zest & Zyme
   Handles layout tweaks for small screens (max-width: 768px)
   Also hides desktop-only decorations on mobile.
   ============================================================ */

/* ── Food stickers on tablet/mobile: smaller & more subtle ── */
@media (max-width: 1023px) {
    /* Show stickers but scaled down for smaller screens */
    .hero-stickers {
        display: block;
    }

    /* Base sticker: much smaller, semi-transparent on mobile */
    .sticker        { font-size: 1.4rem; opacity: 0.75; }
    .sticker.large  { font-size: 1.8rem; }
    .sticker.medium { font-size: 1.5rem; }
    .sticker.small  { font-size: 1.1rem; }

    /* Tighter letter-spacing on mobile so title doesn't overflow */
    .brand-title {
        letter-spacing: -0.02em;
    }
}

/* ── Extra small phones: stickers even tinier ── */
@media (max-width: 480px) {
    .sticker        { font-size: 1.1rem; opacity: 0.65; }
    .sticker.large  { font-size: 1.4rem; }
    .sticker.medium { font-size: 1.2rem; }
    .sticker.small  { font-size: 0.9rem; }
}

/* ── Small screens: tighter header padding ── */
@media (max-width: 768px) {
    /* Header stays centered on mobile, reduce vertical spacing */
    .state-active {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    /* Recipe detail article: tighter corner radius on mobile */
    article.fade-in-up {
        border-radius: 1.5rem;
    }

    /* Ingredients grid: single column on very small screens */
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Extra small screens (phones < 480px) ── */
@media (max-width: 480px) {
    /* Reduce font size of search input placeholder for tiny screens */
    #search-input {
        font-size: 0.9rem;
    }

    /* Stack search bar button text tighter */
    #btn-text {
        font-size: 0.8rem;
    }

    /* Reduce recipe detail image height for small viewports */
    .recipe-hero-image {
        height: 14rem;
    }
}