/*
 * Grid/header/state/pagination layout for the archive and taxonomy pages
 * that render via a plain WP_Query loop + the_posts_pagination() (Product
 * archive, Brand archive, Ingredient archive, Diet/Certification/Health
 * Goal taxonomy pages) - restores the same grid presentation already used
 * by assets/css/pages/buying-guide-archive.css for the one archive that
 * already had a dedicated stylesheet. Card content itself (product-card,
 * brand-card, etc.) is already styled globally via components/*.css; this
 * file only supplies the page-level wrapper/grid/pagination rules that
 * were missing for every archive except Buying Guides.
 */

.product-archive,
.brand-archive,
.ingredient-archive,
.diet-taxonomy,
.certification-taxonomy,
.health-goal-taxonomy {
    padding: clamp(2.5rem, 6vw, 6rem) 0;
}

.product-archive__header,
.brand-archive__header,
.ingredient-archive__header,
.diet-taxonomy__header,
.certification-taxonomy__header,
.health-goal-taxonomy__header {
    margin: 0 0 clamp(1.5rem, 4vw, 3rem);
}

.diet-taxonomy__description,
.certification-taxonomy__description,
.health-goal-taxonomy__description {
    margin: .5rem 0 0;
    max-width: 48rem;
    color: var(--color-text-muted, #687268);
}

.diet-taxonomy__product-count,
.certification-taxonomy__product-count,
.health-goal-taxonomy__product-count {
    margin: .5rem 0 0;
    color: var(--color-text-muted, #687268);
    font-size: .9rem;
}

.health-goal-taxonomy__image {
    margin: 0 0 1rem;
}

.health-goal-taxonomy__image img {
    max-width: 100%;
    border-radius: 1rem;
}

.product-archive__grid,
.brand-archive__grid,
.ingredient-archive__grid,
.diet-taxonomy__grid,
.certification-taxonomy__grid,
.health-goal-taxonomy__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-archive__grid > li,
.brand-archive__grid > li,
.ingredient-archive__grid > li,
.diet-taxonomy__grid > li,
.certification-taxonomy__grid > li,
.health-goal-taxonomy__grid > li {
    height: 100%;
}

.product-archive__state,
.brand-archive__state,
.ingredient-archive__state,
.diet-taxonomy__state,
.certification-taxonomy__state,
.health-goal-taxonomy__state {
    max-width: 42rem;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

/*
 * Reuses the exact card markup/classes ingredient/card.php already
 * outputs (currently only styled inside assets/css/pages/search.css,
 * which is enqueued solely on the search results page - see
 * Aanya\Core\Assets::enqueueSearch()). Kept as its own declaration here
 * rather than moved out of search.css, so the already-tested search
 * results page is not touched by this fix.
 */
.ingredient-card {
    height: 100%;
    border: 1px solid var(--color-border, #dce4da);
    border-radius: 1rem;
    background: var(--color-surface, #fff);
}

.ingredient-card__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.ingredient-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
}

.ingredient-card__content {
    padding: 1.25rem;
}

.ingredient-card__content h3 {
    margin: 0;
}

.ingredient-card__content p {
    overflow-wrap: anywhere;
}

/*
 * Native WP the_posts_pagination() output (.pagination/.page-numbers) -
 * used by every archive/taxonomy page in this file, none of which had
 * any pagination styling before this fix.
 */
.product-archive .pagination,
.brand-archive .pagination,
.ingredient-archive .pagination,
.diet-taxonomy .pagination,
.certification-taxonomy .pagination,
.health-goal-taxonomy .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

.product-archive .page-numbers,
.brand-archive .page-numbers,
.ingredient-archive .page-numbers,
.diet-taxonomy .page-numbers,
.certification-taxonomy .page-numbers,
.health-goal-taxonomy .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--color-border, #dce4da);
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}

.product-archive .page-numbers.current,
.brand-archive .page-numbers.current,
.ingredient-archive .page-numbers.current,
.diet-taxonomy .page-numbers.current,
.certification-taxonomy .page-numbers.current,
.health-goal-taxonomy .page-numbers.current {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: #fff;
    font-weight: 700;
}

.product-archive .page-numbers.dots,
.brand-archive .page-numbers.dots,
.ingredient-archive .page-numbers.dots,
.diet-taxonomy .page-numbers.dots,
.certification-taxonomy .page-numbers.dots,
.health-goal-taxonomy .page-numbers.dots {
    border: 0;
    min-width: auto;
}

.product-archive a:focus-visible,
.brand-archive a:focus-visible,
.ingredient-archive a:focus-visible,
.diet-taxonomy a:focus-visible,
.certification-taxonomy a:focus-visible,
.health-goal-taxonomy a:focus-visible {
    outline: 3px solid var(--color-brand-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .product-archive *,
    .brand-archive *,
    .ingredient-archive *,
    .diet-taxonomy *,
    .certification-taxonomy *,
    .health-goal-taxonomy * {
        scroll-behavior: auto;
    }
}