/* ═══════════════════════════════════════════════════════════════
   ASABA SEAFOOD — HERO MOBILE FIXES
   Enqueue after mobile-fixes.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Base hero (all sizes) ── */
.asaba-hero {
    border-radius: var(--r-xl, 32px);
    background: var(--card, #161C24);
    overflow: hidden;
    position: relative;
    padding: 40px 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    /* Remove fixed margin — controlled per breakpoint */
    margin: 32px;
    margin-bottom: 0;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
    .asaba-hero {
        padding: 36px 32px;
        gap: 24px;
        margin: 24px;
        margin-bottom: 0;
    }
    .hero-title { font-size: 34px; }
    .hero-plate { width: 200px; height: 200px; }
}

/* ── Tablet portrait: stack to single column ── */
@media (max-width: 768px) {
    .asaba-hero {
        /* Single column, text centred */
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 24px 36px;
        gap: 28px;
        margin: 16px;
        margin-bottom: 0;
        /* Subtle food-themed gradient background on mobile
           (the visual circle is hidden so we use colour instead) */
        background: linear-gradient(
            150deg,
            rgba(255,98,64,0.10) 0%,
            var(--card, #161C24) 50%,
            rgba(0,212,168,0.06) 100%
        );
    }

    /* Show the visual circle on tablet */
    .hero-visual {
        display: flex;
        justify-content: center;
        position: relative;
    }
    .hero-plate {
        width: 180px;
        height: 180px;
        font-size: 80px;
    }
    /* Hide the floating chips on tablet — they overlap badly */
    .hero-chip { display: none; }

    .hero-tag { justify-content: center; }
    .hero-title { font-size: 28px; }
    .hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; font-size: 14px; }
    .hero-actions { justify-content: center; flex-wrap: wrap; gap: 10px; }
}

/* ── Mobile ≤480px: show and center the plate, adjust size ── */
@media (max-width: 480px) {
    .asaba-hero {
        padding: 28px 18px 32px;
        margin: 12px;
        margin-bottom: 0;
        border-radius: var(--r-lg, 22px);
        /* Stronger gradient on small mobile */
        background: linear-gradient(
            160deg,
            rgba(255,98,64,0.13) 0%,
            var(--card, #161C24) 55%,
            rgba(0,212,168,0.08) 100%
        );
    }

    /* Show the hero image on mobile — centered and smaller */
    .hero-visual {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
    }
    .hero-plate {
        width: 140px;
        height: 140px;
        font-size: 60px;
    }

    .hero-tag {
        font-size: 11px;
        padding: 4px 12px;
        justify-content: center;
    }
    .hero-title {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 12px;
    }
    .hero-desc {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .btn-fill, .btn-outline {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: var(--r-md, 16px);
    }
    .hero-actions { gap: 8px; }

    /* Make the glow accents more visible on mobile
       since the plate isn't there as a visual focal point */
    .hero-glow {
        width: 200px;
        height: 200px;
        top: -40px;
        left: -40px;
        background: radial-gradient(circle, rgba(255,98,64,0.22) 0%, transparent 70%);
    }
}

/* ── Very small phones ≤360px ── */
@media (max-width: 360px) {
    .asaba-hero {
        padding: 22px 14px 26px;
        margin: 8px;
        margin-bottom: 0;
    }
    .hero-title { font-size: 21px; }
    .hero-desc  { font-size: 12px; }
    .btn-fill, .btn-outline { padding: 10px 16px; font-size: 12px; }
    .hero-tag { font-size: 10px; }
    .hero-plate {
        width: 110px;
        height: 110px;
        font-size: 50px;
    }
}

/* ── Scroll indicator dots below blog grid on mobile ── */
.asaba-blog-scroll-hint {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
@media (max-width: 768px) {
    .asaba-blog-scroll-hint { display: flex; }
}
.blog-hint-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border2, rgba(255,255,255,0.12));
}
.blog-hint-dot:first-child { background: var(--orange, #FF6240); width: 20px; border-radius: 3px; }
@media (max-width: 768px) {
    .hero-visual {
        display: flex !important;
    }
}