/*
 * LBN Cultural Events — Archive page CSS
 * DS v.3 sandy neumorphic. Reuses ce-strip__card from homepage-strip.css.
 */

/* ── Outer wrapper ── */
.ce-archive {
    margin: 0;
    padding: 0;
}

/* ── Hero: full-width breakout ── */
.ce-archive__hero {
    position: relative;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: 0;
    aspect-ratio: 3 / 1;
    min-height: 220px;
    background-color: var(--primary_color, #285260);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    color: var(--c-text-on-primary, #faf3e3);
}

.ce-archive__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.10) 0%,
        rgba(0,0,0,.50) 50%,
        rgba(0,0,0,.65) 100%
    );
    z-index: 0;
}

.ce-archive__hero-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.ce-archive__hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 16px;
    color: var(--c-text-on-primary, #faf3e3);
}

.ce-archive__hero-title {
    font-family: Zain, serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 10px;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5);
}

.ce-archive__hero-sub {
    font-size: 1rem;
    opacity: .85;
    margin: 0;
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* ── Organizer badge ── */
.ce-archive__org-wrap {
    position: relative;
    z-index: 1;
    display: block;
    text-align: left;
    text-decoration: none;
    padding: 20px 32px 0;
}
.ce-archive__org-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 6px 18px 6px 12px;
}
.ce-archive__org-label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .4px;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
}
.ce-archive__org-logo {
    height: 48px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    border-radius: 4px;
    filter: brightness(0) invert(1);
    opacity: .92;
}
.ce-archive__org-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
a.ce-archive__org-wrap:hover .ce-archive__org-badge {
    background: rgba(255,255,255,.22);
}

/* ── Filter bar: full-width breakout ── */
.ce-archive__filter-bar {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    background: var(--c-sand-200, #f3e8d1);
    border-bottom: 1px solid var(--c-border-soft, #e4d6b8);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.ce-archive__filter-tabs {
    display: flex;
    gap: 0;
}

.ce-archive__filter-tab {
    display: inline-block;
    padding: 14px 20px;
    font-family: Tajawal, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text-muted, #8a7050);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

.ce-archive__filter-tab:hover {
    color: var(--c-text-body, #5c4a32);
    text-decoration: none;
}

.ce-archive__filter-tab.active {
    color: var(--primary_color, #285260);
    border-bottom-color: var(--primary_color, #285260);
}

.ce-archive__count {
    font-size: .85rem;
    color: var(--c-text-muted, #8a7050);
    margin: 0;
    padding: 8px 0;
}

/* ── Body ── */
.ce-archive__body {
    padding: 40px 32px;
}

/* ── Grid: reuse ce-strip__card from homepage-strip.css ── */
.ce-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

@media (max-width: 960px) {
    .ce-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .ce-archive__grid { grid-template-columns: 1fr; }
}

/* Organizer row (extra meta line) */
.ce-archive__card-org {
    color: var(--primary_color, #285260) !important;
    font-weight: 600;
}

/* ── Empty state ── */
.ce-archive__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--c-text-muted, #8a7050);
}

.ce-archive__empty > i {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
    opacity: .3;
    color: var(--primary_color, #285260);
}

.ce-archive__empty p {
    font-size: 1rem;
    margin: 0;
}

/* ── Pagination ── */
.ce-archive__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 16px;
}

.ce-archive__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r-sm, 8px);
    background: var(--c-sand-100, #faf3e3);
    box-shadow: var(--shadow-raised-sm, 3px 3px 7px rgba(0,0,0,.1), -2px -2px 6px rgba(255,255,255,.7));
    color: var(--c-text-body, #5c4a32);
    font-family: Tajawal, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.ce-archive__page-btn:hover {
    background: var(--primary_color, #285260);
    color: #fff !important;
    text-decoration: none;
}

.ce-archive__page-btn.active {
    background: var(--primary_color, #285260);
    color: #fff !important;
    box-shadow: none;
}