/* ==========================================================================
   Blog (/es/blog, /en/blog y las fichas de articulo)
   Se carga solo en estas paginas, con 'pageStyles' => ['css/pages/blog.css'].

   Hasta la Fase 2 estas reglas vivian en un <style> en linea al final de
   app/views/blog-detail.php: no se cacheaban, se reenviaban en cada peticion
   y solo llegaban a la ficha, asi que el listado se quedaba sin la mitad de
   la barra lateral. Aqui se sirven una vez y valen para las dos vistas.

   Usa las variables de main.css; no abre una paleta paralela.
   ========================================================================== */

/* ----------------------------------------------------- miga de pan visible
   La ficha de articulo reutiliza partials/product-lite-breadcrumb.php, pero
   sus clases viven en css/pages/product-lite.css, que el blog no carga: el
   controlador solo pasa 'css/pages/blog.css'. Se repiten aqui, identicas, en
   vez de cargar la hoja entera de las fichas de producto por siete reglas.
   Si cambia una alla, cambia aqui. */

.product-lite-breadcrumb { margin: 0 0 1.1rem; }

.product-lite-breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.product-lite-breadcrumb-item {
    display: flex;
    /* baseline y no center: en una ficha de blog el ultimo eslabon es el
       titulo entero del articulo, que a 390 px ocupa dos y hasta tres lineas.
       Con align-items:center el separador "›" quedaba centrado respecto a
       TODAS esas lineas y aparecia suelto a media altura, sin relacion visible
       con el texto (comprobado a 390x844 con Emulation.setDeviceMetricsOverride).
       Con baseline se apoya en la primera linea, que es donde se le busca.
       Las fichas de excursion y espectaculo no lo notaban porque sus titulos
       caben en una linea. */
    align-items: baseline;
    gap: 0.5rem;
    color: #6b7280;
    min-width: 0;
}

.product-lite-breadcrumb-item + .product-lite-breadcrumb-item::before {
    content: "\203A";
    color: #9ca3af;
}

