/* ===== ESTILOS RESPONSIVE PARA ARTÍCULOS DEL BLOG ===== */
/* Aplica a: consejos-etesia, consejos-honda, consejos-wolf, mantenimiento-experto-honda */

/* Imágenes flotantes - estilos base desktop */
.article-img-float-right {
    float: right;
    width: 45%;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.article-img-float-left {
    float: left;
    width: 40%;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.article-flex-with-img {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.article-flex-with-img img {
    flex-shrink: 0;
    width: 100px;
}

/* Tablet vertical (768px - 968px) y móvil */
@media (max-width: 968px) {
    /* Layout: una columna, sidebar debajo del contenido */
    .article-content .content-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .article-content .sidebar {
        order: 2;
    }

    .article-content .main-content {
        order: 1;
    }

    /* Hero/Header: reducir padding y tamaños */
    .article-header {
        padding: 5rem 1rem 3rem !important;
    }

    .article-header .article-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .article-header .article-subtitle {
        font-size: 1.1rem !important;
    }

    /* Contenido: lead y h2 más pequeños */
    .article-body .lead {
        font-size: 1.2rem !important;
        padding-left: 1.25rem !important;
        margin-bottom: 2rem !important;
    }

    .article-body h2 {
        font-size: 1.75rem !important;
        margin: 2.5rem 0 1.25rem !important;
    }

    /* CTA box: menos padding */
    .article-body .cta-box,
    .article-body .cta-section {
        padding: 2.5rem 1.5rem !important;
        margin-top: 3rem !important;
    }

    .article-body .cta-box h3,
    .article-body .cta-section h3 {
        font-size: 1.5rem !important;
    }

    .article-body .cta-box p,
    .article-body .cta-section p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .article-body .cta-box > div,
    .article-body .cta-section > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .article-body .cta-box .btn,
    .article-body .cta-section .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Article content section */
    .article-content {
        padding: 3rem 0 !important;
    }

    .article-content .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Sidebar blocks */
    .sidebar-block {
        padding: 1.5rem !important;
    }

    .sidebar-block h3 {
        font-size: 1.2rem !important;
    }

    /* Imágenes flotantes: en tablet/móvil apilar verticalmente */
    .article-img-float-right,
    .article-img-float-left {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }

    .article-img-float-right img,
    .article-img-float-left img {
        width: 100% !important;
    }

    /* Bloque flex con imagen (ETESIA) */
    .article-flex-with-img {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .article-flex-with-img img {
        width: 120px !important;
        margin: 0 auto !important;
    }
}

/* Móvil (< 640px) */
@media (max-width: 640px) {
    .article-header {
        padding: 4rem 1rem 2.5rem !important;
    }

    .article-header .article-title {
        font-size: 1.65rem !important;
    }

    .article-header .article-subtitle {
        font-size: 0.95rem !important;
    }

    .article-header .breadcrumb {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }

    .article-header .article-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .article-body .lead {
        font-size: 1.1rem !important;
        padding-left: 1rem !important;
        border-left-width: 4px !important;
    }

    .article-body h2 {
        font-size: 1.5rem !important;
        margin: 2rem 0 1rem !important;
    }

    .article-body {
        font-size: 1rem !important;
    }

    .article-body .cta-box,
    .article-body .cta-section {
        padding: 1.75rem 1rem !important;
        margin-top: 2rem !important;
    }

    .article-body .cta-box h3,
    .article-body .cta-section h3 {
        font-size: 1.25rem !important;
    }

    .article-content {
        padding: 2rem 0 !important;
    }

    .article-content .content-wrapper {
        gap: 1.5rem !important;
    }

    .sidebar-block {
        padding: 1.25rem !important;
    }

    .sidebar-block div[style*="font-size: 3rem"] {
        font-size: 2.5rem !important;
    }

    /* maintenance-card (consejos-honda) */
    .maintenance-card {
        padding: 1.25rem !important;
    }

    .pro-tip {
        padding: 1.5rem !important;
        margin: 2rem 0 !important;
    }

    .pro-tip::before {
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
    }

    /* Quitar background-attachment fixed en móvil (mejor rendimiento) */
    .article-header {
        background-attachment: scroll !important;
    }
}

/* Móvil muy pequeño (< 400px) */
@media (max-width: 400px) {
    .article-header .article-title {
        font-size: 1.4rem !important;
    }

    .article-body .cta-box .btn,
    .article-body .cta-section .btn {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
    }
}