/* =====================================================================
 * Page Designer — Blog INDEX block (the article list you drop on a page).
 * Namespace: pd-blk-blog-*  (distinct from the article page pd-blog-art-*
 * and the panel pd-blog-pnl-*). Loaded into the editor canvas via the
 * registry css:true loader AND onto published pages by frontend_page.php.
 *
 * Colours read panel-set overrides (--pd-blk-blog-*) first, then the site
 * Global Theme (--pd-general-*), then a neutral fallback so an un-themed
 * install still renders (documented public-surface fallback pattern —
 * the published page carries no admin --at-color-* tokens).
 * ===================================================================== */

.pd-blk-blog {
    --_accent:  var(--pd-blk-blog-accent, var(--pd-link-color, currentColor));
    --_text:    var(--pd-blk-blog-text, var(--pd-general-color, currentColor));
    --_muted:   var(--pd-blk-blog-muted, color-mix(in srgb, var(--_text) 55%, transparent));
    --_cardbg:  var(--pd-blk-blog-card-bg, var(--pd-color-bg, transparent));
    --_line:    color-mix(in srgb, var(--_text) 12%, transparent);
    --_radius:  var(--pd-blk-blog-radius, 14px);
    --_gap:     var(--pd-blk-blog-gap, 24px);

    display: block;
    color: var(--_text);
    font-family: var(--pd-general-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}

/* ---- Top bar: search + category filter ---- */
.pd-blk-blog-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* Category-filter position relative to the search box (data-pd-blog-cat-pos).
   Applies identically in the editor canvas and on the published page. */
.pd-blk-blog[data-pd-blog-cat-pos="right"] .pd-blk-blog-bar { flex-direction: row; align-items: center; }
.pd-blk-blog[data-pd-blog-cat-pos="right"] .pd-blk-blog-search { order: 0; }
.pd-blk-blog[data-pd-blog-cat-pos="right"] .pd-blk-blog-cats { order: 1; }

.pd-blk-blog[data-pd-blog-cat-pos="left"] .pd-blk-blog-bar { flex-direction: row; align-items: center; }
.pd-blk-blog[data-pd-blog-cat-pos="left"] .pd-blk-blog-cats { order: 0; }
.pd-blk-blog[data-pd-blog-cat-pos="left"] .pd-blk-blog-search { order: 1; }

.pd-blk-blog[data-pd-blog-cat-pos="above"] .pd-blk-blog-bar { flex-direction: column; align-items: stretch; }
.pd-blk-blog[data-pd-blog-cat-pos="above"] .pd-blk-blog-cats { order: 0; }
.pd-blk-blog[data-pd-blog-cat-pos="above"] .pd-blk-blog-search { order: 1; }

.pd-blk-blog[data-pd-blog-cat-pos="below"] .pd-blk-blog-bar { flex-direction: column; align-items: stretch; }
.pd-blk-blog[data-pd-blog-cat-pos="below"] .pd-blk-blog-search { order: 0; }
.pd-blk-blog[data-pd-blog-cat-pos="below"] .pd-blk-blog-cats { order: 1; }

/* In the stacked layouts the bar is a COLUMN, so the search box's
   `flex: 1 1 220px` basis would apply to HEIGHT (a 220px-tall input). Reset it
   to natural height; full width comes from the bar's align-items:stretch. */
.pd-blk-blog[data-pd-blog-cat-pos="above"] .pd-blk-blog-search,
.pd-blk-blog[data-pd-blog-cat-pos="below"] .pd-blk-blog-search { flex: 0 0 auto; width: 100%; }
.pd-blk-blog-search {
    flex: 1 1 220px;
    min-width: 180px;
    font: inherit;
    font-size: 15px;
    color: var(--_text);
    background: var(--pd-blk-blog-search-bg, var(--_cardbg));
    border: var(--pd-blk-blog-search-bw, 1px) solid var(--pd-blk-blog-search-border, var(--_line));
    border-radius: var(--pd-blk-blog-search-radius, 5px);
    padding: 10px 16px;
    outline: none;
    transition: border-color 0.15s ease;
}
.pd-blk-blog-search:focus { border-color: var(--_accent); }
.pd-blk-blog-search::placeholder { color: var(--_muted); }

.pd-blk-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Category chips inherit the Global Theme "Tabs" tool-set by default
   (--pd-tabw-* active/inactive/hover bg + text); a panel custom colour
   (--pd-blk-blog-cat-*) overrides it; a neutral block token is the last
   resort for an un-themed install. */
.pd-blk-blog-cat-chip {
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-blk-blog-cat-text, var(--pd-tabw-inactive-text, var(--_muted)));
    background: var(--pd-blk-blog-cat-bg, var(--pd-tabw-inactive-bg, transparent));
    border: var(--pd-blk-blog-cat-bw, 1px) solid var(--pd-blk-blog-cat-border, var(--_line));
    border-radius: var(--pd-blk-blog-cat-radius, 5px);
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pd-blk-blog-cat-chip:hover {
    color: var(--pd-blk-blog-cat-hover-text, var(--pd-tabw-hover-text, var(--_accent)));
    background: var(--pd-blk-blog-cat-hover-bg, var(--pd-tabw-hover-bg, transparent));
    border-color: var(--pd-blk-blog-cat-hover-bg, var(--pd-tabw-hover-bg, var(--_accent)));
}
.pd-blk-blog-cat-chip.pd-blk-blog-cat-on {
    color: var(--pd-blk-blog-cat-active-text, var(--pd-tabw-active-text, var(--_cardbg)));
    background: var(--pd-blk-blog-cat-active-bg, var(--pd-tabw-active-bg, var(--_accent)));
    border-color: var(--pd-blk-blog-cat-active-bg, var(--pd-tabw-active-bg, var(--_accent)));
}

/* ---- List / grid container ---- */
.pd-blk-blog-list {
    display: grid;
    gap: var(--_gap);
}
.pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="2"] .pd-blk-blog-list { grid-template-columns: repeat(2, 1fr); }
.pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="3"] .pd-blk-blog-list { grid-template-columns: repeat(3, 1fr); }
.pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="4"] .pd-blk-blog-list { grid-template-columns: repeat(4, 1fr); }
.pd-blk-blog[data-pd-blog-layout="list"] .pd-blk-blog-list { grid-template-columns: 1fr; }

