/* ═══════════════════════════════════════════════════════════════
   Post Grid Shortcode — post-grid.css
   ───────────────────────────────────────────────────────────────
   SCAFFOLD: All design tokens are in :root below.
   Edit the CSS variables to match your theme — you shouldn't
   need to touch anything else for basic customisation.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables — EDIT THESE ──────────────────────────────── */
:root {
    /* Brand colors */
    --pgf-color-primary      : #ea5c55;     /* ← main accent (filter focus, CTA, badge 1) */
    --pgf-color-primary-hover: #1e429f;     /* ← darker on hover */
    --pgf-color-secondary    : #7c3aed;     /* ← badge 2 / taxonomy 2 accent */
    --pgf-color-secondary-bg : #f5f3ff;     /* ← badge 2 background */

    /* Text */
    --pgf-color-text         : #374151;     /* ← card title */
    --pgf-color-muted        : #A9A9A8;     /* ← excerpt, date, labels */

    /* Surfaces */
    --pgf-color-bg-card      : #ffffff;
    --pgf-color-bg-filter    : #f9fafb;
    --pgf-color-border       : #e5e7eb;

    /* Shape */
    --pgf-radius-card        : 16px;
    --pgf-radius-input       : 8px;
    --pgf-radius-badge       : 5px;

    /* Shadow */
    --pgf-shadow-card        : 0 10px 40px 7px #E5E3DC66;
    --pgf-shadow-card-hover  : 0 10px 40px 7px #E5E3DC66;

    /* Grid */
    --pgf-gap                : 1.5rem;      /* ← gap between cards */

    /* Thumb ratio */
    --pgf-thumb-ratio        : 16/9;        /* ← card image aspect ratio, e.g. 4/3, 1/1 */

    /* Transition */
    --pgf-transition         : .22s ease;
}

/* ── Reset within scope ──────────────────────────────────────── */
#pgf-wrapper *,
#pgf-wrapper *::before,
#pgf-wrapper *::after {
    box-sizing: border-box;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
#pgf-wrapper {
    width: 100%;
    padding: 0;
    font-family: inherit;
}


/* ════════════════════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════════════════════ */

.pgf-filter-bar {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    gap            : .625rem;
    margin-bottom  : 1.75rem;
}

/* ── Search ──────────────────────────────────────────────────── */
.pgf-search-wrap {
    position : relative;
    flex      : 1 1 220px;
    min-width : 180px;
}

.pgf-search-wrap input[type="search"] {
    display       : block;
    width         : 100%;
    padding       : .55rem .55rem .55rem 2.3rem;
    border        : 1.5px solid var(--pgf-color-border);
    border-radius : var(--pgf-radius-input);
    background    : #fff;
    font-size     : .875rem;
    color         : var(--pgf-color-text);
    line-height   : 1.5;
    outline       : none;
    transition    : border-color var(--pgf-transition), box-shadow var(--pgf-transition);
    /* Remove default browser clear button style inconsistency */
    -webkit-appearance: none;
    appearance: none;
}

.pgf-search-wrap input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height     : 16px;
    width      : 16px;
    background : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor     : pointer;
}

.pgf-search-wrap input:focus {
    border-color : var(--pgf-color-primary);
    box-shadow   : 0 0 0 3px rgba(26,86,219,.15);
}

.pgf-search-icon {
    position      : absolute;
    left          : .65rem;
    top           : 50%;
    transform     : translateY(-50%);
    pointer-events: none;
    color         : var(--pgf-color-muted);
    display       : flex;
    align-items   : center;
}

/* ── Selects area ─────────────────────────────────────────────── */
.pgf-selects-wrap {
    display     : flex;
    flex-wrap   : wrap;
    gap         : .5rem;
    align-items : center;
}

/* Custom select wrapper — for styled arrow */
.pgf-select-wrap {
    position : relative;
    flex      : 1 1 140px;
}

.pgf-select-wrap select {
    display       : block;
    width         : 100%;
    padding       : .55rem 2.1rem .55rem .75rem;
    border        : 1.5px solid var(--pgf-color-border);
    border-radius : var(--pgf-radius-input);
    background    : #fff;
    font-size     : .875rem;
    color         : var(--pgf-color-text);
    cursor        : pointer;
    outline       : none;
    transition    : border-color var(--pgf-transition), box-shadow var(--pgf-transition);
    /* Hide default arrow */
    -webkit-appearance : none;
    appearance         : none;
}

.pgf-select-wrap select:focus {
    border-color : var(--pgf-color-primary);
    box-shadow   : 0 0 0 3px rgba(26,86,219,.15);
}

.pgf-select-arrow {
    position       : absolute;
    right          : .65rem;
    top            : 50%;
    transform      : translateY(-50%);
    pointer-events : none;
    color          : var(--pgf-color-muted);
    display        : flex;
    align-items    : center;
    transition     : transform var(--pgf-transition);
}

