/* =============================================================
   IceCold Blog — archive + single styles
   Drop into Divi child theme and enqueue (see functions snippet).
   Everything is scoped under .icb to avoid clashing with Divi.
   ============================================================= */
.icb {
  --icb-navy: #021F46;
  --icb-slate: #475467;
  --icb-red: #CA1212;
  --icb-placeholder: #F2F2F2;
  --icb-border: #EAECF0;
  --icb-white: #ffffff;
  --icb-radius: 12px;
  --icb-max-archive: 1280px;
  --icb-max-single: 820px;
  --icb-title-font: "Barlow", "Arial", sans-serif;
  color: var(--icb-navy);
  -webkit-font-smoothing: antialiased;
}
.icb *,
.icb *::before,
.icb *::after { box-sizing: border-box; }

.icb a { color: var(--icb-navy); text-decoration: none; }
.icb a:hover { text-decoration: underline; }

.icb-wrap {
  width: 100%;
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
}

/* ---- gray placeholder helpers (used until real images are set) ---- */
.icb-ph {
  background: var(--icb-placeholder);
  display: flex; align-items: center; justify-content: center;
  color: #c4c7cc;
}
.icb-ph svg { width: 48px; height: 48px; }

/* =============================================================
   ARCHIVE
   ============================================================= */
.icb-archive { background: var(--icb-white); padding: 96px 0; }
.icb-archive .icb-wrap { max-width: var(--icb-max-archive); }

.icb-archive__head { max-width: 768px; margin: 0 auto 64px; text-align: center; }
.icb-archive__title {
  font-family: var(--icb-title-font);
  font-size: 48px; line-height: 1.1; font-weight: 900;
  color: var(--icb-navy); margin: 0;
}
.icb-archive__sub {
  font-size: 18px; line-height: 1.6; color: var(--icb-navy);
  margin: 24px auto 0; max-width: 600px;
}

/* filter tabs */
.icb-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 32px;
}
.icb-tab {
  background-color: transparent;
  font-family: "Barlow", "Arial", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.125rem;
  color: var(--icb-red);
  padding: 0.625rem 1.5rem;
  border-radius: 6.25rem;
  border: 1px solid #00040926;
  cursor: pointer;
  transition: 0.3s ease-out;
}
.icb-tab:hover { background-color: var(--icb-red); color: var(--icb-white); border-color: var(--icb-red); text-decoration: none; }
.icb-tab.is-active {
  background-color: var(--icb-red); color: var(--icb-white); border-color: var(--icb-red);
}

/* card grid */
.icb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.icb-card { display: flex; flex-direction: column; }
.icb-card__media {
  display: block; aspect-ratio: 3 / 2; width: 100%;
  border-radius: var(--icb-radius); overflow: hidden;
}
.icb-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icb-card__cat {
  font-size: 12px; font-weight: 600; color: var(--icb-navy);
  margin: 20px 0 8px;
}
.icb-card__title {
  font-family: var(--icb-title-font);
  font-size: 22px; line-height: 1.3; font-weight: 900;
  color: var(--icb-navy); margin: 0 0 8px;
}
.icb-card__title a:hover { text-decoration: none; opacity: .85; }
.icb-card__excerpt {
  font-size: 16px; line-height: 1.6; color: var(--icb-navy);
  margin: 0;
}

/* author meta row (shared) */
.icb-meta { display: flex; align-items: center; gap: 12px; }
.icb-card .icb-meta { margin-top: 24px; }
.icb-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  overflow: hidden;
}
.icb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.icb-meta__name { font-size: 14px; font-weight: 700; color: var(--icb-navy); line-height: 1.4; }
.icb-meta__sub  { font-size: 14px; color: var(--icb-navy); line-height: 1.4; }

/* person silhouette fallback avatar */
.icb-avatar-ph {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--icb-placeholder); color: #aeb4bd;
  display: flex; align-items: center; justify-content: center;
}
.icb-avatar-ph svg { width: 62%; height: 62%; }

