/* ==========================================================================

   SQUAREA Global Luxury Real Estate - Blog & Editorial Stylesheet

   ========================================================================== */



/* Blog Page Variables (Overriding/Enhancing base styles) */

:root {

    --blog-accent: #9A805E;

    --blog-bg: #FAF9F6;

    --blog-panel-bg: #FFFFFF;

    --blog-panel-border: rgba(154, 128, 94, 0.15);

    --blog-text-main: #111111;

    --blog-text-muted: #4A4A4A;

    --blog-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



/* ==========================================================================

   1. Hero Banner Section (blogs.html)

   ========================================================================== */



.blog-hero-banner {

    position: relative;

    height: 70vh;

    width: 100%;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-color: var(--blog-bg);

}



.blog-hero-banner-bg {

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: calc(100% + 2px);

    z-index: 1;

}



.blog-hero-banner-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.55;

    will-change: transform;

    transform: scale(1.05); /* Animate on load */

    transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);

}



.blog-hero-banner-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(15, 15, 15, 0.1);

    z-index: 2;

}



.blog-hero-banner-content {

    position: relative;

    z-index: 3;

    max-width: 850px;

    margin-top: 60px; /* Offset for header */

}



.blog-hero-banner-lbl {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: var(--blog-accent);

    margin-bottom: 20px;

    display: inline-block;

}



.blog-hero-banner-title {

    font-family: var(--font-heading);

    font-size: 5.5rem;

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: -2px;

    margin: 0 0 25px 0;

    color: var(--white);

}



.blog-hero-banner-title span {

    font-style: italic;

    color: var(--blog-text-muted);

}



.blog-hero-banner-desc {

    font-family: var(--font-body);

    font-size: 1.15rem;

    font-weight: 300;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.7);

    max-width: 600px;

    margin: 0;

}



/* Scroll indicator */

.blog-hero-banner-scroll {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    font-family: var(--font-body);

    font-size: 0.7rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--blog-text-muted);

}



.blog-scroll-line {

    width: 1px;

    height: 40px;

    background-color: rgba(31, 31, 31, 0.15);

    margin-top: 10px;

    position: relative;

    overflow: hidden;

}



.blog-scroll-line::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 50%;

    background-color: var(--blog-accent);

    animation: scrollBarScroll 2.2s infinite ease-in-out;

}





/* ==========================================================================

   1.5 Blog Detail Hero Section

   ========================================================================== */



.blog-detail-hero {

    height: 100vh !important;

    display: flex !important;

    align-items: center !important;

}



.blog-detail-hero .blog-hero-banner-bg {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 1 !important;

    pointer-events: none !important;

}



.blog-detail-hero .blog-hero-banner-bg img {

    opacity: 1 !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    transform: none !important;

}



.blog-detail-hero .blog-hero-banner-overlay {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 2 !important;

    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.7) 0%, rgba(15, 15, 15, 0.5) 100%) !important;

    pointer-events: none !important;

}



.blog-detail-hero .blog-hero-banner-lbl {

    font-family: var(--font-body) !important;

    font-size: 0.75rem !important;

    font-weight: 600 !important;

    letter-spacing: 3px !important;

    text-transform: uppercase !important;

    color: #dfc8a5 !important; /* Premium gold */

    background: rgba(154, 128, 94, 0.15) !important;

    border: 1px solid rgba(154, 128, 94, 0.3) !important;

    padding: 6px 16px !important;

    border-radius: 100px !important;

    margin-bottom: 25px !important;

    display: inline-block !important;

    box-shadow: 0 0 20px rgba(154, 128, 94, 0.1), inset 0 0 10px rgba(154, 128, 94, 0.1) !important;

    text-shadow: none !important;

    backdrop-filter: blur(4px) !important;

    -webkit-backdrop-filter: blur(4px) !important;

    transition: all 0.3s ease !important;

}



.blog-detail-hero .blog-hero-banner-lbl:hover {

    background: rgba(154, 128, 94, 0.25) !important;

    border-color: rgba(154, 128, 94, 0.5) !important;

    box-shadow: 0 0 25px rgba(154, 128, 94, 0.2), inset 0 0 10px rgba(154, 128, 94, 0.2) !important;

}



