/* ==========================================================================
   CABECERA DE CATEGORÍA — banner, texto SEO y píldoras propias
   ========================================================================== */

/* ---------- Pegar el banner a la barra de confianza ----------
   El hueco que queda encima del banner es el relleno de arriba del contenedor de Kadence. Se
   quita SOLO cuando la categoría tiene banner (la clase la pone mmc_cat_body_class): sin
   banner, ese aire hace falta o el título queda pegado a la barra de confianza.

   La lista de selectores es la misma que usan las landings en css/ayuda.css, css/cupones.css y
   compañía: Kadence reparte ese relleno entre varios contenedores según la plantilla, y no hay
   forma de saber desde aquí cuál manda. Si Kadence cambia sus clases, hay que tocar también
   esas hojas. */
body.mmc-cat-con-banner .content-area,
body.mmc-cat-con-banner .site-main,
body.mmc-cat-con-banner .entry-content-wrap,
body.mmc-cat-con-banner .entry-content,
body.mmc-cat-con-banner .content-container,
body.mmc-cat-con-banner .site-container,
body.mmc-cat-con-banner .wp-site-blocks,
body.mmc-cat-con-banner #primary,
body.mmc-cat-con-banner article.entry {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* No se toca el margen de la cabecera, como sí hacen las landings: ahí el hueco está entre la
   cabecera y lo que sigue, y aquí la barra de confianza ya va pegada. Tocarlo solo arriesgaría
   la cabecera pegajosa sin arreglar nada. */

/* ---------- Banner ----------
   NO va a sangre: tiene que empezar y terminar donde empiezan el título, las píldoras y la
   barra de filtros. Eso lo resuelve sobre todo el gancho (prioridad 15 en
   inc/categoria/render.php), que mete el banner dentro del contenedor del contenido y le hace
   heredar su ancho.

   El max-width es solo el cinturón por si ese contenedor no estuviera: entonces el banner
   quedaría suelto a todo el ancho de la pantalla. Se pide primero la variable de Kadence, que
   es el ancho de contenido de verdad que tengas configurado en el tema; el número del final es
   lo último a lo que agarrarse si tampoco existe. */
.mmc-cat-banner {
    width: 100%;
    max-width: var(--mmc-cat-banner-ancho, var(--global-content-width, 1290px));
    margin: 0 auto 28px;
    line-height: 0;          /* mata el hueco que el <img> deja por ser en línea */
}

.mmc-cat-banner-pic,
.mmc-cat-banner-enlace {
    display: block;
}

/* El alto manda y la imagen se recorta para encajar; no se estira. En un solo sitio para poder
   cambiarlo de una línea. Con el ancho del catálogo (~1290px) esto da una proporción de casi
   6:1, así que exporta el banner a 2560 × 445 y no se recorta nada. */
:root { --mmc-cat-banner-alto: 224px; }

.mmc-cat-banner img {
    width: 100%;
    height: var(--mmc-cat-banner-alto);
    display: block;
    /* cover y no un alto automático: con alto automático, una imagen más estrecha que la
       pantalla se AGRANDA para llenarla y se ve borrosa. Con cover se recorta por los lados,
       que no deforma ni emborrona. */
    object-fit: cover;
    object-position: center;
    /* max-width ganaría a la regla de WooCommerce para imágenes dentro de sus páginas, que es
       la que en el pie dejaba los iconos de redes de cualquier tamaño. Aquí pasa lo mismo. */
    max-width: none;
}

/* ---------- Texto SEO ----------
   Plegado va TODO en una línea: el texto recortado y el "Leer más" justo detrás, sin salto.
   Por eso esto es una fila flexible y no un bloque con el botón debajo. */
.mmc-cat-seo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    max-width: 1100px;
    margin: 0 0 18px;
    font-family: var(--mmc-fuente);
}

