/*
 * Custom Blog Grid — Frontend Styles v2.2
 * Light theme only. All colours hardcoded — no CSS variables that
 * the page theme can override.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Wrapper: full isolation from page theme ───────── */
.cbg-wrapper,
.cbg-wrapper * {
  box-sizing: border-box;
}

.cbg-wrapper {
  width            : 100%;
  background-color : #ffffff !important;
  color            : #1a1814 !important;
  color-scheme     : light !important;
  padding          : 0;
  border-radius    : 0;
}

/* ── Grid ────────────────────────────────────────────  */
.cbg-grid {
  display : grid;
  gap     : 1.5rem;
  margin  : 0;
  padding : 0;
}
.cbg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cbg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cbg-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card ─────────────────────────────────────────── */
.cbg-wrapper .cbg-card {
  background-color : #ffffff !important;
  color            : #1a1814 !important;
  border           : 1px solid #e8e4de !important;
  border-radius    : 14px !important;
  box-shadow       : 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04) !important;
  display          : flex;
  flex-direction   : column;
  overflow         : hidden;
  transition       : box-shadow .28s ease, transform .28s ease;
}
.cbg-wrapper .cbg-card:hover {
  box-shadow : 0 12px 40px rgba(0,0,0,.13), 0 3px 8px rgba(0,0,0,.07) !important;
  transform  : translateY(-4px);
}

/* ── Image area ──────────────────────────────────── */
.cbg-wrapper .cbg-card__img-link { display:block; text-decoration:none; }

.cbg-wrapper .cbg-card__img-wrap {
  position         : relative;
  overflow         : hidden;
  aspect-ratio     : 16/10;
  background-color : #f9f8f6 !important;
}
.cbg-wrapper .cbg-card__img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform .55s ease;
}
.cbg-wrapper .cbg-card:hover .cbg-card__img { transform: scale(1.05); }

.cbg-wrapper .cbg-card__overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(180deg, transparent 40%, rgba(0,0,0,.15) 100%);
  opacity    : 0;
  transition : opacity .28s ease;
}
.cbg-wrapper .cbg-card:hover .cbg-card__overlay { opacity: 1; }

