/* =============================================================================
 * KS-Semilla Nutriente: NtBitacora - nt-bitacora.css
 * -----------------------------------------------------------------------------
 * Styles for the blog listing page and its components.
 * Follows KS-Semilla's component-based design philosophy.
 * ============================================================================= */

:root {
  --ks-bitacora-font-family: 'Roboto', 'tahoma', sans-serif;
  --ks-color-background: #FFFFFF;
  --ks-border-color: #e0e0e0;
  --ks-border-radius: 0.8rem;
  --ks-card-shadow: 0 4px 6px rgba(0,0,0,0.05);
  --ks-color-primary: #007647;
  --ks-color-text: #333333;
  --ks-color-text-off: #CCC;
  --ks-color-text-light: #555;
  --ks-color-background-alt: #f8f9fa;
}

.txt-primary {
  color: var(--ks-color-primary);
}

.show-numbers li {
  list-style-type: decimal !important;   /* números 1, 2, 3... */
  list-style-position: inside !important; /* opcional: coloca los números dentro del bloque */
  display: list-item !important;
}

.show-discs li {
  list-style-type: disc !important;      /* discos sólidos • */
  list-style-position: inside !important; /* opcional */
  display: list-item !important;
}

.a11y-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.blog-listing-section div {
    font-family: var(--ks-bitacora-font-family);
}

/* --- 1. Layout and Grid --- */
.blog-listing-section .section-header {
    text-align: center;
    margin-bottom: 4rem; /* var(--ks-space-lg) */
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column on mobile (mobile-first) */
    gap: 3rem; /* Consistent spacing between cards */
}

/* On tablets and larger, switch to a 2-column grid */
/*@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}*/

/* On large desktops, switch to a 3-column grid */
/*@media (min-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}*/

/* On large desktops, switch to a 3-column grid */
/*@media (min-width: 1600px) {
    .blog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}*/

.blog-page-section {
  padding-top: clamp(5rem, 8vw, 8rem);
}

.blog-section-content {
    width: 100%;
    padding: 0 3rem;
    /* Configurable blog width
    margin-left: auto;
    margin-right: auto;
    max-width: 114rem;*/
}

.blog-listing-section .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.blog-grid {
    display: grid;
    gap: 3rem;
    /* This single line replaces all media queries for the column count */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}



/* --- 2. Blog Card Component --- */

