/* Frontend styles with per-section columns */
.woghb-hero .woghb-card { display:block; }
.woghb-card { display:block; }
.woghb-card__thumb { display:block; aspect-ratio: 16 / 9; overflow:hidden; border-radius:14px; }
.woghb-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.woghb-card__thumb:hover img { transform:scale(1.03); }
.woghb-card__meta { margin-top:.6rem; }
.woghb-card__cat { font-size:.78rem; text-transform:uppercase; opacity:.7; }
.woghb-card__title { font-size:1.1rem; line-height:1.25; margin:.2rem 0 0; }

.woghb-card__submeta,
.woghb-item__submeta { margin-top:.35rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.woghb-meta { font-size:.82rem; opacity:.75; }

.woghb-section { margin: 2.2rem 0; }
.woghb-section__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.woghb-section__header h2 { margin:0; font-size:1.4rem; }

/* grid base, columns controlled via modifiers */
.woghb-grid { display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); }
.woghb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.woghb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.woghb-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* mobile columns modifiers (apply on small screens) */
.woghb-mcols-1 { --woghb-mcols: 1; }
.woghb-mcols-2 { --woghb-mcols: 2; }
.woghb-mcols-3 { --woghb-mcols: 3; }

/* list item layout (thumbnail left + title right) */
.woghb-item--list { display:flex; gap:14px; align-items:flex-start; }
.woghb-item__thumb { flex:0 0 96px; width:96px; height:96px; border-radius:12px; overflow:hidden; display:block; }
.woghb-item__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.woghb-item__title { margin:0; font-size:1.05rem; line-height:1.25; }
.woghb-item__content { flex:1; min-width:0; }
.woghb-meta--cat { font-size:.78rem; text-transform:uppercase; opacity:.7; display:inline-block; margin-bottom:.25rem; }

/* Dual layout rendering: show desktop variant by default, switch on mobile */
.woghb-variant { display:none; }
.woghb-desktop-card .woghb-variant--card { display:block; }
.woghb-desktop-list .woghb-variant--list { display:block; }

/* HERO larger */
.woghb-hero .woghb-card__title { font-size:1.6rem; }
.woghb-hero { margin-bottom:2rem; }
.woghb-hero .woghb-card__thumb { aspect-ratio: 21 / 9; }

/* responsive */
@media (max-width: 1024px) {
  .woghb-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .woghb-hero .woghb-card__thumb { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .woghb-grid { grid-template-columns: repeat(var(--woghb-mcols, 1), 1fr) !important; }
  .woghb-hero .woghb-card__title { font-size:1.3rem; }

  /* On mobile use the mobile layout selector, overriding desktop */
  .woghb-variant { display:none; }
  .woghb-mobile-card .woghb-variant--card { display:block; }
  .woghb-mobile-list .woghb-variant--list { display:block; }

  /* tighter list on small screens */
  .woghb-item__thumb { width:88px; height:88px; flex-basis:88px; }
}
.woghb-card__placeholder { width:100%; height:100%; background:#f2f2f2; }

/*
 * New dual-layout helpers (desktop vs mobile) used by render.php.
 * This prevents duplicates when desktop and mobile layouts differ.
 */
.woghb-only-desktop{display:block;}
.woghb-only-mobile{display:none;}

@media (max-width: 640px) {
  .woghb-only-desktop{display:none;}
  .woghb-only-mobile{display:block;}
}