/*
 * Custom Blog List — Frontend Styles v1.0
 * Clean horizontal list: image left, content right.
 * All colours hardcoded with !important to beat any dark theme.
 */

@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 isolation ───────────────────────────────── */
.cbl-wrapper,
.cbl-wrapper * { box-sizing: border-box; }

.cbl-wrapper {
  width            : 100%;
  background-color : #ffffff !important;
  color            : #1a1814 !important;
  color-scheme     : light !important;
}

/* ── List container ──────────────────────────────────── */
.cbl-list {
  display        : flex !important;
  flex-direction : column !important;
  gap            : 12px !important;
  background     : transparent !important;
}

/* ── Row (article) ───────────────────────────────────── */
.cbl-wrapper article {
  display          : flex !important;
  align-items      : center !important;
  background-color : #ffffff !important;
  color            : #1a1814 !important;
  border           : 1px solid #e8e4de !important;
  border-radius    : 12px !important;
  overflow         : hidden !important;
  box-shadow       : 0 1px 4px rgba(0,0,0,.05) !important;
  transition       : background .22s ease, box-shadow .22s ease, transform .22s ease !important;
  min-height       : 180px !important;
}

.cbl-wrapper article:last-child {
  border-bottom : 1px solid #e8e4de !important;
}

.cbl-wrapper article:hover {
  background-color : #fdfcfb !important;
  box-shadow       : 0 4px 16px rgba(0,0,0,.09) !important;
  transform        : translateY(-1px) !important;
}

/* ── Image link (left column) ────────────────────────── */
.cbl-wrapper article > a:first-child {
  position         : relative !important;
  flex-shrink      : 0 !important;
  overflow         : hidden !important;
  background-color : #f9f8f6 !important;
  display          : block !important;
  text-decoration  : none !important;
  align-self       : center !important;
  width            : 240px !important;
  height           : 160px !important;
  border-radius    : 8px !important;
  margin           : 12px !important;
}

/* Image fills the link container fully */
.cbl-wrapper article > a:first-child img {
  position        : absolute !important;
  inset           : 0 !important;
  width           : 100% !important;
  height          : 100% !important;
  object-fit      : cover !important;
  object-position : center center !important;
  display         : block !important;
  border-radius   : 8px !important;
  transition      : transform .45s cubic-bezier(.4,0,.2,1) !important;
}

.cbl-wrapper article:hover > a:first-child img {
  transform : scale(1.04) !important;
}

/* ── Body (right column) ─────────────────────────────── */
.cbl-wrapper .cbl-row__body {
  flex            : 1 !important;
  min-width       : 0 !important;
  background-color: #ffffff !important;
  color           : #1a1814 !important;
}

/* ── Pagination ──────────────────────────────────────── */
.cbl-pagination {
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-wrap       : wrap;
  gap             : 6px;
  margin-top      : 1.75rem;
  font-family     : 'DM Sans', system-ui, sans-serif;
}

.cbl-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;
  font-size        : .875rem;
  font-weight      : 500;
  color            : #1a1814;
  text-decoration  : none;
  background-color : #ffffff;
  transition       : background .2s, color .2s, border-color .2s, transform .2s;
}

.cbl-pagination .page-numbers svg { width:18px; height:18px; flex-shrink:0; }

.cbl-pagination .page-numbers:hover:not(.current):not(.dots) {
  background-color : #c8622a;
  border-color     : #c8622a;
  color            : #ffffff;
  transform        : translateY(-1px);
}

.cbl-pagination .page-numbers.current {
  background-color : #c8622a;
  border-color     : #c8622a;
  color            : #ffffff;
  font-weight      : 600;
  pointer-events   : none;
}

.cbl-pagination .page-numbers.dots {
  border-color    : transparent;
  background      : transparent;
  color           : #6b6560;
  cursor          : default;
}

.cbl-pagination .page-numbers.prev,
.cbl-pagination .page-numbers.next { background-color: #f9f8f6; }

/* ── Load More ───────────────────────────────────────── */
.cbl-loadmore-wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : .8rem;
  margin-top     : 1.75rem;
}

.cbl-loadmore-btn {
  position       : relative;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  height         : 46px;
  padding        : 0 2rem;
  border-radius  : 100px;
  border         : 2px solid #c8622a;
  background     : transparent;
  color          : #c8622a;
  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;
}

.cbl-loadmore-btn:hover:not(:disabled) {
  background : #c8622a;
  color      : #ffffff;
  transform  : translateY(-2px);
}

.cbl-loadmore-btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.cbl-loadmore-btn.cbl-loading .cbl-loadmore-btn__text { opacity:0; }
.cbl-loadmore-btn.cbl-loading .cbl-loadmore-btn__spinner { opacity:1; }
.cbl-loadmore-btn__text { transition: opacity .2s; }
.cbl-loadmore-btn__spinner {
  position      : absolute;
  width         : 18px;
  height        : 18px;
  border        : 2px solid #c8622a;
  border-top-color: transparent;
  border-radius : 50%;
  opacity       : 0;
  animation     : cbl-spin .7s linear infinite;
  transition    : opacity .2s;
}

@keyframes cbl-spin { to { transform: rotate(360deg); } }

.cbl-loadmore-btn.cbl-all-loaded {
  border-color  : #e8e4de;
  color         : #6b6560;
  pointer-events: none;
}

.cbl-loadmore-count {
  font-family : 'DM Sans', system-ui, sans-serif;
  font-size   : .78rem;
  color       : #6b6560;
}

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

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

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 560px) {
  .cbl-wrapper article {
    flex-direction : column !important;
    align-items    : stretch !important;
  }

  .cbl-wrapper article > a:first-child {
    width         : calc(100% - 24px) !important;
    height        : 200px !important;
    margin        : 12px 12px 0 12px !important;
    align-self    : stretch !important;
  }
}