/* ── Reset button ─────────────────────────────────────────────── */
#pgf-reset {
    display      : inline-flex;
    align-items  : center;
    gap          : .35rem;
    padding      : .55rem .875rem;
    border       : 1.5px solid var(--pgf-color-border);
    border-radius: var(--pgf-radius-input);
    background   : #fff;
    font-size    : .8125rem;
    font-weight  : 500;
    color        : var(--pgf-color-muted);
    cursor       : pointer;
    transition   : all var(--pgf-transition);
    white-space  : nowrap;
}

#pgf-reset:hover {
    border-color : var(--pgf-color-primary);
    color        : var(--pgf-color-primary);
    background   : #eff6ff;
}


/* ════════════════════════════════════════════════════════════════
   STATUS BAR
   ════════════════════════════════════════════════════════════════ */

.pgf-status {
    font-size     : .8125rem;
    color         : var(--pgf-color-muted);
    margin-bottom : .875rem;
    padding       : .375rem .75rem;
    background    : var(--pgf-color-bg-filter);
    border-radius : 6px;
    border        : 1px solid var(--pgf-color-border);
}


/* ════════════════════════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════════════════════════ */

.pgf-grid {
    display               : grid;
    grid-template-columns : repeat( var(--pgf-cols, 3), 1fr );
    gap                   : var(--pgf-gap);
    align-items           : start;
}


/* ════════════════════════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════════════════════════ */

.pgf-card {
    background    : var(--pgf-color-bg-card);
    border        : 1px solid var(--pgf-color-border);
    border-radius : var(--pgf-radius-card);
    overflow      : hidden;
    box-shadow    : var(--pgf-shadow-card);
    display       : flex;
    flex-direction: row;
    transition    : box-shadow var(--pgf-transition), transform var(--pgf-transition);

    /* Entrance animation — controlled from JS via --pgf-card-delay */
    opacity   : 0;
    transform : translateY(12px);
}

.pgf-card > div{
    width: 50%;
}

.pgf-card__meta table tr td:first-child{
 width: 1%;
    white-space: nowrap;
  padding-right: 15px;
  padding-bottom: 5px;
}
.pgf-card__meta table tr td{
  text-align: left;
  color: var(--pgf-color-muted);
  padding: 0px;
}

.pgf-card__meta table {
  border-color: var(--pgf-color-muted) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.pgf-card__meta td:last-child{
  border-right: none;
  padding-left: 15px;
  padding-bottom: 5px;
}

/* JS adds this class after injecting cards */
.pgf-card.pgf-card--visible {
    animation: pgfCardIn .35s var(--pgf-card-delay, 0ms) both ease-out;
}

.pgf-card:hover {
    box-shadow : var(--pgf-shadow-card-hover);
    transform  : translateY(-3px);
}

/* ── Card Thumbnail ───────────────────────────────────────────── */
.pgf-card__thumb {
    aspect-ratio : var(--pgf-thumb-ratio);
    overflow     : hidden;
    background   : var(--pgf-color-border);
    position     : relative;
}

.pgf-card__thumb a {
    display : block;
    height  : 100%;
}

.pgf-card__img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform .4s ease;
}

.pgf-card:hover .pgf-card__img {
    transform : scale(1.05);
}

.pgf-card__no-thumb {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 100%;
    color           : var(--pgf-color-muted);
    font-size       : .75rem;
    background      : var(--pgf-color-bg-filter);
}

/* ── Card Body ────────────────────────────────────────────────── */
.pgf-card__body {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    padding        : 1.125rem 1.25rem 1.375rem;
    flex           : 1; /* push CTA to bottom */
}

/* ── Meta row ─────────────────────────────────────────────────── */
.pgf-card__meta {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 20px;
    min-height  : 22px;
}

/* ── Taxonomy badges ──────────────────────────────────────────── */
.pgf-badge {
    display         : inline-block;
    font-size       : .6875rem;
    font-weight     : 600;
    letter-spacing  : .04em;
    text-transform  : uppercase;
    padding         : .2rem .5rem;
    border-radius   : var(--pgf-radius-badge);
    text-decoration : none;
    white-space     : nowrap;
    transition      : opacity var(--pgf-transition);
}

.pgf-badge:hover { opacity: .75; }

/* Taxonomy 1 badge — uses primary color */
.pgf-badge--tax1 {
    background : rgba(26, 86, 219, .1);  /* ← change to match --pgf-color-primary */
    color      : var(--pgf-color-primary);
}

/* Taxonomy 2 badge — uses secondary color */
.pgf-badge--tax2 {
    background : var(--pgf-color-secondary-bg);
    color      : var(--pgf-color-secondary);
}

