/* Gospel Talks Blogs — frontend
   Fonts: Playfair Display (headings, italic accents) + Inter (body)
   matching thegospeltalks.com serif-accent style */

.gb-app {
  --gb-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --gb-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gb-ink:      #1c1a17;
  --gb-ink-soft: #57534e;
  --gb-ink-mute: #8a8580;
  --gb-line:     #e8e4de;
  --gb-cream:    #faf8f5;
  --gb-accent:   #8a6d3b;   /* warm gold */
  --gb-accent-2: #6b5530;
  font-family: var(--gb-sans);
  color: var(--gb-ink);
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
  -webkit-font-smoothing: antialiased;
}
.gb-app *, .gb-app *::before, .gb-app *::after { box-sizing: border-box; }
.gb-app a { text-decoration: none; color: inherit; }

/* ══ Header ══════════════════════════════════════════════ */
.gb-header { text-align: center; padding: 2.5rem 0 2rem; }
.gb-eyebrow {
  font-family: var(--gb-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gb-accent);
}
.gb-page-title {
  font-family: var(--gb-serif); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  margin: .35rem 0 .5rem; line-height: 1.1; color: var(--gb-ink);
}
.gb-accent { color: var(--gb-accent); font-style: italic; }
.gb-page-sub {
  font-size: 1.05rem; color: var(--gb-ink-soft); margin: 0;
}
.gb-page-sub em { font-family: var(--gb-serif); font-style: italic; color: var(--gb-ink); }

/* ══ Search ══════════════════════════════════════════════ */
.gb-searchbar { display: flex; gap: .5rem; justify-content: center; align-items: center; margin: 0 auto 2.5rem; max-width: 520px; }
.gb-search {
  flex: 1; padding: .7rem 1.1rem; border: 1px solid var(--gb-line);
  border-radius: 999px; font-family: var(--gb-sans); font-size: .95rem;
  background: var(--gb-cream); color: var(--gb-ink); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.gb-search:focus { border-color: var(--gb-accent); box-shadow: 0 0 0 3px rgba(138,109,59,.12); }
.gb-search-btn {
  padding: .7rem 1.4rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--gb-ink); color: #fff; font-family: var(--gb-sans);
  font-size: .9rem; font-weight: 600; transition: background .2s;
}
.gb-search-btn:hover { background: var(--gb-accent-2); }
.gb-clear { font-size: .85rem; color: var(--gb-ink-mute); border-bottom: 1px dotted currentColor; }

/* ══ Grid ════════════════════════════════════════════════ */
.gb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
@media (max-width: 900px) { .gb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gb-grid { grid-template-columns: 1fr; } }

.gb-card {
  background: #fff; border: 1px solid var(--gb-line); border-radius: 14px;
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.gb-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(28,26,23,.1); }
.gb-card-link { display: flex; flex-direction: column; height: 100%; }

.gb-card-media { aspect-ratio: 16/9; overflow: hidden; background: var(--gb-cream); }
.gb-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gb-card:hover .gb-card-media img { transform: scale(1.045); }
.gb-card-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f3efe8, #e9e2d5);
  font-size: 2.4rem; color: var(--gb-accent); font-family: var(--gb-serif);
}

.gb-card-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.gb-card-meta {
  font-size: .78rem; color: var(--gb-ink-mute); display: flex; flex-wrap: wrap;
  gap: .35rem; align-items: center; margin-bottom: .55rem; font-weight: 500;
}
.gb-author { color: var(--gb-accent); font-weight: 600; }
.gb-dot { opacity: .6; }
.gb-card-title {
  font-family: var(--gb-serif); font-size: 1.3rem; font-weight: 600;
  line-height: 1.28; margin: 0 0 .55rem; color: var(--gb-ink);
}
.gb-card:hover .gb-card-title { color: var(--gb-accent-2); }
.gb-card-excerpt { font-size: .9rem; line-height: 1.6; color: var(--gb-ink-soft); margin: 0 0 1rem; flex: 1; }
.gb-readmore {
  font-size: .82rem; font-weight: 600; color: var(--gb-accent);
  letter-spacing: .02em;
}
.gb-card:hover .gb-readmore span { margin-left: .2em; }
.gb-readmore span { transition: margin .2s; display: inline-block; }

/* Featured (first) card spans full width */
.gb-card--featured { grid-column: 1 / -1; }
.gb-card--featured .gb-card-link { flex-direction: row; }
.gb-card--featured .gb-card-media { flex: 1.25; aspect-ratio: auto; min-height: 300px; }
.gb-card--featured .gb-card-body { flex: 1; justify-content: center; padding: 2rem 2.25rem; }
.gb-card--featured .gb-card-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.gb-card--featured .gb-card-excerpt { font-size: 1rem; }
@media (max-width: 760px) {
  .gb-card--featured .gb-card-link { flex-direction: column; }
  .gb-card--featured .gb-card-media { min-height: 0; aspect-ratio: 16/9; }
}

