.elementor-kit-14{--e-global-color-primary:#0F1114;--e-global-color-secondary:#1D71B8;--e-global-color-text:#3C414C;--e-global-color-accent:#95C11F;--e-global-color-0e78c35:#FFFFFF00;--e-global-color-14e6ce3:#2563EB;--e-global-color-65b1ea6:#EEF0F2;--e-global-color-73d75f2:#F8FAFC;--e-global-color-05655cd:#F3F1ED;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.2em;--e-global-typography-accent-font-family:"Playfair";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0.2px;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-14 button,.elementor-kit-14 input[type="button"],.elementor-kit-14 input[type="submit"],.elementor-kit-14 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:10px 20px 10px 20px;}.elementor-kit-14 button:hover,.elementor-kit-14 button:focus,.elementor-kit-14 input[type="button"]:hover,.elementor-kit-14 input[type="button"]:focus,.elementor-kit-14 input[type="submit"]:hover,.elementor-kit-14 input[type="submit"]:focus,.elementor-kit-14 .elementor-button:hover,.elementor-kit-14 .elementor-button:focus{background-color:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-kit-14 e-page-transition{background-color:var( --e-global-color-secondary );}.elementor-kit-14 p{margin-block-end:1.5em;}.elementor-kit-14 a{color:var( --e-global-color-secondary );}.elementor-kit-14 a:hover{color:var( --e-global-color-accent );}.elementor-kit-14 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-14 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-14 h3{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-14 h4{color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:1.3em;}.elementor-kit-14 h5{color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;font-style:normal;text-decoration:none;line-height:1.3em;letter-spacing:0px;}.elementor-kit-14 h6{color:var( --e-global-color-secondary );}.elementor-kit-14 img{border-radius:0px 0px 0px 0px;}.elementor-kit-14 label{color:var( --e-global-color-secondary );}.elementor-kit-14 input:not([type="button"]):not([type="submit"]),.elementor-kit-14 textarea,.elementor-kit-14 .elementor-field-textual{color:var( --e-global-color-text );border-style:solid;border-width:1px 1px 1px 1px;border-radius:0px 0px 0px 0px;transition:400ms;}.elementor-kit-14 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-14 textarea:focus,.elementor-kit-14 .elementor-field-textual:focus{accent-color:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-14{line-height:var( --e-global-typography-text-line-height );}.elementor-kit-14 h1{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-14 h2{line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-14 h3{line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-14 button,.elementor-kit-14 input[type="button"],.elementor-kit-14 input[type="submit"],.elementor-kit-14 .elementor-button{line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-14{--e-global-typography-primary-font-size:32px;--e-global-typography-secondary-font-size:23px;line-height:var( --e-global-typography-text-line-height );}.elementor-kit-14 h1{line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-14 h2{line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-14 h3{line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-14 button,.elementor-kit-14 input[type="button"],.elementor-kit-14 input[type="submit"],.elementor-kit-14 .elementor-button{line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================
   MOBILE SECTION BACKGROUNDS
   Primary: .section-bg-light
   Alternate: .section-bg-warm
   ============================================ */

/* --- 1. Primary Section Background (Light Cool Gray) --- */
.section-bg-light {
    background-color: #F8FAFC;
    padding: 1.5rem 1.25rem;
    width: 100%;
}

/* --- 2. Alternate Section Background (Warm Off-White) --- */
.section-bg-warm {
    background-color: #F3F1ED;
    padding: 1.5rem 1.25rem;
    width: 100%;
}

/* --- 3. Section Divider (Spacer) --- */
.mobile-section-divider {
    height: 0.5rem;
    background: #E5E7EB; /* Gray divider */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- 4. Alternative: Divider with Line Only --- */
.mobile-section-divider-line {
    height: 0;
    border-bottom: 1px solid #E5E7EB;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- 5. Responsive: Small Mobile (≤ 480px) --- */
@media (max-width: 480px) {
    .section-bg-light,
    .section-bg-warm {
        padding: 1.25rem 1rem;
    }
    
    .mobile-section-divider {
        height: 0.4rem;
    }
}

/* ============================================
   SECTION TITLE HOME — Mobile Only (≤ 768px)
   Parent: .edition-section
   Title: .section-title-home
   ============================================ */

@media (max-width: 768px) {
    
    /* --- 1. Base Style --- */
    .section-title-home {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.85rem; /* 13.6px */
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #6B7280; /* Gray - default */
        
        display: inline-block;
        width: fit-content;
        text-decoration: none;
        margin: 0;
        padding: 0;
        padding-bottom: 0.15rem;
        
        /* Single underline */
        border-bottom: 2.5px solid transparent;
        transition: color 0.25s ease, border-color 0.25s ease;
    }
    
    /* --- 2. Activate when parent container (.edition-section) is touched --- */
    .edition-section:hover .section-title-home,
    .edition-section:active .section-title-home {
        color: #6B7280; /* Gray */
        border-bottom-color: #6B7280;
    }
    
    /* --- 3. Activate when title itself is touched/hovered --- */
    .section-title-home:hover,
    .section-title-home:active {
        color: #6B7280; /* Gray */
        border-bottom-color: #6B7280;
    }
}

/* ============================================
   SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
    
    .section-title-home {
        font-size: 0.7rem; /* 11.2px */
        letter-spacing: 0.08em;
        border-bottom-width: 2px;
    }
}

/* ============================================
   SIMPLE CARD CAROUSEL — Mobile Only (≤ 768px)
   Class: .card-simple
   ============================================ */

@media (max-width: 768px) {
    
    /* --- 1. Card Container --- */
    .card-simple {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 4px;
        padding: 0.75rem;
        width: 100%;
        
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.25s ease, 
                    transform 0.25s ease;
        
        cursor: pointer;
    }
    
    /* --- 2. Hover/Active State --- */
    .card-simple:hover,
    .card-simple:active {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }
    
    /* --- 3. Image --- */
    .card-simple .card-image {
        background: #F3F4F6;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        aspect-ratio: 4 / 3;
        position: relative;
    }
    
    .card-simple .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    
    /* Image zoom on hover/active */
    .card-simple:hover .card-image img,
    .card-simple:active .card-image img {
        transform: scale(1.03);
    }
    
    /* --- 4. Title --- */
    .card-simple .card-title {
        font-family: 'Archivo', sans-serif;
        font-weight: 600;
        font-size: 0.938rem; /* 15px */
        line-height: 1.25;
        letter-spacing: -0.01em;
        color: #111827;
        margin: 0;
        padding: 0.25rem 0 0 0;
        transition: color 0.2s ease;
    }
    
    /* Title link (if using <a>) */
    .card-simple .card-title a {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    /* Title hover/active */
    .card-simple:hover .card-title,
    .card-simple:active .card-title,
    .card-simple:hover .card-title a,
    .card-simple:active .card-title a {
        color: #4B5563;
    }
}

/* ============================================
   SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
    .card-simple {
        padding: 0.625rem;
    }
    
    .card-simple .card-title {
        font-size: 0.875rem; /* 14px */
    }
}

