/**
 * Tipografía y utilidades compartidas de banners breadcrumb (hero de página).
 * Carga global: templates/layout_public/base.html.twig
 *
 * Uso en Twig:
 *   .page-banner__subtitle  — Work Sans 600 14/17
 *   .page-banner__title     — Playfair 40/48
 *   .page-banner__*--light  — texto blanco (p. ej. Productos)
 *   .lezada-single-slider__content — bloque de textos del hero
 *   .empty-container        — columna vacía del banner (se oculta ≤991.98px aquí)
 *
 * Tablet/móvil ≤991.98px (contrato único; no duplicar en css/vistas/*):
 *   texto del hero → center
 *   .empty-container → display: none
 * Desktop ≥992px: texto a la izquierda; columna vacía visible.
 *
 * Fondos por vista: .breadcrumb-* en css/vistas/*.
 * Altura 208px y gap 16px: index.css (.breadcrumb-text*).
 * Fuera de alcance: banner inicio, búsqueda productos, Contacto (sin breadcrumb hoy).
 */

.page-banner__subtitle {
    color: #000000;
    font: normal normal 600 14px/17px 'Work Sans', sans-serif;
    letter-spacing: 3.2px;
    margin: 0;
}

.page-banner__title {
    color: #000000;
    font: normal normal normal 40px/48px 'Playfair Display', serif;
    letter-spacing: 0;
    margin: 0;
}

.page-banner__subtitle--light,
.page-banner__title--light {
    color: #ffffff;
}

/*
 * Wrappers de página reutilizados dentro del banner (login-area, shopping-cart-area…)
 * aportan márgenes de contenido y empujan el texto fuera de la altura fija 208px.
 */
.breadcrumb-area .login-area,
.breadcrumb-area .shopping-cart-area,
.breadcrumb-area .register-area {
    margin: 0;
    padding: 0;
}

/*
 * Layout y alineación del hero a tablet/móvil.
 * Selectores de texto acotados al breadcrumb + stamping; no el slider de inicio.
 */
@media (max-width: 991.98px) {
    .empty-container {
        display: none;
    }

    .breadcrumb-area .lezada-single-slider__content,
    .breadcrumb-text-stamping .lezada-single-slider__content {
        text-align: center;
    }

    .breadcrumb-area .titles,
    .breadcrumb-text-stamping .titles {
        justify-content: center;
    }
}