/*Widget one*/
.magnav-featured-wrap {
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 20px;
    align-items: start;
}

/* MAIN POST */
.magnav-main-post img {
    width: 100%;
    height: auto;
    display: block;
}

.magnav-title {
    font-size: 2.7rem;
    line-height: 1.25;
    margin: 22px 0 8px;
    font-weight: 500;
    color: #000;
    text-align: center;
}

.magnav-author {
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #c8c8c8;
}

/* SIDEBAR POSTS */
.magnav-side-posts {
    display: flex;
    flex-direction: column;
}

.magnav-side-post {
    display: grid;
    grid-template-columns: 125px 1fr; /* 🔥 bigger image */
    gap: 10px;
    padding: 10px 0;
    /*border-bottom: 1px solid #808080; */
}

.magnav-side-post:first-child {
    padding: 0 0 10px 0;
}

.magnav-side-post:last-child {
    border-bottom: none;
}

.magnav-side-post img {
    width: 138px;
    height: 139px;
    object-fit: cover;
}

.magnav-side-post h4 {
    color: #000000;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 500;
    margin: 0 0 6px;
    font-weight: 500;
}

.magnav-side-post span {
    font-size: 11px;
    letter-spacing: 0.8px;
    color: #c8c8c8;
    display: block;
}

/*Permalink's underline remove*/
.magnav-featured-wrap a {
    text-decoration: none !important;
    color: inherit;
}