/* Placeholder (no featured image) */
.cbg-wrapper .cbg-card__img-wrap--ph {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  background-color : #f0ede8 !important;
}
.cbg-wrapper .cbg-ph-icon { width:48px; height:48px; color:#c4b9ab; }

/* ── Card body ────────────────────────────────────── */
.cbg-wrapper .cbg-card__body {
  padding          : 1.25rem 1.35rem 1.2rem;
  display          : flex;
  flex-direction   : column;
  flex             : 1;
  gap              : .5rem;
  background-color : #ffffff !important;
}

/* Meta row */
.cbg-wrapper .cbg-card__meta {
  display     : flex;
  align-items : center;
  gap         : .4rem;
  flex-wrap   : wrap;
}
.cbg-wrapper .cbg-card__cat {
  font-family    : 'DM Sans', system-ui, sans-serif;
  font-size      : .67rem;
  font-weight    : 600;
  letter-spacing : .07em;
  text-transform : uppercase;
  color          : #7a5c44 !important;
  background     : #f0ede8 !important;
  padding        : 3px 9px;
  border-radius  : 100px;
}
.cbg-wrapper .cbg-card__sep  { color: #e8e4de !important; font-size:.75rem; }
.cbg-wrapper .cbg-card__date { font-family:'DM Sans',system-ui,sans-serif; font-size:.73rem; color:#6b6560 !important; }
.cbg-wrapper .cbg-card__date-badge {
  font-family    : 'DM Sans', system-ui, sans-serif;
  font-size      : .62rem;
  font-weight    : 600;
  letter-spacing : .06em;
  text-transform : uppercase;
  color          : #7a5c44 !important;
  background     : #f0ede8 !important;
  padding        : 2px 7px;
  border-radius  : 100px;
}

/* Title */
.cbg-wrapper .cbg-card__title {
  font-family : 'Fraunces', Georgia, serif;
  font-size   : clamp(1rem, 1.4vw + .3rem, 1.2rem);
  font-weight : 600;
  line-height : 1.3;
  color       : #1a1814 !important;
  margin      : 0;
  padding     : 0;
}
.cbg-wrapper .cbg-card__title-link {
  color           : #1a1814 !important;
  text-decoration : none;
  transition      : color .2s;
}
.cbg-wrapper .cbg-card__title-link:hover { color: #c8622a !important; }

/* Excerpt */
.cbg-wrapper .cbg-card__excerpt {
  font-family        : 'DM Sans', system-ui, sans-serif;
  font-size          : .875rem;
  line-height        : 1.65;
  color              : #6b6560 !important;
  margin             : 0;
  display            : -webkit-box;
  -webkit-line-clamp : 3;
  -webkit-box-orient : vertical;
  overflow           : hidden;
}

/* Footer */
.cbg-wrapper .cbg-card__footer {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-top      : auto;
  padding-top     : .7rem;
  border-top      : 1px solid #e8e4de !important;
}
.cbg-wrapper .cbg-card__read-more {
  display         : inline-flex;
  align-items     : center;
  gap             : .4rem;
  font-family     : 'DM Sans', system-ui, sans-serif;
  font-size       : .8rem;
  font-weight     : 600;
  color           : #c8622a !important;
  text-decoration : none;
  transition      : color .2s, gap .2s;
}
.cbg-wrapper .cbg-card__read-more:hover { color: #a84e1f !important; gap:.65rem; }
.cbg-wrapper .cbg-card__arrow { width:18px; height:18px; flex-shrink:0; transition:transform .2s; }
.cbg-wrapper .cbg-card__read-more:hover .cbg-card__arrow { transform: translateX(3px); }
.cbg-wrapper .cbg-card__read-time { font-family:'DM Sans',system-ui,sans-serif; font-size:.72rem; color:#6b6560 !important; }

/* ── Info bar (no-pagination mode) ────────────────── */
.cbg-wrapper .cbg-info-bar {
  display          : flex;
  align-items      : center;
  flex-wrap        : wrap;
  gap              : .4rem;
  margin-bottom    : 1.25rem;
  padding          : .6rem 1rem;
  background-color : #f9f8f6 !important;
  border           : 1px solid #e8e4de !important;
  border-radius    : 10px;
  font-family      : 'DM Sans', system-ui, sans-serif;
  font-size        : .8rem;
}
.cbg-wrapper .cbg-info-bar__item { display:inline-flex; align-items:center; gap:.35rem; color:#1a1814 !important; font-weight:500; }
.cbg-wrapper .cbg-info-bar__item--muted { color:#6b6560 !important; font-weight:400; }
.cbg-wrapper .cbg-info-bar__sep  { color:#e8e4de !important; }

/* ── Numbered pagination ───────────────────────────── */
.cbg-wrapper .cbg-pagination {
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-wrap       : wrap;
  gap             : 6px;
  margin-top      : 2rem;
  font-family     : 'DM Sans', system-ui, sans-serif;
}
.cbg-wrapper .cbg-pagination .page-numbers {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  min-width        : 40px;
  height           : 40px;
  padding          : 0 6px;
  border-radius    : 10px;
  border           : 1.5px solid #e8e4de !important;
  font-size        : .875rem;
  font-weight      : 500;
  color            : #1a1814 !important;
  text-decoration  : none;
  background-color : #ffffff !important;
  transition       : background .2s, color .2s, border-color .2s, transform .2s;
}
.cbg-wrapper .cbg-pagination .page-numbers svg { width:18px; height:18px; flex-shrink:0; }
.cbg-wrapper .cbg-pagination .page-numbers:hover:not(.current):not(.dots) {
  background-color : #c8622a !important;
  border-color     : #c8622a !important;
  color            : #ffffff !important;
  transform        : translateY(-1px);
}
.cbg-wrapper .cbg-pagination .page-numbers.current {
  background-color : #c8622a !important;
  border-color     : #c8622a !important;
  color            : #ffffff !important;
  font-weight      : 600;
  pointer-events   : none;
}
.cbg-wrapper .cbg-pagination .page-numbers.dots {
  border-color     : transparent !important;
  background       : transparent !important;
  color            : #6b6560 !important;
  cursor           : default;
}
.cbg-wrapper .cbg-pagination .page-numbers.prev,
.cbg-wrapper .cbg-pagination .page-numbers.next { background-color: #f9f8f6 !important; }

/* ── Load More ─────────────────────────────────────── */
.cbg-wrapper .cbg-loadmore-wrap { display:flex; flex-direction:column; align-items:center; gap:.8rem; margin-top:2rem; }
.cbg-wrapper .cbg-loadmore-btn {
  position       : relative;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : .5rem;
  height         : 46px;
  padding        : 0 2rem;
  border-radius  : 100px;
  border         : 2px solid #c8622a !important;
  background     : transparent !important;
  color          : #c8622a !important;
  font-family    : 'DM Sans', system-ui, sans-serif;
  font-size      : .875rem;
  font-weight    : 600;
  cursor         : pointer;
  transition     : background .2s, color .2s, transform .2s;
  overflow       : hidden;
}
.cbg-wrapper .cbg-loadmore-btn:hover:not(:disabled) {
  background : #c8622a !important;
  color      : #ffffff !important;
  transform  : translateY(-2px);
}
.cbg-wrapper .cbg-loadmore-btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.cbg-wrapper .cbg-loadmore-btn.cbg-loading .cbg-loadmore-btn__text { opacity:0; }
.cbg-wrapper .cbg-loadmore-btn.cbg-loading .cbg-loadmore-btn__spinner { opacity:1; }
.cbg-wrapper .cbg-loadmore-btn__text { transition:opacity .2s; }
.cbg-wrapper .cbg-loadmore-btn__spinner {
  position      : absolute;
  width         : 18px;
  height        : 18px;
  border        : 2px solid #c8622a;
  border-top-color: transparent;
  border-radius : 50%;
  opacity       : 0;
  animation     : cbg-spin .7s linear infinite;
  transition    : opacity .2s;
}
@keyframes cbg-spin { to { transform: rotate(360deg); } }
.cbg-wrapper .cbg-loadmore-btn.cbg-all-loaded {
  border-color : #e8e4de !important;
  color        : #6b6560 !important;
  pointer-events: none;
}
.cbg-wrapper .cbg-loadmore-count { font-family:'DM Sans',system-ui,sans-serif; font-size:.78rem; color:#6b6560 !important; }

/* ── Misc ──────────────────────────────────────────── */
.cbg-no-posts { font-family:'DM Sans',system-ui,sans-serif; color:#6b6560; font-style:italic; }

.cbg-wrapper .cbg-card__title-link:focus-visible,
.cbg-wrapper .cbg-card__read-more:focus-visible { outline:2px solid #c8622a; outline-offset:3px; border-radius:4px; }

/* ── Entrance animation ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .cbg-wrapper .cbg-card { opacity:0; transform:translateY(16px); animation:cbg-in .45s ease forwards; }
  .cbg-wrapper .cbg-card:nth-child(1)  { animation-delay:.04s }
  .cbg-wrapper .cbg-card:nth-child(2)  { animation-delay:.10s }
  .cbg-wrapper .cbg-card:nth-child(3)  { animation-delay:.16s }
  .cbg-wrapper .cbg-card:nth-child(4)  { animation-delay:.22s }
  .cbg-wrapper .cbg-card:nth-child(5)  { animation-delay:.28s }
  .cbg-wrapper .cbg-card:nth-child(6)  { animation-delay:.34s }
  .cbg-wrapper .cbg-card:nth-child(7)  { animation-delay:.40s }
  .cbg-wrapper .cbg-card:nth-child(8)  { animation-delay:.46s }
  .cbg-wrapper .cbg-card:nth-child(9)  { animation-delay:.52s }
  .cbg-wrapper .cbg-card:nth-child(10) { animation-delay:.58s }
  .cbg-wrapper .cbg-card:nth-child(11) { animation-delay:.64s }
  .cbg-wrapper .cbg-card:nth-child(12) { animation-delay:.70s }
  @keyframes cbg-in { to { opacity:1; transform:translateY(0); } }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 600px) {
  .cbg-cols-3,
  .cbg-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cbg-cols-2,
  .cbg-cols-3,
  .cbg-cols-4 { grid-template-columns: 1fr; }
  .cbg-wrapper .cbg-card__title { font-size: 1.05rem; }
  .cbg-wrapper .cbg-card__body  { padding: 1.1rem; }
  .cbg-wrapper .cbg-card__footer { flex-direction: column; align-items: flex-start; gap: .4rem; }
}