.blog-detail-hero .blog-hero-banner-title {

    font-family: var(--font-heading) !important;

    font-size: 3.8rem !important;

    font-weight: 300 !important;

    line-height: 1.12 !important;

    letter-spacing: -1px !important;

    margin: 0 0 35px 0 !important;

    color: var(--white) !important;

    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

}



.blog-detail-hero .article-meta-row {

    display: inline-flex !important;

    flex-wrap: wrap !important;

    justify-content: flex-start !important;

    align-items: center !important;

    gap: 40px !important;

    background: rgba(255, 255, 255, 0.04) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    border: 1px solid rgba(154, 128, 94, 0.25) !important;

    border-radius: 12px !important;

    padding: 18px 30px !important;

    margin-top: 35px !important;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;

}



.blog-detail-hero .author-profile {

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;

}



.blog-detail-hero .author-avatar {

    width: 45px !important;

    height: 45px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 2px solid var(--blog-accent) !important;

    box-shadow: 0 0 10px rgba(154, 128, 94, 0.3) !important;

}



.blog-detail-hero .meta-item {

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

}



.blog-detail-hero .author-info-lbl,

.blog-detail-hero .meta-item-lbl {

    font-family: var(--font-body) !important;

    font-size: 0.6rem !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;

    color: rgba(255, 255, 255, 0.5) !important;

}



.blog-detail-hero .author-info-val,

.blog-detail-hero .meta-item-val {

    font-family: var(--font-body) !important;

    font-size: 0.85rem !important;

    font-weight: 500 !important;

    color: var(--white) !important;

}



@media (max-width: 991px) {

    .blog-detail-hero {

        height: auto !important;

        min-height: 70vh !important;

        padding: 120px 0 50px 0 !important;

        display: flex !important;

        align-items: center !important;

    }



    .blog-detail-hero .blog-hero-banner-title {

        font-size: 3.5rem !important;

    }

}



@media (max-width: 767px) {

    .blog-detail-hero .blog-hero-banner-title {

        font-size: 2.8rem !important;

    }

    .blog-detail-hero .article-meta-row {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 20px !important;

        width: 100% !important;

        padding: 20px !important;

    }

}



@media (max-width: 576px) {

    .blog-hero-banner-content{

        margin-top: 0 !important;

    }



    .blog-detail-hero .blog-hero-banner-title {

        font-size: 2.1rem !important;

    }

}



/* ==========================================================================

   2. Listing Page Styles (blogs.html)

   ========================================================================== */



/* Main Listing Wrapper */

.blog-listing-section {

    background-color: var(--blog-bg);

    padding: 80px 0 0 0;

    position: relative;

    z-index: 3;

}



/* Category Filters Navigation */

.blog-filter-nav {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 60px;

    padding: 8px;

    overflow-x: auto;

    scrollbar-width: none; /* Hide scrollbar for Firefox */

    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */

    gap: 12px;

    background: rgba(31, 31, 31, 0.05);

    border: 1px solid rgba(31, 31, 31, 0.04);

    border-radius: 100px;

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

}



.blog-filter-nav::-webkit-scrollbar {

    display: none; /* Hide scrollbar for Chrome/Safari */

}



.blog-filter-btn {

    background: none !important;

    border: 1px solid transparent !important;

    font-family: var(--font-body) !important;

    font-size: 0.75rem !important;

    font-weight: 600 !important; /* High-contrast bold typography */

    color: #4A4A4A !important; /* Explicit slate grey color for inactive tabs */

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    cursor: pointer !important;

    padding: 10px 24px !important;

    border-radius: 100px !important;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

    white-space: nowrap !important;

}



.blog-filter-btn:hover {

    color: #111111 !important; /* Turn dark charcoal on hover */

    border-color: rgba(154, 128, 94, 0.15) !important;

    background-color: rgba(154, 128, 94, 0.05) !important;

}