/* El min-width:0 es obligatorio: sin él, un hijo flexible no se deja encoger por debajo del
   ancho de su contenido, así que nunca llegaría a sobrar nada y los puntos suspensivos no
   aparecerían jamás. */
.mmc-cat-seo-texto {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mmc-texto-medio);
}

/* El HTML que pegas en el panel trae párrafos y títulos, que son bloques y partirían la línea.
   Plegado se aplanan a texto corrido; al abrirse recuperan su forma, porque estas reglas solo
   valen mientras NO está abierto. */
.mmc-cat-seo:not(.is-abierto) .mmc-cat-seo-texto > * {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.mmc-cat-seo-mas { flex: 0 0 auto; }

/* Abierto deja de ser una fila: el texto recupera sus párrafos y el botón baja al final. */
.mmc-cat-seo.is-abierto { display: block; }
.mmc-cat-seo.is-abierto .mmc-cat-seo-texto {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-bottom: 6px;
}

/* Los párrafos y títulos que vengan dentro del HTML pegado en el panel. El primero sin margen
   arriba, para que el texto empiece pegado al título de la categoría. */
.mmc-cat-seo-texto > :first-child { margin-top: 0; }
.mmc-cat-seo-texto > :last-child  { margin-bottom: 0; }
.mmc-cat-seo-texto p  { margin: 0 0 10px; }
.mmc-cat-seo-texto h2,
.mmc-cat-seo-texto h3 { margin: 18px 0 8px; font-size: 18px; font-weight: 600; color: var(--mmc-texto-fuerte); }
.mmc-cat-seo-texto ul,
.mmc-cat-seo-texto ol { margin: 0 0 10px; padding-left: 20px; }
.mmc-cat-seo-texto a  { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mmc-cat-seo-texto a:hover { color: var(--mmc-enlace); }

/* El botón. Kadence repinta cualquier <button> al enfocarlo con su propio fondo Y su color
   blanco, así que hay que neutralizar los dos en todos los estados o al pulsar "Leer más"
   aparece un botón azul con texto blanco en medio del párrafo. */
.mmc-cat-seo-mas,
.mmc-cat-seo-mas:hover,
.mmc-cat-seo-mas:focus,
.mmc-cat-seo-mas:active,
.mmc-cat-seo-mas:focus-visible {
    display: inline;
    margin: 0;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mmc-texto-fuerte) !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.mmc-cat-seo-mas:hover { color: var(--mmc-enlace) !important; }

/* Se repone al final: los bloques de arriba quitan el box-shadow de Kadence y de paso se
   llevarían por delante el contorno de quien navega con el teclado. */
.mmc-cat-seo-mas:focus-visible {
    outline: 2px solid var(--mmc-seleccion) !important;
    outline-offset: 2px;
}

/* ---------- Píldoras propias de la categoría ----------
   Reaprovechan .gender-btn, que es la píldora que ya existe en la fila de filtros; esto solo
   añade el hueco del icono. Así las dos clases de píldora se ven idénticas sin duplicar nada. */
.gender-btn .mmc-cat-pildora-icono {
    width: 18px;
    height: 18px;
    margin-right: 7px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------- Móvil ---------- */
@media (max-width: 782px) {
    /* A sangre en el celular: de borde a borde, sin los márgenes del contenedor. En una
       pantalla estrecha esos márgenes se comen un trozo serio del banner y lo dejan como una
       postal pequeña en medio de la página. En escritorio sigue alineado con el catálogo. */
    .mmc-cat-banner {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 20px;
    }

    /* En el celular el alto lo pone la imagen: el banner de móvil se diseña entero para esa
       pantalla, y recortarlo a una altura fija se comería parte de lo que lleva dentro. Si
       quieres el banner más alto, súbelo con más alto — no hay nada que tocar aquí. */
    .mmc-cat-banner img { height: auto; }

    .mmc-cat-seo { margin-bottom: 14px; }
    .mmc-cat-seo-texto,
    .mmc-cat-seo-mas { font-size: 14px; }
}