/* CC Blog Page v1.0.0 - component styles, adapted from the approved blog redesign preview.
   All component classes are prefixed .ccb- and scoped under .ccb-root.
   The .cca-quiz-* block at the end styles the markup rendered by the site-wide
   Coach Chioma Identity Quiz plugin inside #cca-quiz (same end-state rules as
   home.css / about.css, so the quiz looks identical on every page). */

.ccb-root {
  --ivory: #FAF6EF;
  --blush: #F3DFDC;
  --dusty: #D9A5A0;
  --rose: #B76E79;
  --rose-deep: #9D5563;
  --forest: #1E4634;
  --forest-light: #24513B;
  --taupe: #B8A99A;
  --taupe-dark: #7D6F5F;
  --black: #141414;
  --ink-soft: #3C3733;
  --card: #FFFDF9;
  --line: #EAD9D2;
  --serif: "Playfair Display", Georgia, serif;
  --script: "Alex Brush", cursive;
  --sans: "Jost", "Segoe UI", sans-serif;
  background: var(--ivory);
  color: var(--black);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ccb-root *,
.ccb-root *::before,
.ccb-root *::after { box-sizing: border-box; }
.ccb-root img { display: block; max-width: 100%; }
.ccb-root a { color: var(--rose); }
.ccb-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ---------- reveal on scroll (JS arms the hidden state; visible by default) ---------- */
.cc-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.cc-rv-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cc-rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- buttons ---------- */
.ccb-btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: none;
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.02em;
  background: var(--rose); color: #141414; border-radius: 999px;
  padding: 16px 38px; font-size: 1.05rem; line-height: 1.3; transition: background 0.25s ease, color 0.25s ease;
}
.ccb-btn:hover { background: var(--blush); color: #141414; }
.ccb-letter-band .ccb-btn:hover { background: #ffffff; color: #141414; }

/* ---------- hero ---------- */
.ccb-hero { padding: 72px 0 84px; overflow: hidden; }
.ccb-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.ccb-script { font-family: var(--script); color: var(--rose); font-size: 2rem; line-height: 1.1; margin: 0 0 10px; }
.ccb-headline {
  font-family: var(--serif); font-weight: 400; color: var(--black);
  font-size: clamp(2.9rem, 5.6vw, 4.6rem); line-height: 0.99; margin: 0 0 26px; letter-spacing: 0.005em;
}
.ccb-headline .ccb-pop { font-style: italic; color: var(--rose); }
.ccb-headline .ccb-small-line { font-size: 0.52em; line-height: 1.25; display: block; margin-top: 16px; color: var(--ink-soft); }
.ccb-hero-sub { font-size: 1.13rem; font-weight: 300; color: var(--ink-soft); max-width: 30em; margin: 0 0 30px; }
.ccb-hero-media { position: relative; }
.ccb-arch {
  border-radius: 999px 999px 18px 18px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(20, 20, 20, 0.14);
}
.ccb-arch img { width: 100%; height: 560px; object-fit: cover; }
.ccb-medallion {
  position: absolute; left: -34px; bottom: 44px; width: 128px; height: 128px;
  background: var(--ivory); border-radius: 50%;
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.16);
  display: flex; align-items: center; justify-content: center;
}
.ccb-medallion img { width: 104px; height: 104px; object-fit: contain; }

/* ---------- filter ---------- */
.ccb-filter-band { padding: 6px 0 8px; }
.ccb-filter-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ccb-pill {
  font-family: var(--sans); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em;
  background: transparent; color: var(--black); cursor: pointer;
  border: 1.5px solid var(--dusty); border-radius: 999px; padding: 10px 24px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: normal;
}
.ccb-pill:hover { background: var(--blush); }
.ccb-pill.ccb-active { background: var(--rose); border-color: var(--rose); color: #fff; }
.ccb-filter-note { text-align: center; color: var(--taupe-dark); font-size: 0.95rem; margin: 16px 0 0; min-height: 1.4em; }

/* ---------- featured + cards ---------- */
.ccb-featured-sec { padding: 44px 0 10px; }
.ccb-featured {
  display: grid; grid-template-columns: 1.05fr 0.95fr; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(20, 20, 20, 0.06);
}
.ccb-f-img img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.ccb-f-body { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; }
.ccb-f-start { font-family: var(--script); color: var(--rose); font-size: 1.9rem; line-height: 1; margin: 0 0 12px; }
.ccb-tag {
  display: inline-block; align-self: flex-start; color: var(--rose); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px;
}
.ccb-featured h2, .ccb-card h3 {
  font-family: var(--serif); font-weight: 400; color: var(--black); margin: 0 0 12px;
}
.ccb-featured h2 { font-size: 2rem; line-height: 1.18; }
.ccb-featured h2 a, .ccb-card h3 a { color: inherit; text-decoration: none; }
.ccb-featured h2 a:hover, .ccb-card h3 a:hover { color: var(--rose); }
.ccb-scripture { color: var(--rose); font-size: 0.98rem; margin: 0 0 12px; font-weight: 500; }
.ccb-excerpt { color: var(--ink-soft); font-weight: 300; margin: 0 0 18px; }
.ccb-meta { color: var(--taupe-dark); font-size: 0.9rem; letter-spacing: 0.04em; margin: 0 0 20px; }
.ccb-readmore { color: var(--rose); font-weight: 500; text-decoration: none; letter-spacing: 0.02em; }
.ccb-readmore:hover { color: var(--rose-deep); text-decoration: underline; }
.ccb-fading { opacity: 0; transform: translateY(8px); }
.ccb-fadeable { transition: opacity 0.3s ease, transform 0.3s ease; }

.ccb-grid-sec { padding: 34px 0 84px; }
.ccb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ccb-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ccb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 20, 20, 0.09); }
.ccb-c-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ccb-c-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.ccb-card .ccb-tag { margin-bottom: 10px; }
.ccb-card h3 { font-size: 1.42rem; line-height: 1.25; }
.ccb-card .ccb-excerpt { font-size: 0.99rem; flex: 1; }
.ccb-card .ccb-meta { margin-bottom: 12px; }
.ccb-empty-note { text-align: center; color: var(--taupe-dark); padding: 30px 0 6px; display: none; }

