/**
 * SW CPT Grid — Styles
 *
 * @package SW_CPT_Grid
 */

/* ───────────────────────────────────────────────
 * Filter Bar
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sw-cpt-grid__filter--buttons {
    gap: 8px;
    justify-content: center;
}

.sw-cpt-grid__filter-btn {
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    transition: all 0.25s ease;
    padding: 8px 20px;
    background: #f5f5f5;
    color: #333;
}

.sw-cpt-grid__filter-btn.is-active,
.sw-cpt-grid__filter-btn:hover {
    background: #333;
    color: #fff;
}

.sw-cpt-grid__filter-select {
    padding: 8px 16px;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #ddd;
    cursor: pointer;
}

/* ───────────────────────────────────────────────
 * Grid Layout (CSS Grid — fixed height)
 * ─────────────────────────────────────────────── */
.sw-cpt-grid {
    --sw-columns: 3;
    --sw-row-gap: 20px;
    --sw-col-gap: 20px;
}

.sw-cpt-grid--grid {
    display: grid;
    grid-template-columns: repeat(var(--sw-columns), 1fr);
    gap: var(--sw-row-gap) var(--sw-col-gap);
}

/* ───────────────────────────────────────────────
 * Masonry Layout (CSS Grid + JS row-span)
 *
 * Uses a fine-grained row grid (1px rows) so JS
 * can set each item's grid-row-end to span the
 * exact number of rows matching its content height.
 * Items may span 1 or 2 columns based on image
 * aspect ratio (landscape images → 2 cols).
 * ─────────────────────────────────────────────── */
.sw-cpt-grid--masonry {
    display: grid;
    grid-template-columns: repeat(var(--sw-columns), 1fr);
    gap: 0 var(--sw-col-gap);
    grid-auto-rows: 1px;
    align-items: start;

    /* Hidden until JS calculates row spans and adds data-masonry-ready */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sw-cpt-grid--masonry[data-masonry-ready] {
    opacity: 1;
}

.sw-cpt-grid--masonry .sw-cpt-grid__item {
    /* Row gap is handled by adding gap px to the JS-computed span */
    overflow: hidden;
}

/* Wide (landscape) items span 2 columns — JS adds this class */
.sw-cpt-grid--masonry .sw-cpt-grid__item--wide {
    grid-column: span 2;
}

/* Safety: on single-column layouts, never span more than 1 */
@media (max-width: 767px) {
    .sw-cpt-grid--masonry .sw-cpt-grid__item--wide {
        grid-column: span 1;
    }
}

/* ───────────────────────────────────────────────
 * Grid Item
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__item {
    position: relative;
    overflow: hidden;
    background: #111;
}

.sw-cpt-grid--grid .sw-cpt-grid__item {
    height: 300px;
    overflow: hidden;
}

.sw-cpt-grid__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* ───────────────────────────────────────────────
 * Image
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sw-cpt-grid--grid .sw-cpt-grid__image {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.sw-cpt-grid--grid .sw-cpt-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

/* Masonry: images keep natural aspect ratio */
.sw-cpt-grid--masonry .sw-cpt-grid__image {
    line-height: 0;
    overflow: hidden;
    /* remove inline gap below img */
}

.sw-cpt-grid--masonry .sw-cpt-grid__image img {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

.sw-cpt-grid__image img {
    display: block;
    transition: transform 0.4s ease;
    overflow: hidden;
}

.sw-cpt-grid__item:hover .sw-cpt-grid__image img {
    transform: scale(1.05);
    overflow: hidden;
}

/* ───────────────────────────────────────────────
 * Overlay
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
    overflow: hidden;
}

.sw-cpt-grid__item:hover .sw-cpt-grid__overlay {
    opacity: 1;
}

.sw-cpt-grid__overlay-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ───────────────────────────────────────────────
 * Title
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__title {
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* ───────────────────────────────────────────────
 * Fields
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__field {
    color: #fff;
    margin: 0 0 5px;
    line-height: 1.4;
}

.sw-cpt-grid__field:last-child {
    margin-bottom: 0;
}

.sw-cpt-grid__field-label {}

.sw-cpt-grid__field a {
    color: inherit;
    text-decoration: underline;
}

.sw-cpt-grid__field img {
    max-width: 100%;
    height: auto;
}

/* Strip inner block margins from WYSIWYG content
   inside the overlay (e.g. <p> from ACF fields) */
.sw-cpt-grid__field-value p {
    margin: 0;
    padding: 0;
}

/* ───────────────────────────────────────────────
 * Filtering animation
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__item.sw-hidden {
    display: none;
}

.sw-cpt-grid__item {
    animation: swFadeIn 0.4s ease;
}

@keyframes swFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ───────────────────────────────────────────────
 * Empty state
 * ─────────────────────────────────────────────── */
.sw-cpt-grid__empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-style: italic;
}