/* ── BLOG ── */

/* Bilingual text in cards (html[lang] is set by the language toggle) */
html[lang="el"] .i18n-en,
html:not([lang="el"]) .i18n-gr { display: none; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

/* Horizontal hairlines only, so a part-filled last row still looks tidy */
.blog-card {
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.blog-card[hidden] { display: none !important; }
.blog-card::after { content: none; }
div.blog-card { cursor: default; }

.blog-card.cs-card-featured { grid-column: 1 / -1; border-top: 0; }
.blog-card .blog-body { display: flex; flex-direction: column; flex: 1; }
.blog-card .cs-summary { margin-bottom: 1.6rem; }

.blog-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .68rem; }
.blog-sep { opacity: .6; }

.blog-thumb {
  margin: -3rem -3.5vw 2rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.03); }

/* Featured card with an image: image beside the text */
.cs-card-featured.blog-card.has-thumb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4vw;
  align-items: center;
}
.cs-card-featured .blog-thumb { margin: 0; border-radius: var(--radius); }

.blog-read {
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold);
  align-self: flex-start;
  transition: color .25s;
}
.blog-read-arrow { transition: transform .25s; }
.blog-card:hover .blog-read { color: var(--gold); }
.blog-card:hover .blog-read-arrow { transform: translate(2px, -2px); }
.cs-card-featured .blog-read { color: var(--warm); }
.cs-card-featured:hover .blog-read { color: var(--gold); }

.blog-more { text-align: center; padding: 3rem 5vw; }
.blog-more .btn[hidden] { display: none; }

.blog-empty { padding: 5rem 8vw; }
.blog-empty p { font-family: 'Jost', sans-serif; font-size: .9rem; color: var(--mid); }

html[lang="el"] .blog-read { letter-spacing: .08em; text-transform: none; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-card-featured.blog-card.has-thumb { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-thumb { margin: -2.5rem -5vw 1.8rem; }
  .cs-card-featured .blog-thumb { margin: 0; }
}

.blog-more:has(.btn[hidden]) { display: none; }