/* ============================================
   CAROUSEL NAVIGATION — Mobile Only (≤ 768px)
   Class: .simple-carousel (on the outer container)
   ============================================ */

@media (max-width: 768px) {
    
    /* --- Dots --- */
    .simple-carousel .swiper-pagination-bullet {
        background: #D1D5DB !important;
        opacity: 1 !important;
        width: 0.5rem !important;
        height: 0.5rem !important;
        border-radius: 9999px !important;
        transition: width 0.3s ease !important;
    }
    
    .simple-carousel .swiper-pagination-bullet-active {
        background: #111827 !important;
        width: 1.5rem !important;
        border-radius: 9999px !important;
    }
    
    /* --- Arrows (if enabled) --- */
    .simple-carousel .swiper-button-next,
    .simple-carousel .swiper-button-prev {
        color: #111827 !important;
        background: rgba(255, 255, 255, 0.9);
        width: 2.5rem !important;
        height: 2.5rem !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        display: flex !important;
    }
    
    .simple-carousel .swiper-button-next:after,
    .simple-carousel .swiper-button-prev:after {
        font-size: 1rem !important;
    }
    
    /* --- Hide arrows on very small screens (optional) --- */
    @media (max-width: 480px) {
        .simple-carousel .swiper-button-next,
        .simple-carousel .swiper-button-prev {
            display: none !important;
        }
    }
}

/* ============================================NEWS CAROUSEL — Fully Responsive
One slide visible on ALL devices
Desktop: 1 slide | Tablet: 1 | Mobile: 1
============================================ */

/* --- 1. Outer Container --- */
.news-carousel {
padding: 0 0 1.5rem 0;
width: 100%;
overflow: hidden;
position: relative;
}

/* --- 2. Slide Item (Same on all devices) --- */
.news-carousel .slide-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
padding: 0 0.75rem;
height: 100%;
}

/* Touch/Click feedback */
.news-carousel .slide-item:active {
transform: scale(0.98);
opacity: 0.9;
}

/* --- 3. Image Wrapper --- */
.news-carousel .image-wrapper {
background: #F3F4F6;
border-radius: 4px;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
}

.news-carousel .image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

.news-carousel .slide-item:active .image-wrapper img {
transform: scale(1.02);
}

/* --- 4. Category Tag --- */
.news-carousel .slide-category {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #2563EB;
transition: color 0.15s ease;
display: inline-block;
width: fit-content;
text-decoration: none;
}

.news-carousel .slide-item:active .slide-category {
color: #1D4ED8;
}

.news-carousel .slide-category::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #2563EB;
transition: width 0.25s ease;
}

.news-carousel .slide-item:active .slide-category::after {
width: 100%;
}

/* --- 5. Title (No ellipsis) --- */
.news-carousel .slide-title {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-size: 1.375rem;
line-height: 1.15;
letter-spacing: -0.02em;
color: #111827;
margin: 0;
padding: 0;
transition: color 0.2s ease;
}

/* Fallback .elementor-kit-14s (for JetEngine wrappers) */
.news-carousel .slide-item h1.slide-title,
.news-carousel .slide-item h2.slide-title,
.news-carousel .slide-item h3.slide-title,
.news-carousel .slide-item h4.slide-title,
.news-carousel .slide-item h5.slide-title,
.news-carousel .slide-item h6.slide-title,
.news-carousel .slide-item .slide-title {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-size: 1.375rem;
line-height: 1.15;
letter-spacing: -0.02em;
color: #111827;
margin: 0;
padding: 0;
transition: color 0.2s ease;
}

.news-carousel .slide-item:active .slide-title {
color: #4B5563;
}

/* ============================================
CAROUSEL NAVIGATION (Arrows & Dots)
============================================ */

/* --- Dots (all devices) --- */
.news-carousel .swiper-pagination-bullet {
background: #D1D5DB !important;
opacity: 1 !important;
width: 0.5rem !important;
height: 0.5rem !important;
border-radius: 9999px !important;
transition: width 0.3s ease !important;
}

.news-carousel .swiper-pagination-bullet-active {
background: #111827 !important;
width: 1.5rem !important;
border-radius: 9999px !important;
}

/* --- Arrows (visible on desktop & tablet) --- */
.news-carousel .swiper-button-next,
.news-carousel .swiper-button-prev {
color: #111827 !important;
background: rgba(255, 255, 255, 0.9);
width: 2.5rem !important;
height: 2.5rem !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background 0.2s ease, transform 0.2s ease;
}