.blog-card {
    background-color: var(--ks-color-background);
    border: 1px solid var(--ks-border-color);
    border-radius: var(--ks-border-radius);
    box-shadow: var(--ks-card-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
}

.blog-card__image-container {
    /* This is the key to the ratio. The container defines the shape. */
    aspect-ratio: 16 / 9;
    overflow: hidden; /* Hide the parts of the image that are cropped */
    background-color: var(--ks-color-background-alt); /* Background color while loading the image */
}

.blog-card__image {
    /* And this is the key for the image. The image fills the container. */
    display: block;
    width: 100%;
    height: 100%; /* Ensures the image fills the height of the container */
    object-fit: cover; /* Maintains aspect ratio, fills space, and trims excess */
    object-position: center; /* Center the image within the crop */
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__image {
    transform: scale(1.05);
}

.blog-card__header {
    padding: 2rem 2rem 1.5rem 2rem;
    border-bottom: 1px solid var(--ks-border-color);
}

.blog-card__title {
    font-family: var(--ks-bitacora-font-family);
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 1.3;
    margin: 0 0 1rem 0;

    max-height: 12rem; 
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Maximum number of lines to display */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__title-link {
    text-decoration: none;
    color: var(--ks-color-text);
}

.blog-card__title-link:hover {
    color: var(--ks-color-primary);
}

.blog-card__meta {
    font-size: 1.4rem;
    color: var(--ks-color-text-light);
}

.blog-card__meta,
.post__meta {
    display: flex;
    align-items: center; 
    flex-wrap: wrap; /* Allows elements to wrap to the next line if there is no space */
    gap: 0.8rem; /* Space between author, date, etc. */
}

.blog-card__reading-time,
.post__reading-time {
    margin-left: auto; /* Push this element to the end of the flex container */
    display: inline-flex; /* Allows you to align the icon and text within */
    align-items: center;
    gap: 0.5rem; /* Space between the icon and the text */
}

.blog-card__excerpt {
    padding: 1.5rem 2rem 0 2rem;
    font-size: 1.6rem;
    color: var(--ks-color-text-light);
    /*flex-grow: 1;*/ /* This makes the card bodies equal height */

    display: -webkit-box;
    -webkit-line-clamp: 3; /* Maximum number of lines to display */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__tags {
    margin-bottom: 1.5rem;
}

.blog-card__tag {
    display: inline-block;
    background-color: var(--ks-color-background-alt);
    color: var(--ks-color-text-light);
    padding: 0.4rem 1rem;
    border: 0.1rem solid var(--ks-color-primary);
    border-radius: 0.8rem;
    font-size: 1.2rem;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s;
}

.blog-card__tag:hover {
    border: 0.1rem solid var(--ks-border-color);
    font-weight: bold;
    text-decoration: none;
}

.blog-card__tag.is-active {
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--ks-color-text-off);
}

.blog-card__footer {
    padding: 1.5rem 2rem 2rem 2rem;
    margin-top: auto; /* Pushes footer to the bottom */
    text-align: right;    
}

.blog-card__footer a {
    font-size: 1.1rem;
}

.blog-card__read-more {
    font-family: var(--ks-bitacora-font-family);
    font-weight: 700;
    text-decoration: none;
    color: var(--ks-color-primary);
}

.blog-card__read-more:hover {
    text-decoration: underline;
}

/* A simple box for "no posts found" message */
.notice-box {
    text-align: center;
    padding: 4rem;
    background-color: var(--ks-color-background-alt);
    border-radius: var(--ks-border-radius);
}

/* --- 3. Paginator Component --- */
/* using native styles (ks-rd-styles.css) */

/* --- 4. Search Form Component --- */

.blog-search-form-container {
    max-width: 60rem; /* 600px */
    margin: 3rem auto 2rem auto; 
}

.blog-search-form__input-group {
    display: flex;
    width: 100%;
}

.blog-search-form-container input[type="search"] {
    flex-grow: 1; 
    height: 4.6rem;
    margin-right: 0.8rem;
    padding: 1.2rem 1.5rem;
    font-size: 1.6rem;
    font-family: var(--ks-bitacora-font-family);
    color: var(--ks-color-text, #333333);
    background-color: var(--ks-color-background, #FFFFFF);    
}

.blog-search-form-container button[type="submit"] {
    border: none;
    background-color: var(--ks-color-primary, #007647);
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-size: 2.4rem;
    font-family: var(--ks-bitacora-font-family);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.blog-search-form-container button[type="submit"]:hover {
    background-color: var(--ks-color-dark, #0B3948);
}

/* Core utility class to visually hide labels but keep them for accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 5. Single Post View Component --- */

.section-content--narrow {
    max-width: 80rem; /* 800px, ideal for reading text */
}

.post {
    font-family: var(--ks-bitacora-font-family);
}

.post__header {
    margin-bottom: 3rem;
    text-align: center;
}

.post__image-container {
    margin-bottom: 3rem;
    border-radius: var(--ks-border-radius, .8rem);
    overflow: hidden;
    box-shadow: var(--ks-card-shadow, 0 4px 6px rgba(0,0,0,0.05));
}

.post__image {
    display: block;
    width: 100%;
    height: auto;
}

.post__title {
    font-family: var(--ks-bitacora-font-family);;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ks-color-text, #333333);
    margin: 0 0 1.5rem 0;
}

.post__meta-content {
    display: flex;
}

.post__meta {
    font-size: 1.5rem;
    color: var(--ks-color-text-light, #555);
}

.post__content {
    display: grid;
    grid-template-columns: 
        [full-start] minmax(1rem, 1fr) 
        [bleed-start] minmax(auto, 75ch) [bleed-end]
        minmax(1rem, 1fr) [full-end];
    hyphens: auto;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--ks-color-text, #333333);
}

.post__content > * {
    grid-column: bleed; /* Nombre de nuestra columna central */
}

.post__content figure {
    /*
    <figure>
        <img src="/path/to/your/image.jpg" alt="Image description">
        <figcaption>This is the legend or caption.</figcaption>
    </figure>    
    */
    margin: 3rem 0; /* Vertical spacing*/
}

.post__content figcaption {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    color: #555;
    text-align: center;
}

/* We instruct it to occupy the space from the beginning 
   of the first column (full-start) to the end of the last (full-end). */
.post__content .image-wide {
    /*     
    <figure class="image-wide">
        <img src="/path/to/your/wide-image.jpg" alt="Wide image description">
    </figure>    
    */
    grid-column: full;
    width: 100%;
}

/* This gallery also breaks the text container */
.post__content .image-gallery-2col {
    /*
    <div class="image-gallery-2col">
        <figure>
            <img src="/path/to/image1.jpg" alt="Description 1">
            <figcaption>Legend 1</figcaption>
        </figure>
        <figure>
            <img src="/path/to/image2.jpg" alt="Description 2">
            <figcaption>Legend 2</figcaption>
        </figure>
    </div>
    */
    grid-column: full;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; /* Espacio entre las imágenes */
    margin: 3rem 0;
}

.post__content h2,
.post__content h3 {
    font-family: var(--ks-bitacora-font-family);;
    margin-top: 4rem;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.post__content p,
.post__content ul,
.post__content ol,
.post__content blockquote {
    margin-bottom: 2rem;
}

.post__content a {
    border: 0.1rem solid var(--ks-color-primary);
    color: var(--ks-color-primary, #007647);
    /*text-decoration: underline;*/
}

.post__content a:hover {
    text-decoration: none;
}

.whatsapp-contact-section a {
    border: none;
    color: #FFF;
}

.post__content a.blue-link-b {
    border: 0.1rem solid #0A7EF5;
    color: #0A7EF5;
    font-weight: bold;
    padding: 0.3rem 0.5rem;
}

.post__content a.blue-link-b:hover{
    text-decoration: underline;
}

.post__footer {
    padding-top: 2rem;
    /*border-top: 1px solid var(--ks-border-color, #e0e0e0);*/
}

.post__tags-label {
    font-weight: 700;
    margin-right: 1rem;
}

.post__tag {
    /* Reuse card label style */
    display: inline-block;
    background-color: var(--ks-color-background-alt);
    color: var(--ks-color-text-light);
    padding: 0.4rem 1rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    text-decoration: none;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s;
}

.post__tag:hover {
    font-weight: bold;
    text-decoration: none;
}

/* --- 6. Single Post Layout & Sidebar --- */

.post-layout {
    display: grid;
    grid-template-columns: 1fr; /* 1 column on mobile (mobile-first) */
    gap: 4rem; /* Space between content and sidebar on mobile */
}

/* On tablets and above, we create the 2-column layout */
@media (min-width: 992px) {
    .post-layout {
        /* The main column (2fr) will be twice as wide as the sidebar (1fr) */
        grid-template-columns: 2fr 1fr;
        gap: 5rem;
    }
}

.post-sidebar {
    /* Container for widgets */
}

.sidebar-widget {
    margin-bottom: 4rem; 
}

.sidebar-widget:last-child {
    /*margin-bottom: 0;*/
}

.sidebar-widget__title {
    font-family: var(--ks-bitacora-font-family,);
    font-size: 2rem;
    border-bottom: 2px solid var(--ks-border-color, #e0e0e0);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.sidebar-widget__list {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 0;
    font-size: 1.5rem;
}

.sidebar-widget__list li {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ks-border-color, #e0e0e0);
    margin-bottom: 1rem;
    list-style-type: disc;
}

.sidebar-widget__list a {
    text-decoration: none;
    color: var(--ks-color-text-light, #555);
}

.sidebar-widget__list a:hover {
    color: var(--ks-color-primary, #007647);
}


/* --- 7. Component: Author Bio Widget --- */

/* Main Widget Container */
.author-bio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--ks-color-background-alt, #f8f9fa);
    border-radius: var(--ks-border-radius, 8px);
}

/* The Circular Avatar */
.author-bio__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* The key to making it circulate */
    overflow: hidden; /* Ensures the image is cropped to the shape of the circle */
    border: 3px solid var(--ks-color-background, #fff);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff; /* Background in case the image takes a long time to load */
    align-self: center; 
}

.author-bio__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Author's Name */
.author-bio__name {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.5rem 0 0 0;
    color: var(--ks-color-dark, #0B3948);
}

/* Text of the Biography */
.author-bio__text {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--ks-color-text-light, #555);
    margin: 0;
    width: 100%;
}

/* Social Media Icons */
.author-bio__social {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    width: 100%; 
    justify-content: flex-start; /* Align the icons to the left */
}

.author-bio__social a {
    color: var(--ks-color-text-light, #555);
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
    text-decoration: none;
}

.author-bio__social a:hover {
    color: var(--ks-color-primary, #007647);
    transform: scale(1.1);
}

.author-bio__social i {
    font-size: 2.2rem; /* Icon size */
}


/* --- 8. Component: Tag Cloud Widget --- */

/* Main widget container */
.tag-cloud {
    /* Inherits styles from .sidebar-widget, doesn't need much more */
}

/* Label container (Use Flexbox for layout) */
.tag-cloud__container {
    display: flex;
    flex-wrap: wrap; 
    gap: 0.8rem; /* Uniform space between pills */
}

/* Individual "pill" style (the link) */
.tag-cloud__tag {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ks-color-text-light, #555);
    background-color: var(--ks-color-background-alt, #f8f9fa);
    border: 1px solid var(--ks-border-color, #e0e0e0);
    padding: 0.5rem 1.2rem;
    border-radius: 0.8rem; 
    text-decoration: none; 
    white-space: nowrap; 
    transition: all 0.2s ease-in-out;
}

/* Hover effect for interaction  */
.tag-cloud__tag:hover {
    background-color: var(--ks-color-primary, #007647);
    border-color: var(--ks-color-primary, #007647);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-decoration: none; 
}    


/* --- 9. Component: Social Share Widget --- */

.social-share__container {
    display: flex;
    justify-content: center; /* Center icons if there is space */
    gap: 1.5rem; /* Space between icons */
}

.social-share__link {
    display: inline-block;
    color: var(--ks-color-text-light, #555);
    transition: all 0.2s ease-in-out;
}

.social-share__link:hover {
    transform: scale(1.15) rotate(5deg); /* Dynamic mouseover effect */
    color: var(--ks-color-primary, #007647);
}

.social-share__link span {
    font-size: 2.8rem; /* Share icon size */
    vertical-align: middle;
}


/* --- 10. Component: Related Posts Section --- */

.related-posts-section {
    background-color: var(--ks-color-background-alt, #f8f9fa);
    border-top: 1px solid var(--ks-border-color, #e0e0e0);
}

/* For grids with 3 or fewer cards, we make them take up less space on large screens */
.related-posts-section .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --- 11. Component: Sticky Sponsor Widget --- */
.sticky-widget {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 16rem; 
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

.sponsor-banner {
    display: flex;
    justify-content: center;
}

.sponsor-banner img {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto; 
    border-radius: 0.8rem; /* Opcional: para redondear las esquinas del banner */
}

.sponsor-impression-image {
    border:0;
    width:1px;
    height:1px;
    position:absolute;
    left:-9999px;
}

.sticky-widget.is-fading-out {
    opacity: 0;
    visibility: hidden;
}

/**
 * --- 12. Estilos de Contenido Reutilizables para Posts (NtBitacora) ---
 *
 * Estos estilos están diseñados para dar formato a los elementos
 * comunes dentro del cuerpo de un post.
*/

/* --- Variables de Color (Basadas en tu Manual de Marca) --- */
:root {
    --color-text-body: #333333;
    --color-accent-blue: #0A7EF5;
    --color-accent-gray: #C6C6C6;
    --color-borde-sutil: #e0e0e0;
}

/* --- Estructura Base del Contenido (Grid) --- */
/*
 * Asumimos que el contenedor del contenido del post (.post-content-body)
 * usa CSS Grid para centrar el texto en una columna legible (75ch)
 * y permitir que otros elementos como .image-wide se expandan.
 *
*/
.post-content-body {
    display: grid;
    grid-template-columns: 1fr min(75ch, 100%) 1fr;
    gap: 1rem; /* Espacio entre columnas */
}

/* Por defecto, todos los elementos hijos van a la columna central */
.post-content-body > * {
    grid-column: 2;
}

/*
 * 1. Estilo para el Párrafo de Introducción (.lead)
 * --------------------------------------------------------------------
 * Hace que el primer párrafo sea más grande y capture la atención,
 * sirviendo como un "gancho" visual.
*/
.lead {
    font-size: 1.25em;   /* Un 25% más grande que el texto normal */
    line-height: 1.6;
    color: var(--color-text-body);
    margin-bottom: 2em; /* Más espacio después para separarlo del cuerpo */
}


/*
 * 2. Estilo para Citas en Bloque (.styled-quote)
 * --------------------------------------------------------------------
 * Formatea las citas textuales para que destaquen del resto del
 * contenido de una forma elegante y profesional.
*/
.styled-quote {
    margin: 2em 0;
    padding-left: 1.5em;
    border-left: 6px solid var(--color-accent-gray);
    font-style: italic;
    color: #555; /* Un gris ligeramente más suave que el texto principal */
}

/* Párrafos dentro de la cita, para un control más fino */
.styled-quote p {
    margin-bottom: 1em;
}

.styled-quote p:last-child {
    margin-bottom: 0;
}


/*
 * 3. Estilo para Imágenes de Ancho Completo (.image-wide)
 * --------------------------------------------------------------------
 * Permite que una imagen (<figure>) rompa la columna de texto
 * principal y ocupe todo el ancho disponible del grid.
 *
*/
.image-wide {
    grid-column: 1 / -1; /* Ocupa desde la primera a la última columna del grid */
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
}

/* --- Estilos Adicionales para Consistencia --- */

/* Estilo para las leyendas de las imágenes (figcaption) */
figure figcaption {
    text-align: center;
    font-size: 0.9em;
    color: #777;
    margin-top: 0.75em;
}

/* Asegura que los títulos y listas dentro del post tengan buen espaciado */
.post-content-body h3 {
    margin-top: 2em;
    margin-bottom: 1em;
}

.post-content-body ul,
.post-content-body ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.post-content-body li {
    margin-bottom: 0.5em;
}