/* AJAX facet loading state */
#icb-results { transition: opacity .15s ease; }
#icb-results.is-loading { opacity: .45; pointer-events: none; }

/* centered "All articles" back link (taxonomy archives) */
.icb-backnav { display: flex; justify-content: center; margin-top: 32px; }

/* pagination */
.icb-pagination { margin-top: 64px; }
.icb-pagination ul.page-numbers {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 8px;
  padding: 0; margin: 0;
}
.icb-pagination li { margin: 0; }
.icb-pagination a.page-numbers,
.icb-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 16px;
  border-radius: 6.25rem; border: 1px solid #00040926;
  font-family: var(--icb-title-font); font-weight: 700; font-size: 1rem;
  color: var(--icb-navy); background: var(--icb-white);
  text-decoration: none; transition: .25s ease-out;
}
.icb-pagination a.page-numbers:hover {
  background: var(--icb-navy); color: var(--icb-white); border-color: var(--icb-navy);
}
.icb-pagination span.page-numbers.current {
  background: var(--icb-red); color: var(--icb-white); border-color: var(--icb-red);
}
.icb-pagination span.page-numbers.dots {
  border-color: transparent; background: transparent; min-width: auto; padding: 0 4px;
}
.icb-pagination .icb-pg-ico { font-size: 20px; line-height: 1; margin-top: -2px; }
@media (max-width: 768px) {
  .icb-pagination .prev .icb-pg-txt,
  .icb-pagination .next .icb-pg-txt { display: none; }
}
.icb-dot { margin: 0 6px; }

/* =============================================================
   SINGLE
   ============================================================= */
.icb-single { background: var(--icb-white); padding: 80px 0 96px; }
.icb-single .icb-wrap { max-width: var(--icb-max-single); }

.icb-breadcrumb {
  font-size: 14px; color: var(--icb-navy);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 24px;
}
.icb-breadcrumb a { color: var(--icb-navy); font-weight: 500; }
.icb-breadcrumb .sep { color: #98a2b3; }

.icb-single__title {
  font-family: var(--icb-title-font);
  font-size: 48px; line-height: 1.1; font-weight: 900;
  color: var(--icb-navy); margin: 0 0 32px;
}

.icb-single__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.icb-single__bar .icb-avatar { width: 48px; height: 48px; flex-basis: 48px; }

/* share buttons */
.icb-share { display: flex; align-items: center; gap: 12px; }
.icb-share a, .icb-share button {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f5f6f8; color: var(--icb-navy);
  border: none; cursor: pointer; transition: background .15s ease;
  padding: 0;
}
.icb-share a:hover, .icb-share button:hover { background: #e8eaed; text-decoration: none; }
.icb-share svg { width: 18px; height: 18px; fill: currentColor; }

.icb-single__media {
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: 16px; overflow: hidden; margin-bottom: 48px;
}
.icb-single__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* article body (Gutenberg content) */
.icb-content { font-size: 18px; line-height: 1.75; color: var(--icb-navy); }
.icb-content > * { margin: 0 0 24px; }
.icb-content > *:last-child { margin-bottom: 0; }
.icb-content h2 {
  font-family: var(--icb-title-font);
  font-size: 30px; line-height: 1.25; font-weight: 900;
  color: var(--icb-navy); margin: 48px 0 16px;
}
.icb-content h3 {
  font-family: var(--icb-title-font);
  font-size: 24px; line-height: 1.3; font-weight: 900;
  color: var(--icb-navy); margin: 40px 0 12px;
}
.icb-content a { color: var(--icb-red); text-decoration: underline; font-weight: 600; }
.icb-content ul, .icb-content ol { padding-left: 24px; }
.icb-content li { margin-bottom: 8px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
  .icb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .icb-archive { padding: 64px 0; }
  .icb-single { padding: 48px 0 64px; }
  .icb-archive__title,
  .icb-single__title { font-size: 32px; }
  .icb-grid { grid-template-columns: 1fr; gap: 40px; }
  .icb-content { font-size: 17px; }
  .icb-content h2 { font-size: 26px; }
  .icb-single__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}