/* ---- Card ---- */
.pd-blk-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--_cardbg);
    border: 1px solid var(--_line);
    border-radius: var(--_radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pd-blk-blog-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--_accent) 45%, var(--_line));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--_text) 14%, transparent);
}
.pd-blk-blog[data-pd-blog-layout="list"] .pd-blk-blog-card {
    flex-direction: row;
    align-items: stretch;
}

.pd-blk-blog-card-media {
    line-height: 0;
    background: color-mix(in srgb, var(--_text) 6%, transparent);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.pd-blk-blog[data-pd-blog-layout="list"] .pd-blk-blog-card-media {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 160px;
}
.pd-blk-blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-blk-blog-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
}
.pd-blk-blog-card-cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--_accent);
}
.pd-blk-blog-card-title {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    color: var(--_text);
}
.pd-blk-blog-card-excerpt {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    color: var(--_muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pd-blk-blog-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    color: var(--_muted);
}
.pd-blk-blog-card-meta .pd-blk-blog-dot { opacity: 0.6; }
.pd-blk-blog-card-author { font-weight: 600; }

/* ---- Pager ---- */
.pd-blk-blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}
.pd-blk-blog-pager:empty { display: none; }
.pd-blk-blog-pg-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--_accent);
    background: transparent;
    border: 1px solid var(--_line);
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pd-blk-blog-pg-btn:hover:not(:disabled) { background: var(--_accent); color: var(--_cardbg); border-color: var(--_accent); }
.pd-blk-blog-pg-btn:disabled { opacity: 0.4; cursor: default; }
.pd-blk-blog-pg-info { font-size: 13px; color: var(--_muted); }

/* ---- Empty / loading states ---- */
.pd-blk-blog-empty,
.pd-blk-blog-loading {
    text-align: center;
    padding: 48px 20px;
    color: var(--_muted);
    font-size: 15px;
    border: 1px dashed var(--_line);
    border-radius: var(--_radius);
}

/* ---- Editor-canvas-only ergonomics (stripped from published HTML) ---- */
[data-gjs-type="pd-blog"] { min-height: 60px; }
[data-gjs-type="pd-blog"] .pd-blk-blog-card { cursor: default; }

@media (max-width: 860px) {
    .pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="3"] .pd-blk-blog-list,
    .pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="4"] .pd-blk-blog-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="2"] .pd-blk-blog-list,
    .pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="3"] .pd-blk-blog-list,
    .pd-blk-blog[data-pd-blog-layout="grid"][data-pd-blog-cols="4"] .pd-blk-blog-list { grid-template-columns: 1fr; }
    .pd-blk-blog[data-pd-blog-layout="list"] .pd-blk-blog-card { flex-direction: column; }
    .pd-blk-blog[data-pd-blog-layout="list"] .pd-blk-blog-card-media { flex-basis: auto; aspect-ratio: 16/9; }
}