/*
 * Mikh Content Styles — post content stylesheet.
 * Architecture: composable components, no redundant card types.
 *
 * Components:
 *   .cs-tag          — standalone pill label (inside or outside cards)
 *   .cs-card         — base card container
 *   .cs-card-grid    — side-by-side card layout (2-col → 1-col on mobile)
 *   .cs-list         — numbered list
 *   .cs-plain-list   — non-numbered list
 *   .cs-bullets      — disc bullet list
 *   .cs-wrap blockquote    — blockquote highlight
 *   .cs-metric-number      — metric number
 *
 * Naming:
 *   --yellow / --green / --red / --blue  → color palette (cards & tags)
 *   __title, __subtitle, __meta, __caption, __footnote → card sub-elements
 *   __banner → full-width state label at card top (color auto-derived from card variant)
 *   <hr> inside .cs-card → dashed separator (color auto-derived from card variant)
 *   --lg, --xl, --accent → title modifiers
 *   --_card-border → scoped variable set by each card variant for auto-coloring
 */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&display=swap");

.cs-wrap *,
.cs-wrap *::before,
.cs-wrap *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
.cs-wrap {
  --text: #1b1b1b;
  --text-muted: #5a5750;
  --text-extra-muted: #7f7f7f;
  --heading: #1b1b1b;

  --card-text-yellow: #372402;
  --card-text-green: #023606;
  --card-text-blue: #110236;
  --card-text-red: #360602;
  --card-text-gray: #555353;

  --card-bg-yellow: #fcf9ee;
  --card-bg-green: #f5fdef;
  --card-bg-blue: #f0eefc;
  --card-bg-red: #fdefef;
  --card-bg-gray: #f0f0f0;

  --card-border-yellow: #f3ddb4;
  --card-border-green: #b8ee92;
  --card-border-blue: #b4bae9;
  --card-border-red: #e2787a;
  --card-border-gray: #dedfe7;

  --card-banner-blue: #dad2ff;
  --card-banner-gray: #d4d4d4;

  --tag-bg-yellow: #fef4d2;
  --tag-bg-green: #d4f6bd;
  --tag-bg-red: #f9c2c3;
  --tag-bg-blue: #dad2ff;

  --accent: #04770f;
  --pullquote-bg: #fcf9ee;
  --pullquote-border: #d4a843;

  font-family: "Newsreader", Georgia, serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════ */
.cs-content {
  max-width: 764px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 80px;
}

.cs-wrap section {
  margin-bottom: 56px;
}

.cs-wrap section > h1,
.cs-wrap section > h2 {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 20px;
  line-height: 1.2;
}

.cs-wrap section > h1 {
  font-size: clamp(30px, 4.5vw, 40px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.cs-wrap section > h3 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
  margin: 28px 0 16px;
  line-height: 1.3;
}

.cs-wrap section > p {
  margin-bottom: 16px;
  color: var(--text);
}

.cs-wrap section .cs-intro {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 40px;
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════
   Text elements
   ═══════════════════════════════════════════════════ */

.gradient-text {
  font-family: "Newsreader", Georgia, serif;
  font-size: 30px !important;
  font-weight: 700 !important;
  background: linear-gradient(
    120deg,
    #8f79a1 0%,
    #b699b6 26%,
    #f5d8c1 52%,
    #ffd9b8 74%,
    #9e86ad 100%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cs-gradient-flow 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cs-gradient-flow {
  0% {
    background-position: 0% 50%;
    filter: saturate(1);
  }

  50% {
    background-position: 100% 50%;
    filter: saturate(1.12);
  }

  100% {
    background-position: 0% 50%;
    filter: saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ═══════════════════════════════════════════════════
   TAGS
   ═══════════════════════════════════════════════════ */
.cs-tag {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 14px 0;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: "Newsreader", Georgia, serif;
  width: fit-content;
}

.cs-tag.variant--yellow {
  background: var(--tag-bg-yellow);
}

.cs-tag.variant--green {
  background: var(--tag-bg-green);
}

.cs-tag.variant--red {
  background: var(--tag-bg-red);
}

.cs-tag.variant--blue {
  background: var(--tag-bg-blue);
}

/* ═══════════════════════════════════════════════════
   CARDS — base + color variants
   ═══════════════════════════════════════════════════ */
.cs-card {
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 12px;
}

.cs-card p {
  font-size: 16px;
  color: var(--text);
  margin: 0;
  max-width: 100%;
  line-height: 1.7;
}

.cs-card img {
  display: inline-block;
  border-radius: 8px;
  margin: 12px 0;
  margin-right: 5px;
  vertical-align: top;
}

.cs-card img:last-child {
  margin-right: 0;
}

.cs-card .cs-tag {
  margin-bottom: 12px;
}

/* Color variants — each sets scoped --_card-border for sub-elements */
.variant--yellow {
  --_card-border: var(--card-border-yellow);
  background: var(--card-bg-yellow);
  border: 1px solid var(--_card-border);
}

.variant--yellow p,
.variant--yellow strong {
  color: var(--card-text-yellow);
}

.variant--green {
  --_card-border: var(--card-border-green);
  background: var(--card-bg-green);
  border: 1px solid var(--_card-border);
}
.variant--green p {
  color: var(--card-text-green);
}

.variant--red {
  --_card-border: var(--card-border-red);
  background: var(--card-bg-red);
  border: 1px solid var(--_card-border);
}

.variant--red p {
  color: var(--card-text-red);
}

.variant--blue {
  --_card-border: var(--card-border-blue);
  background: var(--card-bg-blue);
  border: 1px solid var(--_card-border);
}

.variant--blue p,
.variant--blue .cs-card__banner {
  color: var(--card-text-blue);
}

.variant--blue .cs-card__banner {
  background: var(--card-banner-blue);
}

.variant--gray {
  --_card-border: var(--card-banner-gray);
  background: var(--card-bg-gray);
  border: 1px solid var(--card-border-gray);
}

.variant--gray .cs-card__banner {
  color: var(--card-text-gray);
}

.variant--gray .cs-card__title {
  color: var(--heading);
}

/* ─── Card banner — full-width label strip at top ─── */
.cs-card__banner {
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  font-family: "Newsreader", Georgia, serif;
  padding: 8px 24px;
  margin: -20px -20px 16px;
  border-radius: 17px 17px 0 0;
  background: var(--_card-border);
  color: var(--heading);
}

/* ─── Card sub-elements ─── */
.cs-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--heading);
  margin: 0 0 10px !important;
}

/* Title size modifiers — specificity must beat .cs-card p (0,1,1) */
.cs-card .cs-card__title--lg {
  font-family: "Newsreader", Georgia, serif;
  font-size: 20px;
  line-height: 1.3;
}

.cs-card .cs-card__title--xl {
  font-family: "Newsreader", Georgia, serif;
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 4px !important;
}

/* Title color modifier */
.cs-card .cs-card__title--accent {
  color: var(--accent);
}

.cs-card__subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 2px;
  line-height: 1.4;
}

.cs-card__meta {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.cs-card__caption {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 12px;
  text-align: center;
}

.cs-card p.cs-card__footnote,
.cs-card__footnote {
  font-size: 14px;
  color: var(--text-extra-muted);
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 1.5;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   CARD SEPARATOR — <hr> inside cards
   ═══════════════════════════════════════════════════ */
.cs-card hr {
  border: none;
  border-top: 1px dashed var(--_card-border);
  margin: 20px 0;
}

/* ═══════════════════════════════════════════════════
   CARD GRID — 2-column card layouts
   ═══════════════════════════════════════════════════ */
.cs-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

.cs-card-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.cs-card-grid .cs-card {
  margin: 0;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   NUMBERED LIST
   ═══════════════════════════════════════════════════ */
.cs-list {
  list-style: none;
  counter-reset: cs-list;
  margin: 16px 0 24px;
  padding: 0;
}

.cs-list li {
  counter-increment: cs-list;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  margin-bottom: 28px;
}

.cs-list li::before {
  content: counter(cs-list) ".";
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  padding-top: 1px;
}

.cs-list li strong,
.cs-plain-list li strong {
  color: var(--heading);
}

.cs-list li .cs-block,
.cs-plain-list li .cs-block {
  display: block;
}

/* ═══════════════════════════════════════════════════
   PLAIN LIST (non-numbered)
   ═══════════════════════════════════════════════════ */
.cs-plain-list {
  list-style: none;
  margin: 16px 0 24px;
  padding: 0;
}

.cs-plain-list li {
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════
   BULLET LIST
   ═══════════════════════════════════════════════════ */
.cs-bullets {
  list-style: disc;
  padding-left: 22px;
  margin: 16px 0 20px;
}

.cs-bullets li {
  font-size: 17px;
  line-height: 1.6;
}

.cs-bullets strong {
  color: var(--heading);
}

/* ═══════════════════════════════════════════════════
   IMAGE GRID
   ═══════════════════════════════════════════════════ */
.cs-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}

.cs-image-grid--single {
  grid-template-columns: 1fr;
}

.cs-image-item {
  background: #f5f3ee;
  border: 1px solid #e0d9cc;
  border-radius: 8px;
  overflow: hidden;
}

.cs-image-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e0d9cc;
  font-family: "Newsreader", Georgia, serif;
}

.cs-image-item img {
  width: 100%;
  display: block;
}

/* ═══════════════════════════════════════════════════
   METRIC Number
   ═══════════════════════════════════════════════════ */

.cs-metric-number {
  font-family: "Newsreader", Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════
   PULLQUOTE
   ═══════════════════════════════════════════════════ */
.cs-wrap blockquote {
  border-left: 4px solid var(--pullquote-border);
  margin-left: 0;
  margin-right: 0;
  margin-top: 28px;
}

.cs-wrap blockquote strong {
  display: block;
  margin-bottom: 4px;
  line-height: 1.7;
}

.cs-wrap blockquote span {
  display: block;
  margin-top: 0;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cs-wrap {
    font-size: 16px;
  }
  .cs-card-grid,
  .cs-image-grid {
    grid-template-columns: 1fr;
  }
}