/* ==========================================================================
   Blogline Homepage — Post List module
   Clean rebuild. Two visual modes:
     - No palette (color_preset = default): white cards on the page.
     - Palette (any color): the whole module becomes a colored PANEL
       (filled header + tinted background + cards in the same tone).
   Card spacing comes from the theme (--blgn-gap); no per-module spacing.
   ========================================================================== */

/* ---- Module wrapper + palette variables ---- */
.blgn-pl {
  width: 100%;
  /* default (no palette) palette vars fall back to theme tokens */
  --pl-accent: var(--blgn-primary, #1a73e8);
  --pl-card-bg: var(--blgn-bg, #fff);
  --pl-title: var(--blgn-text, #202124);
  --pl-text: var(--blgn-text-muted, #5f6368);
  --pl-meta: var(--blgn-text-muted, #5f6368);
  --pl-border: var(--blgn-border, #e6e8ec);
  --pl-chip-bg: var(--blgn-accent, #e8101a);
  --pl-chip-text: #fff;
  --pl-panel-bg: transparent;   /* no panel by default */
  --pl-panel-pad: 0px;
}

/* ---- Panel container (only colored when a palette is active) ---- */
.blgn-pl-panel {
  background: var(--pl-panel-bg);
  border-radius: var(--blgn-radius, 12px);
  padding: var(--pl-panel-pad);
}

/* ==========================================================================
   Header
   ========================================================================== */
.blgn-hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--blgn-gap, 16px); }
.blgn-hp-head__title { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--pl-title); }
.blgn-hp-head__all {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 13px; font-weight: 600; color: var(--pl-accent);
}
.blgn-hp-head__all:hover { text-decoration: none; opacity: .85; }
.blgn-hp-head__all .blgn-ic { width: 14px; height: 14px; }
/* header styles */
.blgn-hp-head--accent_left .blgn-hp-head__title { border-left: 4px solid var(--pl-accent); border-radius: 0; padding-left: 12px; }
.blgn-hp-head--underline .blgn-hp-head__title { border-bottom: 3px solid var(--pl-accent); border-radius: 0; padding-bottom: 7px; }
.blgn-hp-head--filled .blgn-hp-head__title { background: var(--pl-head-bg, var(--pl-accent)); color: var(--pl-head-text, #fff); padding: 7px 16px; border-radius: var(--blgn-radius, 8px); font-size: 16px; }
.blgn-hp-head--full { background: var(--pl-head-bg, var(--pl-accent)); padding: 15px 20px; border-radius: var(--blgn-radius, 10px); }
.blgn-hp-head--full .blgn-hp-head__title { color: var(--pl-head-text, #fff); font-size: 19px; letter-spacing: .01em; }
.blgn-hp-head--full .blgn-hp-head__all { color: var(--pl-head-text, #fff); opacity: .92; }

/* ==========================================================================
   Grid + responsive columns (gap from theme --blgn-gap)
   ========================================================================== */
.blgn-pl-grid { display: grid; gap: var(--blgn-gap, 16px); grid-template-columns: 1fr; }
.blgn-pl-cols-m-1 .blgn-pl-grid { grid-template-columns: 1fr; }
.blgn-pl-cols-m-2 .blgn-pl-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) {
  .blgn-pl-cols-t-1 .blgn-pl-grid { grid-template-columns: 1fr; }
  .blgn-pl-cols-t-2 .blgn-pl-grid { grid-template-columns: repeat(2, 1fr); }
  .blgn-pl-cols-t-3 .blgn-pl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .blgn-pl-cols-d-1 .blgn-pl-grid { grid-template-columns: 1fr; }
  .blgn-pl-cols-d-2 .blgn-pl-grid { grid-template-columns: repeat(2, 1fr); }
  .blgn-pl-cols-d-3 .blgn-pl-grid { grid-template-columns: repeat(3, 1fr); }
  .blgn-pl-cols-d-4 .blgn-pl-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Card — base (Standard: image on top, chip on image, title below)
   ========================================================================== */
.blgn-pl .blgn-hp-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: var(--blgn-radius, 12px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
}
/* image */
.blgn-pl .blgn-hp-card__thumb { display: block; position: relative; overflow: hidden; background: var(--pl-border); aspect-ratio: 16/9; }
.blgn-pl .blgn-hp-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
/* ratios */
.blgn-pl-ratio-16-9 .blgn-hp-card__thumb { aspect-ratio: 16/9; }
.blgn-pl-ratio-3-2  .blgn-hp-card__thumb { aspect-ratio: 3/2; }
.blgn-pl-ratio-4-3  .blgn-hp-card__thumb { aspect-ratio: 4/3; }
.blgn-pl-ratio-1-1  .blgn-hp-card__thumb { aspect-ratio: 1/1; }
/* category chip on image — position set by .blgn-pl-catpos-* on the wrapper */
.blgn-pl .blgn-hp-card__catchip {
  position: absolute; z-index: 3;
  background: var(--pl-chip-bg); color: var(--pl-chip-text);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 0; line-height: 1.3;
}
.blgn-pl .blgn-hp-card__catchip:hover { text-decoration: none; opacity: .92; }
/* default = bottom-left, with comfortable inset from the image edge */
.blgn-pl .blgn-hp-card__thumb .blgn-hp-card__catchip { left: 14px; bottom: 14px; top: auto; right: auto; }
.blgn-pl.blgn-pl-catpos-top-left     .blgn-hp-card__thumb .blgn-hp-card__catchip { top: 14px; left: 14px; bottom: auto; right: auto; }
.blgn-pl.blgn-pl-catpos-top-right    .blgn-hp-card__thumb .blgn-hp-card__catchip { top: 14px; right: 14px; bottom: auto; left: auto; }
.blgn-pl.blgn-pl-catpos-bottom-left  .blgn-hp-card__thumb .blgn-hp-card__catchip { bottom: 14px; left: 14px; top: auto; right: auto; }
.blgn-pl.blgn-pl-catpos-bottom-right .blgn-hp-card__thumb .blgn-hp-card__catchip { bottom: 14px; right: 14px; top: auto; left: auto; }
/* body */
.blgn-pl .blgn-hp-card__body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.blgn-pl .blgn-hp-card__title { font-size: 15.5px; font-weight: 700; line-height: 1.34; margin: 0; letter-spacing: -.01em; }
.blgn-pl .blgn-hp-card__title a { color: var(--pl-title); }
.blgn-pl .blgn-hp-card__title a:hover { color: var(--pl-accent); text-decoration: none; }
/* meta row */
.blgn-pl .blgn-hp-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; font-size: 12.5px; color: var(--pl-meta); }
.blgn-meta-i { display: inline-flex; align-items: center; gap: 5px; }
.blgn-meta-i .blgn-ic { width: 14px; height: 14px; opacity: .8; flex: 0 0 auto; }
/* excerpt */
.blgn-pl .blgn-hp-card__excerpt { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--pl-text); }
/* read more — full-width button */
.blgn-pl .blgn-hp-card__more { display: block; width: 100%; margin-top: auto; text-align: center; background: var(--pl-accent); color: #fff !important; font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: 8px; transition: filter .15s; }
.blgn-pl .blgn-hp-card__more:not(:first-child) { margin-top: 14px; }
.blgn-pl .blgn-hp-card__more:hover { text-decoration: none; filter: brightness(1.08); }
/* in-body category (used by styles without an image chip) */
.blgn-pl .blgn-cat { display: inline-block; margin: 0 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pl-accent); }

/* title clamp */
.blgn-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.blgn-clamp-1 { -webkit-line-clamp: 1; }
.blgn-clamp-2 { -webkit-line-clamp: 2; }
.blgn-clamp-3 { -webkit-line-clamp: 3; }
.blgn-clamp-4 { -webkit-line-clamp: 4; }

/* hover */
.blgn-pl-hover-lift .blgn-hp-card { transition: transform .2s ease, box-shadow .2s ease; }
.blgn-pl-hover-lift .blgn-hp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.blgn-pl-hover-zoom .blgn-hp-card:hover .blgn-hp-card__thumb img { transform: scale(1.06); }

/* ==========================================================================
   PALETTE PANEL MODE — any preset other than 'default'
   The whole module becomes a colored block: filled header, tinted bg, cards in tone.
   ========================================================================== */
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) {
  --pl-panel-pad: 16px;
}
/* Panel mode: clear, even spacing so cards, header and button all breathe */
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-pl-grid,
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-pl-biglist,
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-pl-mosaic { gap: 16px; }
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-hp-head { margin-bottom: 16px; }
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-pl-loadmore-wrap { margin-top: 16px; }
/* Each preset sets: panel bg, accent, card bg (slightly lighter/darker than panel), text */
.blgn-pl-preset-slate    { --pl-panel-bg:#334155; --pl-head-bg:#475569; --pl-accent:#cbd5e1; --pl-card-bg:#3e4c61; --pl-title:#fff; --pl-text:#dbe2ec; --pl-meta:#aebbcc; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#334155; }
.blgn-pl-preset-ocean    { --pl-panel-bg:#1565c0; --pl-head-bg:#0d4f9e; --pl-accent:#bbdefb; --pl-card-bg:#1f72d0; --pl-title:#fff; --pl-text:#e3f0fd; --pl-meta:#bcd9f7; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#0c3055; }
.blgn-pl-preset-crimson  { --pl-panel-bg:#c62333; --pl-head-bg:#a51827; --pl-accent:#ffd1d6; --pl-card-bg:#d2303f; --pl-title:#fff; --pl-text:#fde3e6; --pl-meta:#f6bcc2; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#7a0f1a; }
.blgn-pl-preset-forest   { --pl-panel-bg:#2e7d4f; --pl-head-bg:#22663e; --pl-accent:#bfe6cd; --pl-card-bg:#37885a; --pl-title:#fff; --pl-text:#e0f3e8; --pl-meta:#b6dcc4; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#0c3320; }
.blgn-pl-preset-amber    { --pl-panel-bg:#d98324; --pl-head-bg:#b86d18; --pl-accent:#ffe3b0; --pl-card-bg:#e08f33; --pl-title:#fff; --pl-text:#fdeccc; --pl-meta:#f5d199; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#6b4f23; }
.blgn-pl-preset-royal    { --pl-panel-bg:#6d4ad2; --pl-head-bg:#5836b8; --pl-accent:#d9cdf7; --pl-card-bg:#7d5ce0; --pl-title:#fff; --pl-text:#ece4fb; --pl-meta:#cbbcf2; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#4b2ea0; }
.blgn-pl-preset-rose     { --pl-panel-bg:#d4377e; --pl-head-bg:#b32866; --pl-accent:#fcc9de; --pl-card-bg:#dc4789; --pl-title:#fff; --pl-text:#fde3ee; --pl-meta:#f6bcd6; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#7a1f48; }
.blgn-pl-preset-teal     { --pl-panel-bg:#0f8c7e; --pl-head-bg:#0a7064; --pl-accent:#b8eae2; --pl-card-bg:#16998a; --pl-title:#fff; --pl-text:#dbf4ef; --pl-meta:#a9e0d7; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#0a3833; }
.blgn-pl-preset-sunset   { --pl-panel-bg:#e0673b; --pl-head-bg:#c0552d; --pl-accent:#ffd6c4; --pl-card-bg:#e6764d; --pl-title:#fff; --pl-text:#fde7dd; --pl-meta:#f6c8b3; --pl-border:transparent; --pl-chip-bg:#fff; --pl-chip-text:#7a3115; }
.blgn-pl-preset-midnight { --pl-panel-bg:#16213e; --pl-head-bg:#0f1830; --pl-accent:#8ea6e8; --pl-card-bg:#1f2d4f; --pl-title:#fff; --pl-text:#c3cee6; --pl-meta:#93a3c6; --pl-border:transparent; --pl-chip-bg:#7d97ff; --pl-chip-text:#fff; }
.blgn-pl-preset-paper    { --pl-panel-bg:#efe7d6; --pl-head-bg:#9a6a2f; --pl-accent:#9a6a2f; --pl-card-bg:#fdfaf3; --pl-title:#2c2418; --pl-text:#5c5345; --pl-meta:#857c6b; --pl-border:#e3d9c4; --pl-chip-bg:#9a6a2f; --pl-chip-text:#fff; }
.blgn-pl-preset-dark     { --pl-panel-bg:#15171c; --pl-head-bg:#22262e; --pl-accent:#7aa7ff; --pl-card-bg:#1e2128; --pl-title:#f3f5f9; --pl-text:#b4bcc8; --pl-meta:#8a94a3; --pl-border:#2a2e36; --pl-chip-bg:#7aa7ff; --pl-chip-text:#15171c; }
/* custom: vars injected inline from PHP (--pl-* overrides) */

/* In panel mode, cards drop their shadow/border (they sit on the tinted bg) */
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-hp-card { box-shadow: none; }

/* ==========================================================================
   Other card styles (kept; refined). Standard is the default above.
   ========================================================================== */
/* horizontal & cnn: image beside */
.blgn-pl--horizontal .blgn-pl-grid,
.blgn-pl--cnn .blgn-pl-grid { grid-template-columns: 1fr; }
.blgn-pl--horizontal .blgn-hp-card,
.blgn-pl--cnn .blgn-hp-card { flex-direction: row; }
.blgn-pl--horizontal .blgn-hp-card__thumb,
.blgn-pl--cnn .blgn-hp-card__thumb { flex: 0 0 40%; aspect-ratio: auto; }
.blgn-pl--horizontal .blgn-hp-card__body,
.blgn-pl--cnn .blgn-hp-card__body { flex: 1; align-self: center; }
.blgn-pl--cnn .blgn-cat { color: #cc0000; }
@media (max-width: 540px) {
  .blgn-pl--horizontal .blgn-hp-card, .blgn-pl--cnn .blgn-hp-card { flex-direction: column; }
  .blgn-pl--horizontal .blgn-hp-card__thumb, .blgn-pl--cnn .blgn-hp-card__thumb { flex-basis: auto; aspect-ratio: 16/9; }
}
/* overlay / live / magazine: text on image */
.blgn-pl--overlay .blgn-hp-card__thumb,
.blgn-pl--live .blgn-hp-card__thumb,
.blgn-pl--magazine .blgn-hp-card__thumb { aspect-ratio: 4/3; }
.blgn-pl--overlay .blgn-hp-card__thumb::after,
.blgn-pl--live .blgn-hp-card__thumb::after,
.blgn-pl--magazine .blgn-hp-card__thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.1) 55%, transparent); }
.blgn-pl--overlay .blgn-hp-card__body,
.blgn-pl--live .blgn-hp-card__body,
.blgn-pl--magazine .blgn-hp-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.blgn-pl--overlay .blgn-hp-card__title a,
.blgn-pl--live .blgn-hp-card__title a,
.blgn-pl--magazine .blgn-hp-card__title a,
.blgn-pl--overlay .blgn-hp-card__meta,
.blgn-pl--live .blgn-hp-card__meta,
.blgn-pl--magazine .blgn-hp-card__meta { color: #fff; }
.blgn-pl--magazine .blgn-hp-card__title { font-size: 19px; }
/* LIVE badge */
.blgn-hp-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 5px; color: #fff; }
.blgn-hp-badge--live { background: #d6324a; }
.blgn-hp-badge--live::before { content: '● '; }
/* text & serif: no image */
.blgn-pl--text .blgn-hp-card, .blgn-pl--serif .blgn-hp-card { box-shadow: none; }
.blgn-pl--serif .blgn-hp-card__title { font-family: Georgia, 'Times New Roman', serif; }
.blgn-pl--serif .blgn-hp-card__excerpt { font-family: Georgia, serif; }
/* list & compact: small thumb rows */
.blgn-pl--list .blgn-pl-grid, .blgn-pl--compact .blgn-pl-grid { gap: 10px; }
.blgn-pl--list .blgn-hp-card, .blgn-pl--compact .blgn-hp-card { flex-direction: row; align-items: center; gap: 12px; box-shadow: none; padding: 8px; }
.blgn-pl--list .blgn-hp-card__thumb, .blgn-pl--compact .blgn-hp-card__thumb { flex: 0 0 64px; width: 64px; height: 48px; aspect-ratio: auto; border-radius: 8px; }
.blgn-pl--list .blgn-hp-card__body, .blgn-pl--compact .blgn-hp-card__body { padding: 0; }
.blgn-pl--list .blgn-hp-card__title, .blgn-pl--compact .blgn-hp-card__title { font-size: 14px; }
.blgn-pl--compact .blgn-hp-card__thumb { flex-basis: 40px; width: 40px; height: 40px; }
/* numbered */
.blgn-pl-numbered { list-style: none; margin: 0; padding: 0; }
.blgn-pl-numbered > li { border-bottom: 1px solid var(--pl-border); }
.blgn-pl-numbered > li:last-child { border-bottom: 0; }
.blgn-hp-card--numbered { flex-direction: row !important; align-items: center; gap: 14px; box-shadow: none; background: none; border-radius: 0; padding: 12px 0; border: 0; }
.blgn-hp-rank { flex: 0 0 auto; width: 30px; text-align: center; font-size: 22px; font-weight: 800; color: var(--pl-accent); opacity: .85; }
.blgn-hp-card--numbered .blgn-hp-card__body { padding: 0; }
.blgn-hp-card--numbered .blgn-hp-card__title { font-size: 15px; }
/* big_list */
.blgn-pl-biglist { display: grid; grid-template-columns: 1fr; gap: var(--blgn-gap, 16px); }
@media (min-width: 800px) { .blgn-pl-biglist { grid-template-columns: 1.6fr 1fr; } }
.blgn-pl-side { display: flex; flex-direction: column; gap: 10px; }
.blgn-pl-side .blgn-hp-card { flex-direction: row; align-items: center; gap: 12px; box-shadow: none; padding: 8px; }
.blgn-pl-side .blgn-hp-card__thumb { flex: 0 0 72px; width: 72px; height: 54px; aspect-ratio: auto; border-radius: 8px; }
.blgn-pl-side .blgn-hp-card__body { padding: 0; }
.blgn-pl-side .blgn-hp-card__title { font-size: 14px; }
/* hero_grid */
.blgn-pl-hero { margin-bottom: var(--blgn-gap, 16px); }
.blgn-pl-hero .blgn-hp-card__thumb { aspect-ratio: 21/9; }
.blgn-pl--hero_grid .blgn-pl-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .blgn-pl--hero_grid .blgn-pl-grid { grid-template-columns: repeat(3, 1fr); } }
/* mosaic */
.blgn-pl-mosaic { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .blgn-pl-mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 380px; } }
.blgn-pl-mosaic__big { grid-row: 1 / 3; }
.blgn-pl-mosaic .blgn-hp-card { height: 100%; }
.blgn-pl-mosaic .blgn-hp-card__thumb { height: 100%; aspect-ratio: auto; }
/* bbc / edge accents */
.blgn-pl--bbc .blgn-cat { background: #b80000; color: #fff; padding: 2px 8px; }
.blgn-pl--edge .blgn-hp-card { border-top: 3px solid var(--pl-accent); }

/* ==========================================================================
   Corner badge (NEW / HOT / FEATURED)
   ========================================================================== */
.blgn-hp-cbadge { position: absolute; top: 10px; right: 10px; z-index: 4; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; color: #fff; }
.blgn-hp-cbadge--new { background: #2f8f5b; }
.blgn-hp-cbadge--hot { background: #d6324a; }
.blgn-hp-cbadge--featured { background: var(--pl-accent); }

/* ==========================================================================
   Load More (AJAX)
   ========================================================================== */
.blgn-pl-loadmore-wrap { display: flex; justify-content: center; margin-top: var(--blgn-gap, 16px); }
.blgn-pl-loadmore {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--pl-accent); background: transparent;
  border: 1.5px solid var(--pl-accent); border-radius: 999px;
  padding: 11px 28px; transition: background .15s, color .15s;
}
.blgn-pl-loadmore:hover { background: var(--pl-accent); color: #fff; }
.blgn-pl-loadmore__spin { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: blgn-pl-spin .6s linear infinite; }
.blgn-pl-loadmore.is-loading { pointer-events: none; opacity: .8; }
.blgn-pl-loadmore.is-loading .blgn-pl-loadmore__spin { display: inline-block; }
@keyframes blgn-pl-spin { to { transform: rotate(360deg); } }
/* In panel mode the button sits on the tinted bg — make it readable */
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-pl-loadmore { color: #fff; border-color: rgba(255,255,255,.6); }
.blgn-pl[class*="blgn-pl-preset-"]:not(.blgn-pl-preset-default) .blgn-pl-loadmore:hover { background: #fff; color: var(--pl-panel-bg); border-color: #fff; }