.blog-filter-btn.active {

    color: #FFFFFF !important; /* Proper high-contrast white text */

    background-color: #9A805E !important; /* Bronze accent color */

    border-color: #9A805E !important;

    box-shadow: 0 8px 20px rgba(154, 128, 94, 0.25) !important;

}



/* Editorial Post Grid (Asymmetric Luxury Newspaper layout) */

.editorial-grid {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: 50px 40px;

    margin-bottom: 120px;

}



.editorial-card {

    grid-column: span 4; /* Default: 3 cards per row */

    display: flex;

    flex-direction: column;

    text-decoration: none;

    color: inherit;

    opacity: 1;

    transform: translateY(0);

    background: #FFFFFF;

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 12px;

    padding: 24px;

    position: relative;

    overflow: hidden;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover {

    border-color: var(--blog-accent);

    background: #FFFFFF;

    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);

    transform: translateY(-8px);

}



/* Widescreen Hero Featured Row */

.editorial-card.size-featured {

    grid-column: span 12;

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 50px;

    padding: 40px;

    align-items: center;

    border-radius: 16px; /* Slightly larger border radius for hero card */

}



.editorial-card.size-featured:hover {

    border-color: var(--blog-accent);

    background: #FFFFFF;

}



/* Card Elements */

.editorial-card-media {

    position: relative;

    aspect-ratio: 16/10;

    overflow: hidden;

    background-color: #EAEAEA;

    border: 1px solid rgba(31, 31, 31, 0.05);

    border-radius: 8px; /* Nicely rounded card media */

}



.editorial-card.size-featured .editorial-card-media {

    aspect-ratio: 16/9;

}



.editorial-card-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    will-change: transform;

    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover .editorial-card-media img {

    transform: scale(1.08);

}



.editorial-card-tag {

    position: absolute;

    top: 20px;

    left: 20px;

    background-color: rgba(7, 7, 7, 0.8);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    color: var(--blog-accent);

    font-family: var(--font-body);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 2px;

    padding: 6px 14px;

    text-transform: uppercase;

    z-index: 2;

    border: 1px solid rgba(31, 31, 31, 0.08);

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover .editorial-card-tag {

    background-color: var(--blog-accent);

    color: var(--off-white);

    border-color: var(--blog-accent);

}



.editorial-card-content {

    display: flex;

    flex-direction: column;

    padding-top: 20px;

    flex-grow: 1;

}



.editorial-card.size-featured .editorial-card-content {

    padding-top: 0;

}



.editorial-card-meta {

    font-family: var(--font-body);

    font-size: 0.5rem;

    font-weight: 500;

    color: var(--blog-text-muted);

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 12px;

    display: flex;

    gap: 15px;

    align-items: center;

    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover .editorial-card-meta {

    color: var(--blog-text-muted);

}



.editorial-card-meta span.meta-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background-color: rgba(31, 31, 31, 0.15);

    display: inline-block;

}



.editorial-card-title {

    font-family: var(--font-heading);

    font-size: 1.75rem;

    font-weight: 300;

    line-height: 1.20;

    margin: 0 0 15px 0;

    color: var(--off-white);

    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card.size-featured .editorial-card-title {

    font-size: 3rem;

    line-height: 1.15;

    margin-bottom: 20px;

}



.editorial-card-excerpt {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 300;

    line-height: 1.7;

    color: var(--blog-text-muted);

    margin: 0 0 24px 0;

    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover .editorial-card-excerpt {

    color: var(--blog-text-muted);

}



.editorial-card-cta {

    font-family: var(--font-body);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--off-white);

    display: inline-flex;

    align-items: center;

    gap: 8px;

    position: relative;

    width: fit-content;

    padding-bottom: 4px;

    margin-top: auto;

    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card-cta::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 1px;

    background-color: var(--blog-accent);

    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover .editorial-card-cta::after {

    width: 100%;

}



.editorial-card-cta i {

    font-size: 0.8rem;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.editorial-card:hover .editorial-card-title {

    color: var(--blog-accent);

}



.editorial-card:hover .editorial-card-cta {

    color: var(--blog-accent);

}



.editorial-card:hover .editorial-card-cta i {

    transform: translateX(6px);

}



/* Grid Filter Filtering Animations */

.editorial-card.filtered-out {

    opacity: 0.08;

    pointer-events: none;

    transform: scale(0.97);

}



/* ==========================================================================

   3. Detail Page Styles (blog-*.html)

   ========================================================================== */



/* Reading Progress Line Indicator */

.reading-progress-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background-color: rgba(31, 31, 31, 0.05);

    z-index: 1001;

}



.reading-progress-bar {

    width: 0%;

    height: 100%;

    background-color: var(--blog-accent);

    transition: width 0.1s ease-out;

}



/* Article Hero Header */

.article-header {

    padding: 180px 0 60px 0;

    background-color: var(--blog-bg);

}



.article-header-container {

    max-width: 900px;

    margin: 0 auto;

    padding: 0 40px;

}



.article-category {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 500;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--blog-accent);

    margin-bottom: 20px;

    display: inline-block;

}



.article-title {

    font-family: var(--font-heading);

    font-size: 4.5rem;

    font-weight: 300;

    line-height: 1.1;

    letter-spacing: -2px;

    margin: 0 0 35px 0;

    color: var(--off-white);

}



.article-meta-row {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 40px;

    border-top: 1px solid var(--blog-panel-border);

    border-bottom: 1px solid var(--blog-panel-border);

    padding: 25px 0;

    margin-top: 40px;

}



.author-profile {

    display: flex;

    align-items: center;

    gap: 15px;

}



.author-avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid rgba(31, 31, 31, 0.1);

}



.author-info-lbl {

    font-family: var(--font-body);

    font-size: 0.65rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--blog-text-muted);

}



