/* =========================================================
   DIY-Schmuck-Blog: Bento-Grid in Windjana-Farbwelt
   Scope: body.wj-blog-page (Blog-Archiv /diy-schmuck-blog/)
   Container: #blog-entries ODER .blog-entries (OceanWP-Filter)
   ========================================================= */

body.wj-blog-page {
  --wj-bg: #ffffff;
  --wj-surface: rgba(0,0,0,.04);
  --wj-text: rgba(15, 23, 42, .92);
  --wj-muted: rgba(15, 23, 42, .66);
  --wj-border: rgba(15, 23, 42, .10);
  --wj-soft: rgba(15, 23, 42, .03);
  --wj-accent: #d8c3a5;
  font-family: var(--wj-font);
}

/* Bento-Grid: 3 Spalten, alle Kacheln gleich groß */
body.wj-blog-page #blog-entries,
body.wj-blog-page .blog-entries {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wj-gutter, 24px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Blog-Einträge: Karten mit Titel-Overlay auf dem Bild
   OceanWP-Struktur: article > blog-entry-inner > thumbnail + header + meta + summary + readmore */
body.wj-blog-page #blog-entries > *,
body.wj-blog-page .blog-entries > * {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wj-bg);
  border: 1px solid var(--wj-border);
  border-radius: var(--wj-radius);
  transition: transform .25s ease, box-shadow .25s ease;
}

body.wj-blog-page #blog-entries > *:hover,
body.wj-blog-page .blog-entries > *:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}

/* blog-entry-inner: füllt die Karte, enthält Thumbnail + Overlay */
body.wj-blog-page #blog-entries .blog-entry-inner,
body.wj-blog-page .blog-entries .blog-entry-inner {
  position: absolute;
  inset: 0;
}

/* Thumbnail: füllt die Karte als Hintergrund */
body.wj-blog-page #blog-entries .thumbnail,
body.wj-blog-page .blog-entries .thumbnail {
  position: absolute;
  inset: 0;
  margin: 0;
}

body.wj-blog-page #blog-entries .thumbnail a,
body.wj-blog-page .blog-entries .thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

body.wj-blog-page #blog-entries .thumbnail img,
body.wj-blog-page .blog-entries .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Titel-Overlay: am unteren Rand auf dem Bild */
body.wj-blog-page #blog-entries .blog-entry-header,
body.wj-blog-page .blog-entries .blog-entry-header {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem;
  transition: background .35s ease;
}

body.wj-blog-page #blog-entries > *:hover .blog-entry-header,
body.wj-blog-page .blog-entries > *:hover .blog-entry-header {
  background: rgba(255, 255, 255, 0.9);
}

/* Titel auf dem Overlay */
body.wj-blog-page #blog-entries .blog-entry-title,
body.wj-blog-page #blog-entries .entry-title,
body.wj-blog-page .blog-entries .blog-entry-title,
body.wj-blog-page .blog-entries .entry-title {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(15, 23, 42, 0.92);
}

body.wj-blog-page #blog-entries .blog-entry-title a,
body.wj-blog-page #blog-entries .entry-title a,
body.wj-blog-page .blog-entries .blog-entry-title a,
body.wj-blog-page .blog-entries .entry-title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.wj-blog-page #blog-entries .blog-entry-title a:hover,
body.wj-blog-page #blog-entries .entry-title a:hover,
body.wj-blog-page .blog-entries .blog-entry-title a:hover,
body.wj-blog-page .blog-entries .entry-title a:hover {
  color: var(--wj-accent);
}

/* Nur Titel: Meta, Excerpt, Readmore ausblenden (OceanWP: ul.meta, .blog-entry-summary, .blog-entry-readmore) */
body.wj-blog-page #blog-entries ul.meta,
body.wj-blog-page #blog-entries .blog-entry-meta,
body.wj-blog-page #blog-entries .entry-meta,
body.wj-blog-page #blog-entries .blog-entry-excerpt,
body.wj-blog-page #blog-entries .entry-excerpt,
body.wj-blog-page #blog-entries .blog-entry-summary,
body.wj-blog-page #blog-entries .blog-entry-readmore,
body.wj-blog-page .blog-entries ul.meta,
body.wj-blog-page .blog-entries .blog-entry-meta,
body.wj-blog-page .blog-entries .entry-meta,
body.wj-blog-page .blog-entries .blog-entry-excerpt,
body.wj-blog-page .blog-entries .entry-excerpt,
body.wj-blog-page .blog-entries .blog-entry-summary,
body.wj-blog-page .blog-entries .blog-entry-readmore {
  display: none !important;
}

/* Pagination */
body.wj-blog-page .oceanwp-pagination,
body.wj-blog-page .page-jump,
body.wj-blog-page nav.pagination {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wj-border);
}

body.wj-blog-page .oceanwp-pagination a,
body.wj-blog-page .oceanwp-pagination span,
body.wj-blog-page nav.pagination a,
body.wj-blog-page nav.pagination span {
  color: var(--wj-text);
}

body.wj-blog-page .oceanwp-pagination a:hover,
body.wj-blog-page nav.pagination a:hover {
  color: var(--wj-accent);
}

/* Weiterlesen-Link */
body.wj-blog-page #blog-entries .blog-entry-readmore a,
body.wj-blog-page .blog-entries .blog-entry-readmore a {
  color: var(--wj-accent);
  text-decoration: none;
}

body.wj-blog-page #blog-entries .blog-entry-readmore a:hover,
body.wj-blog-page .blog-entries .blog-entry-readmore a:hover {
  text-decoration: underline;
}

/* Responsive: Tablet → 2 Spalten */
@media (max-width: 959px) {
  body.wj-blog-page #blog-entries,
  body.wj-blog-page .blog-entries {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: Mobile → 1 Spalte */
@media (max-width: 575px) {
  body.wj-blog-page #blog-entries,
  body.wj-blog-page .blog-entries {
    grid-template-columns: 1fr;
  }
}