/* ==========================================================
   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;
    column-gap: 20px;
    row-gap: 0;
    max-width: 1800px;
    /* Top inset from fixed header: body padding-top (adjustHeaderSpacer); do not stack margin here */
    margin: 0 auto !important;
    padding: 0 20px 20px 20px;
    min-height: 80vh;
    width: 100%;
    box-sizing: border-box;
}

/* DEFENSIVE: Ensure grid children stay in their columns */
.main-layout-wrapper > .sidebar-left,
.main-layout-wrapper > .sidebar-right {
    float: none !important;
    clear: none !important;
    position: sticky;
    top: calc(var(--mat-header-bottom, 80px) + var(--mat-content-gap, 10px));
    align-self: start;
    box-sizing: border-box;
}

.main-layout-wrapper > .content-area {
    float: none !important;
    clear: none !important;
    position: relative;
    box-sizing: border-box;
}

/* Sidebar Styles */
.sidebar-left,
.sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    overflow: hidden;
}

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

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

.sidebar-content {
    position: relative;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 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;
}

/* 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);
}


@media (max-width: 980px) {
    .main-layout-wrapper {
        margin-top: 0 !important;
    }
}

/* ==========================================================
   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
   =============================== */

/* 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. Enforce gap between Header and Content for non-GLRelief sites */
header ~ .main-layout-wrapper,
#mainHeader ~ .main-layout-wrapper,
.header-panel ~ .main-layout-wrapper {
    margin-top: 20px !important;
}

/* NikahFinder: 10px below header comes from adjustHeaderSpacer() body padding-top — do not stack margin */
body.nikahfinder-site #mainHeader ~ .main-layout-wrapper,
body.nikahfinder-site header ~ .main-layout-wrapper,
body.nikahfinder-site .header-panel ~ .main-layout-wrapper {
    margin-top: 0 !important;
}

/* 3. Red Banner handling: 10px above and below according to user spec */
#redBannerWrapper {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

#redBannerWrapper ~ .main-layout-wrapper {
    margin-top: 0 !important; /* Gap is handled by banner's margin-bottom */
}

/* ==========================================================
   SIDEBAR LINK LISTS — unified icon + text size (left & right)
   ========================================================== */
.sidebar-left .sidebar-content,
.sidebar-right .sidebar-content {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Gift boutique / icon grid links */
.sidebar-content .gift-item {
    text-align: center;
}
.sidebar-content .gift-item i {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 0 4px 0 !important;
}
.sidebar-content .gift-item span {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
}
.sidebar-content .gift-boutique > div:first-child,
.sidebar-content .gift-boutique > div:first-child i {
    font-size: 11px !important;
    line-height: 1.2 !important;
}
.sidebar-content .gift-boutique p {
    font-size: 11px !important;
    line-height: 1.4 !important;
}
.sidebar-content .gift-boutique a:not(.gift-item) {
    font-size: 11px !important;
    font-weight: 600 !important;
}
.sidebar-content .gift-boutique a:not(.gift-item) i {
    font-size: 11px !important;
    margin-left: 4px !important;
}

/* Static promo / partner blocks */
.sidebar-content .ad-block h4,
.sidebar-content .ad-block h4 i,
.sidebar-content .ad-block h5,
.sidebar-content .ad-block h5 i {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}
.sidebar-content .ad-block p {
    font-size: 11px !important;
    line-height: 1.4 !important;
}
.sidebar-content .ad-block a,
.sidebar-content .ad-block a i {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}
.sidebar-content .ad-block > div:first-child,
.sidebar-content .ad-block .ad-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
}

/* Promo link lists with icons */
.sidebar-content .internal-promo .promo-links a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}
.sidebar-content .internal-promo .promo-links a i {
    font-size: 11px !important;
    width: 14px !important;
    min-width: 14px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Dynamic ad cards — normalize mixed inline sizes */
.sidebar-content .am-ad a {
    font-family: inherit !important;
}
.sidebar-content .am-ad .am-ad-media > span {
    font-size: 10px !important;
    font-weight: 800 !important;
}
.sidebar-content .am-ad a > div[style*="padding"] > div:first-child {
    font-size: 10px !important;
    font-weight: 700 !important;
}
.sidebar-content .am-ad a h4 {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.sidebar-content .am-ad a p {
    font-size: 11px !important;
    line-height: 1.45 !important;
}
.sidebar-content .am-ad a span {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}