/* ══ Pagination ══════════════════════════════════════════ */
.gb-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.gb-page-btn {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gb-line); border-radius: 10px; font-size: .9rem; font-weight: 600;
  color: var(--gb-ink-soft); background: #fff; transition: all .2s;
}
.gb-page-btn:hover { border-color: var(--gb-accent); color: var(--gb-accent-2); }
.gb-page-btn.active { background: var(--gb-ink); border-color: var(--gb-ink); color: #fff; }

/* ══ Empty state ═════════════════════════════════════════ */
.gb-empty { text-align: center; padding: 4rem 1rem; color: var(--gb-ink-mute); }
.gb-empty span { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

/* ══ Single post ═════════════════════════════════════════ */
.gb-single { max-width: 760px; }
.gb-back {
  display: inline-block; margin: 1rem 0 2rem; font-size: .88rem; font-weight: 600;
  color: var(--gb-ink-mute); transition: color .2s;
}
.gb-back:hover { color: var(--gb-accent); }

.gb-post-header { text-align: center; margin-bottom: 2rem; }
.gb-post-title {
  font-family: var(--gb-serif); font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.18; margin: 0 0 1rem; color: var(--gb-ink);
}
.gb-post-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .45rem; font-size: .88rem; color: var(--gb-ink-mute); font-weight: 500;
}
.gb-post-author { color: var(--gb-ink); font-weight: 600; }
.gb-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--gb-accent); color: #fff; font-weight: 700; font-size: .85rem;
  font-family: var(--gb-serif);
}
.gb-avatar--lg { width: 48px; height: 48px; font-size: 1.25rem; }

.gb-post-cover { margin: 0 0 2.25rem; border-radius: 16px; overflow: hidden; }
.gb-post-cover img { width: 100%; display: block; }

/* Reading typography */
.gb-post-content {
  font-size: 1.12rem; line-height: 1.85; color: #2b2924;
}
.gb-post-content p { margin: 0 0 1.4em; }
.gb-post-content h2, .gb-post-content h3, .gb-post-content h4 {
  font-family: var(--gb-serif); color: var(--gb-ink); line-height: 1.3;
  margin: 1.8em 0 .6em; font-weight: 600;
}
.gb-post-content h2 { font-size: 1.7rem; }
.gb-post-content h3 { font-size: 1.35rem; }
.gb-post-content h4 { font-size: 1.15rem; }
.gb-post-content a { color: var(--gb-accent-2); border-bottom: 1px solid rgba(138,109,59,.35); transition: border-color .2s; }
.gb-post-content a:hover { border-color: var(--gb-accent-2); }
.gb-post-content img { max-width: 100%; height: auto; border-radius: 12px; margin: .5em 0; }
.gb-post-content ul, .gb-post-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.gb-post-content li { margin-bottom: .45em; }
.gb-post-content blockquote {
  margin: 2em 0; padding: 1.1em 1.5em; border-left: 3px solid var(--gb-accent);
  background: var(--gb-cream); border-radius: 0 12px 12px 0;
  font-family: var(--gb-serif); font-style: italic; font-size: 1.18rem; color: var(--gb-ink);
}
.gb-post-content blockquote p:last-child { margin-bottom: 0; }
.gb-post-content hr { border: none; border-top: 1px solid var(--gb-line); margin: 2.5em 0; }

/* Post footer */
.gb-post-footer { margin-top: 3rem; border-top: 1px solid var(--gb-line); padding-top: 2rem; }
.gb-byline-card { display: flex; align-items: center; gap: .9rem; margin-bottom: 2rem; }
.gb-byline-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gb-ink-mute); font-weight: 600; }
.gb-byline-name { font-family: var(--gb-serif); font-size: 1.15rem; font-weight: 600; color: var(--gb-ink); }

.gb-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gb-nav-link {
  border: 1px solid var(--gb-line); border-radius: 12px; padding: 1rem 1.2rem;
  transition: border-color .2s, box-shadow .2s; background: #fff;
}
.gb-nav-link:hover { border-color: var(--gb-accent); box-shadow: 0 6px 18px rgba(28,26,23,.07); }
.gb-nav-next { text-align: right; grid-column: 2; }
.gb-nav-prev { grid-column: 1; }
.gb-nav-dir { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gb-ink-mute); margin-bottom: .3rem; }
.gb-nav-title { font-family: var(--gb-serif); font-weight: 600; color: var(--gb-ink); font-size: .98rem; line-height: 1.35; }
@media (max-width: 560px) {
  .gb-post-nav { grid-template-columns: 1fr; }
  .gb-nav-next { grid-column: 1; text-align: left; }
}