/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Emerald Colors */
    --color-emerald: #065f46;
    --color-emerald-dark: #044e39;
    --color-emerald-light: #0a7c5c;
    --color-emerald-soft: #ecfdf5;
    
    /* Gold Colors */
    --color-gold: #d97706;
    --color-gold-light: #f59e0b;
    --color-gold-dark: #b45309;
}

.site-logo {
    display: block;
    object-fit: contain;
}

.structure-switch-wrap {
    padding-top: 2rem;
    padding-bottom: 0;
}

.structure-switch {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border: 1px solid #dfe5df;
    border-radius: 999px;
    background: #f5f1e8;
}

.structure-switch-btn {
    min-width: 100px;
    padding: .7rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #617070;
    cursor: pointer;
    font: 700 .9rem Arial, sans-serif;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.structure-switch-btn:hover {
    color: var(--color-emerald);
}

.structure-switch-btn.active {
    background: var(--color-emerald);
    color: #fff;
    box-shadow: 0 4px 12px rgba(6, 95, 70, .2);
}

[data-structure-section] {
    display: none;
}

[data-structure-section].is-visible {
    display: block;
}

@media (max-width: 560px) {
    .structure-switch-wrap { text-align: center; }
    .structure-switch-btn { min-width: 86px; }
}

/* ============================================
   PATTERN ISLAMI
   ============================================ */
.bg-islamic-pattern {
    background-color: var(--color-emerald);
    background-image: 
        radial-gradient(var(--color-gold-light) 0.75px, transparent 0.75px), 
        radial-gradient(var(--color-gold-light) 0.75px, var(--color-emerald) 0.75px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

.bg-light-pattern {
    background-image: radial-gradient(var(--color-emerald) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
.gold-gradient-text {
    background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   FILTER BUTTONS & EVENT CARDS
   ============================================ */
.filter-btn {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.filter-btn:hover {
    background-color: #ecfdf5;
    color: var(--color-emerald);
    border-color: var(--color-emerald);
}

.filter-btn.active {
    background-color: var(--color-emerald);
    color: white;
    border-color: var(--color-emerald);
}

.event-card.hidden {
    display: none;
}

.content-page {
    min-height: 100vh;
    background: #f5f1e8;
    color: #17242a;
}

.content-page .eyebrow {
    color: #b8751c;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.content-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 22px 72px;
}

.back-link, .card-link { color: var(--color-emerald); font-weight: 800; }
.content-hero { padding: 64px 0 34px; max-width: 760px; }
.content-hero h1 { margin: 8px 0; color: #17242a; font: 700 clamp(2.4rem, 6vw, 4.5rem)/1 Georgia, serif; }
.content-hero > p:not(.eyebrow) { color: #6b7b7b; font-size: 1.05rem; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.content-card, .detail-card { background: #fff; border: 1px solid #dfe5df; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(23,36,42,.06); }
.content-grid .inspiration-card { display: flex; height: 460px; min-height: 460px; flex-direction: column; }
.event-card-modern { padding: 26px; transition: transform .2s, box-shadow .2s; }
.event-card-thumbnail { width: calc(100% + 52px); height: 180px; margin: -26px -26px 22px; object-fit: cover; }
.event-card-modern:hover, .inspiration-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(23,36,42,.11); }
.content-card h2 { color: #17242a; font: 700 1.45rem/1.2 Georgia, serif; margin: 8px 0 16px; }
.content-grid .inspiration-card h2 { display: -webkit-box; min-height: 3.48rem; max-height: 3.48rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.content-card p { color: #617070; line-height: 1.7; }
.card-kicker, .media-label { color: #b8751c; font-size: .72rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.event-meta { display: grid; gap: 12px; margin: 18px 0; padding: 16px 0; border-top: 1px solid #e8eee8; border-bottom: 1px solid #e8eee8; }
.event-meta dt { color: #829090; font-size: .75rem; text-transform: uppercase; letter-spacing: .7px; }
.event-meta dd { margin: 3px 0 0; font-weight: 700; }
.card-link { display: inline-block; margin-top: 12px; font-size: .9rem; }
.inspiration-card .card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.content-grid .inspiration-card .card-body > p:not(.card-meta) { display: -webkit-box; min-height: 5.1rem; max-height: 5.1rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.inspiration-card .card-link { margin-top: auto; }
.share-button { border: 1px solid #dfe5df; border-radius: 8px; padding: 8px 12px; background: #fff; color: var(--color-emerald); cursor: pointer; font: 700 .85rem Arial, sans-serif; }
.share-button:hover { border-color: var(--color-emerald); background: var(--color-emerald-soft); }
.article-breadcrumb { color: #6b7b7b; font-size: .85rem; margin-bottom: 24px; }
.article-breadcrumb a { color: var(--color-emerald); font-weight: 800; }
.article-image { width: 100%; max-height: 460px; object-fit: cover; }
.detail-card figcaption { padding: 12px 22px; color: #6b7b7b; font-size: .85rem; }
.article-body { color: #617070; line-height: 1.9; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.article-tags span { padding: 6px 10px; border-radius: 999px; background: var(--color-emerald-soft); color: var(--color-emerald); font-size: .8rem; font-weight: 700; }
.comments-panel { margin-top: 24px; padding: 28px; border: 1px solid #dfe5df; border-radius: 14px; background: #fff; }
.comments-panel h2 { margin: 0 0 18px; font: 700 1.6rem Georgia, serif; }
.comments-panel .comment-form { display: grid; gap: 10px; }
.comments-panel .comment-form textarea { min-height: 100px; resize: vertical; }
.comment-submit { justify-self: start; border: 0; border-radius: 8px; padding: 10px 14px; background: var(--color-emerald); color: #fff; cursor: pointer; font: 700 .85rem Arial, sans-serif; }
.comment-submit:hover { background: var(--color-emerald-dark); }
.comment-error { margin: 0 0 12px; color: #a33b32; font-size: .9rem; }
.comment-list { margin-top: 24px; }
.inspiration-card img { width: 100%; height: 210px; object-fit: cover; }
.card-body { padding: 22px; }
.card-meta { font-size: .8rem; margin: 0 0 12px; }
.inline-comments { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e8eee8; }
.inline-comments h3 { display: flex; justify-content: space-between; margin: 0 0 12px; color: #17242a; font-size: .95rem; }
.inline-comments h3 span { color: #829090; font-weight: 400; }
.comment-form input, .comment-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfe5df; border-radius: 8px; padding: 10px 12px; color: #17242a; background: #fbfcfa; font: inherit; }
.comment-form textarea { min-height: 70px; resize: vertical; }
.comment-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.comment-compose button { border: 0; border-radius: 8px; padding: 10px 14px; background: var(--color-emerald); color: #fff; cursor: pointer; font-weight: 800; }
.comment-compose button:hover { background: var(--color-emerald-dark); }
.comment-item { padding: 12px 0 0; font-size: .85rem; }
.comment-item strong { color: #17242a; }
.comment-item p { margin: 3px 0 0; color: #617070; line-height: 1.5; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.filter-tabs a { padding: 10px 16px; border: 1px solid #dfe5df; border-radius: 999px; background: #fff; font-weight: 700; }
.filter-tabs a.active { color: #fff; background: var(--color-emerald); border-color: var(--color-emerald); }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.media-card { overflow: hidden; border: 1px solid #dfe5df; border-radius: 12px; background: #fff; }
.media-preview { height: 220px; background: #e8eee8; }
.media-preview img, .media-preview video { width: 100%; height: 100%; object-fit: cover; }
.media-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.media-footer a { color: var(--color-emerald); font-size: .85rem; font-weight: 800; }
.empty-state { color: #6b7b7b; padding: 24px 0; }
.detail-shell { max-width: 900px; }
.detail-card { margin-top: 30px; }
.detail-header { padding: 38px; background: #e9f1eb; }
.event-detail-thumbnail { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.detail-header h1 { color: #17242a; font: 700 clamp(2rem, 5vw, 3.5rem)/1.1 Georgia, serif; margin: 10px 0 24px; }
.detail-copy, .detail-media { padding: 34px 38px; }
.detail-copy { border-bottom: 1px solid #e1e9e1; }
.detail-copy h2, .section-heading h2 { font: 700 1.7rem Georgia, serif; margin: 0 0 15px; }
.detail-copy p { color: #617070; line-height: 1.9; }
.section-heading { margin-bottom: 22px; }
@media (max-width: 800px) { .content-grid, .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .content-shell { padding: 24px 15px 48px; } .content-grid, .media-grid { grid-template-columns: 1fr; } .detail-header, .detail-copy, .detail-media { padding: 25px 20px; } }