/* ---------- Base container ---------- */

.custom-ajax-grid {}

/* ---------- Header: filters + sorting ---------- */

.custom-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(18px, 2.2vw + 10px, 24px);
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .custom-grid-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Filters (left) */

.custom-grid-filter {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2.2vw + 10px, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-grid-filter li {
    margin: 0;
}

.custom-grid-filter .filter-item {
    display: inline-flex;
    align-items: center;
    font-size: clamp(18px, 2.2vw + 10px, 24px);
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: #77756F;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.custom-grid-filter .filter-item:hover,
.custom-grid-filter .filter-item:focus-visible {
    color: #1B1A1A;
}

.custom-grid-filter .filter-item.active {
    color: #1B1A1A;
    border-color: #1B1A1A;
}

/* Sorting (right) */

.custom-grid-sorting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1em;
}

.custom-grid-sorting-label {
    color: #1B1A1A;
}

/* Dropdown container - stays in position */
.custom-grid-sorting-options {
    position: relative;
    display: inline-block;
}

/* Dropdown trigger button */
.custom-grid-sorting-trigger {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #1B1A1A;
    padding: 13px 16px;
    cursor: pointer;
    color: #1B1A1A;
    font-weight: 700;
    white-space: nowrap;
    background: transparent;
}

.custom-grid-sorting-trigger:hover {
    background: transparent;
    color: #1B1A1A;
}

.custom-grid-sorting-trigger::after {
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.975C11.8667 14.975 11.7417 14.9542 11.625 14.9125C11.5084 14.8708 11.4 14.8 11.3 14.7L6.70005 10.1C6.51672 9.91665 6.42505 9.68332 6.42505 9.39999C6.42505 9.11665 6.51672 8.88332 6.70005 8.69999C6.88338 8.51665 7.11672 8.42499 7.40005 8.42499C7.68338 8.42499 7.91672 8.51665 8.10005 8.69999L12 12.6L15.9 8.69999C16.0834 8.51665 16.3167 8.42499 16.6 8.42499C16.8834 8.42499 17.1167 8.51665 17.3 8.69999C17.4834 8.88332 17.575 9.11665 17.575 9.39999C17.575 9.68332 17.4834 9.91665 17.3 10.1L12.7 14.7C12.6 14.8 12.4917 14.8708 12.375 14.9125C12.2584 14.9542 12.1334 14.975 12 14.975Z" fill="%231B1A1A"/></svg>');
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.2s ease;
    height: 24px;
}

.custom-grid-sorting-options.is-open .custom-grid-sorting-trigger::after {
    transform: rotate(180deg);
}

/* Dropdown menu - hidden by default */
.custom-grid-sorting-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.custom-grid-sorting-options.is-open .custom-grid-sorting-menu {
    display: flex;
}

/* Sort items inside dropdown */
.custom-grid-sorting-menu .sort-item {
    display: block;
    text-decoration: none;
    color: #1B1A1A;
    font-weight: 700;
    padding: 12px 16px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    border: none;
    background: transparent;
}

.custom-grid-sorting-menu .sort-item:hover {
    background-color: #f5f5f5;
}

.custom-grid-sorting-menu .sort-item.active {
    background-color: #f0f0f0;
}


/* ---------- 3-column grid layout ---------- */

.custom-grid-posts {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Hook block - full width */
.custom-grid-posts .custom-grid-hook {
    grid-column: 1 / -1;
    margin-top: 40px;
    margin-bottom: 120px;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .custom-grid-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .custom-grid-posts {
        grid-template-columns: 1fr;
    }
}

/* ---------- Card hover animations ---------- */

.custom-grid-posts .post-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.custom-grid-posts .post-card:hover,
.custom-grid-posts .post-card:focus-within {
    transform: translateY(-6px);
}

/* ---------- Load more & loader ---------- */

.custom-grid-loadmore {
    max-width: 1160px;
    margin: 24px auto 0;
    text-align: center;
}

.custom-grid-loadmore .load-more-btn {
    border-radius: 999px;
    border: 1px solid #1B1A1A;
    padding: 10px 24px;
    background: #1B1A1A;
    color: #f7f4ec;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.custom-grid-loadmore .load-more-btn:hover,
.custom-grid-loadmore .load-more-btn:focus-visible {
    background: transparent;
    color: #1B1A1A;
    transform: translateY(-1px);
}

/* Spinner */
.custom-grid-loader {
    max-width: 1160px;
    margin: 16px auto 0;
    text-align: center;
}

.custom-grid-loader .spinner {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #1B1A1A;
    animation: custom-grid-spin 0.6s linear infinite;
}

@keyframes custom-grid-spin {
    from { transform: rotate(0) }
    to { transform: rotate(360deg); }
}

/* Loading state overlay */
.custom-ajax-grid.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.custom-ajax-grid.is-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(242, 238, 231, 0.8);
    z-index: 10;
}

.custom-ajax-grid.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: #1B1A1A;
    animation: custom-grid-spin 0.6s linear infinite;
    z-index: 11;
}

/* Card wrapper */
.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
}

/* Reset default article margins if theme adds them */
.post-card,
.post-card p {
    margin: 0;
}

/* Image */
.post-card__image-link {
    display: block;
    position: relative;
}

.post-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Default: 1x1 (387x387) */
    object-fit: cover;
    object-position:
    calc(var(--focal-point-left, 0.5) * 100%)
    calc(var(--focal-point-top, 0.5) * 100%);
}

/* Repeating aspect ratio pattern: 1x1, 1x1.25, 1x0.56, 1x1.25, 1x1.25, 1x1 */
/* Use nth-of-type instead of nth-child to avoid counting .custom-grid-hook */
.post-card:nth-of-type(6n+2) .post-card__image,
.post-card:nth-of-type(6n+4) .post-card__image,
.post-card:nth-of-type(6n+5) .post-card__image {
    aspect-ratio: 1 / 1.25; /* 387x484 */
}

.post-card:nth-of-type(6n+3) .post-card__image {
    aspect-ratio: 1 / 0.56; /* 387x218 */
}

/* Body */
.post-card__body {
    padding-top: 32px;
    padding-bottom: 80px;
}

/* Meta row */
.post-card__header {
    margin-bottom: 16px;
}

.post-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* Green label */
.post-card__label {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 4px;
    background-color: #b6ff4c;
    font-weight: 700;
    line-height: 1em;
    color: #1B1A1A;
}

/* Reading time */
.post-card__reading-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 700;
}

.post-card__reading-time-icon {
    display: flex;
}

/* Dot separator in meta row */
.post-card__meta-separator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #A1F569; /* green dot */
}

/* Title */
.post-card__title {
    letter-spacing: -0.03em;
    line-height: 120%;
    font-size: 24px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__title a:hover,
.post-card__title a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Footer: category chips */
.post-card__footer {
    margin-top: 20px;
}

.post-card__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-card__term {
    margin-bottom: 0;
}

.post-card__term a {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    border: 1px solid #1B1A1A;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1em;
    text-decoration: none;
    color: #1B1A1A;
    background-color: transparent;
    font-weight: 700;
}

.post-card__term a:hover,
.post-card__term a:focus-visible {
    background-color: #1B1A1A;
    color: #f7f4ec;
}

/* Basic responsiveness */
@media (max-width: 600px) {
    .post-card__title {
        font-size: 1.25rem;
    }
}