/* ==========================================================================
   MEXNOTICIAS - SUPERGRID PORTADA STYLESHEET
   ========================================================================== */

.mex-grid-wrapper { 
    width: 100%; 
    max-width: 1210px;
    margin: 30px auto 50px auto; 
    padding: 0 0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif; 
}

.mex-grid-header-container { 
    width: 100%; 
    text-align: center; 
    margin-bottom: 10px; 
    position: relative; 
    flex-shrink: 0;
}

.mex-grid-header-container::before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background-color: #181818; 
    transform: translateY(-50%); 
    z-index: 1; 
}

.mex-grid-header-label { 
    display: inline-block; 
    background-color: #ff005b; 
    color: #ffffff; 
    font-family: 'Oswald', sans-serif; 
    font-size: 16px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 5px 13px; 
    line-height: 1; 
    border-radius: 2px; 
    transform: skewX(-15deg); 
    transform-origin: center center; 
    position: relative; 
    z-index: 2; 
}

/* GRID CONTENEDOR: 320px | 540px | 320px */
.mex-grid-container { 
    display: grid; 
    grid-template-columns: 320px 540px 320px; 
    gap: 15px; 
    align-items: start;
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0;
}

.mex-grid-col-1,
.mex-grid-col-2,
.mex-grid-col-3 {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* RESET DE MÁRGENES Y TIPOGRAFÍAS */
.mex-grid-title-rank,
.mex-grid-title-hero,
.mex-grid-title-sub,
.mex-grid-title-mini {
    margin: 0 !important;
    padding: 0 !important;
}

.mex-grid-meta, 
.mex-grid-meta-white { 
    font-size: 11px; 
    text-transform: uppercase; 
    font-weight: 700; 
    margin: 0 0 10px 0 !important; 
    padding: 0 !important;
    line-height: 1;
}

.mex-grid-meta { color: #777777; }
.mex-grid-meta span, 
.mex-grid-meta-white span { color: #ff005b; } 
.mex-grid-meta-white { color: #dddddd; }

/* COLUMNA 1: AJUSTE DE ALTURA PARA REVELAR LAS 5 ENTRADAS + ANUNCIO */
.mex-grid-rank-list { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    min-height: 0;
}

.mex-grid-card-rank { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    min-width: 0;
    flex-shrink: 0;
}

.mex-grid-rank-thumb { 
    position: relative; 
    width: 320px; 
    height: 170px; 
    overflow: hidden; 
    border-radius: 3px; 
    flex-shrink: 0; 
}

.mex-grid-img-rank { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important;
}

.mex-grid-rank-number { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #ff005b; 
    color: #ffffff; 
    font-family: 'Oswald', sans-serif; 
    font-size: 18px; 
    font-weight: 700; 
    width: 30px; 
    height: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); 
    z-index: 2;
}

.mex-grid-title-rank a { 
    font-family: 'Oswald', sans-serif; 
    font-size: 15px; 
    font-weight: 700; 
    color: #303030; 
    text-decoration: none; 
    line-height: 1.15; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis;
    word-break: break-word;
}

.mex-grid-ad-slot-rank { 
    width: 300px; 
    height: 100px; 
    margin: 2px auto; 
    background-image: linear-gradient(120deg, #fdfbfb 0%, #FCFCFC 100%);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-shrink: 0; 
}

/* COLUMNA 2: 540px ANCHO - HERO 600px / SUBNOTICIAS 368px (INTACTA) */
.mex-grid-col-2 {
    gap: 15px;
}

.mex-grid-hero-link, 
.mex-grid-sub-link { 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    text-decoration: none; 
    z-index: 1; 
    overflow: hidden;
}

.mex-grid-card-hero { 
    width: 540px;
    max-width: 100%;
    height: 600px; 
    position: relative; 
    border-radius: 3px; 
    overflow: hidden; 
    background: #000000; 
    flex-shrink: 0;
}

.mex-grid-hero-bg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

.mex-grid-img-hero { 
    width: 100% !important; 
    min-width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
}

.mex-grid-gradient-mask { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 85%; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 100%) !important; 
    z-index: 20 !important; 
    pointer-events: none; 
}

.mex-grid-hero-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 25px 20px; 
    box-sizing: border-box;
    z-index: 30 !important; 
}

.mex-grid-title-hero { 
    font-family: 'Oswald', sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #ffffff; 
    line-height: 1.15; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.mex-grid-card-sub { 
    width: 540px;
    max-width: 100%;
    height: 368px; 
    position: relative; 
    border-radius: 3px; 
    overflow: hidden; 
    background: #000000; 
    flex-shrink: 0;
}

.mex-grid-sub-bg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

.mex-grid-img-sub { 
    width: 100% !important; 
    min-width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
}

.mex-grid-gradient-mask-sub { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 80%; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 100%) !important; 
    z-index: 20 !important; 
    pointer-events: none; 
}

.mex-grid-sub-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box;
    z-index: 30 !important; 
}

.mex-grid-title-sub { 
    font-family: 'Oswald', sans-serif; 
    font-size: 22px; 
    font-weight: 700; 
    color: #ffffff; 
    line-height: 1.2; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.mex-grid-excerpt-hero, 
.mex-grid-excerpt-sub { 
    font-family: 'Montserrat', sans-serif; 
    color: rgba(255,255,255,0.95); 
    font-size: 13px; 
    line-height: 1.4; 
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* COLUMNA 3: 9 ENTRADAS + ANUNCIO (INTACTA) */
.mex-grid-ad-slot { 
    width: 300px; 
    height: 250px; 
    background-image: linear-gradient(120deg, #fdfbfb 0%, #FCFCFC 100%); 
    margin: 0 auto 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-sizing: border-box; 
    overflow: hidden; 
    flex-shrink: 0; 
}

.mex-grid-ad-placeholder { 
    color: #aaa; 
    font-size: 10px; 
}

.mex-grid-sidebar-list { 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
    min-height: 0;
}

.mex-grid-card-mini { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%;
    flex-shrink: 0;
}

.mex-grid-mini-thumb { 
    width: 115px; 
    height: 90px; 
    flex-shrink: 0; 
    border-radius: 3px; 
    overflow: hidden; 
}

.mex-grid-img-mini { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.mex-grid-mini-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    padding: 0;
    margin: 0;
    min-width: 0;
    overflow: hidden;
}

.mex-grid-title-mini a { 
    font-family: 'Oswald', sans-serif; 
    font-size: 15px; 
    font-weight: 700; 
    color: #303030; 
    text-decoration: none; 
    line-height: 1.15; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis;
    word-break: break-word;
}

/* RESPONSIVE */
@media (min-width: 768px) and (max-width: 1199px) {
    .mex-grid-container { grid-template-columns: 320px 1fr 320px; gap: 10px; }
    .mex-grid-card-hero, .mex-grid-card-sub { width: 100%; }
}

@media (max-width: 767px) {
    .mex-grid-wrapper { padding: 0 15px; margin-bottom: 30px; }
    .mex-grid-container { display: flex; flex-direction: column; gap: 30px; }
    .mex-grid-col-1, .mex-grid-col-2, .mex-grid-col-3 { width: 100%; height: auto; }
    .mex-grid-card-rank { flex-direction: column; align-items: flex-start; }
    .mex-grid-rank-thumb { width: 100%; height: 145px; }
    .mex-grid-ad-slot-rank { width: 300px; height: 250px; }
    .mex-grid-card-hero { height: 380px; width: 100%; }
    .mex-grid-card-sub { height: 280px !important; width: 100%; }
}