/* ============================================================
   seleccion-chef-mobile.css
   Responsive mobile para la página de Selección del Chef
   Agregar DESPUÉS de seleccion-chef.css
   ============================================================ */

@media (max-width: 767px) {

    /* ── Contenedor principal ─────────────────────────────── */
    .chef-hero {
        padding: calc(var(--header-h) + 1rem) 1rem 2.5rem !important;
    }

    .chef-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* ── Imagen: menos alta en mobile ─────────────────────── */
    .chef-hero-image-wrap {
        aspect-ratio: 3/2 !important;
        /* más ancha, menos alta */
        border-radius: .75rem !important;
    }

    .chef-hero-image-label {
        padding: .85rem 1rem !important;
        border-radius: .5rem !important;
        bottom: .75rem !important;
        left: .75rem !important;
        right: .75rem !important;
    }

    .chef-hero-image-tag {
        font-size: .65rem !important;
        margin-bottom: .2rem !important;
    }

    .chef-hero-image-name {
        font-size: 1.1rem !important;
    }

    /* ── Glow más sutil en mobile ─────────────────────────── */
    .chef-hero-glow {
        inset: -.5rem !important;
        filter: blur(1rem) !important;
    }

    /* ── Contenido ────────────────────────────────────────── */
    .chef-hero-content {
        gap: 1.25rem !important;
    }

    .chef-hero-title {
        font-size: 1.75rem !important;
        letter-spacing: -.01em !important;
        line-height: 1.15 !important;
    }

    .chef-hero-desc {
        font-size: .9rem !important;
        line-height: 1.65 !important;
    }

    /* ── Ingredientes: 1 columna en mobile muy pequeño ───── */
    .chef-ingredients-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: .5rem 0 !important;
    }

    .chef-ingredient {
        gap: .75rem !important;
        align-items: flex-start;
    }

    .chef-ingredient .material-symbols-outlined {
        font-size: 1.4rem !important;
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .chef-ingredient h4 {
        font-size: .85rem !important;
    }

    .chef-ingredient p {
        font-size: .78rem !important;
    }

    /* ── Cita del chef ────────────────────────────────────── */
    .chef-quote-section {
        padding-top: 1rem !important;
        gap: 1rem !important;
    }

    .chef-quote {
        font-size: 1rem !important;
    }

    .chef-author-avatar {
        width: 2.5rem !important;
        height: 2.5rem !important;
        flex-shrink: 0;
    }

    .chef-author-name {
        font-size: 1.3rem !important;
    }

    .chef-author-role {
        font-size: .65rem !important;
    }

    /* ── Acciones: columna en mobile ──────────────────────── */
    .chef-actions {
        flex-direction: column !important;
        gap: .6rem !important;
        padding-top: .75rem !important;
    }

    .chef-actions .btn-primary,
    .chef-actions .btn-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: .85rem !important;
        padding: .75rem 1rem !important;
        /* Evitar que el precio largo desborde */
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    /* ── Stats ────────────────────────────────────────────── */
    .chef-stats {
        padding: 2rem 1rem !important;
    }

    .chef-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    .chef-stat-value {
        font-size: 1.4rem !important;
    }

    .chef-stat-label {
        font-size: .65rem !important;
    }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

    .chef-hero {
        padding: calc(var(--header-h) + 1rem) 1rem 2.5rem !important;
    }

    .chef-hero-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem !important;
        align-items: start;
    }

    .chef-hero-title {
        font-size: 2.2rem !important;
    }

    .chef-ingredients-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .chef-actions {
        flex-wrap: wrap !important;
    }

    .chef-actions .btn-primary {
        flex: 1 1 auto;
        white-space: normal !important;
        line-height: 1.3 !important;
        font-size: .85rem !important;
        text-align: center !important;
    }
}