.news-carousel .swiper-button-next:hover,
.news-carousel .swiper-button-prev:hover {
background: #FFFFFF !important;
transform: scale(1.05);
}

.news-carousel .swiper-button-next:after,
.news-carousel .swiper-button-prev:after {
font-size: 1rem !important;
}

/* --- Hide arrows on mobile (< 768px) --- */
@media (max-width: 767px) {
.news-carousel .swiper-button-next,
.news-carousel .swiper-button-prev {
display: none !important;
}
}

/* ============================================
DESKTOP STYLES (≥ 992px)
============================================ */

@media (min-width: 992px) {

/* Title - larger on desktop */
.news-carousel .slide-title,
.news-carousel .slide-item h1.slide-title,
.news-carousel .slide-item h2.slide-title,
.news-carousel .slide-item h3.slide-title,
.news-carousel .slide-item h4.slide-title,
.news-carousel .slide-item h5.slide-title,
.news-carousel .slide-item h6.slide-title,
.news-carousel .slide-item .slide-title {
font-size: 1.5rem; /* 24px - larger for desktop */
/* No line clamp - full title */
}

/* Category - slightly larger on desktop */
.news-carousel .slide-category {
font-size: 0.75rem; /* 12px */
}

/* Slide padding - more space on desktop */
.news-carousel .slide-item {
padding: 0 1rem;
}
}

/* ============================================
TABLET STYLES (768px - 991px)
============================================ */

@media (min-width: 768px) and (max-width: 991px) {

/* Title - medium size for tablet */
.news-carousel .slide-title,
.news-carousel .slide-item h1.slide-title,
.news-carousel .slide-item h2.slide-title,
.news-carousel .slide-item h3.slide-title,
.news-carousel .slide-item h4.slide-title,
.news-carousel .slide-item h5.slide-title,
.news-carousel .slide-item h6.slide-title,
.news-carousel .slide-item .slide-title {
font-size: 1.375rem; /* 22px */
/* No line clamp - full title */
}

/* Category - medium size */
.news-carousel .slide-category {
font-size: 0.7rem; /* 11.2px */
}

/* Show arrows on tablet */
.news-carousel .swiper-button-next,
.news-carousel .swiper-button-prev {
display: flex !important;
}

/* Smaller arrows on tablet */
.news-carousel .swiper-button-next,
.news-carousel .swiper-button-prev {
width: 2rem !important;
height: 2rem !important;
}

.news-carousel .swiper-button-next:after,
.news-carousel .swiper-button-prev:after {
font-size: 0.875rem !important;
}
}

/* ============================================
MOBILE STYLES (≤ 767px)
============================================ */

@media (max-width: 767px) {

.news-carousel .slide-item {
padding: 0 1.25rem;
}

.news-carousel .slide-title,
.news-carousel .slide-item h1.slide-title,
.news-carousel .slide-item h2.slide-title,
.news-carousel .slide-item h3.slide-title,
.news-carousel .slide-item h4.slide-title,
.news-carousel .slide-item h5.slide-title,
.news-carousel .slide-item h6.slide-title,
.news-carousel .slide-item .slide-title {
font-size: 1.375rem; /* 22px */
/* No line clamp - full title */
}

.news-carousel .slide-category {
font-size: 0.7rem;
}
}

/* ============================================
SMALL MOBILE (≤ 480px)
============================================ */

@media (max-width: 480px) {

.news-carousel .slide-item {
padding: 0 1rem;
}

.news-carousel .slide-title,
.news-carousel .slide-item h1.slide-title,
.news-carousel .slide-item h2.slide-title,
.news-carousel .slide-item h3.slide-title,
.news-carousel .slide-item h4.slide-title,
.news-carousel .slide-item h5.slide-title,
.news-carousel .slide-item h6.slide-title,
.news-carousel .slide-item .slide-title {
font-size: 1.125rem; /* 18px */
}

.news-carousel .slide-category {
font-size: 0.65rem;
}

.news-carousel .slide-category::after {
height: 1.5px;
}
}

/* ============================================
OPTIONAL: SLIDE ENTRY ANIMATION
============================================ */

.news-carousel .slide-item {
animation: fadeSlideUp 0.5s ease forwards;
opacity: 0;
}

.news-carousel .slide-item:nth-child(1) { animation-delay: 0.1s; }
.news-carousel .slide-item:nth-child(2) { animation-delay: 0.2s; }
.news-carousel .slide-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeSlideUp {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* ============================================
OPTIONAL: IMAGE OVERLAY
============================================ */

.news-carousel .image-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}

.news-carousel .slide-item:active .image-wrapper::after {
opacity: 1;
}

/* ============================================REGULAR NEWS LISTING — Mobile Feed
With "Read More" link to category archive
============================================ */

/* --- 1. News Item Container --- */
.news-item {
border: 1px solid #E5E7EB;
border-radius: 4px;
padding: 1rem;
margin-bottom: 1.25rem;
width: 100%;

display: flex;
flex-direction: column;
gap: 0.5rem;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* --- 2. Hover Effect --- */
.news-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}

/* --- 3. Thin Line Divider Between News Items --- */
.news-item:not(:last-child) {
border-bottom: 1px solid #F3F4F6;
margin-bottom: 0;
border-radius: 0;
}

/* --- 4. Category Tag (Smaller than carousel) --- */
.news-item .news-category {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.65rem; /* 10.4px */
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6B7280;
display: inline-block;
width: fit-content;
text-decoration: none;
transition: color 0.15s ease;
}

.news-item .news-category::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #2563EB;
transition: width 0.25s ease;
}

.news-item:hover .news-category::after {
width: 100%;
}

