/* ============================================================
   COMMON.CSS — shared between events.php and blogs.php
   Color tokens, base reset, page chrome, pagination, and any
   listing-page rule that was identical in both events.css and
   blogs.css. Page-specific card layouts live in events.css /
   blogs.css. Search-filter component base styles live in
   search_filter.css (untouched).
   ============================================================ */

:root {
    --primary:       #ff7518;
    --primary-2:     #ffab1a;
    --primary-2-hsl: hsl(24,100%,50%);
    --hover-accent:  hsl(from #ff7518 h s calc(l - 20));
    --bg:            #000;
    --bg-card:       hsl(0 0% 12%);
    --border-dashed: #d2d2d2;
    --text:          #e5e5e5;
    --text-muted:    rgba(229,229,229,.55);
    --tag-bg:        #222;
    --tag-hover:     #444;
    --radius-pill:   9999px;
    --transition:    all 0.3s ease-in-out;

    /* Listing-card shared values (used by both .event-card and .blog-card) */
    --card-bg:                rgba(255,255,255,.03);
    --card-border:             rgba(255,255,255,.05);
    --card-hover-border:       rgba(255,117,24,.35);
    --card-hover-shadow-color: rgba(255,117,24,.2);
    --card-desc-color:         rgba(229,229,229,.85);
    --card-radius:             2px;

    /* Tag pill (unified — same look everywhere a tag pill appears) */
    --tag-pill-font-size: .68rem;
    --tag-pill-padding:   .18rem .6rem;
    --tag-pill-bg:        rgba(255,117,24,.1);
    --tag-pill-border:    rgba(255,117,24,.22);
    --tag-pill-hover-bg:     rgba(255,117,24,.2);
    --tag-pill-hover-border: rgba(255,117,24,.42);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
* { font-family:"Lexend",sans-serif; font-optical-sizing:auto; font-weight:350; color:var(--text); font-size:1.05rem; }

body { background:var(--bg); min-height:100vh; display:flex; flex-direction:column; position:relative; line-height:1.6; }

/* ── DASHED STRIPS ──────────────────────────────────────────── */
.strip-left, .strip-right {
    position:fixed; top:0; width:1px; height:100vh;
    border-right:1px dashed var(--border-dashed);
    z-index:-1; opacity:.5; pointer-events:none;
}
.strip-left  { left:  calc((100% - 85%) / 2); }
.strip-right { right: calc((100% - 85%) / 2); }
@media (max-width:1024px) { .strip-left,.strip-right { display:none; } }

/* ── PAGE LAYOUT ────────────────────────────────────────────── */
.page-wrapper { display:flex; justify-content:center; width:100%; min-height:100vh; }
.events-container, .blogs-container { width:85vw; max-width:1400px; padding:2rem 0; }

/* ── PAGE HEADING ───────────────────────────────────────────── */
.event-element, .blog-element {
    width:100%; margin:2rem auto 3rem; display:flex; justify-content:space-between;
    align-items:center; padding-bottom:1rem; border-bottom:2px solid rgba(255,255,255,.1);
}
.top-left {
    font-size:clamp(1.5rem,4vw,2rem); font-weight:600;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.top-right { font-size:clamp(1.5rem,4vw,2rem); font-weight:700; opacity:.8; }

/* ── "VIEW DETAILS / READ MORE" LINK (shared by both card types) */
.read-more {
    color:var(--primary); text-decoration:none; font-weight:600; font-size:.95rem;
    display:inline-flex; align-items:center; transition:var(--transition);
    align-self:flex-start; width:fit-content;
}
.read-more::after { content:'→'; margin-left:8px; display:inline-block; transition:transform .3s; }
.read-more:hover  { color:var(--hover-accent); transform:translateX(4px); }
.read-more:hover::after { transform:translateX(4px); }

/* ── LISTING CARD SHARED PROPERTIES ─────────────────────────────
   Structural/shape properties (flex-direction, dimensions, hover
   transform distance, image hover scale) stay in events.css /
   blogs.css since they depend on each card's layout. Everything
   here is layout-independent: colors, base backgrounds, and
   transition targets that should always match across card types. */
.event-card, .blog-card {
    background:var(--card-bg);
    border-radius:var(--card-radius);
    overflow:hidden;
    transition:var(--transition);
    cursor:pointer;
    border:1px solid var(--card-border);
    display:flex;
}
.event-card:hover, .blog-card:hover {
    border-color:var(--card-hover-border);
}

.event-title, .blog-title {
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:.75rem;
    color:var(--text);
    transition:color .3s ease;
}
.event-card:hover .event-title,
.blog-card:hover .blog-title {
    color:var(--primary);
}

.event-description, .blog-description {
    font-size:.95rem;
    color:var(--card-desc-color);
    line-height:1.6;
    flex-grow:1;
    font-weight:300;
}

.event-image, .blog-image {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ── UNIFIED TAG PILL ─────────────────────────────────────────
   One tag-pill look shared by every listing card. Use on any
   future listing page too: <div class="card-tags"><span
   class="card-tag">Tag</span></div> */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .85rem;
}
.card-tag {
    font-size: var(--tag-pill-font-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: var(--tag-pill-padding);
    border-radius: var(--radius-pill);
    background: var(--tag-pill-bg);
    border: 1px solid var(--tag-pill-border);
    color: var(--primary);
    white-space: nowrap;
    transition: var(--transition);
}
.event-card:hover .card-tag,
.blog-card:hover .card-tag {
    background: var(--tag-pill-hover-bg);
    border-color: var(--tag-pill-hover-border);
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.no-events, .no-blogs { text-align:center; padding:4rem 2rem; font-size:1.2rem; color:var(--text-muted); }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin: 4rem 0 2rem;
    flex-wrap: wrap;
    width: 100%;
}

.pagination > a,
.pagination > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: var(--text) !important;
    font-size: .88rem !important;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
}

.pagination > a:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--primary);
    transform: translateY(-2px);
    color: var(--text) !important;
}

.pagination > span.pg-active {
    background: var(--primary) !important;
    border-color: var(--primary-2-hsl) !important;
    color: #000 !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255,117,24,.4);
    cursor: default;
    pointer-events: none;
    transform: none !important;
}

.pagination > span.pg-disabled {
    opacity: .28;
    cursor: default;
    pointer-events: none;
    transform: none !important;
}

.pagination > span.pg-ellipsis {
    border-color: transparent !important;
    background: transparent !important;
    width: 24px !important;
    color: var(--text-muted) !important;
    cursor: default;
    pointer-events: none;
}

.pagination > a.pg-nav,
.pagination > span.pg-nav {
    font-size: 1.2rem !important;
    font-weight: 400;
}

/* ── SEARCH-FILTER RESPONSIVE TWEAKS ────────────────────────────
   search_filter.css owns the component's base styles; these are
   page-level responsive tweaks that were duplicated verbatim in
   both events.css and blogs.css, so they now apply identically
   on both pages from one place. */
@media (max-width:768px) {
    .search-group { flex:1 1 100%; max-width:100%; }
    .filter-row .location-select { max-width:100%; width:100%; margin-right:0; margin-left:0; margin-top:.5rem; }
}
@media (max-width:480px) {
    .search-filter-section { padding:1.5rem 1rem; }
}

/* ── RESPONSIVE (shared layout rules) ──────────────────────────*/
@media (max-width:1024px) { .events-container, .blogs-container { width:90vw; } }

@media (max-width:768px) {
    .events-container, .blogs-container { width:92vw; }
    .event-element, .blog-element { flex-direction:column; gap:.5rem; text-align:center; }
}

@media (max-width:600px) {
    .pagination { gap:.3rem; margin:3rem 0 1.5rem; }
    .pagination > a,
    .pagination > span {
        width: 34px !important;
        height: 34px !important;
        font-size: .78rem !important;
        border-radius: 6px;
    }
    .pagination > a.pg-nav,
    .pagination > span.pg-nav {
        font-size: 1.05rem !important;
        width: 38px !important;
    }
}

@media (max-width:480px) {
    .event-element, .blog-element { margin:1rem 0 1.5rem; }
}

html { scroll-behavior:smooth; }
*:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }