/*
 * BFH Perfume Cards & Pagination (cards.css)
 *
 * Covers templates/partials/perfume-grid.php, perfume-card.php and
 * pagination.php. Separate from archive.css because the same card markup is
 * reused by the carousel, grid and "Similar Fragrances" widgets.
 */

.bfh-perfume-grid {
    display: grid;
    gap: var(--bfh-space-5);
    /* Column count is set inline by the template so an Elementor control can
       override it per instance; the minimum keeps cards readable regardless. */
    grid-template-columns: repeat(var(--bfh-grid-columns, 4), minmax(0, 1fr));
}

.bfh-perfume-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bfh-space-4);
}

/* Masonry uses CSS columns rather than grid: cards keep their natural height
   and pack vertically, which is the point of the layout. Grid cannot do this
   without measuring, and measuring needs JavaScript. */
.bfh-perfume-grid--masonry {
    display: block;
    column-count: var(--bfh-grid-columns, 3);
    column-gap: var(--bfh-space-5);
}

.bfh-perfume-grid--masonry .bfh-perfume-card {
    /* Without this a card can be split across two columns mid-render. */
    break-inside: avoid;
    margin-bottom: var(--bfh-space-5);
}

@media (max-width: 900px) {
    .bfh-perfume-grid--masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .bfh-perfume-grid--masonry {
        column-count: 1;
    }
}

@media (max-width: 1200px) {
    .bfh-perfume-grid:not(.bfh-perfume-grid--list) {
        grid-template-columns: repeat(min(var(--bfh-grid-columns, 4), 3), minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .bfh-perfume-grid:not(.bfh-perfume-grid--list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .bfh-perfume-grid:not(.bfh-perfume-grid--list) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------- Card shell -------------------- */
.bfh-perfume-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bfh-surface);
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-lg);
    transition: transform var(--bfh-anim-normal), border-color var(--bfh-anim-normal),
        box-shadow var(--bfh-anim-normal);
}

.bfh-perfume-card:hover {
    transform: translateY(-4px);
    border-color: var(--bfh-border-hover);
    box-shadow: var(--bfh-shadow-2);
}

/* Raised on focus-within too, so keyboard users get the same affordance the
   pointer gets on hover. */
.bfh-perfume-card:focus-within {
    border-color: var(--bfh-color-primary);
}

h3.bfh-perfume-card__title a {
    font-size: 18px;
    font-weight: 600;
    line-height: 23px;
    font-family: "Playfair Display";
}

.bfh-perfume-card__media {
    position: relative;
    aspect-ratio: 4 / 4;
    overflow: hidden;
    background-color: var(--bfh-surface-hover);
}

.bfh-perfume-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.bfh-perfume-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--bfh-anim-slow);
}

.bfh-perfume-card:hover .bfh-perfume-card__media img {
    transform: scale(1.05);
}

.bfh-perfume-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bfh-surface-hover), var(--bfh-border));
}

.bfh-perfume-card__badges {
    position: absolute;
    top: var(--bfh-space-3);
    left: var(--bfh-space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--bfh-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bfh-perfume-card__badges .bfh-badge {
    background-color: var(--bfh-color-primary);
    color: #fff;
    font-weight: var(--bfh-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bfh-perfume-card__favorite {
    position: absolute;
    top: var(--bfh-space-3);
    right: var(--bfh-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--bfh-radius-round);
    background-color: var(--bfh-surface-glass);
    backdrop-filter: blur(6px);
    color: var(--bfh-text-primary);
    font-size: var(--bfh-text-lg);
    line-height: 1;
    cursor: pointer;
    transition: all var(--bfh-anim-fast);
}

.bfh-perfume-card__favorite:hover {
    background-color: var(--bfh-color-primary);
    color: #fff;
    transform: scale(1.08);
}

.bfh-perfume-card__favorite[aria-pressed="true"] {
    background-color: var(--bfh-danger);
    color: #fff;
}

.bfh-perfume-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--bfh-space-1);
    padding: var(--bfh-space-4);
}

.bfh-perfume-card__title {
    margin: 0;
    font-family: var(--bfh-font-serif);
    font-size: var(--bfh-text-lg);
    font-weight: var(--bfh-font-weight-semibold);
    line-height: 1.3;
}

.bfh-perfume-card__title a {
    color: var(--bfh-text-primary);
    text-decoration: none;
    transition: color var(--bfh-anim-fast);
}

.bfh-perfume-card__title a:hover {
    color: var(--bfh-color-primary);
}

.bfh-perfume-card__brand {
    margin: 0;
    font-size: var(--bfh-text-sm);
    color: var(--bfh-text-secondary);
}

.bfh-perfume-card__type {
    margin: 0;
    font-size: var(--bfh-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bfh-text-muted);
}

.bfh-perfume-card__excerpt {
    margin: var(--bfh-space-2) 0 0;
    font-size: var(--bfh-text-sm);
    color: var(--bfh-text-secondary);
    /* Excerpts vary wildly in length; clamping keeps a list row uniform. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bfh-perfume-card__rating {
    margin-top: var(--bfh-space-2);
    display: flex;
    align-items: center;
    gap: var(--bfh-space-2);
    font-size: var(--bfh-text-sm);
    color: var(--bfh-text-secondary);
}

/* -------------------- List variant -------------------- */
.bfh-perfume-card--list {
    flex-direction: row;
}

.bfh-perfume-card--list .bfh-perfume-card__media {
    flex: 0 0 180px;
    aspect-ratio: auto;
}

.bfh-perfume-card--list .bfh-perfume-card__body {
    flex: 1 1 auto;
    padding: var(--bfh-space-5);
}

.bfh-perfume-card--list:hover {
    transform: none;
}

@media (max-width: 600px) {
    .bfh-perfume-card--list {
        flex-direction: column;
    }

    .bfh-perfume-card--list .bfh-perfume-card__media {
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }
}

/* -------------------- Pagination -------------------- */
.bfh-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bfh-space-2);
    flex-wrap: wrap;
}

.bfh-pagination__list {
    display: flex;
    align-items: center;
    gap: var(--bfh-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.bfh-pagination__item {
    margin: 0;
}

.bfh-pagination__page,
.bfh-pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--bfh-space-2);
    background-color: transparent;
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-md);
    color: var(--bfh-text-secondary);
    font-family: inherit;
    font-size: var(--bfh-text-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all var(--bfh-anim-fast);
}

.bfh-pagination__page:hover:not(.is-active),
.bfh-pagination__arrow:hover:not(:disabled) {
    border-color: var(--bfh-color-primary);
    color: var(--bfh-color-primary);
    background-color: var(--bfh-color-primary-transparent);
}

.bfh-pagination__page.is-active {
    background-color: var(--bfh-color-primary);
    border-color: var(--bfh-color-primary);
    color: #fff;
    font-weight: var(--bfh-font-weight-semibold);
    cursor: default;
}

.bfh-pagination__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bfh-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 38px;
    color: var(--bfh-text-muted);
}