.author-info-val {

    font-family: var(--font-body);

    font-size: 0.85rem;

    font-weight: 500;

    color: var(--off-white);

}



.meta-item {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.meta-item-lbl {

    font-family: var(--font-body);

    font-size: 0.65rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--blog-text-muted);

}



.meta-item-val {

    font-family: var(--font-body);

    font-size: 0.85rem;

    font-weight: 500;

    color: var(--off-white);

}



/* Immersive Hero Media Page */

.article-hero-media {

    max-width: 1400px;

    margin: 0 auto 80px auto;

    padding: 0 40px;

    position: relative;

}



.article-hero-media-wrapper {

    aspect-ratio: 21/9;

    overflow: hidden;

    border: 1px solid var(--blog-panel-border);

}



.article-hero-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Article Reading Layout */

.article-layout-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 40px;

    display: grid;

    grid-template-columns: 1fr 280px;

    gap: 60px;

}



/* Override global section overflow: hidden to enable sticky sidebar share panel */

section:has(.article-layout-container),

.article-detail-section {

    overflow: visible !important;

}



/* Floating Left Panel Details */

.article-floating-panel {

    position: sticky;

    /* top: 120px; */

    height: fit-content;

    display: flex;

    flex-direction: column;

    gap: 40px;

}



.floating-back-link {

    font-family: var(--font-body);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--blog-text-muted);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    transition: var(--blog-transition);

}



.floating-back-link i {

    font-size: 0.8rem;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.floating-back-link:hover {

    color: var(--blog-accent);

}



.floating-back-link:hover i {

    transform: translateX(-6px);

}



.floating-share-box {

    display: flex;

    flex-direction: column;

    gap: 15px;

    border-top: 1px solid var(--blog-panel-border);

    padding-top: 30px;

}



.floating-share-title {

    font-family: var(--font-body);

    font-size: 0.65rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--blog-text-muted);

}



.floating-share-list {

    display: flex;

    gap: 15px;

}



.floating-share-btn {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid var(--blog-panel-border);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blog-text-muted);

    text-decoration: none;

    transition: var(--blog-transition);

    background-color: transparent;

}



.floating-share-btn:hover {

    color: var(--blog-accent);

    border-color: var(--blog-accent);

    background-color: rgba(214, 198, 174, 0.05);

    transform: translateY(-3px);

}



/* Rich Editorial Content Styles */

.article-reading-content {

    max-width: 720px;

    font-family: var(--font-body);

    font-size: 1rem;

    font-weight: 300;

    line-height: 1.75;

    color: var(--soft-grey);

    padding-bottom: 100px;

}



