/* ==========================================================================
   WM Posts Grid Widget
   ========================================================================== */

/* Wrapper & Grid
   ========================================================================== */
.wm-grid-wrapper {
    width: 100%;
}

/* Filter Bar
   ========================================================================== */
.wm-grid-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

/*
 * Filter button: plain-text style by default.
 * flex-direction: column is REQUIRED for the bold width-reservation trick
 * below — row direction would place ::after beside the text, not below it.
 */
.wm-grid-filter__btn {
    display: inline-flex;
    flex-direction: column;   /* ← stack text + hidden bold-copy vertically */
    align-items: center;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/*
 * Bold width-reservation trick — eliminates layout shift when bold is applied
 * on hover/active via Elementor's Typography control.
 *
 * How it works:
 *   - flex-direction:column (set above) stacks ::after below the visible text.
 *   - ::after holds the same text (data-text attr) always in bold.
 *   - height:0 + overflow:hidden keeps it invisible and zero-height.
 *   - The button auto-sizes to the WIDEST child = bold-text width.
 *   - When hover/active makes the real text bold, it already fits perfectly.
 *
 * The font-weight here should match whatever you set in the Hover/Active
 * Typography control. Default bold (700) covers the common case.
 * If you use a custom weight (e.g. 600) set it here too.
 */
.wm-grid-filter__btn::after {
    content: attr(data-text);
    display: block;
    font-weight: bold; /* match the Hover/Active Typography → Font Weight */
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.wm-grid-filter__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Loading state — fade grid cards while AJAX runs */
.wm-grid--loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.wm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* overridden by Elementor responsive selectors */
    column-gap: 24px;
    row-gap: 30px;
}

/* Card
   ========================================================================== */
.wm-grid__item {
    display: flex;
    flex-direction: column;
}

.wm-grid__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Image
   ========================================================================== */
.wm-grid__image-link {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}

.wm-grid__image {
    overflow: hidden;
    width: 100%;
}

.wm-grid__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.wm-grid__no-image {
    background: #e0e0e0;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* Body / Content
   ========================================================================== */
.wm-grid__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

/* Meta
   ========================================================================== */
.wm-grid__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 0.85em;
    opacity: 0.75;
}

.wm-grid__meta a {
    color: inherit;
    text-decoration: none;
}

.wm-grid__meta a:hover {
    text-decoration: underline;
}

.wm-grid__meta-sep {
    opacity: 0.5;
}

.wm-grid__cf-label {
    font-weight: 600;
}

.wm-grid__cf-value {
    /* inherits meta color/typography */
}

/* Title
   ========================================================================== */
.wm-grid__title {
    margin: 0 0 10px;
    line-height: 1.3;
}

.wm-grid__title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Excerpt
   ========================================================================== */
.wm-grid__excerpt {
    margin: 0 0 16px;
    flex: 1 1 auto; /* pushes button to bottom when cards have unequal text */
    line-height: 1.6;
}

/* Button
   ========================================================================== */
.wm-grid__button {
    display: inline-block;
    text-decoration: none;
    margin-top: auto;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Empty-state
   ========================================================================== */
.wm-grid-no-posts {
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    opacity: 0.6;
}

/* Pagination — shared
   ========================================================================== */
.wm-grid-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 40px;
}

/* Numbers — paginate_links outputs a <ul> */
.wm-grid-pagination > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-grid-pagination > ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wm-grid-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.wm-grid-pagination .page-numbers.dots {
    background: transparent !important;
    pointer-events: none;
}

/* Prev / Next */
.wm-grid-pagination__prev,
.wm-grid-pagination__next {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Load More button */
.wm-grid__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: none;
    padding: 10px 28px;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.wm-grid__load-more:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wm-grid__load-more.is-loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}