/* ================================================
   CUSTOMER STORIES LISTING
   Filter bar + card grid + pagination.
   Card language mirrors the blog listing
   (blog-archive-test/css/blog-archive.css).
   ================================================ */

.cs-listing {
    padding: 4rem 0;
    position: relative;
}

.cs-listing.reduce-padding {
    padding: 2rem 0;
}

.cs-listing__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100% !important; /* Prevent external CSS from breaking the layout */
}

/* Visually hidden but readable by assistive tech. Scoped: the theme has no
   global .screen-reader-text. */
.cs-listing .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------
   Filter bar
   ------------------------------------------------ */

/* Light grey panel with a barely-there border, per the design. */
.cs-listing__filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1.7fr;
    gap: 1rem;
    align-items: center;
    background: #f6f6f7;
    border: 1px solid rgba(30, 30, 35, 0.06);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.cs-listing__filter {
    position: relative;
    min-width: 0;
}

.cs-listing__select,
.cs-listing__search {
    width: 100%;
    height: 52px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: #1e1e23;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    padding: 0 2.5rem 0 1rem;
    appearance: none;
    -webkit-appearance: none;
}

/* Chevron for the selects, drawn rather than shipped as an asset. */
.cs-listing__filter--select::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #1e1e23;
    border-bottom: 2px solid #1e1e23;
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

.cs-listing__filter--search .cs-listing__search {
    padding-left: 2.75rem;
}

.cs-listing__search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b6b70;
    display: flex;
    pointer-events: none;
}

/* Soft focus ring rather than a hard second outline: the border picks up brand
   green and a translucent halo sits outside it. */
.cs-listing__select:focus,
.cs-listing__search:focus,
.cs-listing__select:focus-visible,
.cs-listing__search:focus-visible {
    outline: none;
    border-color: #00e65f;
    box-shadow: 0 0 0 3px rgba(0, 230, 95, 0.22);
}

/* Search submit sits inside the search field on the right. */
.cs-listing__filter--search {
    display: flex;
    align-items: center;
}

.cs-listing__filter--search .cs-listing__search {
    padding-right: 7.5rem;
}

/*
 * The theme's global button rules colour `.button`-ish elements' text green on
 * hover, which turned the label green-on-green. Colour is pinned with the same
 * specificity on every state so only the background darkens.
 */
.cs-listing .cs-listing__submit,
.cs-listing .cs-listing__submit:link,
.cs-listing .cs-listing__submit:visited {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    padding: 0 1.125rem;
    border: 0;
    border-radius: 6px;
    background-color: #00e65f;
    color: #1e1e23;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* The theme's global `button:not(.menu-group-toggle)` rule applies
       text-transform: uppercase and 0.2rem letter-spacing. Reset both so the
       label uses normal button typography. */
    text-transform: none;
    letter-spacing: normal;
}

.cs-listing .cs-listing__submit:hover,
.cs-listing .cs-listing__submit:focus,
.cs-listing .cs-listing__submit:active {
    background-color: #00cc54;
    color: #1e1e23; /* must not inherit the theme's green link hover */
}

.cs-listing__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 30, 35, 0.25);
}

/* ------------------------------------------------
   Result count
   ------------------------------------------------ */

.cs-listing__count {
    font-size: 0.9375rem;
    color: #4a4a4a;
    margin: 0 0 2rem;
}

.cs-listing__clear {
    margin-left: 0.75rem;
    color: #1e1e23;
    text-decoration: underline;
}

.cs-listing__clear:hover {
    color: #00cc54;
}

/* ------------------------------------------------
   Grid
   ------------------------------------------------ */

.cs-listing__grid {
    display: grid;
    gap: 2rem;
}

.cs-listing__grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.cs-listing__grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.cs-listing__grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------
   Card
   ------------------------------------------------ */

/*
 * Background, corner radius, shadow and hover lift are set by the shared card
 * component (template-parts/snippets/cards.css) so this card and the blog card
 * stay identical. They are deliberately absent here: this stylesheet is
 * enqueued at block-render time, which is after wp_enqueue_scripts, so
 * anything declared here would outrank the shared file no matter what
 * priority it used. Only layout stays.
 */
.cs-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.cs-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.cs-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f0ebf0;
}

.cs-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cs-card:hover .cs-card__image {
    transform: scale(1.04);
}

.cs-card__image--placeholder {
    background: linear-gradient(135deg, #f0ebf0 0%, #d4f4dd 100%);
}

.cs-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
    gap: 0.75rem;
}

/* Tags sit below the image (the blog overlays them on it). */
.cs-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cs-card__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px; /* fully rounded pill, per the Figma */
    color: #1e1e23;
    background-color: #f0ebf0;
}

.cs-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: #1e1e23;
}

.cs-card__read-more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e1e23;
    transition: color 0.2s ease, gap 0.2s ease;
}

.cs-card:hover .cs-card__read-more {
    color: #00cc54;
}

/* ------------------------------------------------
   Empty state
   ------------------------------------------------ */

.cs-listing__empty {
    padding: 3rem 0;
    text-align: center;
    color: #4a4a4a;
}

/* ------------------------------------------------
   Pagination
   Matches the blog listing's paginate_links markup.
   ------------------------------------------------ */

.cs-listing__pagination {
    margin-top: 3rem;
}

/* Pagination is styled by the shared component:
   template-parts/snippets/pagination.css */

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */

@media (max-width: 1024px) {
    .cs-listing { padding: 3rem 0; }

    .cs-listing__filters {
        grid-template-columns: 1fr 1fr;
    }

    .cs-listing__filter--search {
        grid-column: 1 / -1;
    }

    .cs-listing__grid[data-columns="4"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .cs-listing { padding: 2.5rem 0; }
    .cs-listing.reduce-padding { padding: 1.5rem 0; }

    .cs-listing__container { padding: 0 15px; }

    .cs-listing__filters {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.75rem;
    }

    .cs-listing__grid,
    .cs-listing__grid[data-columns="2"],
    .cs-listing__grid[data-columns="3"],
    .cs-listing__grid[data-columns="4"] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cs-listing__count { margin-bottom: 1.5rem; }
}