.article-reading-content img,

.article-reading-content video,

.article-reading-content iframe {

    max-width: 100% !important;

    height: auto !important;

    border-radius: 8px !important;

    margin: 25px 0 !important;

}



.article-reading-content p {

    margin-top: 0;

    margin-bottom: 20px;

    font-family: var(--font-body);

    font-size: 1rem;

    font-weight: 300 !important;

    line-height: 1.75;

    color: var(--soft-grey);

}



.article-reading-content h2, 

.article-reading-content h3 {

    font-family: var(--font-heading);

    font-weight: 300;

    color: var(--off-white);

    letter-spacing: -0.5px;

    margin-top: 40px;

    margin-bottom: 20px;

}



.article-reading-content h2 {

    font-size: 2rem;

    line-height: 1.2;

}



.article-reading-content h3 {

    font-size: 1.6rem;

    line-height: 1.3;

}



.article-reading-content blockquote {

    border-left: 2px solid var(--blog-accent);

    padding: 10px 0 10px 40px;

    margin: 50px 0;

    font-family: var(--font-heading);

    font-size: 2.2rem;

    line-height: 1.35;

    font-style: italic;

    color: #9A8B73;

    font-weight: 300;

}



.article-reading-content ul {

    list-style: none;

    padding-left: 0;

    margin-bottom: 30px;

}



.article-reading-content ul li {

    position: relative;

    padding-left: 25px;

    margin-bottom: 12px;

    color: var(--soft-grey);

    font-weight: 300;

    line-height: 1.75;

}



.article-reading-content ul li::before {

    content: "•";

    position: absolute;

    left: 0;

    top: 2px;

    color: var(--orange-accent);

    font-weight: bold;

    font-size: 1.2rem;

    line-height: 1;

}



.article-reading-content ol {

    margin-bottom: 30px;

    padding-left: 25px;

}



.article-reading-content ol li {

    margin-bottom: 12px;

    color: var(--soft-grey);

    font-weight: 300;

    line-height: 1.75;

}



.article-reading-content li strong {

    color: var(--off-white);

    font-weight: 500;

}



/* Section Divider */

.article-divider {

    height: 1px;

    background-color: var(--blog-panel-border);

    margin: 80px 0;

}



/* Suggested Reading (Recommended Block at the footer) */

.suggested-reading-section {

    background-color: var(--blog-panel-bg);

    border-top: 1px solid var(--blog-panel-border);

    padding: 120px 0;

}



.suggested-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 60px;

}



.suggested-title {

    font-family: var(--font-heading);

    font-size: 3rem;

    font-weight: 300;

    margin: 0;

}



.suggested-link {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--blog-accent);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: var(--blog-transition);

}



.suggested-link:hover {

    color: var(--off-white);

}



.suggested-link i {

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.suggested-link:hover i {

    transform: translateX(5px);

}



/* ==========================================================================

   3.5 Sidebar Related Posts & Custom Scroll Mouse

   ========================================================================== */



/* Sticky Right Panel Column Container */

.article-floating-panel {

    align-self: stretch !important;

    height: auto !important;

    width: 100% !important;

    position: relative !important;

}



.sidebar-sticky-wrapper {

    position: sticky !important;

    top: 110px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 35px !important;

    margin-top: 10px !important;

    padding-bottom: 20px !important;

    width: 100% !important;

}



/* Sidebar Related Insights List */

.sidebar-related-section {

    margin-top: 10px !important;

    margin-bottom: 10px !important;

}



.sidebar-related-title {

    font-family: var(--font-body) !important;

    font-size: 0.65rem !important;

    font-weight: 600 !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;

    color: var(--blog-text-muted) !important;

    display: block !important;

    margin-bottom: 20px !important;

    border-bottom: 1px solid var(--blog-panel-border) !important;

    padding-bottom: 8px !important;

}



.sidebar-related-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 20px !important;

}



.sidebar-related-item {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    text-decoration: none !important;

    color: inherit !important;

    transition: all 0.3s ease !important;

    border-bottom: 1px solid rgba(154, 128, 94, 0.08) !important;

    padding-bottom: 12px !important;

}



.sidebar-related-item:last-child {

    border-bottom: none !important;

    padding-bottom: 0 !important;

}



.sidebar-related-img {

    width: 60px !important;

    height: 60px !important;

    border-radius: 6px !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

    background-color: #EAEAEA !important;

    border: 1px solid rgba(154, 128, 94, 0.1) !important;

}



.sidebar-related-img img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.sidebar-related-item:hover .sidebar-related-img img {

    transform: scale(1.12) !important;

}



.sidebar-related-info {

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

}



.sidebar-related-tag {

    font-family: var(--font-body) !important;

    font-size: 0.58rem !important;

    font-weight: 600 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    color: var(--blog-accent) !important;

}



.sidebar-related-post-title {

    font-family: var(--font-heading) !important;

    font-size: 0.9rem !important;

    font-weight: 500 !important;

    line-height: 1.3 !important;

    margin: 0 !important;

    color: var(--off-white) !important; /* Force correct text color override */

    transition: color 0.3s ease !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

}



.sidebar-related-item:hover .sidebar-related-post-title {

    color: var(--blog-accent) !important;

}



/* Share box layout spacing */

.floating-share-box {

    border-top: 1px solid var(--blog-panel-border) !important;

    padding-top: 20px !important;

    margin-top: auto !important;

}



/* Premium Animated Scroll Mouse Indicator */

.detail-scroll-indicator {

    bottom: 50px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 8px !important;

    z-index: 5 !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

}



.detail-scroll-indicator span {

    font-family: var(--font-body) !important;

    font-size: 0.65rem !important;

    font-weight: 500 !important;

    letter-spacing: 3px !important;

    text-transform: uppercase !important;

    color: rgba(255, 255, 255, 0.65) !important;

    animation: textPulse 2.5s infinite ease-in-out !important;

}



.scroll-mouse-outline {

    width: 22px !important;

    height: 36px !important;

    border: 2px solid rgba(255, 255, 255, 0.5) !important;

    border-radius: 20px !important;

    position: relative !important;

}



.scroll-mouse-wheel {

    width: 4px !important;

    height: 8px !important;

    background-color: var(--blog-accent) !important;

    border-radius: 4px !important;

    position: absolute !important;

    top: 6px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    animation: mouseWheelScroll 1.6s infinite cubic-bezier(0.25, 1, 0.5, 1) !important;

}



@keyframes mouseWheelScroll {

    0% {

        opacity: 0;

        top: 6px;

    }

    15% {

        opacity: 1;

    }

    50% {

        opacity: 1;

        top: 18px;

    }

    100% {

        opacity: 0;

        top: 22px;

    }

}



@keyframes textPulse {

    0%, 100% { opacity: 0.55; }

    50% { opacity: 0.95; }

}



/* Responsive adjustment for Mobile (Sidebar collapses below details) */

@media (max-width: 991px) {

    .article-floating-panel {

        height: auto !important;

        position: relative !important;

        top: 0 !important;

        margin-top: 40px !important;

        margin-bottom: 0px !important;

        align-self: stretch !important;

        border-top: 1px solid var(--blog-panel-border) !important;

        border-bottom: none !important;

        padding-top: 40px !important;

        padding-bottom: 0px !important;

    }

    

    .sidebar-sticky-wrapper {

        position: relative !important;

        top: 0 !important;

        margin-top: 0px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        width: 100% !important;

    }

    .sidebar-related-section {

        margin-top: 20px !important;

        margin-bottom: 20px !important;

        width: 100% !important;

    }

}



/* ==========================================================================

   4. Responsive Adaptations

   ========================================================================== */

@media (max-width: 1199px) {

    .editorial-grid {

        gap: 40px 30px;

    }

    

    .editorial-card {

        grid-column: span 6;

    }

    

    .editorial-card.size-featured {

        padding: 30px;

        gap: 40px;

        border-radius: 12px;

    }

    

    .editorial-card.size-featured .editorial-card-title {

        font-size: 2.5rem;

    }

    

    .article-title {

        font-size: 3.8rem;

    }

    

    .article-layout-container {

        grid-template-columns: 1fr 220px;

        gap: 40px;

    }

}



