/* ==========================================================
   MASTER 3-COLUMN LAYOUT — SINGLE SOURCE OF TRUTH
   Structure: Left Ad Sidebar | Main Content | Right Ad Sidebar
   
   IMPORTANT: This file is the canonical layout authority.
   Do NOT override .main-layout-wrapper display or grid-template-columns
   in any page-specific <style> blocks.  All pages must respect this grid.
   ========================================================== */

/* Main Layout Wrapper - 3 Column Grid */
.main-layout-wrapper {
    display: grid !important;
    grid-template-columns: 220px 1fr 220px !important;
    gap: 20px;
    max-width: 1800px;
    /* Top offset comes from body padding-top (header spacer); do not add duplicate margin here */
    margin: 0 auto !important;
    padding: 0 20px 20px 20px;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Red banner supplies 10px margin-bottom; grid must not add top margin (+ and ~ for stray nodes between) */
#redBannerWrapper + .main-layout-wrapper,
#redBannerWrapper ~ .main-layout-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 10px gap between hero strip and grid when no red banner */
.nikahfinder-hero + .main-layout-wrapper,
.geno-hero + .main-layout-wrapper,
.home-hero + .main-layout-wrapper {
    margin-top: 10px !important;
}

@media (max-width: 980px) {
    .main-layout-wrapper {
        margin-top: 0 !important;
    }
    #redBannerWrapper + .main-layout-wrapper,
    #redBannerWrapper ~ .main-layout-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .nikahfinder-hero + .main-layout-wrapper,
    .geno-hero + .main-layout-wrapper,
    .home-hero + .main-layout-wrapper {
        margin-top: 10px !important;
    }
}

/* DEFENSIVE: Ensure grid children stay in their columns and one row */
.main-layout-wrapper > .sidebar-left,
.main-layout-wrapper > .sidebar-right,
.main-layout-wrapper > .content-area {
    float: none !important;
    clear: none !important;
    position: relative;
    box-sizing: border-box;
    align-self: start !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Sidebar Styles */
.sidebar-left,
.sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    overflow: hidden;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.sidebar-left {
    grid-column: 1 !important;
}

.sidebar-right {
    grid-column: 3 !important;
}

.sidebar-content {
    position: sticky !important;
    /* Set by red-banner.php: banner bottom + --glrcf-banner-content-gap (aligns ad columns with middle content) */
    top: var(--glrcf-sidebar-sticky-top, 150px) !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
    width: 100%;
    max-height: calc(100vh - var(--glrcf-sidebar-sticky-top, 150px) - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 980px) {
    .sidebar-content {
        top: var(--glrcf-sidebar-sticky-top, 150px) !important;
    }
}

/* Main Content Area */
.content-area {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow-x: hidden;
    overflow-y: visible;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Explorer map: keep side ads aligned to the map column, not below footer */
.content-area:has(.map-explorer-container) {
    overflow: hidden;
    min-height: calc(100vh - var(--glrcf-sidebar-sticky-top, 150px) - 40px);
}

#redBannerWrapper ~ .main-layout-wrapper .content-area > :first-child,
#redBannerWrapper + .main-layout-wrapper .content-area > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Prevent stray elements inside the grid wrapper from breaking columns */
.main-layout-wrapper > *:not(.sidebar-left):not(.sidebar-right):not(.content-area) {
    grid-column: 1 / -1;
}

/* Standardized 4-Card Grid Utility */
.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
}

@media (max-width: 1400px) {
    .card-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .card-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Ad Block Styles */
.ad-block {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    overflow: hidden;
}

.ad-block img {
    max-width: 100%;
    border-radius: 4px;
}

.ad-block h4 {
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #333;
}

.ad-block p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
}

.ad-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #adb5bd;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.btn-outline {
    border: 1px solid #667eea;
    color: #667eea;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    display: inline-block;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: #667eea;
    color: #fff;
}

/* Specific Promo Styles */
.internal-promo .promo-links {
    list-style: none;
    padding: 0;
    text-align: left;
}

.internal-promo .promo-links li {
    margin-bottom: 8px;
}

.internal-promo .promo-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.95em;
}

.internal-promo .promo-links a:hover {
    color: #667eea;
    padding-left: 5px;
    transition: 0.2s;
}

/* Charity Block Highlight */
.ad-block.charity-highlight {
    background: linear-gradient(135deg, #fff0f1 0%, #ffeef0 100%);
    border-color: #ffdce0;
}

.heart-icon {
    font-size: 24px;
    color: #ff4757;
    margin-bottom: 10px;
    animation: heartBeat 1.5s infinite;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.btn-charity {
    background: #ff4757;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(255, 71, 87, 0.3);
}

.btn-charity:hover {
    background: #ff2e43;
    transform: translateY(-1px);
}

/* ==========================================================
   RESPONSIVE RULES
   ========================================================== */

/* Tablet: Squeeze sidebars */
@media (max-width: 1200px) {
    .main-layout-wrapper {
        grid-template-columns: 180px 1fr 180px !important;
    }
}

/* Mobile: Stack layout, hide sidebars */
@media (max-width: 768px) {
    .main-layout-wrapper {
        display: block !important;
        grid-template-columns: none !important;
        padding: 10px;
    }

    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    .content-area {
        width: 100% !important;
        grid-column: auto !important;
        overflow: visible;
    }
}


/* ===============================
   GLOBAL STANDARDIZATION: VERTICAL SPACING (GLRelief SPECIFIC: 10px)
   =============================== */

/* 1. Reset all internal margins of hero/banner units inside the layout wrapper */
.main-layout-wrapper .nikahfinder-hero,
.main-layout-wrapper .geno-hero,
.main-layout-wrapper .home-hero,
.main-layout-wrapper .pt-hero,
.main-layout-wrapper .global-category-bar,
.main-layout-wrapper .page-banner,
.main-layout-wrapper .hero-unit,
.main-layout-wrapper .hero-banner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Header→first layout row: body padding-top = header only (adjustHeaderSpacer); no extra margin here */
header ~ .main-layout-wrapper,
#mainHeader ~ .main-layout-wrapper,
.header-panel ~ .main-layout-wrapper {
    margin-top: 0 !important;
}

/* 3. GLRelief: header bottom line → red banner = --glrcf-header-banner-gap; banner → grid = --glrcf-banner-content-gap */
#redBannerWrapper {
    margin-top: 5px !important;
    margin-bottom: var(--glrcf-banner-content-gap, 10px) !important;
}
#redCrisisBanner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 980px) {
    .nikahfinder-hero ~ .main-layout-wrapper,
    .geno-hero ~ .main-layout-wrapper,
    .home-hero ~ .main-layout-wrapper {
        margin-top: 10px !important;
    }
}