/*---------------------------------------------------------------------------------

	Theme Name: Baskerville Childe
	Template: baskerville
    Text Domain: baskerville
	Version: 2.3.1
	Description: Baskerville is a beautiful, responsive and retina-ready masonry theme for hoarders. It's the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links. Features responsive design, retina-ready assets, full-width header image, Block Editor support, support for all post formats, custom logo upload, four page templates (including a contributors template), editor styling, like functionality via the ZillaLikes plugin and translation-ready code. Demo: https://andersnoren.se/themes/baskerville/
	Tags: blog, three-columns, right-sidebar, custom-colors, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, portfolio, grid-layout, block-styles, wide-blocks
	Author: Anders Norén
	Author URI: https://andersnoren.se
	Theme URI: https://andersnoren.se/teman/baskerville-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Requires PHP: 5.4
	Tested up to: 6.7

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)


/* ==========================================================================
   CSS COLUMNS - 4 COLUMNAS SIN JAVASCRIPT
   ========================================================================== */

/* Resetear contenedor */
.posts {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    
    /* CSS Columns - 3 columnas por defecto */
    column-count: 3 !important;
    column-gap: 30px !important;
    column-fill: balance !important;
    
    /* Resetear cualquier otro estilo */
    float: none !important;
    clear: both !important;
}

/* Cada post */
.post-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    
    /* Evitar que se rompan entre columnas */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    -moz-column-break-inside: avoid !important;
    
    /* Resetear cualquier otro estilo */
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   PANTALLAS GRANDES - 4 COLUMNAS (1600px o más)
   ========================================================================== */

@media screen and (min-width: 1600px) {
    
    /* Contenedor más ancho */
    .section-inner.content {
        max-width: 95% !important;
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 4 columnas */
    .posts {
        column-count: 4 !important;
        column-gap: 30px !important;
        padding: 0 20px !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   PANTALLAS MUY GRANDES - 5 COLUMNAS (2200px o más)
   ========================================================================== */

@media screen and (min-width: 2200px) {
    .posts {
        column-count: 5 !important;
        column-gap: 35px !important;
    }
}

/* ==========================================================================
   TABLETS - 2 COLUMNAS (700px - 1199px)
   ========================================================================== */

@media screen and (min-width: 700px) and (max-width: 1199px) {
    .posts {
        column-count: 2 !important;
        column-gap: 25px !important;
        padding: 0 15px !important;
    }
}

/* ==========================================================================
   MÓVIL - 1 COLUMNA (menos de 700px)
   ========================================================================== */

@media screen and (max-width: 699px) {
    .posts {
        column-count: 1 !important;
        column-gap: 0 !important;
        padding: 0 15px !important;
    }
}

/* ==========================================================================
   AJUSTES INTERNOS
   ========================================================================== */

/* Asegurar que el contenido no se rompa */
.post-container .post,
.post-container .hentry {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    -moz-column-break-inside: avoid !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

/* Ajustar sticky post para 4 columnas */
@media screen and (min-width: 1600px) {
    .post .sticky-post {
        right: 3% !important;
        height: 34px !important;
        width: 22px !important;
        background-size: 10px auto !important;
    }
    
    .post .sticky-post:after {
        border-width: 11px !important;
        top: 34px !important;
        margin-top: -11px !important;
    }
}

/* ==========================================================================
   PREVENIR QUE SCRIPTS MODIFIQUEN EL LAYOUT
   ========================================================================== */

/* Ignorar estilos inline que puedan añadirse */
.post-container[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Ignorar float inline */
.post-container[style*="float"] {
    float: none !important;
}

/* ==========================================================================
   LIMPIAR RESIDUOS DE ESTILOS ANTERIORES
   ========================================================================== */

/* Eliminar cualquier nth-child que pueda interferir */
.post-container:nth-child(4n+1),
.post-container:nth-child(3n+1),
.post-container:nth-child(2n+1),
.post-container:nth-child(odd),
.post-container:nth-child(even) {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}

/* Eliminar pseudo-elementos que puedan interferir */
.posts:before,
.posts:after {
    display: none !important;
    content: none !important;
}

/* Asegurar que los posts tengan el mismo ancho */
.post-container .post {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   INFINITE SCROLL ESTILOS
   ========================================================================== */

.page-load-status {
    width: 100% !important;
    clear: both !important;
    padding: 20px 0 !important;
    text-align: center !important;
    font-size: 0.9em !important;
    color: #666 !important;
}

.page-load-status .infinite-scroll-request {
    display: none;
}

.page-load-status .infinite-scroll-request:before {
    content: "⏳ ";
}

.page-load-status .infinite-scroll-last {
    display: none;
}

.page-load-status .infinite-scroll-error {
    display: none;
    color: #e74c3c;
}

.infinite-scroll-request[style*="display: block"] {
    display: block !important;
}

.infinite-scroll-last[style*="display: block"] {
    display: block !important;
}

.infinite-scroll-error[style*="display: block"] {
    display: block !important;
}

.post-excerpt {
	padding: 3%!Important;
	background: #f9f9f9;
}


.offcanvas-navigation .navbar {
	background-color: #322b42 !important;
	border-bottom: 2px solid #C41313;
}

.navbar-brand {
	font-family: 'Pacifico', sans-serif;
}

.offcanvas-navigation .oc-logo-alt {
	font-size: 1.8rem;
}

/* ==========================================================================
   DESCRIPCIÓN DEL SITIO - SOLO EN PANTALLAS GRANDES
   ========================================================================== */

/* Ocultar por defecto en móviles */
.brand-description {
    display: none !important;
}

/* Mostrar solo en pantallas mayores a 768px */
@media (min-width: 769px) {
    .brand-description {
        display: inline-block !important;
        /* Posicionamiento con margin-left */
        padding-left: 15px !important;
        border-left: 2px solid rgba(255,255,255,0.2) !important;
        
        /* Estilos de fuente */
        font-family: 'Roboto', sans-serif !important;
        font-size: 0.95em !important;
        font-weight: 300 !important;
        color: #FFF !important;
        line-height: 1.4 !important;
        position: relative;
        left: -20%;

    }
}

body.single .content {
	width: 96.5%!important;
}

.social-icons .social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    color: #999 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.social-icons .social-icon:hover {
    background: #13C4A5 !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}