/* ════════════════════════════════════════════════════════════════
   F-ONE STUDIO — Mobile Styles
   Covers 768px → 375px. Applied after all other stylesheets.
════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ────────────────────────────────────────── */
@media (max-width: 900px) {

    :root {
        --section-py: 64px;
        --container:  100%;
    }

    /* Header already handles hamburger at 900px via header-footer.css */

    /* Hero */
    .fone-hero {
        min-height: auto;
        padding: 80px 0 60px;
    }
    .fone-hero__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }
    .fone-hero__subtitle  { max-width: 100%; margin: 0 auto 32px; }
    .fone-hero__actions   { justify-content: center; flex-wrap: wrap; }
    .fone-hero__wave      { justify-content: center; }
    .fone-hero__stat--1   { left: 0; top: 16px; }
    .fone-hero__stat--2   { right: 0; bottom: 16px; }
    .fone-hero__img       { height: 380px; }
    .fone-hero__img-placeholder { height: 380px; }

    /* Featured track */
    .fone-featured__card {
        grid-template-columns: 64px 1fr;
        gap: 14px;
        padding: 14px 16px;
    }
    .fone-featured__actions {
        grid-column: 1 / -1;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* About teaser */
    .fone-about-teaser__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .fone-about-teaser__stats { gap: 20px; flex-wrap: wrap; }

    /* Testimonials */
    .fone-testimonials__grid { grid-template-columns: 1fr; gap: 16px; }

    /* AI Tools */
    .fone-tools__grid { grid-template-columns: 1fr; gap: 16px; }

    /* CTA banner */
    .fone-cta-banner__inner { flex-direction: column; text-align: center; gap: 24px; }
    .fone-cta-banner__actions { justify-content: center; }

    /* Footer */
    .fone-footer__top { grid-template-columns: 1fr; gap: 36px; }
    .fone-footer__links { grid-template-columns: repeat(3, 1fr); }

    /* About page */
    .fone-about-story .fone-story__grid,
    .fone-about-story { grid-template-columns: 1fr; gap: 36px; }
    .fone-founder .fone-founder__grid,
    .fone-founder { grid-template-columns: 1fr; gap: 32px; }

    /* Contact */
    .fone-contact__grid,
    .fone-contact-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Process steps */
    .fone-process-grid { grid-template-columns: repeat(2, 1fr); }
    .fone-process-step__arrow { display: none; }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────── */
@media (max-width: 640px) {

    :root { --section-py: 48px; }

    .fone-container { padding: 0 16px; }

    /* ── Hero ── */
    .fone-hero { padding: 72px 0 48px; }
    .fone-hero__title { font-size: clamp(48px, 13vw, 72px); }
    .fone-hero__subtitle { font-size: 15px; }
    .fone-hero__actions { gap: 10px; }
    .fone-btn--lg { padding: 14px 22px; font-size: 14px; }
    /* Hide floating stat cards on mobile — they overlap */
    .fone-hero__stat { display: none; }
    .fone-hero__img       { height: 280px; }
    .fone-hero__img-placeholder { height: 280px; }

    /* ── Featured Track ── */
    .fone-featured__card {
        grid-template-columns: 56px 1fr;
        padding: 12px 14px;
        gap: 12px;
    }
    .fone-featured__name  { font-size: 15px; }
    .fone-featured__artist { font-size: 12px; }
    .fone-featured__actions { flex-wrap: wrap; }
    .fone-featured__actions .fone-btn { flex: 1; min-width: 80px; justify-content: center; }

    /* ── Top Artists ── */
    .fone-artists__grid { gap: 10px; padding-bottom: 8px; }
    .fone-artist-card {
        min-width: 100px;
        padding: 16px 10px;
    }
    .fone-artist-card__photo { width: 72px; height: 72px; }

    /* ── Top Tracks ── */
    .fone-track-row {
        grid-template-columns: 36px 44px 1fr auto;
        gap: 10px;
        padding: 10px 10px;
    }
    .fone-track-row__art { width: 44px; height: 44px; }
    .fone-track-row__tag,
    .fone-track-row__stats { display: none; }
    .fone-track-row__actions { opacity: 1; }

    /* ── AI Tools ── */
    .fone-tool-card { padding: 24px 20px; }
    .fone-tool-card__title { font-size: 20px; }

    /* ── About teaser ── */
    .fone-about-teaser__image { aspect-ratio: 16/9; }
    .fone-about-teaser__stats { gap: 16px; }
    .fone-stat-num { font-size: 36px; }

    /* ── Testimonials ── */
    .fone-testimonial-card { padding: 20px 18px; }

    /* ── CTA Banner ── */
    .fone-cta-banner { padding: 56px 0; }
    .fone-cta-banner__title { font-size: clamp(22px, 6vw, 32px); }

    /* ── Section headers ── */
    .fone-section-title { font-size: clamp(26px, 7vw, 42px); }
    .fone-sec-title      { font-size: clamp(22px, 6vw, 32px); }

    /* ── Share modal ── */
    .fone-share-modal { padding: 16px 16px 32px; }
    .fone-share-modal__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .fone-share-opt { padding: 10px 6px; }
    .fone-share-opt__icon { width: 38px; height: 38px; }
    .fone-share-opt__label { font-size: 10px; }

    /* ── Footer ── */
    .fone-footer { padding: 48px 0 0; }
    .fone-footer__links { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .fone-footer__bottom { flex-direction: column; gap: 6px; text-align: center; }
    .fone-footer__tagline { font-size: 13px; }

    /* ── Page heroes ── */
    .fone-page-hero { padding: 56px 0 40px; }
    .fone-page-hero--dark { padding: 64px 0 48px; }
    .fone-page-hero__title { font-size: clamp(28px, 8vw, 48px); }
    .fone-page-hero--dark.fone-page-hero--tool { min-height: auto; }

    /* ── Music page ── */
    .fone-music-hero { padding: 48px 0 32px; }
    .fone-music-hero__title { font-size: clamp(24px, 7vw, 38px); }
    .fone-music-hero .fone-page-hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    #fone-shuffle-btn { align-self: flex-start; }
    .fone-music-search-row { flex-wrap: wrap; }
    .fone-music-search { min-width: 0; }
    .fone-genre-pills { gap: 6px; }
    .fone-genre-pill { padding: 7px 14px; font-size: 12px; }

    /* ── Contact page ── */
    .fone-contact { padding: 48px 0; }
    .fone-contact__title,
    .fone-contact-title { font-size: clamp(24px, 7vw, 36px); }

    /* ── How-it-works steps ── */
    .fone-how-it-works,
    .fone-steps { grid-template-columns: 1fr; gap: 10px; }
    .fone-trust-badges,
    .fone-trust { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .fone-trust-badge { padding: 12px 10px; }
    .fone-trust-badge__icon { font-size: 18px; }

    /* ── About page ── */
    .fone-about-story { padding: 0; }
    .fone-founder__img-wrap { max-width: 200px; margin: 0 auto; }
    .fone-founder__name { font-size: 28px; }
    .fone-founder__bio  { font-size: 14px; }

    /* ── Process steps ── */
    .fone-process-grid { grid-template-columns: 1fr; gap: 12px; }

    /* ── Video page ── */
    .fone-video-grid { grid-template-columns: 1fr; }

    /* ── Buttons ── */
    .fone-featured__actions .fone-btn--sm { padding: 8px 14px; font-size: 12px; }
}

/* ── Small mobile (≤ 420px) ──────────────────────────────────── */
@media (max-width: 420px) {

    .fone-hero__title { font-size: clamp(42px, 12vw, 58px); }
    .fone-hero__actions { flex-direction: column; width: 100%; }
    .fone-hero__actions .fone-btn { width: 100%; }

    .fone-featured__card { grid-template-columns: 1fr; gap: 12px; }
    .fone-featured__art  { width: 100%; height: 100px; border-radius: 10px; }
    .fone-featured__art img { height: 100px; }

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

    .fone-footer__links { grid-template-columns: 1fr 1fr; }
    .fone-footer__brand { text-align: center; }
    .fone-footer__social { justify-content: center; }

    .fone-trust { grid-template-columns: 1fr; }
}

/* ── Sticky player mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    /* Plugin sticky player — simplified on mobile */
    .fone-pl-player {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        padding: 10px 14px 14px;
    }
    .fone-pl-player__left,
    .fone-pl-player__center {
        width: 100%;
    }
    .fone-pl-player__right { display: none; }
    .fone-pl-player__left { gap: 10px; }
    .fone-pl-player__center { order: 1; }
    .fone-pl-player__art {
        width: 36px; height: 36px;
        flex-shrink: 0;
    }
    .fone-pl-player__title  { font-size: 12px; }
    .fone-pl-player__artist { font-size: 11px; }
    body.fone-player-active { padding-bottom: 88px; }
}

/* ── Fix overflowing elements ────────────────────────────────── */
@media (max-width: 640px) {
    /* Prevent horizontal scroll */
    .fone-hero__bg-circle--1,
    .fone-hero__bg-circle--2 { width: 300px; height: 300px; }

    /* Mobile nav already handled by hamburger */
    .fone-nav { display: none; }

    /* Ensure all containers don't overflow */
    section, div { max-width: 100%; }
    img { max-width: 100%; height: auto; }

    /* Make buttons feel better on touch */
    .fone-btn { -webkit-tap-highlight-color: transparent; }
    .fone-btn:active { transform: scale(.97); }

    /* Inputs: prevent iOS zoom on focus */
    .fone-form-input,
    .fone-music-search__input,
    .fone-input { font-size: 16px !important; }
}

/* ── Music page header layout ────────────────────────────────── */
.fone-music-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 100%;
}
@media (max-width: 640px) {
    .fone-music-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ── Plugin shortcode containers ─────────────────────────────── */
@media (max-width: 640px) {
    /* Song grid → 2 columns on mobile */
    #fone-pl-grid,
    .fone-pl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    /* Song cards */
    .fone-pl-card__body  { padding: 8px 10px 4px; }
    .fone-pl-card__title { font-size: 12px; }
    .fone-pl-card__artist{ font-size: 11px; }
    .fone-pl-card__footer{ padding: 6px 10px 8px; }

    /* Separator / Mixer containers */
    #fone-sep-app,
    #fone-mix-app { max-width: 100%; }
    .fone-sep-dropzone { padding: 36px 16px; }
    .fone-sep-steps { grid-template-columns: 1fr !important; }
    .fone-sep-trust { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
    /* 1 column on very small screens */
    #fone-pl-grid,
    .fone-pl-grid {
        grid-template-columns: 1fr !important;
    }
}