/*
 * Noticias CFS Jumilla — Gramática editorial
 * Solo clases .cfs-* para convivir con el frontend legacy hasta la Fase 8.
 */

.cfs-surface {
  background: var(--cfs-paper);
  color: var(--cfs-ink-950);
  font-family: var(--cfs-font-sans);
}

.cfs-wrap {
  width: min(calc(100% - (2 * var(--cfs-gutter))), var(--cfs-wrap));
  margin-inline: auto;
}

.cfs-reading-width {
  width: min(100%, var(--cfs-reading));
}

.cfs-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--cfs-grid-gap);
}

.cfs-col-12 { grid-column: span 12; }
.cfs-col-9 { grid-column: span 9; }
.cfs-col-8 { grid-column: span 8; }
.cfs-col-6 { grid-column: span 6; }
.cfs-col-4 { grid-column: span 4; }
.cfs-col-3 { grid-column: span 3; }

.cfs-flow > * + * {
  margin-block-start: var(--cfs-space-4);
}

.cfs-flow--tight > * + * {
  margin-block-start: var(--cfs-space-2);
}

.cfs-section {
  padding-block: var(--cfs-space-7);
  border-top: var(--cfs-rule-medium) solid var(--cfs-ink-950);
}

.cfs-section--compact {
  padding-block: var(--cfs-space-5);
}

.cfs-rule {
  border: 0;
  border-top: var(--cfs-rule-thin) solid var(--cfs-rule);
  margin-block: var(--cfs-space-5);
}

.cfs-rule--heavy {
  border-top-width: var(--cfs-rule-heavy);
  border-top-color: var(--cfs-ink-950);
}

.cfs-section-heading {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: end;
  gap: var(--cfs-space-3);
  margin-block-end: var(--cfs-space-5);
}

.cfs-section-heading__eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--cfs-space-2) * -1);
  color: var(--cfs-brand-navy);
  font-size: var(--cfs-text-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cfs-section-heading__title {
  margin: 0;
  color: var(--cfs-ink-950);
  font-family: var(--cfs-font-display);
  font-size: var(--cfs-title-sm);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: .95;
  text-transform: uppercase;
}

.cfs-section-heading__rule {
  min-width: 0;
  border-bottom: var(--cfs-rule-medium) solid var(--cfs-ink-950);
  transform: translateY(-.18em);
}

.cfs-section-heading__link {
  color: var(--cfs-brand-navy);
  font-size: var(--cfs-text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.cfs-section-heading__link:hover {
  color: var(--cfs-brand-blue);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cfs-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--cfs-space-2);
  color: var(--cfs-brand-navy);
  font-size: var(--cfs-text-xs);
  font-weight: 850;
  letter-spacing: .10em;
  line-height: 1;
  text-transform: uppercase;
}

.cfs-headline {
  margin: 0;
  color: var(--cfs-ink-950);
  font-family: var(--cfs-font-display);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: .92;
  text-wrap: balance;
}

.cfs-headline--display { font-size: var(--cfs-title-lg); }
.cfs-headline--lead { font-size: var(--cfs-title-md); }
.cfs-headline--story { font-size: var(--cfs-title-sm); }

.cfs-deck {
  margin: 0;
  color: var(--cfs-ink-700);
  font-family: var(--cfs-font-editorial);
  font-size: var(--cfs-text-lg);
  line-height: 1.48;
  text-wrap: pretty;
}

.cfs-body-copy {
  color: var(--cfs-ink-800);
  font-family: var(--cfs-font-editorial);
  font-size: var(--cfs-text-base);
  line-height: 1.72;
}

.cfs-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cfs-space-2) var(--cfs-space-4);
  margin: 0;
  color: var(--cfs-ink-600);
  font-size: var(--cfs-text-xs);
  font-weight: 650;
  letter-spacing: .025em;
}

.cfs-story-meta > * + *::before {
  content: '•';
  margin-inline-end: var(--cfs-space-4);
  color: var(--cfs-rule-strong);
}

.cfs-media-frame {
  position: relative;
  overflow: hidden;
  background: var(--cfs-paper-muted);
}

.cfs-media-frame--16x9 { aspect-ratio: 16 / 9; }
.cfs-media-frame--4x3 { aspect-ratio: 4 / 3; }
.cfs-media-frame--portrait { aspect-ratio: 4 / 5; }