.news-item:hover .news-category {
color: #1D4ED8;
}

/* --- 5. Title (Smaller than carousel) --- */
.news-item .news-title {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-size: 1.25rem; /* 20px */
line-height: 1.2;
letter-spacing: -0.02em;
color: #111827;
margin: 0;
padding: 0;
transition: color 0.2s ease;
}

.news-item:hover .news-title {
color: #4B5563;
}

/* --- 6. Image --- */
.news-item .news-image-wrapper {
background: #F3F4F6;
border-radius: 4px;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
}

.news-item .news-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

.news-item:hover .news-image-wrapper img {
transform: scale(1.02);
}

/* --- 7. "Read More" Link --- */
.news-item .read-more {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.75rem; /* 12px */
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6B7280;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding-top: 0.25rem;
width: fit-content;
transition: color 0.2s ease, gap 0.2s ease;
}

/* Hover effect */
.news-item .read-more:hover {
color: #1D4ED8;
gap: 0.6rem; /* Slightly more space between text and icon */
}

/* Arrow */
.news-item .read-more::after {
content: '→';
display: inline-block;
transition: transform 0.2s ease;
}

.news-item .read-more:hover::after {
transform: translateX(2px);
}

/* --- 8. Responsive Adjustments --- */
@media (max-width: 480px) {
.news-item {
padding: 0.875rem;
margin-bottom: 1rem;
border-radius: 4px;
}

.news-item .news-title {
font-size: 1.125rem; /* 18px */
}

.news-item .news-category {
font-size: 0.6rem; /* 9.6px */
}

.news-item .read-more {
font-size: 0.688rem; /* 11px */
}

.news-item .read-more-btn {
font-size: 0.688rem; /* 11px */
padding: 0.4rem 1rem;
}
}

/* ============================================EDITION OF THE MONTH — Mobile Only
Label | Cover | Button (Minimalist)
For screens up to 768px
============================================ */

@media (max-width: 768px) {

/* --- 1. Outer Container --- */
.edition-section {
order-top: 1px solid #E5E7EB;
border-bottom: 1px solid #E5E7EB;
padding: 1.5rem 1.25rem;
width: 100%;

transition: box-shadow 0.25s ease;
}

.edition-section:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* --- 2. Inner Flex Container --- */
.edition-section .edition-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 100%;
margin: 0 auto;
text-align: center;
}

/* --- 3. Cover Image --- */
.edition-section .edition-cover {
flex-shrink: 0;
width: 100%;
max-width: 180px;
aspect-ratio: 3 / 4;

background: #F3F4F6;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.edition-section:hover .edition-cover {
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* --- 4. Content Container (Label + Button) --- */
.edition-section .edition-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 100%;
}

/* --- 5. Section Label --- */
.edition-section .edition-label {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.65rem; /* 10.4px */
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6B7280;
margin: 0;
}

/* --- 6. "READ" Button --- */
.edition-section .edition-btn {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.75rem; /* 12px */
text-transform: uppercase;
letter-spacing: 0.08em;
color: #FFFFFF;
text-decoration: none;

background: #2563EB;
border: none;
border-radius: 4px;
padding: 0.6rem 1.75rem;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: fit-content;

cursor: pointer;
transition: background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}

.edition-section .edition-btn:hover {
background-color: #1D4ED8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.edition-section .edition-btn:active {
transform: scale(0.97);
}

/* Optional: Arrow icon on hover */
.edition-section .edition-btn::after {
content: '→';
display: inline-block;
transition: transform 0.2s ease;
}

.edition-section .edition-btn:hover::after {
transform: translateX(3px);
}

/* --- 7. Dark Background Version (Mobile) --- */
.edition-section.dark {
background: #111827;
border-color: #1F2937;
}

.edition-section.dark .edition-label {
color: #9CA3AF;
}

.edition-section.dark .edition-btn {
background: #FFFFFF;
color: #111827;
}

.edition-section.dark .edition-btn:hover {
background: #F3F4F6;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}
}

/* ============================================
SMALL MOBILE (≤ 480px)
============================================ */

@media (max-width: 480px) {

.edition-section {
padding: 1.25rem 1rem;
}

.edition-section .edition-inner {
gap: 0.875rem;
}

.edition-section .edition-cover {
max-width: 150px;
}

.edition-section .edition-label {
font-size: 0.6rem; /* 9.6px */
}

.edition-section .edition-btn {
font-size: 0.688rem; /* 11px */
padding: 0.5rem 1.5rem;
width: 100%;
justify-content: center;
}
}

/* ============================================
   VIDEO SECTION — Mobile Only (≤ 768px)
   For JetEngine Listing
   Order: Category → Title → Video Image → Excerpt
   ============================================ */