.product-lite-breadcrumb-item a { color: #0a6fb3; text-decoration: none; }
.product-lite-breadcrumb-item a:hover { text-decoration: underline; }
.product-lite-breadcrumb-item [aria-current="page"] { color: #0f172a; font-weight: 600; }

/* ------------------------------------------------------------ barra lateral */

.blog-sidebar {
    position: sticky;
    top: 90px;
}

.blog-widget {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
}

.blog-widget.square-card {
    /* Sin proporcion fija: el alto lo marca el contenido. */
    min-height: 0;
}

@media (max-width: 991px) {
    .blog-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

.widget-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: #374151;
    margin-bottom: .75rem;
}

.square-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: .2s;
    font-size: 1.25rem;
}

.square-btn:hover { background: #3b82f6; color: #fff; }
.square-btn.whatsapp { background: #25D366; color: #fff; }
.square-btn.fb { background: #1877F2; color: #fff; }
.square-btn.tw { background: #1DA1F2; color: #fff; }

.square-btn.top {
    background: #C2410C;
    color: #fff;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.square-btn.whatsapp:hover,
.square-btn.top:hover,
.square-btn.fb:hover,
.square-btn.tw:hover { filter: brightness(1.1); }

.blog-widget ul { margin: 0; padding: 0; }
.blog-widget ul li { list-style: none; }
.blog-widget form input,
.blog-widget form button { font-size: .85rem; }
.blog-widget .badge { font-weight: 500; }

/* ---------------------------------------------------------- titulo del listado
   main.css fija ".container > h1 { font-size: 2.25rem }" (especificidad 0-1-1),
   y a 390 px el titulo del blog ocupaba cuatro lineas y media pantalla antes de
   la primera tarjeta. El selector de aqui tiene que igualar esa especificidad,
   por eso lleva tambien el .container; y solo afecta a esta pagina porque la
   clase la pone unicamente blog-list.php. */

.container > h1.blog-list-title {
    font-size: 1.55rem;
    line-height: 1.22;
}

@media (min-width: 768px) {
    .container > h1.blog-list-title { font-size: 2rem; }
}

/* ------------------------------------------------------- cuerpo del articulo
   El HTML del articulo llega de blog_posts.json, asi que no se le pueden poner
   clases: todo lo de aqui cuelga de .blog-article y se aplica por etiqueta. */

.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: center;
}

.blog-article {
    font-size: 1.02rem;
    line-height: 1.75;
}

.blog-article h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2.25rem;
    margin-bottom: .85rem;
}

.blog-article h3 {
    font-size: 1.12rem;
    font-weight: 600;
    margin-top: 1.6rem;
    margin-bottom: .5rem;
}

.blog-article h2:first-child,
.blog-article h3:first-child { margin-top: 0; }

.blog-article p { margin-bottom: 1.1rem; }

/* Contraste del cuerpo del articulo.
   main.css:161 pinta CUALQUIER <p> con --text-light (#7F8C8D): 3,24:1 sobre el
   fondo real de la pagina (#F5F7FA) y 3,48:1 sobre blanco, medido con CDP a
   17 px y peso 400. AA pide 4,5:1 por debajo de 24 px, asi que hasta ahora
   TODOS los parrafos de los nueve articulos, en los dos idiomas, estaban por
   debajo del minimo. Aqui no habia ninguna regla de color, asi que nada lo
   sobrescribia.
   Es el mismo arreglo que ya lleva la ficha de circuito
   (public/assets/css/pages/product.css:28-35) con el mismo comentario. No se
   toca main.css: el cambio se queda dentro del blog.
   Se incluye .lead —el resumen del articulo, 20 px y peso 300— y las celdas de
   la tabla de cierres, que tambien heredaban el gris. */
.blog-article p,
.blog-article li,
.blog-article dd,
.blog-article td,
.blog-article .lead {
    color: var(--text-dark);
}

.blog-article ul,
.blog-article ol {
    margin-bottom: 1.25rem;
    padding-left: 1.35rem;
}

.blog-article li { margin-bottom: .5rem; }

/* Los enlaces internos del cuerpo son la mitad del trabajo de estas paginas:
   se subrayan siempre, para que se distingan del texto en negrita. */
.blog-article a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-article img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: .5rem 0 1.25rem;
}

/* La tabla comparativa del articulo pilar no cabe en 390 px. Se deja
   desbordar con barra propia en vez de romper la maqueta de la pagina. */
.blog-article .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.35rem;
}

.blog-article table {
    width: 100%;
    /* 42rem es el ancho a partir del cual las celdas de la tabla comparativa
       dejan de partirse en cuatro lineas en un telefono. Cabe de sobra en un
       portatil y en movil se desplaza dentro de .table-wrap, no en la pagina. */
    min-width: 42rem;
    border-collapse: collapse;
    font-size: .94rem;
}

.blog-article th,
.blog-article td {
    border: 1px solid #e5e7eb;
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}

.blog-article thead th {
    background: #f3f4f6;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .blog-article { font-size: 1rem; }
    .blog-article h2 { font-size: 1.25rem; margin-top: 1.9rem; }
    .blog-article h3 { font-size: 1.06rem; }
}

/* --------------------------------------------------- firma y caja de autor
   Fase 4 (E-E-A-T). La firma "Por {nombre}" va en la linea de meta, encima
   del articulo; la caja va debajo del cuerpo (partials/blog-author.php).
   Ambas salen de authors.json a traves de Author::forPost(): si nadie firma,
   no existen. hub.css lleva un esqueleto de las mismas clases para las
   paginas que si lo cargan; el blog no lo carga, asi que aqui esta la version
   completa. */

.blog-article-byline a {
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: none;
}

.blog-article-byline a:hover { text-decoration: underline; }

.blog-author {
    /* main.css:1108 declara "aside { min-height: 100vh }" para la barra del
       panel y alcanza a cualquier <aside>: sin esto la caja de autor media
       una pantalla entera de blanco (844 px a 390 de ancho, medido por CDP). */
    min-height: 0;
    margin: 2.25rem 0 0.5rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #C2410C;
    border-radius: 12px;
    background: #fff;
}

.blog-author__heading {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #374151;
    margin: 0 0 .85rem;
}

.blog-author__inner {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

.blog-author__photo { flex: 0 0 auto; }

/* Con .blog-article delante: la caja vive dentro del articulo y la regla
   ".blog-article img" (height:auto, radio de 12 px) tiene mas peso que una
   clase sola; sin esto el retrato salia como rectangulo de 72x101. */
.blog-article .blog-author__img,
.blog-author__img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    /* Los retratos son verticales (900x1350): el rostro queda arriba. */
    object-position: 50% 18%;
    display: block;
    margin: 0;
}

.blog-author__body { min-width: 0; flex: 1 1 auto; }

.blog-author__name {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .2rem;
}

.blog-author__name a { color: var(--text-dark); text-decoration: none; }
.blog-author__name a:hover { text-decoration: underline; }

.blog-author__role {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin: 0 0 .5rem;
    font-size: .92rem;
    color: #4b5563;
}

.blog-author__credential { color: #0f172a; font-weight: 600; }
.blog-author__credential .bi { color: #C2410C; }

.blog-author__bio {
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 .6rem;
    color: var(--text-dark);
}

.blog-author__links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0;
    font-size: .92rem;
}

.blog-author__link {
    color: #0a6fb3;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 575px) {
    .blog-author { padding: 1rem 1rem; }
    .blog-author__inner { gap: .85rem; }
    .blog-article .blog-author__img,
    .blog-author__img { width: 72px; height: 72px; }
}

/* ------------------------------------------------ destinos de este articulo
   partials/product-destinations.php pinta las mismas clases que en las
   fichas de producto; el blog no carga hub.css, asi que las reglas se
   repiten aqui, identicas a las de hub.css. Si cambian alla, cambian aqui. */

.blog-article .hub-chips-block { margin: 1.5rem 0 .5rem; }

.blog-article .hub-chips-block__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}

.blog-article .hub-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.blog-article .hub-chips li { margin: 0; }

.blog-article .hub-chip {
    display: inline-block;
    padding: .4rem .9rem;
    border: 1px solid var(--primary-color, #0d6efd);
    border-radius: 999px;
    color: var(--primary-color, #0d6efd);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-article .hub-chip:hover,
.blog-article .hub-chip:focus-visible {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}