.cfs-media-frame > img,
.cfs-media-frame > picture,
.cfs-media-frame picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cfs-story-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr);
  gap: var(--cfs-grid-gap);
  padding-block-end: var(--cfs-space-6);
  border-bottom: var(--cfs-rule-heavy) solid var(--cfs-ink-950);
}

.cfs-story-lead__copy {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--cfs-space-3);
}

.cfs-story-row {
  display: grid;
  grid-template-columns: minmax(7rem, .75fr) minmax(0, 1.6fr);
  gap: var(--cfs-space-4);
  padding-block: var(--cfs-space-4);
  border-top: var(--cfs-rule-thin) solid var(--cfs-rule);
}

.cfs-story-row:first-child {
  border-top-color: var(--cfs-ink-950);
}

.cfs-story-row__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--cfs-space-2);
  min-width: 0;
}

.cfs-story-row__title {
  margin: 0;
  color: var(--cfs-ink-950);
  font-family: var(--cfs-font-display);
  font-size: clamp(1.28rem, 1.08rem + .65vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.cfs-editorial-note {
  padding-inline-start: var(--cfs-space-4);
  border-left: var(--cfs-rule-heavy) solid var(--cfs-brand-sky);
  color: var(--cfs-ink-700);
  font-family: var(--cfs-font-editorial);
  font-size: var(--cfs-text-base);
  line-height: 1.55;
}

.cfs-breaking-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--cfs-live);
  color: var(--cfs-white);
  border-block: var(--cfs-rule-medium) solid var(--cfs-live-dark);
}

.cfs-breaking-strip__label {
  padding: .65rem var(--cfs-space-4);
  background: var(--cfs-ink-950);
  font-family: var(--cfs-font-display);
  font-size: 1.15rem;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.cfs-breaking-strip__content {
  padding: .65rem var(--cfs-space-4);
  font-size: var(--cfs-text-sm);
  font-weight: 800;
}


.cfs-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cfs-space-3);
}

.cfs-cluster--tight {
  gap: var(--cfs-space-2);
}

.cfs-mt-5 {
  margin-block-start: var(--cfs-space-5);
}

.cfs-visual-lab {
  min-height: 100vh;
  margin: 0;
}

.cfs-visual-lab__masthead {
  padding-block: var(--cfs-space-7);
  border-bottom: var(--cfs-rule-heavy) solid var(--cfs-ink-950);
}

.cfs-visual-lab__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cfs-space-3);
  margin-block-end: var(--cfs-space-6);
}

.cfs-visual-lab__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr);
  gap: var(--cfs-grid-gap);
  align-items: end;
}

.cfs-token-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--cfs-space-3);
}

.cfs-token-swatch {
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--cfs-space-3);
  border: var(--cfs-rule-thin) solid var(--cfs-rule);
  font-size: var(--cfs-text-xs);
  font-weight: 800;
}

.cfs-token-swatch--navy { background: var(--cfs-brand-navy); color: var(--cfs-white); }
.cfs-token-swatch--sky { background: var(--cfs-brand-sky); color: var(--cfs-ink-950); }
.cfs-token-swatch--ink { background: var(--cfs-ink-950); color: var(--cfs-white); }
.cfs-token-swatch--paper { background: var(--cfs-paper); color: var(--cfs-ink-950); }
.cfs-token-swatch--muted { background: var(--cfs-paper-muted); color: var(--cfs-ink-950); }
.cfs-token-swatch--live { background: var(--cfs-live); color: var(--cfs-white); }

@media (max-width: 980px) {
  .cfs-col-9,
  .cfs-col-8 { grid-column: span 12; }

  .cfs-col-6,
  .cfs-col-4,
  .cfs-col-3 { grid-column: span 6; }

  .cfs-story-lead,
  .cfs-visual-lab__intro {
    grid-template-columns: 1fr;
  }

  .cfs-story-lead__copy {
    align-self: auto;
  }

  .cfs-token-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cfs-editorial-grid {
    grid-template-columns: 1fr;
  }

  .cfs-col-12,
  .cfs-col-9,
  .cfs-col-8,
  .cfs-col-6,
  .cfs-col-4,
  .cfs-col-3 {
    grid-column: 1;
  }

  .cfs-section {
    padding-block: var(--cfs-space-6);
  }

  .cfs-section-heading {
    grid-template-columns: auto 1fr;
  }

  .cfs-section-heading__rule {
    display: none;
  }

  .cfs-story-row {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .cfs-token-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfs-breaking-strip {
    grid-template-columns: 1fr;
  }
}