/* ── Date ─────────────────────────────────────────────────────── */
.pgf-card__date {
    font-size   : .75rem;
    color       : var(--pgf-color-muted);
    margin-left : auto; /* push to right side of meta row */
    white-space : nowrap;
}

/* ── Title ────────────────────────────────────────────────────── */

/* ── Excerpt ──────────────────────────────────────────────────── */
.pgf-card__excerpt {
    margin      : 0;

    color       : var(--pgf-color-text);

    /* Clamp to N lines — change -webkit-line-clamp to adjust */
    display            : -webkit-box;
    -webkit-line-clamp : 3;   /* ← EDIT: max visible lines */
    -webkit-box-orient : vertical;
    overflow           : hidden;
}

/* ── Custom field output example ──────────────────────────────── */
.pgf-card__client {
    font-size   : .8125rem;
    font-weight : 600;
    color       : var(--pgf-color-text);
    margin      : 0;
}

/* ── CTA link ─────────────────────────────────────────────────── */
.pgf-card__cta {
    display         : inline-flex;
    align-items     : center;
    gap             : .35rem;
    margin-top      : auto;
    font-size       : .8125rem;
    font-weight     : 600;
    color           : var(--pgf-color-primary);
    text-decoration : none;
    transition      : gap var(--pgf-transition), color var(--pgf-transition);
}

.pgf-card__cta svg {
    transition : transform var(--pgf-transition);
    flex-shrink: 0;
}

.pgf-card__cta:hover svg {
    transform : translateX(3px);
}

.pgf-card__cta:hover {
    color : var(--pgf-color-primary-hover);
}


/* ════════════════════════════════════════════════════════════════
   LOADING STATE
   ════════════════════════════════════════════════════════════════ */

.pgf-loading {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : .625rem;
    padding         : 2.5rem 1rem;
    color           : var(--pgf-color-muted);
    font-size       : .9rem;
}

.pgf-spinner {
    width        : 20px;
    height       : 20px;
    border       : 2.5px solid var(--pgf-color-border);
    border-top-color : var(--pgf-color-primary);
    border-radius: 50%;
    animation    : pgfSpin .75s linear infinite;
    display      : inline-block;
    flex-shrink  : 0;
}


/* ════════════════════════════════════════════════════════════════
   NO RESULTS
   ════════════════════════════════════════════════════════════════ */

.pgf-no-results {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    text-align      : center;
    padding         : 3rem 1.5rem;
    color           : var(--pgf-color-muted);
    gap             : .5rem;
}

.pgf-no-results svg {
    color   : var(--pgf-color-border);
    opacity : .8;
}

.pgf-no-results p {
    margin      : 0;
    font-size   : 1rem;
    font-weight : 500;
    color       : var(--pgf-color-text);
}

.pgf-no-results small {
    font-size : .875rem;
}


/* ════════════════════════════════════════════════════════════════
   LOAD MORE
   ════════════════════════════════════════════════════════════════ */

.pgf-load-more-wrap {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : .5rem;
    margin-top      : 2rem;
}

#pgf-load-more {
    font-size     : 16px;
    cursor        : pointer;
    transition    : all var(--pgf-transition);
    padding-top: 14px;
  padding-bottom: 14px;
}

#pgf-load-more:disabled {
    opacity : .5;
    cursor  : not-allowed;
}

.pgf-count-info {
    font-size : .8125rem;
    color     : var(--pgf-color-muted);
    margin    : 0;
}


/* ════════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════════ */

@keyframes pgfCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes pgfSpin {
    to { transform: rotate(360deg); }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* Tablet: force 2 columns regardless of [columns] attr */
@media (max-width: 1024px) {
    .pgf-grid {
        grid-template-columns: repeat(2, 1fr); /* ← EDIT breakpoint if needed */
    }
}

/* Mobile: single column */
@media (max-width: 640px) {
    .pgf-grid {
        grid-template-columns: 1fr;
    }

    .pgf-filter-bar {
        flex-direction : column;
        align-items    : stretch;
        gap            : .5rem;
    }

    .pgf-search-wrap {
        min-width : unset;
    }

    .pgf-selects-wrap {
        flex-wrap : wrap;
    }

    .pgf-select-wrap {
        flex      : 1 1 calc(50% - .25rem);
        min-width : 120px;
    }

    #pgf-reset {
        justify-content : center;
    }
}

/* ── Accessibility: reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pgf-card,
    .pgf-card.pgf-card--visible {
        animation : none;
        opacity   : 1;
        transform : none;
    }
    .pgf-card:hover {
        transform : none;
    }
    .pgf-card__img,
    .pgf-card:hover .pgf-card__img,
    .pgf-card__cta svg,
    .pgf-card__cta:hover svg {
        transition : none;
        transform  : none;
    }
    .pgf-spinner {
        animation-duration : 1.5s;
    }
}