/* ---------- Saturday Letter band ---------- */
.ccb-letter-band { background: var(--blush); padding: 74px 0; text-align: center; }
.ccb-letter-band .ccb-script { font-size: 2.3rem; margin-bottom: 6px; }
.ccb-letter-band h2 {
  font-family: var(--serif); font-weight: 400; color: var(--black);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; margin: 0 auto 16px; max-width: 22em;
}
.ccb-letter-band h2 em { font-style: italic; color: var(--rose); }
.ccb-letter-band p { color: var(--ink-soft); font-weight: 300; font-size: 1.08rem; max-width: 34em; margin: 0 auto 28px; }
.ccb-letter-band p.ccb-script { color: var(--rose); max-width: none; }

/* ---------- quiz band ---------- */
.ccb-quiz-band { background: var(--forest-light); padding: 84px 0; color: var(--ivory); }
.ccb-quiz-in { max-width: 780px; margin: 0 auto; text-align: center; }
.ccb-quiz-h2 {
  font-family: var(--serif); font-weight: 400; color: var(--ivory);
  font-size: clamp(2rem, 3.8vw, 2.9rem); line-height: 1.1; margin: 0 0 12px;
}
.ccb-quiz-sub { color: var(--blush); font-weight: 300; font-size: 1.1rem; margin: 0 0 36px; }

/* Quiz internals: rendered by the Coach Chioma Identity Quiz plugin inside
   #cca-quiz. End-state rules mirror home.css / about.css. */
.cca-quiz-card {
  background: transparent; color: var(--black);
  display: block; padding: 46px 42px; text-align: center;
  margin-top: 22px; min-height: 230px; font-size: 1.15rem;
  font-family: "Jost", "Segoe UI", sans-serif;
}
.cca-quiz-progress { letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; color: #F3DFDC; font-weight: 600; margin: 0 0 10px; text-align: center; }
.cca-quiz-q { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.25; color: #FAF6EF; margin: 0 0 18px; text-align: center; }
.cca-quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.cca-quiz-opt {
  background: transparent; border: 1px solid #F3DFDC; color: #FAF6EF; border-radius: 999px;
  padding: 14px 18px; font-family: "Jost", sans-serif; font-size: 1rem; font-weight: 300;
  cursor: pointer; text-align: center; white-space: normal; line-height: 1.45;
}
.cca-quiz-opt:hover { background: rgba(243,223,220,.18); border-color: #F3DFDC; }
.cca-quiz-t {
  background: rgba(250,246,239,.09); border: 1px solid rgba(243,223,220,.38); border-radius: 16px;
  padding: 20px 24px; max-width: 64ch; margin: 0 auto 16px; text-align: center;
  color: #FAF6EF; font-weight: 300;
}
.cca-quiz-btn {
  display: block; width: fit-content; margin: 26px auto 10px;
  background: #B76E79; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 13px 28px; font-weight: 500;
}
.cca-quiz-btn:hover { background: #9E5561; color: #fff; }
.cca-quiz-restart { display: block; margin-top: 20px; text-align: center; color: #F3DFDC; font-size: .92rem; }

/* ---------- pagination (added v1.1.0 with the live post query) ---------- */
.ccb-pagination { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 38px; }
.ccb-page-link {
  font-family: var(--sans); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--black); text-decoration: none;
  border: 1.5px solid var(--dusty); border-radius: 999px; padding: 9px 22px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
a.ccb-page-link:hover { background: var(--blush); }
.ccb-page-current { background: var(--rose); border-color: var(--rose); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .ccb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ccb-hero { padding: 48px 0 60px; }
  .ccb-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .ccb-arch img { height: 420px; }
  .ccb-medallion { left: 10px; bottom: -24px; width: 104px; height: 104px; }
  .ccb-medallion img { width: 84px; height: 84px; }
  .ccb-featured { grid-template-columns: 1fr; }
  .ccb-f-img img { min-height: 0; height: 260px; }
  .ccb-f-body { padding: 32px 28px 38px; }
}
@media (max-width: 620px) {
  .ccb-wrap { padding: 0 20px; }
  .ccb-grid { grid-template-columns: 1fr; }
  .ccb-quiz-in { padding: 0 20px; }
  .cca-quiz-card { padding: 34px 20px; }
  .cca-quiz-q { font-size: 1.55rem; }
}