/* FORCE MOBILE VERTICAL LIST — FINAL OVERRIDE */
@media screen and (max-width: 1024px) {

    .magnav-featured-wrap {
        display: block !important;
    }

    .magnav-side-posts {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .magnav-side-post {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 10px 0 !important;
        /*border-bottom: 1px solid #e5e5e5 !important;*/
    }

    .magnav-side-post img {
        width: 96px !important;
        height: 96px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    .magnav-side-post h4 {
        font-size: 1rem !important;
        line-height: 1.35 !important;
        margin: 0 0 4px !important;
    }

    .magnav-side-post span {
        font-size: 11px !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
    }
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* TABLET / SMALL DESKTOP — MAIN + HORIZONTAL ROW */
@media (max-width: 980px) {

    .magnav-featured-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* FORCE ONE HORIZONTAL ROW */
    .magnav-side-posts {
        display: flex;
        flex-direction: column;
        gap: 18px;
        overflow-x: hidden;
    }

    .magnav-side-post {
        flex: 1 1 0;
        display: flex;
        flex-direction: row;
        border-bottom: none;
        padding: 0;
    }

    .magnav-side-post img {
        width: 128%;
        height: 128px;
        object-fit: cover;
    }

    .magnav-side-post h4 {
        font-size: 1rem;
        line-height: 1.3;
        margin: 8px 0 4px;
    }

    .magnav-side-post span {
        font-size: 10px;
    }
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ WIDGET 2 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/* ===== ROW LAYOUT WIDGET ------ Wdget TWO ===== */

.magnav-featured-row-wrap {
    width: 100%;
}

/* ROW POSTS CONTAINER */
.magnav-row-posts {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}
/* ROW POST CARD */
.magnav-row-post {
    text-decoration: none;
    color: inherit;
    display: block;
}

.magnav-row-post img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}


.magnav-row-post h4 {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
    font-weight: 500 !important;
    color: #000000;
}

/* SIMPLE HOVER */
.magnav-row-post:hover h4 {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* TABLET */
@media (max-width: 980px) {
    .magnav-row-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .magnav-row-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

.magnav-featured-row-wrap a {
    text-decoration: none !important;
    color: inherit;
}

.magnav-simple-row a,
.magnav-simple-column a {
    text-decoration: none !important;
    color: inherit;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ WIDGET 3 ROW ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

.magnav-simple-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}


.magnav-simple-card img {
    width: 278px;
    height: 278px;
    object-fit: cover;
    display: grid;
    margin-bottom: 8px;
    
}

.magnav-simple-card h4 {
    font-size: 0.983rem;
    margin: 0 0 4px;
}

.magnav-simple-card:hover h4 {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 980px) {
    .magnav-simple-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .magnav-simple-card img {
        /*width: 400px;*/
        /*height: auto;*/
        object-fit: cover;
        display: grid;
        margin-bottom: 8px;
        
    }
}

@media (max-width: 600px) {
    .magnav-simple-row {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ WIDGET 4 COLUMN ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

.magnav-simple-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.magnav-column-item {
    display: flex;
    gap: 12px;
    align-items: left;
}

/* COLUMN WIDGET IMAGE SIZE */
.magnav-simple-column .magnav-column-item img {
    width: 193px;
    height: 193px;
    object-fit: cover;
    display: block;
}


.magnav-column-item h4 {
    font-size: 1rem;
    margin: 0 0 4px;
}

.magnav-column-item:hover h4 {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 980px) {
    .magnav-simple-row .magnav-simple-card img {
        width: 193px;
        height: 193px;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 750px) {

    .magnav-simple-column {
    display: flex;
    flex-direction: column;
    } 
    
    .magnav-column-item {
        display: grid;
        grid-template-columns: 207px 1fr; /* 🔥 bigger image */
        gap: 10px;
        padding: 10px 0;
    }

    .magnav-simple-column .magnav-column-item img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }

    .magnav-column-item h4 {
        font-size: 1rem;
        line-height: 1.4;
        margin: 0 0 6px;
        font-weight: 500;
    }
    
    .magnav-simple-column:first-child {
        padding: 0 0 10px 0;
    }
}

/* ===== PREMIUM HORIZONTAL SLIDER (STABLE) ===== */

.magnav-premium-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* TRACK (MOVES) */
.magnav-slider-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

/* SLIDE */
.magnav-slide {
    min-width: 100%;
    box-sizing: border-box;
}

/* IMAGE RATIO LOCK */
.magnav-slide-image {
    display: block;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 1200 / 592;
    overflow: hidden;
    margin: 0 auto;
}

.magnav-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* REMOVE DEFAULT LINK UNDERLINE */
.magnav-premium-slider a {
    text-decoration: none !important;
    color: inherit;
}

/* TITLE */

/* SLIDER TITLE CENTER ALIGN */
.magnav-slide-title {
    display: block;
    margin-top: 1rem;
    text-align: center;
}

/*.magnav-slide-title {*/
/*    display: inline-block;*/
/*    margin-top: 1rem;*/
/*}*/

.magnav-slide-title h2 {
    font-size: clamp(1.2rem, 2vw, 2rem);
    line-height: 1.3;
    margin: 0;
    font-weight: 600;
    text-align: center;
}

/* SIMPLE HOVER */
.magnav-slide-title:hover h2 {
    text-decoration: underline 1px;
    text-underline-offset: 5px;
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .magnav-slide-title h2 {
        font-size: 22px;
    }
}

@media (max-width: 600px) {
    .magnav-slide-title h2 {
        font-size: 18px;
    }
}


/* =========================================
   MAGNAV EDITORIAL GRID (STABLE)
========================================= */

.magnav-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* ITEM */
.magnav-editorial-item {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

/* IMAGE WRAPPER */
.magnav-editorial-item img {
    width: 100%;
    aspect-ratio: 1 / 1;      /* 🔥 ALWAYS SQUARE */
    object-fit: cover;
    display: block;
    background: #f2f2f2;
}

/* TITLE */
.magnav-editorial-item h4 {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}

/* HOVER */
.magnav-editorial-item:hover h4 {
    text-decoration: underline 1px;
    text-underline-offset: 4px;
}

/* TABLET */
@media (max-width: 980px) {
    .magnav-editorial-grid {
        gap: 20px;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .magnav-editorial-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   MAGNAV FEATURE EDITORIAL (EXACT)  W-I-D-G-E-T # 7
========================================= */

.magnav-feature-editorial {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}

/* SIDE COLUMNS */
.magnav-editorial-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* SMALL POSTS */
.magnav-editorial-small {
    text-decoration: none;
    color: inherit;
}

.magnav-editorial-small img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.magnav-editorial-small h4 {
    margin: 8px 0 4px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.magnav-editorial-small:hover h4 {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* CENTER FEATURE */
.magnav-editorial-main {
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.magnav-editorial-main img {
    width: 100%;
    height: 655px;
    object-fit: cover;
    display: block;
}

.magnav-editorial-main h2 {
    margin: 14px 0 6px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

.magnav-editorial-main:hover h2 {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* META */
.magnav-category {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.magnav-author {
    display: block;
    font-size: 11px;
    margin-top: 4px;
}

/* ===== EDITORIAL LAYOUT (DESKTOP + TABLET) ===== */

.magnav-feature-editorial {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* SIDE COLUMNS */
.magnav-editorial-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

/* SIDE IMAGES */
.magnav-editorial-side img {
    width: 100%;
    height: 325px;
    object-fit: cover;
}

/* CENTER COLUMN */
.magnav-editorial-center img {
    width: 100%;
    height: 820px; /* ✅ desktop + tablet locked */
    object-fit: cover;
}

/* ===== WIDGET TWO – MOBILE IMAGE ONLY FIX ===== */
@media (max-width: 768px) {

    /* keep column stack */
    .magnav-feature-editorial {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
        padding: 0 14px !important; /* space from screen edges */
    }

    /* normalize ALL images */
    .magnav-feature-editorial img {
        width: 100% !important;
        height: 280px !important;
        max-height: 200px !important;
        object-fit: cover !important;
    }
    
    .magnav-editorial-main h2 {
        margin: 14px 0 6px;
        margin: 8px 0 4px;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;
        text-align: left;
    }
    
    .magnav-editorial-main {
    text-align: left !important;
    }

}