@media (max-width: 768px) {
    
    /* --- 1. Video Item Container --- */
    .video-item {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 4px;
        padding: 1rem;
        margin-bottom: 1.25rem;
        width: 100%;
        
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    
    /* --- 2. Hover/Active States --- */
    .video-item:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }
    
    .video-item:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition-duration: 0.05s;
    }
    
    /* --- 3. Thin Line Divider Between Items --- */
    .video-item:not(:last-child) {
        border-bottom: 1px solid #F3F4F6;
        margin-bottom: 0;
        border-radius: 0;
    }
    
    /* --- 4. Category Tag --- */
    .video-item .video-category {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 0.65rem; /* 10.4px */
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #2563EB;
        display: inline-block;
        width: fit-content;
        text-decoration: none;
        transition: color 0.15s ease;
    }
    
    .video-item .video-category::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background: #2563EB;
        transition: width 0.25s ease;
    }
    
    .video-item:hover .video-category::after {
        width: 100%;
    }
    
    .video-item:hover .video-category {
        color: #1D4ED8;
    }
    
    .video-item:active .video-category {
        color: #1D4ED8;
        transition-duration: 0.05s;
    }
    
    /* --- 5. Title --- */
    .video-item .video-title {
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 1.25rem; /* 20px */
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: #111827;
        margin: 0;
        padding: 0;
        transition: color 0.2s ease;
    }
    
    .video-item:hover .video-title {
        color: #4B5563;
    }
    
    .video-item:active .video-title {
        color: #4B5563;
        transition-duration: 0.05s;
    }
    
    /* --- 6. Video Image Wrapper (With Play Icon) --- */
    .video-item .video-image-wrapper {
        position: relative;
        background: #F3F4F6;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        aspect-ratio: 16 / 9;
        cursor: pointer;
        
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .video-item .video-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    
    /* Image hover/active - controlled by container */
    .video-item:hover .video-image-wrapper img {
        transform: scale(1.02);
    }
    
    .video-item:active .video-image-wrapper img {
        transform: scale(0.98);
        transition-duration: 0.05s;
    }
    
    /* --- 7. Play Icon Overlay  - TO CREATE--- */
    
    /* --- 8. Excerpt --- */
    .video-item .video-excerpt {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 0.875rem; /* 14px */
        line-height: 1.5;
        color: #4B5563;
        margin: 0;
        padding: 0;
        
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Excerpt hover/active - controlled by container */
    .video-item:hover .video-excerpt {
        color: #374151;
    }
    
    .video-item:active .video-excerpt {
        color: #374151;
        transition-duration: 0.05s;
    }
}

/* ============================================
   SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
    
    .video-item {
        padding: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .video-item .video-title {
        font-size: 1.125rem; /* 18px */
    }
    
    .video-item .video-category {
        font-size: 0.6rem; /* 9.6px */
    }
    
    .video-item .video-excerpt {
        font-size: 0.813rem; /* 13px */
        -webkit-line-clamp: 2;
    }
    
    /* Smaller play icon on small mobile */
    .video-item .video-image-wrapper::after {
        width: 2.8rem;
        height: 2.8rem;
        border-left: 0.9rem solid #2563EB;
        border-top: 0.55rem solid transparent;
        border-bottom: 0.55rem solid transparent;
    }
    
    .video-item:hover .video-image-wrapper::after {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .video-item:active .video-image-wrapper::after {
        transform: translate(-50%, -50%) scale(0.9);
    }
}

/* ============================================
   SHORTS SECTION — Mobile Only (≤ 768px)
   Carousel with 9:16 Video Format
   Original Size (Full Width)
   No Section Title
   ============================================ */

@media (max-width: 768px) {
    
    /* --- 1. Outer Container --- */
    .shorts-section {
        background: #FFFFFF;
        padding: 0 0 1.5rem 0;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    /* --- 2. Shorts Item Container --- */
    .shorts-item {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        padding: 0.75rem;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
    
    /* --- 3. Hover/Active States --- */
    .shorts-item:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        transform: translateY(-2px);
    }
    
    .shorts-item:active {
        transform: scale(0.98);
        transition-duration: 0.05s;
    }
    
    /* --- 4. Video Wrapper (9:16 Portrait) --- */
    .shorts-item .shorts-video-wrapper {
        position: relative;
        background: #111827;
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
        aspect-ratio: 9 / 16;
        cursor: pointer;
        
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .shorts-item:hover .shorts-video-wrapper {
        transform: scale(1.01);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .shorts-item:active .shorts-video-wrapper {
        transform: scale(0.97);
        transition-duration: 0.05s;
    }
    
    /* --- 5. Video Element --- */
    .shorts-item .shorts-video-wrapper video,
    .shorts-item .shorts-video-wrapper iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border: none;
        border-radius: 4px;
    }
    
    /* --- 6. Category Tag --- */
    .shorts-item .shorts-category {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #2563EB;
        display: inline-block;
        width: fit-content;
        text-decoration: none;
        transition: color 0.15s ease;
        margin-top: 0.2rem;
    }
    
    .shorts-item .shorts-category::after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background: #2563EB;
        transition: width 0.25s ease;
    }
    
    .shorts-item:hover .shorts-category::after {
        width: 100%;
    }
    
    .shorts-item:hover .shorts-category {
        color: #1D4ED8;
    }
    
    /* --- 7. Title --- */
    .shorts-item .shorts-title {
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: #111827;
        margin: 0;
        padding: 0;
        transition: color 0.2s ease;
        
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .shorts-item:hover .shorts-title {
        color: #4B5563;
    }
    
    /* --- 8. Carousel Dots --- */
    .shorts-section .swiper-pagination {
        position: relative;
        bottom: 0;
        margin-top: 1rem;
        padding: 0.5rem 0;
    }
    
    .shorts-section .swiper-pagination-bullet {
        background: #D1D5DB !important;
        opacity: 1 !important;
        width: 0.5rem !important;
        height: 0.5rem !important;
        border-radius: 9999px !important;
        transition: width 0.3s ease !important;
    }
    
    .shorts-section .swiper-pagination-bullet-active {
        background: #2563EB !important;
        width: 1.5rem !important;
        border-radius: 9999px !important;
    }
    
    /* --- 9. Carousel Navigation Arrows --- */
    .shorts-section .swiper-button-next,
    .shorts-section .swiper-button-prev {
        display: none !important;
    }
}

/* ============================================
   SMALL MOBILE (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
    
    .shorts-item {
        max-width: 240px;
        padding: 0.625rem;
    }
    
    .shorts-item .shorts-title {
        font-size: 0.813rem;
    }
    
    .shorts-item .shorts-category {
        font-size: 0.55rem;
    }
}

/* ============================================
   POST TEXT STYLES
   Class: .post-text
   Includes: H2-H6, Links, Blockquotes, Images,
   Highlighted Bold Text, Centered Embeds,
   and All Modern Touches
   ============================================ */

/* --- Base Container --- */
.post-text {
    max-width: 75ch;
    margin: 0 auto;
    color: #1F2937;
}

/* ============================================
   HEADINGS (H2 - H6)
   ============================================ */

/* H2 */
.post-text h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 1.75rem; /* 28px */
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* H3 */
.post-text h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 1.375rem; /* 22px */
    line-height: 1.3;
    letter-spacing: 0;
    color: #111827;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* H4 */
.post-text h4 {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
    letter-spacing: 0;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* H5 */
.post-text h5 {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 1rem; /* 16px */
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #4B5563;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* H6 */
.post-text h6 {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6B7280;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* ============================================
   LINKS
   ============================================ */

/* Default link state */
.post-text a {
    color: #111827;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #D1D5DB;
    transition: color 0.15s ease,
                text-decoration-color 0.15s ease,
                opacity 0.15s ease;
}

/* Hover state */
.post-text a:hover {
    color: #4B5563;
    text-decoration-color: #4B5563;
}

/* Active state (for mobile/touch) */
.post-text a:active {
    color: #4B5563;
    text-decoration-color: #4B5563;
    opacity: 0.8;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

.post-text blockquote {
    margin: 2rem 0;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 4px solid #111827;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.375rem; /* 22px */
    line-height: 1.6;
    color: #4B5563;
}

/* Blockquote paragraph (overrides default) */
.post-text blockquote p {
    font-size: 1.375rem; /* Match blockquote size */
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
}

/* Blockquote citation */
.post-text blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.875rem; /* 14px */
    color: #6B7280;
}

/* ============================================
   PARAGRAPHS & LISTS
   ============================================ */

/* Paragraphs */
.post-text p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.125rem; /* 18px */
    line-height: 1.9;
    color: #1F2937;
    margin-bottom: 1.5rem;
}

/* Unordered Lists */
.post-text ul {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.9;
    color: #1F2937;
}

/* Ordered Lists */
.post-text ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.9;
    color: #1F2937;
}

/* List Items */
.post-text li {
    margin-bottom: 0.5rem;
}

/* ============================================
   1) HIGHLIGHTED BOLD TEXT
   ============================================ */

.post-text p strong,
.post-text p b {
    font-weight: 400;
    background: linear-gradient(to top, #DBEAFE 40%, transparent 40%);
    padding: 0 0.1rem;
    color: #111827;
    position: relative;
    z-index: 1;
}

/* ============================================
   2) RESPONSIVE IMAGES (Hero + Standard)
   ============================================ */

/* --- Base image rules --- */
.post-text img {
    display: block;
    height: auto;
    max-width: 100%;
    border-radius: 4px;
    margin: 1.5rem auto;

    /* 🎨 MODERN TOUCH 1: Smooth hover effect */
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

/* 🎨 MODERN TOUCH 1: Hover effect (zoom + shadow) */
.post-text img:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 🎨 MODERN TOUCH 2: Lazy loading fade-in */
.post-text img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-text img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* ============================================
   STANDARD IMAGES (Constrained)
   ============================================ */

/* --- Standard in-article images: 80% of container --- */
.post-text img:not(.hero-image) {
    max-width: 80%;
    width: 100%;
}

/* 🎨 MODERN TOUCH 3: Minimum size for mobile */
@media (max-width: 480px) {
    .post-text img:not(.hero-image) {
        min-width: 280px; /* Ensures images are still readable */
    }
}

/* ============================================
   HERO IMAGES (Full-Width, Dramatic)
   ============================================ */

/* --- Hero image: full-width, immersive --- */
.post-text .hero-image {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Hero image hover - adjust to full-width behavior */
.post-text .hero-image:hover {
    transform: none; /* No scale on hero images */
    box-shadow: none;
}

/* --- Desktop adjustments --- */
@media (min-width: 768px) {
    /* Standard images: 80% of container */
    .post-text img:not(.hero-image) {
        max-width: 80%;
        width: 100%;
    }

    /* Hero image: full-width */
    .post-text .hero-image {
        max-width: 100vw;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0;
        margin-top: 0;
        margin-bottom: 1.5rem;
    }
}

/* --- Mobile: Hero image becomes full-width with radius --- */
@media (max-width: 767px) {
    .post-text img:not(.hero-image) {
        max-width: 100%;
        width: 80%;
        margin: 1rem auto;
        border-radius: 4px;
    }

    .post-text .hero-image {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 4px;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    /* Hero image hover on mobile - disable */
    .post-text .hero-image:hover {
        transform: none;
        box-shadow: none;
    }
}

/* 🎨 MODERN TOUCH 3: Minimum size for mobile */
@media (max-width: 480px) {
    .post-text img:not(.hero-image) {
        min-width: 280px;
    }

    .post-text .hero-image {
        min-width: 100%;
    }
}

/* ============================================
   ALIGNMENT CLASSES (WordPress)
   ============================================ */

/* --- Align images with WordPress classes --- */
.post-text .alignleft {
    float: left;
    margin: 0.5rem 1.5rem 0.5rem 0;
    max-width: 40%;
}

.post-text .alignright {
    float: right;
    margin: 0.5rem 0 0.5rem 1.5rem;
    max-width: 40%;
}

.post-text .aligncenter {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* --- Responsive for aligned images on mobile --- */
@media (max-width: 768px) {
    .post-text .alignleft,
    .post-text .alignright {
        float: none;
        margin: 1rem auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   FIGURES & CAPTIONS
   ============================================ */

/* --- Figure (for WordPress captions) --- */
.post-text figure {
    margin: 1.5rem auto;
    max-width: 100%;
    text-align: center;
}

.post-text figure img {
    margin: 0 auto;
    max-width: 100%;
}

.post-text figcaption {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.813rem;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.5em;
    color: #6B7280;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0 1rem;
}

/* --- Standard Figure (Constrained) --- */
.post-text figure:not(.hero-figure) {
    max-width: 80%;
}

.post-text figure:not(.hero-figure) img {
    max-width: 100%;
}

.post-text figure:not(.hero-figure) figcaption {
    max-width: 100%;
}

/* --- Hero Figure (Full-Width) --- */
.post-text figure.hero-figure {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
}

.post-text figure.hero-figure img {
    max-width: 100%;
    border-radius: 0;
}

.post-text figure.hero-figure figcaption {
    max-width: 75ch;
    margin: 0.5rem auto;
    padding: 0 1rem;
}

/* --- Mobile: Figure adjustments --- */
@media (max-width: 768px) {
    .post-text figure:not(.hero-figure) {
        max-width: 100%;
        width: 80%;
    }

    .post-text figure.hero-figure {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 4px;
    }

    .post-text figure.hero-figure img {
        border-radius: 4px;
    }

    .post-text figure.hero-figure figcaption {
        max-width: 100%;
        padding: 0.1rem;
    }
}

/* ============================================
   FULL & WIDE IMAGES (WordPress Blocks)
   ============================================ */

/* --- For full-width images (no max-width limit) --- */
.post-text .alignfull {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
}

/* --- For wide images (larger than container) --- */
.post-text .alignwide {
    max-width: 90vw;
    width: 90vw;
    margin-left: calc(-45vw + 50%);
    margin-right: calc(-45vw + 50%);
    border-radius: 4px;
}

/* --- Mobile adjustments for full/wide images --- */
@media (max-width: 768px) {
    .post-text .alignfull,
    .post-text .alignwide {
        max-width: 100vw;
        width: 100vw;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}

/* ============================================
   3) EMBEDDED CONTENT
   ============================================ */

/* --- Base iframe rules --- */
.post-text iframe {
    display: block;
    margin: 1.5rem auto;
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for iframes */
.post-text iframe:hover {
    transform: scale(1.005);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}

/* --- WordPress Embed Wrapper --- */
.post-text .wp-block-embed {
    max-width: 80%;
    margin: 1.5rem auto;
    text-align: center;
}

.post-text .wp-block-embed .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.post-text .wp-block-embed .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* --- Instagram, Twitter, Facebook Embeds --- */
.post-text .instagram-media,
.post-text .twitter-tweet,
.post-text .fb-post {
    display: block !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    max-width: 80% !important;
}

/* --- Generic Embed Wrapper --- */
.post-text .embed-container,
.post-text .embed-wrapper {
    text-align: center;
    margin: 1.5rem auto;
    max-width: 80%;
}

.post-text .embed-container iframe,
.post-text .embed-wrapper iframe {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 4px;
}

/* --- Embed Captions --- */
.post-text .wp-block-embed figcaption {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.813rem;
    letter-spacing: 0.02em;
    color: #6B7280;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0 1rem;
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    /* Embeds: full width on mobile */
    .post-text .wp-block-embed {
        max-width: 100%;
        width: 100%;
        margin: 1rem auto;
    }

    .post-text .wp-block-embed .wp-block-embed__wrapper iframe {
        border-radius: 4px;
    }

    /* Social embeds on mobile */
    .post-text .instagram-media,
    .post-text .twitter-tweet,
    .post-text .fb-post {
        max-width: 100% !important;
    }

    /* Generic embeds on mobile */
    .post-text .embed-container,
    .post-text .embed-wrapper {
        max-width: 100%;
    }

    /* Disable hover effects on mobile */
    .post-text iframe:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    /* Captions on mobile */
    .post-text .wp-block-embed figcaption {
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }
}

/* --- Small Mobile (≤ 480px) --- */
@media (max-width: 480px) {
    .post-text .wp-block-embed {
        margin: 0.75rem auto;
    }

    .post-text .wp-block-embed figcaption {
        font-size: 0.7rem;
    }
}

/* ============================================
4) TABLES & CODE
============================================ */

/* Tables */
.post-text table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
color: #1F2937;
}

.post-text th,
.post-text td {
padding: 0.75rem;
border: 1px solid #E5E7EB;
text-align: left;
}

.post-text th {
background: #F9FAFB;
font-weight: 600;
}

/* Code / Preformatted */
.post-text pre {
background: #F3F4F6;
padding: 1.5rem;
border-radius: 4px;
overflow-x: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.6;
color: #1F2937;
margin: 1.5rem 0;
}

.post-text code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
background: #F3F4F6;
padding: 0.1rem 0.4rem;
border-radius: 2px;
color: #111827;
}

/* ============================================
RESPONSIVE: TABLET (max-width: 992px)
============================================ */

@media (max-width: 992px) {

.post-text {
max-width: 100%;
}

/* H2 */
.post-text h2 {
font-size: 1.5rem; /* 24px */
margin-top: 2rem;
margin-bottom: 0.875rem;
}

/* H3 */
.post-text h3 {
font-size: 1.25rem; /* 20px */
margin-top: 1.75rem;
margin-bottom: 0.625rem;
}

/* H4 */
.post-text h4 {
font-size: 1.063rem; /* 17px */
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}

/* H5 */
.post-text h5 {
font-size: 0.938rem; /* 15px */
letter-spacing: 0.02em;
}

/* H6 */
.post-text h6 {
font-size: 0.813rem; /* 13px */
letter-spacing: 0.04em;
}

/* Blockquotes */
.post-text blockquote {
font-size: 1.25rem; /* 20px */
padding: 0.875rem 0 0.875rem 1.25rem;
margin: 1.75rem 0;
}

.post-text blockquote p {
font-size: 1.25rem; /* 20px */
}

.post-text blockquote cite {
font-size: 0.813rem; /* 13px */
}

/* Paragraphs & Lists */
.post-text p {
font-size: 1rem; /* 16px */
line-height: 1.8;
margin-bottom: 1.25rem;
}

.post-text ul,
.post-text ol {
font-size: 1rem;
line-height: 1.8;
padding-left: 1.25rem;
}

.post-text li {
margin-bottom: 0.4rem;
}

/* Tables */
.post-text table {
font-size: 0.813rem;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.post-text th,
.post-text td {
padding: 0.5rem;
white-space: nowrap;
}

/* Code */
.post-text pre {
padding: 1rem;
font-size: 0.813rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.post-text code {
font-size: 0.813rem;
}
}

/* ============================================
RESPONSIVE: MOBILE (max-width: 768px)
============================================ */

@media (max-width: 768px) {

/* H2 */
.post-text h2 {
font-size: 1.375rem; /* 22px */
margin-top: 1.75rem;
margin-bottom: 0.75rem;
}

/* H3 */
.post-text h3 {
font-size: 1.125rem; /* 18px */
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}

/* H4 */
.post-text h4 {
font-size: 1rem; /* 16px */
margin-top: 1.125rem;
margin-bottom: 0.5rem;
}

/* H5 */
.post-text h5 {
font-size: 0.875rem; /* 14px */
letter-spacing: 0.02em;
margin-top: 1rem;
margin-bottom: 0.375rem;
}

/* H6 */
.post-text h6 {
font-size: 0.75rem; /* 12px */
letter-spacing: 0.04em;
margin-top: 1rem;
margin-bottom: 0.375rem;
}

/* Links - touch optimized */
.post-text a {
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
padding: 2px 0;
}

/* Blockquotes */
.post-text blockquote {
font-size: 1.125rem; /* 18px */
padding: 0.75rem 0 0.75rem 1rem;
border-left-width: 3px;
margin: 1.5rem 0;
}

.post-text blockquote p {
font-size: 1.125rem; /* 18px */
}

.post-text blockquote cite {
font-size: 0.75rem; /* 12px */
margin-top: 0.375rem;
}

/* Highlighted bold text - smaller highlight on mobile */
.post-text p strong,
.post-text p b {
background: linear-gradient(to top, #DBEAFE 40%, transparent 40%);
padding: 0 0.15rem;
}

/* Embedded content - full width on mobile with small margins */
.post-text iframe {
margin: 1rem auto;
max-width: 100%;
}

.post-text .instagram-media,
.post-text .twitter-tweet,
.post-text .fb-post {
margin: 1rem auto !important;
max-width: 100% !important;
}
}

/* ============================================
RESPONSIVE: SMALL MOBILE (max-width: 480px)
============================================ */

@media (max-width: 480px) {

/* H2 */
.post-text h2 {
font-size: 1.25rem; /* 20px */
margin-top: 1.5rem;
margin-bottom: 0.625rem;
}

/* H3 */
.post-text h3 {
font-size: 1.063rem; /* 17px */
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}

/* H4 */
.post-text h4 {
font-size: 0.938rem; /* 15px */
margin-top: 1rem;
margin-bottom: 0.375rem;
}

/* H5 */
.post-text h5 {
font-size: 0.813rem; /* 13px */
letter-spacing: 0.02em;
margin-top: 0.875rem;
margin-bottom: 0.375rem;
}

/* H6 */
.post-text h6 {
font-size: 0.7rem; /* 11.2px */
letter-spacing: 0.04em;
margin-top: 0.875rem;
margin-bottom: 0.375rem;
}

/* Blockquotes */
.post-text blockquote {
font-size: 1rem; /* 16px */
padding: 0.625rem 0 0.625rem 0.75rem;
margin: 1.25rem 0;
border-left-width: 3px;
}

.post-text blockquote p {
font-size: 1rem; /* 16px */
}

.post-text blockquote cite {
font-size: 0.7rem; /* 11.2px */
margin-top: 0.25rem;
}

/* Paragraphs & Lists */
.post-text p {
font-size: 0.938rem; /* 15px */
line-height: 1.8;
margin-bottom: 1rem;
}

.post-text ul,
.post-text ol {
font-size: 0.938rem;
padding-left: 1rem;
}

/* Images - minimum size */
.post-text img {
min-width: 280px;
}

/* Embedded content - tighter margins */
.post-text iframe {
margin: 0.75rem auto;
max-width: 100%;
}

.post-text .instagram-media,
.post-text .twitter-tweet,
.post-text .fb-post {
margin: 0.75rem auto !important;
max-width: 100% !important;
}

/* Captions */
.post-text figcaption,
.post-text .wp-caption .wp-caption-text,
.post-text .wp-block-embed figcaption {
font-size: 0.7rem;
}
}

/* =========================================== LEIA MAIS ============================================ */

.post-text p[data-startswith="LEIA MAIS:"] {
    background-color: #F8FAFC; /* Light gray background, matching your section styles */
    border-left: 4px solid #2563EB; /* A blue accent bar on the left */
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-family: 'Archivo', sans-serif;
    font-size: 0.95rem;
    color: #4B5563;
    margin: 1.5rem 0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Style the link inside */
.post-text p[data-startswith="LEIA MAIS:"] a {
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.post-text p[data-startswith="LEIA MAIS:"] a:hover {
    border-bottom-color: #2563EB;
}

/* Hover effect for the whole box */
.post-text p[data-startswith="LEIA MAIS:"]:hover {
    background-color: #F3F4F6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}/* End custom CSS */