@media (max-width: 991px) {

    .blog-hero-banner-title {

        font-size: 4rem;

    }

    

    .editorial-card.size-featured {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 30px;

    }

    

    .editorial-card {

        grid-column: span 6;

    }

    

    .article-header {

        padding-top: 140px;

    }

    

    .article-title {

        font-size: 3.2rem;

    }

    

    .article-hero-media-wrapper {

        aspect-ratio: 16/9;

    }

    

    .article-layout-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    

}



@media (max-width: 767px) {

    .blog-hero-banner {

        height: 60vh;

    }

    

    .blog-hero-banner-title {

        font-size: 3rem;

    }

    

    .blog-filter-nav {

        margin-bottom: 40px;

        gap: 8px;

        padding: 6px;

        border-radius: 20px;

        width: 100%;

        justify-content: flex-start;

        overflow-x: auto;

    }

    

    .blog-filter-btn {

        padding: 8px 18px;

        font-size: 0.7rem;

    }

    

    .editorial-grid {

        gap: 30px 0;

    }

    

    .editorial-card {

        grid-column: span 12 !important;

        padding: 20px;

    }

    

    .editorial-card.size-featured {

        grid-template-columns: 1fr;

        gap: 20px;

        border-radius: 12px;

    }

    

    .editorial-card.size-featured .editorial-card-title {

        font-size: 2.2rem;

    }

    

    .article-title {

        font-size: 2.5rem;

        line-height: 1.2;

    }

    

    .article-meta-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

    

    .article-floating-panel {

        flex-direction: column;

        align-items: flex-start;

    }

    

    .floating-share-box {

        flex-direction: column;

        align-items: flex-start;

        width: 100%;

        border-top: 1px solid var(--blog-panel-border);

        padding-top: 20px;

    }

    

    .article-reading-content h2 {

        font-size: 2rem;

    }

    

    .article-reading-content blockquote {

        font-size: 1.6rem;

        padding-left: 20px;

        margin: 35px 0;

    }

}



@media (max-width: 576px) {

    /* 1. Blog hero banner (listing page) */

    .blog-hero-banner {

        height: 50vh;

    }



    .blog-hero-banner-title {

        font-size: 2.2rem;

    }



    .blog-hero-banner-desc {

        font-size: 0.9rem;

    }



    /* 2. Blog filter nav buttons */

    .blog-filter-btn {

        font-size: 0.65rem;

        padding: 7px 14px;

    }



    /* 3. Editorial cards */

    .editorial-card {

        padding: 16px;

    }



    .editorial-card-title {

        font-size: 1.4rem;

    }



    .editorial-card-excerpt {

        font-size: 0.82rem;

    }



    .editorial-card-cta {

        font-size: 0.7rem;

    }



    /* 4. Blog detail hero */

    .blog-hero-banner-lbl {

        font-size: 0.7rem;

    }



    /* 5. Article meta row */

    .article-meta-row {

        gap: 15px;

        padding: 15px 0;

    }



    /* 6. Article layout container */

    .article-layout-container {

        padding: 0 20px;

    }



    .article-reading-content {

        font-size: 1rem;

        line-height: 1.75;

        padding-bottom: 60px;

    }



    /* 7. Article reading content headings */

    .article-reading-content h2 {

        font-size: 1.6rem;

        margin-top: 40px;

    }



    .article-reading-content h3 {

        font-size: 1.3rem;

    }



    .article-reading-content blockquote {

        font-size: 1.3rem;

        padding-left: 15px;

        margin: 25px 0;

    }







    /* 9. Suggested reading section */

    .suggested-reading-section {

        padding: 60px 0;

    }



    .suggested-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        margin-bottom: 30px;

    }



    .suggested-title {

        font-size: 2rem;

    }



    /* 10. Floating share panel */

    .floating-share-btn {

        width: 36px;

        height: 36px;

    }



    /* 11. Reading progress bar */

    .reading-progress-container {

        height: 2px;

    }

}