/*
  Ensany v2 — Search results page (/search).
  Merges the page-level layout patterns from v2-campaigns.css and
  v2-news.css so both <x-campaign-card> and <x-article-card> render
  correctly inside the same #v2Search wrapper. Background, grid,
  pagination, and empty-state are unified; card-level styles from both
  page families are scoped under #v2Search so nothing leaks.
*/

#v2Search {
    background: #F7F4EC;
    font-family: 'Inter', sans-serif;
}

/* ---------- Page header ---------- */
#v2Search .v2s-head {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 16px 20px;
}

#v2Search .v2s-title {
    font-size: 22px;
    font-weight: 800;
    color: #12332A;
    margin: 0;
}

#v2Search .v2s-title span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #D4A94B;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

/* ---------- Section titles (Campaigns vs Articles) ---------- */
#v2Search .v2s-section-head {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 16px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#v2Search .v2s-section-head:first-of-type {
    padding-top: 0;
}

#v2Search .v2s-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #12332A;
    margin: 0;
}

#v2Search .v2s-section-count {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #578021;
    border-radius: 9999px;
    padding: 4px 12px;
    line-height: 1;
}

/* ---------- Unified grid (used by both sections) ---------- */
#v2Search .v2s-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 991px) {
    #v2Search .v2s-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #v2Search .v2s-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---------- Empty state ---------- */
#v2Search .v2s-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 16px;
    color: #5B6660;
    font-size: 15px;
    font-weight: 600;
}

/* ---------- Campaign card skeleton (from v2-campaigns.css) ---------- */
#v2Search .v2cc-img-skel {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, #F1ECDF 28%, #FBF8F1 48%, #F1ECDF 68%);
    background-size: 250% 100%;
    animation: v2sShimmer 1.4s ease-in-out infinite;
    transition: opacity .35s ease;
}

#v2Search .v2cc-img-skel.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#v2Search .v2cc-img {
    opacity: 0;
    transition: opacity .4s ease;
}

#v2Search .v2cc-img.is-loaded {
    opacity: 1;
}

/* ---------- Article card (from v2-news.css, scoped to #v2Search) ---------- */
#v2Search .v2n-card {
    background: #fff;
    border: 1px solid #E7E1D2;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

#v2Search .v2n-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px -20px rgba(18, 51, 42, .35);
}

#v2Search .v2n-img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #F1ECDF;
}

#v2Search .v2n-img-skel {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, #F1ECDF 28%, #FBF8F1 48%, #F1ECDF 68%);
    background-size: 250% 100%;
    animation: v2sShimmer 1.4s ease-in-out infinite;
    transition: opacity .35s ease;
}

#v2Search .v2n-img-skel.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#v2Search .v2n-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .4s ease, transform .35s ease;
}

#v2Search .v2n-img.is-loaded {
    opacity: 1;
}

#v2Search .v2n-card:hover .v2n-img.is-loaded {
    transform: scale(1.06);
}

#v2Search .v2n-body {
    padding: 14px;
}

#v2Search .v2n-title-link {
    text-decoration: none;
}

#v2Search .v2n-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #12332A;
    line-height: 1.4;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#v2Search .v2n-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #9AA39C;
    margin-bottom: 10px;
}

#v2Search .v2n-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: #578021;
    text-decoration: none;
}

#v2Search .v2n-readmore:hover {
    color: #12332A;
}

/* ---------- Shared shimmer keyframes ---------- */
@keyframes v2sShimmer {
    0% {
        background-position: 250% 0;
    }

    100% {
        background-position: -250% 0;
    }
}

/* ---------- Pagination (unified for both sections) ---------- */
#v2Search .pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    flex-wrap: wrap;
}

#v2Search .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #E7E1D2;
    border-radius: 9999px;
    background: #fff;
    color: #12332A;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#v2Search .page-item.active .page-link {
    background: #578021;
    border-color: #578021;
    color: #fff;
}

#v2Search .page-item.disabled .page-link {
    color: #9AA39C;
    background: #F1ECDF;
    cursor: not-allowed;
}

/* ---------- Utility ---------- */
#v2Search .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}