/*! ==========================================================================
   CyberPeople News Media Components v2.0
   Professional news layout system — inspired by The Record, BleepingComputer
   Extends cyberpeople-v3.css (VOID theme)
   ========================================================================== */


/* ==========================================================================
   0. FEATURED GRID — unified feed, visual hierarchy via card size
   Lead card (60% width, 2 rows) + 2 medium cards stacked right
   Then small row + standard card grid. ONE content flow.
   ========================================================================== */

/* --- Featured Grid: 3-column with lead spanning left 2 cols + 2 rows --- */
.cp-featured-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--cp-space-4);
  margin-bottom: var(--cp-space-4);
}

/* --- Featured Card (shared base for all sizes) --- */
.cp-fcard {
  position: relative;
  border-radius: var(--cp-radius);
  overflow: hidden;
}

.cp-fcard-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.cp-fcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cp-duration-slow) var(--cp-ease);
}

.cp-fcard:hover .cp-fcard-img {
  transform: scale(1.03);
}

.cp-fcard-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--cp-space-8);
  background: linear-gradient(
    0deg,
    rgba(7, 18, 20, 0.95) 0%,
    rgba(7, 18, 20, 0.6) 40%,
    rgba(7, 18, 20, 0.15) 65%,
    transparent 100%
  );
}

.cp-fcard-title {
  font-size: var(--cp-text-lg);
  font-weight: 600;
  line-height: var(--cp-leading-tight);
  color: var(--cp-white);
  margin-top: var(--cp-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--cp-duration) var(--cp-ease);
}

.cp-fcard:hover .cp-fcard-title {
  color: var(--cp-accent);
}

.cp-fcard-title--lg {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--cp-tracking-tight);
  -webkit-line-clamp: 4;
}

.cp-fcard-excerpt {
  font-size: var(--cp-text-sm);
  line-height: var(--cp-leading-relaxed);
  color: rgba(228, 236, 232, 0.75);
  max-width: 560px;
  margin-top: var(--cp-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cp-fcard-meta {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  margin-top: var(--cp-space-4);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
}

.cp-fcard-author {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  color: var(--cp-text-secondary);
}

.cp-fcard-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--cp-radius-full);
  object-fit: cover;
}

.cp-fcard-sep {
  color: var(--cp-border);
}

/* --- Lead Card: spans 2 rows, left column --- */
.cp-fcard--lead {
  grid-row: 1 / 3;
  grid-column: 1;
}

.cp-fcard--lead .cp-fcard-link {
  min-height: 440px;
}

/* --- Medium Card: right column, each takes 1 row --- */
.cp-fcard--med .cp-fcard-link {
  min-height: 210px;
}

.cp-fcard--med .cp-fcard-overlay {
  padding: var(--cp-space-4) var(--cp-space-4);
  justify-content: flex-end;
  align-items: flex-start;
}

.cp-fcard--med .cp-fcard-title {
  font-size: 0.8rem;
  -webkit-line-clamp: 2;
  margin-top: auto;
}

.cp-fcard--med .cp-fcard-meta {
  font-size: 0.65rem;
  margin-bottom: 0;
}

/* --- Small Row: 3 cards (or fewer) below featured grid --- */
.cp-small-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cp-space-4);
  margin-bottom: var(--cp-space-4);
}

.cp-fcard--sm .cp-fcard-link {
  min-height: 180px;
}

.cp-fcard--sm .cp-fcard-overlay {
  padding: var(--cp-space-3) var(--cp-space-4);
  justify-content: flex-end;
  align-items: flex-start;
}

.cp-fcard--sm .cp-fcard-title {
  font-size: 0.8rem;
  margin-top: auto;
  -webkit-line-clamp: 2;
}

.cp-fcard--sm .cp-fcard-excerpt {
  display: none;
}

/* --- Feed Controls: sort pills as a thin divider, not a section header --- */
.cp-feed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cp-space-4) 0;
  margin-bottom: var(--cp-space-6);
  border-top: 1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border);
}

/* --- Sidebar Subscribe Widget --- */
.cp-sidebar-subscribe {
  margin-top: var(--cp-space-6);
}

.cp-sidebar-subscribe-inner {
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  padding: var(--cp-space-6);
  text-align: center;
}

.cp-sidebar-subscribe-icon {
  display: block;
  font-size: var(--cp-text-xl);
  color: var(--cp-accent);
  margin-bottom: var(--cp-space-3);
}

.cp-sidebar-subscribe-text {
  font-size: var(--cp-text-sm);
  color: var(--cp-text-secondary);
  margin-bottom: var(--cp-space-4);
  line-height: var(--cp-leading-relaxed);
}

.cp-sidebar-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
}

.cp-sidebar-subscribe-form .cp-inline-subscribe-input {
  width: 100%;
}


/* ==========================================================================
   1. LEAD STORY (legacy) — kept for backward compat with other pages
   ========================================================================== */

.cp-lead {
  position: relative;
  border-radius: var(--cp-radius);
  overflow: hidden;
  margin-bottom: var(--cp-space-4);
}

.cp-lead-link {
  display: block;
  position: relative;
  aspect-ratio: 2.5 / 1;
  min-height: 200px;
  max-height: 280px;
}

.cp-lead-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--cp-ease);
}

.cp-lead:hover .cp-lead-img {
  transform: scale(1.03);
}

.cp-lead-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--cp-space-12) var(--cp-space-12) var(--cp-space-8);
  background: linear-gradient(
    0deg,
    rgba(7, 18, 20, 0.97) 0%,
    rgba(7, 18, 20, 0.7) 35%,
    rgba(7, 18, 20, 0.2) 60%,
    transparent 100%
  );
}

.cp-lead-category {
  margin-bottom: var(--cp-space-4);
}

.cp-lead-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--cp-tracking-tight);
  color: var(--cp-white);
  max-width: 800px;
  margin-bottom: var(--cp-space-4);
}

.cp-lead-excerpt {
  font-size: var(--cp-text-base);
  line-height: var(--cp-leading-relaxed);
  color: rgba(228, 236, 232, 0.8);
  max-width: 600px;
  margin-bottom: var(--cp-space-6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cp-lead-byline {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
}

.cp-lead-byline-author {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  color: var(--cp-text-secondary);
}

.cp-lead-byline-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--cp-radius-full);
  object-fit: cover;
}

.cp-lead-byline-sep {
  color: var(--cp-border);
}


/* ==========================================================================
   2. SECONDARY STORY CARDS — horizontal layout, thumbnail left
   The 4-5 stories beneath the lead. Compact, scannable.
   ========================================================================== */

.cp-stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cp-space-4);
  margin-bottom: var(--cp-space-6);
}

@media (max-width: 991.98px) {
  .cp-stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .cp-stories-grid {
    grid-template-columns: 1fr;
  }
}

.cp-story {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
  padding: var(--cp-space-4);
  background-color: var(--cp-surface);
  border-radius: var(--cp-radius);
  border: 1px solid transparent;
  transition: border-color var(--cp-duration) var(--cp-ease),
              background-color var(--cp-duration) var(--cp-ease);
}

.cp-story:hover {
  border-color: var(--cp-border);
  background-color: var(--cp-surface-hover);
}

.cp-story-img-wrap {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--cp-radius-sm);
  overflow: hidden;
}

.cp-story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cp-duration-slow) var(--cp-ease);
}

.cp-story:hover .cp-story-img {
  transform: scale(1.04);
}

.cp-story-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.cp-story-category {
  margin-bottom: var(--cp-space-2);
}

.cp-story-title {
  font-size: var(--cp-text-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--cp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--cp-duration) var(--cp-ease);
}

.cp-story:hover .cp-story-title {
  color: var(--cp-accent);
}

.cp-story-meta {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  margin-top: auto;
  padding-top: var(--cp-space-2);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
}

.cp-story-meta-author {
  color: var(--cp-text-secondary);
}


/* ==========================================================================
   3. HEADLINE LIST — compact text-only list
   No images. Title + timestamp + category badge. Like a sidebar ticker.
   ========================================================================== */

.cp-headlines {
  background-color: var(--cp-surface);
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  overflow: hidden;
}

.cp-headlines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cp-space-4) var(--cp-space-6);
  border-bottom: 1px solid var(--cp-border);
}

.cp-headlines-label {
  font-size: var(--cp-text-xs);
  font-weight: 700;
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-accent);
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
}

.cp-headlines-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cp-accent);
  animation: cp-pulse 2s ease-in-out infinite;
}

@keyframes cp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.cp-headlines-seeall {
  font-size: var(--cp-text-xs);
  font-weight: 500;
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
  transition: color var(--cp-duration) var(--cp-ease);
}

.cp-headlines-seeall:hover {
  color: var(--cp-accent);
}

.cp-headline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--cp-space-4);
  padding: var(--cp-space-4) var(--cp-space-6);
  border-bottom: 1px solid var(--cp-border);
  transition: background-color var(--cp-duration) var(--cp-ease);
}

.cp-headline-item:last-child {
  border-bottom: none;
}

.cp-headline-item:hover {
  background-color: var(--cp-surface-hover);
}

.cp-headline-time {
  flex-shrink: 0;
  width: 56px;
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  padding-top: 2px;
}

.cp-headline-body {
  flex: 1;
  min-width: 0;
}

.cp-headline-title {
  font-size: var(--cp-text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--cp-duration) var(--cp-ease);
}

.cp-headline-item:hover .cp-headline-title {
  color: var(--cp-accent);
}

.cp-headline-badge {
  display: inline-block;
  font-size: 0.625rem; /* 10px */
  font-weight: 600;
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-text-muted);
  background-color: var(--cp-surface-active);
  padding: 1px var(--cp-space-2);
  border-radius: var(--cp-radius-full);
  margin-top: var(--cp-space-1);
  white-space: nowrap;
}


/* ==========================================================================
   4. SECTION HEADER — "NEWS" / "EVENTS" / "RESEARCH"
   Horizontal bar with accent left-border, title + "See all" link
   ========================================================================== */

.cp-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cp-space-8);
  padding-bottom: var(--cp-space-4);
  border-bottom: 1px solid var(--cp-border);
}

.cp-sec-title {
  font-size: var(--cp-text-sm);
  font-weight: 700;
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-white);
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
}

.cp-sec-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 16px;
  background-color: var(--cp-accent);
  border-radius: 2px;
}

.cp-sec-seeall {
  font-size: var(--cp-text-xs);
  font-weight: 500;
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  transition: color var(--cp-duration) var(--cp-ease);
}

.cp-sec-seeall:hover {
  color: var(--cp-accent);
}

.cp-sec-seeall i {
  font-size: 0.6em;
  transition: transform var(--cp-duration) var(--cp-ease);
}

.cp-sec-seeall:hover i {
  transform: translateX(3px);
}


/* ==========================================================================
   5. AUTHOR BYLINE — avatar + name + date + reading time
   Used in article headers and lead stories
   ========================================================================== */

.cp-byline {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  font-size: var(--cp-text-sm);
}

.cp-byline-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--cp-radius-full);
  object-fit: cover;
  border: 2px solid var(--cp-border);
}

.cp-byline-name {
  font-weight: 600;
  color: var(--cp-text);
}

.cp-byline-details {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
}

.cp-byline-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--cp-text-muted);
}

/* Compact byline — used inside cards */
.cp-byline--compact {
  gap: var(--cp-space-2);
  font-size: var(--cp-text-xs);
}

.cp-byline--compact .cp-byline-avatar {
  width: 20px;
  height: 20px;
  border-width: 1px;
}


/* ==========================================================================
   6. TIME DISPLAY — Relative + absolute, monospace
   "2h ago" for <24h, "Apr 2, 2026" for older. Always monospace.
   ========================================================================== */

.cp-time {
  font-family: var(--cp-font-mono);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* Relative time — shorter, feels live */
.cp-time--relative {
  color: var(--cp-text-secondary);
}

/* Tooltip pattern: show full date on hover via title attribute */
.cp-time[title] {
  cursor: default;
  border-bottom: 1px dotted var(--cp-border);
}


/* ==========================================================================
   7. BREAKING / FEATURED BADGE — urgency markers
   ========================================================================== */

.cp-badge--breaking {
  color: var(--cp-error);
  background-color: rgba(255, 95, 95, 0.12);
  animation: cp-breaking-pulse 1.5s ease-in-out 3; /* pulse 3 times then stop */
}

@keyframes cp-breaking-pulse {
  0%, 100% { background-color: rgba(255, 95, 95, 0.12); }
  50% { background-color: rgba(255, 95, 95, 0.25); }
}

.cp-badge--featured {
  color: #fbbf24; /* amber */
  background-color: rgba(251, 191, 36, 0.1);
}

.cp-badge--exclusive {
  color: var(--cp-accent);
  background-color: var(--cp-accent-dim);
  border: 1px solid rgba(94, 255, 136, 0.2);
}

/* Breaking banner — thin strip above hero for urgent news */
.cp-breaking-bar {
  background-color: rgba(255, 95, 95, 0.08);
  border-bottom: 1px solid rgba(255, 95, 95, 0.15);
  padding: var(--cp-space-2) 0;
  overflow: hidden;
}

.cp-breaking-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--cp-space-4);
  animation: cp-scroll-left 20s linear infinite;
}

.cp-breaking-bar-label {
  flex-shrink: 0;
  font-size: var(--cp-text-xs);
  font-weight: 700;
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  color: var(--cp-error);
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
}

.cp-breaking-bar-text {
  font-size: var(--cp-text-sm);
  font-weight: 500;
  color: var(--cp-text);
  white-space: nowrap;
}

@keyframes cp-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Static (non-scrolling) breaking bar — for single story */
.cp-breaking-bar--static .cp-breaking-bar-inner {
  animation: none;
  justify-content: center;
}


/* ==========================================================================
   8. INLINE NEWSLETTER — subtle, between-sections form
   NOT a giant banner. Thin, horizontal, professional.
   ========================================================================== */

.cp-inline-subscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-6);
  padding: var(--cp-space-4) var(--cp-space-6);
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  margin: var(--cp-space-8) 0;
}

.cp-inline-subscribe-text {
  font-size: var(--cp-text-sm);
  color: var(--cp-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
}

.cp-inline-subscribe-text i {
  color: var(--cp-accent);
  font-size: var(--cp-text-base);
}

.cp-inline-subscribe-form {
  display: flex;
  gap: var(--cp-space-2);
  flex-shrink: 0;
}

.cp-inline-subscribe-input {
  font-family: var(--cp-font);
  font-size: var(--cp-text-sm);
  color: var(--cp-white);
  background-color: var(--cp-black);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-full);
  padding: var(--cp-space-2) var(--cp-space-4);
  width: 220px;
  outline: none;
  transition: border-color var(--cp-duration) var(--cp-ease);
}

.cp-inline-subscribe-input::placeholder {
  color: var(--cp-text-muted);
}

.cp-inline-subscribe-input:focus {
  border-color: var(--cp-accent);
}

.cp-inline-subscribe-btn {
  font-family: var(--cp-font);
  font-size: var(--cp-text-xs);
  font-weight: 600;
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
  color: var(--cp-black);
  background-color: var(--cp-accent);
  border: none;
  border-radius: var(--cp-radius-full);
  padding: var(--cp-space-2) var(--cp-space-6);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--cp-duration) var(--cp-ease);
}

.cp-inline-subscribe-btn:hover {
  background-color: var(--cp-accent-hover);
}

/* End-of-article newsletter — slightly more prominent */
.cp-article-subscribe {
  max-width: var(--cp-article-width);
  margin: var(--cp-space-12) auto;
  padding: var(--cp-space-8);
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  text-align: center;
}

.cp-article-subscribe-title {
  font-size: var(--cp-text-lg);
  font-weight: 600;
  color: var(--cp-white);
  margin-bottom: var(--cp-space-2);
}

.cp-article-subscribe-desc {
  font-size: var(--cp-text-sm);
  color: var(--cp-text-muted);
  margin-bottom: var(--cp-space-6);
}

.cp-article-subscribe-form {
  display: flex;
  gap: var(--cp-space-2);
  max-width: 380px;
  margin: 0 auto;
}

.cp-article-subscribe-form .cp-inline-subscribe-input {
  flex: 1;
  width: auto;
}


/* ==========================================================================
   9. ARTICLE PAGE IMPROVEMENTS — editorial feel
   Wider hero image, proper lead paragraph, drop cap option
   ========================================================================== */

/* Wider article hero — break out of article-width, stay within container */
.cp-article-hero-img--wide {
  max-width: 960px;
  margin: 0 auto var(--cp-space-12);
  border-radius: var(--cp-radius);
  overflow: hidden;
}

/* Image caption */
.cp-article-img-caption {
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  margin-top: var(--cp-space-2);
  text-align: center;
  font-style: italic;
}

/* Lead paragraph — first paragraph of article, slightly larger */
.cp-article-lead {
  font-size: var(--cp-text-lg) !important;
  line-height: 1.6 !important;
  color: var(--cp-text) !important;
  margin-bottom: var(--cp-space-8) !important;
  font-weight: 400;
}

/* Drop cap — first letter of first paragraph */
.cp-article-body--dropcap > p:first-child::first-letter {
  float: left;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.85;
  color: var(--cp-accent);
  padding-right: var(--cp-space-3);
  padding-top: 0.1em;
}

/* Article sidebar — table of contents or related items */
.cp-article-sidebar {
  position: sticky;
  top: calc(var(--cp-nav-height) + var(--cp-space-8));
}

/* Two-column article layout (optional) */
.cp-article-layout {
  display: grid;
  grid-template-columns: var(--cp-article-width) 1fr;
  gap: var(--cp-space-12);
  max-width: 1040px;
  margin: 0 auto;
}

.cp-article-layout .cp-article-body {
  max-width: none;
  margin: 0;
}

/* Article source attribution */
.cp-article-source {
  display: inline-flex;
  align-items: center;
  gap: var(--cp-space-2);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-wide);
  text-transform: uppercase;
  padding: var(--cp-space-1) var(--cp-space-3);
  background-color: var(--cp-surface);
  border-radius: var(--cp-radius-full);
  margin-bottom: var(--cp-space-4);
}

/* Enhanced article meta — reading time indicator */
.cp-reading-time {
  display: flex;
  align-items: center;
  gap: var(--cp-space-1);
}

.cp-reading-time i {
  font-size: 0.7em;
}

/* Article footer — tags + share on one line, separated */
.cp-article-footer-meta {
  max-width: var(--cp-article-width);
  margin: var(--cp-space-12) auto;
  padding-top: var(--cp-space-8);
  border-top: 1px solid var(--cp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cp-space-4);
}

.cp-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cp-space-2);
}

.cp-article-share {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
}


/* ==========================================================================
   10. HOMEPAGE NEWS LAYOUT — combining lead + grid + headlines
   The master layout for the above-the-fold news experience
   ========================================================================== */

.cp-news-top {
  padding-top: var(--cp-space-8);
  padding-bottom: var(--cp-space-4);
}

/* Two-zone layout: main content + headlines sidebar */
.cp-news-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--cp-space-6);
  align-items: start;
}

/* Single-column fallback when no sidebar content */
.cp-news-layout--full {
  grid-template-columns: 1fr;
}

.cp-news-main {
  min-width: 0;
}

.cp-news-sidebar {
  position: sticky;
  top: calc(var(--cp-nav-height) + var(--cp-space-8));
}


/* ==========================================================================
   11. COMMENTS (enhanced)
   ========================================================================== */

.cp-comments {
  max-width: var(--cp-article-width);
  margin: var(--cp-space-12) auto 0;
}

.cp-comments-title {
  font-size: var(--cp-text-base);
  font-weight: 600;
  color: var(--cp-white);
  margin-bottom: var(--cp-space-6);
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
}

.cp-comments-count {
  font-size: var(--cp-text-xs);
  font-weight: 600;
  color: var(--cp-accent);
  background-color: var(--cp-accent-dim);
  padding: 2px var(--cp-space-2);
  border-radius: var(--cp-radius-full);
}

.cp-comments-empty {
  font-size: var(--cp-text-sm);
  color: var(--cp-text-muted);
  padding: var(--cp-space-8);
  text-align: center;
  background-color: var(--cp-surface);
  border-radius: var(--cp-radius);
}

.cp-comment {
  padding: var(--cp-space-6) 0;
  border-bottom: 1px solid var(--cp-border);
}

.cp-comment:last-child {
  border-bottom: none;
}

.cp-comment-header {
  display: flex;
  align-items: center;
  gap: var(--cp-space-3);
  margin-bottom: var(--cp-space-3);
  font-size: var(--cp-text-sm);
}

.cp-comment-header strong {
  color: var(--cp-text);
}

.cp-comment-header time {
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
}

.cp-comment-text {
  font-size: var(--cp-text-sm);
  color: var(--cp-text-secondary);
  line-height: var(--cp-leading-relaxed);
}

/* Comment form */
.cp-comment-form {
  margin-top: var(--cp-space-8);
  padding-top: var(--cp-space-8);
  border-top: 1px solid var(--cp-border);
}

.cp-comment-form h4 {
  font-size: var(--cp-text-base);
  font-weight: 600;
  color: var(--cp-white);
  margin-bottom: var(--cp-space-2);
}

.cp-comment-form-note {
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  margin-bottom: var(--cp-space-6);
}

.cp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cp-space-4);
  margin-bottom: var(--cp-space-4);
}

.cp-form-group {
  margin-bottom: var(--cp-space-4);
}

.cp-input {
  width: 100%;
  font-family: var(--cp-font);
  font-size: var(--cp-text-sm);
  color: var(--cp-white);
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-sm);
  padding: var(--cp-space-3) var(--cp-space-4);
  outline: none;
  transition: border-color var(--cp-duration) var(--cp-ease);
}

.cp-input:focus {
  border-color: var(--cp-accent);
}

.cp-input::placeholder {
  color: var(--cp-text-muted);
}

textarea.cp-input {
  resize: vertical;
  min-height: 100px;
}

.cp-btn-primary {
  background-color: var(--cp-accent);
  color: var(--cp-black);
}


/* ==========================================================================
   12. POST NAVIGATION (prev/next) — enhanced
   ========================================================================== */

.cp-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cp-space-4);
  max-width: var(--cp-article-width);
  margin: var(--cp-space-12) auto;
}

.cp-post-nav-link {
  display: block;
  padding: var(--cp-space-6);
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  transition: border-color var(--cp-duration) var(--cp-ease);
}

.cp-post-nav-link:hover {
  border-color: var(--cp-accent);
}

.cp-post-nav-label {
  display: block;
  font-size: var(--cp-text-xs);
  color: var(--cp-text-muted);
  letter-spacing: var(--cp-tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--cp-space-2);
}

.cp-post-nav-title {
  font-size: var(--cp-text-sm);
  font-weight: 600;
  color: var(--cp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cp-post-nav-next {
  text-align: right;
}


/* ==========================================================================
   13. RESPONSIVE — News-specific breakpoints
   ========================================================================== */

/* ---- Tablet (< 1024px) ---- */
@media (max-width: 1023px) {
  .cp-news-layout {
    grid-template-columns: 1fr;
  }

  .cp-news-sidebar {
    position: static;
  }

  /* Featured grid: stack lead on top, medium cards side by side */
  .cp-featured-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .cp-fcard--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .cp-fcard--lead .cp-fcard-link {
    min-height: 360px;
  }

  .cp-fcard--med .cp-fcard-link {
    min-height: 200px;
  }

  .cp-small-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-stories-grid {
    grid-template-columns: 1fr;
  }

  .cp-lead-link {
    aspect-ratio: 16 / 9;
    min-height: 360px;
  }

  .cp-lead-overlay {
    padding: var(--cp-space-8);
  }

  .cp-article-layout {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {

  /* Spacing between blocks on mobile */
  .cp-news-top {
    padding-top: var(--cp-space-6);
    padding-bottom: var(--cp-space-6);
  }

  .cp-featured-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--cp-space-3);
  }

  .cp-small-row {
    gap: var(--cp-space-3);
    margin-top: var(--cp-space-2);
  }

  .cp-feed-grid {
    gap: var(--cp-space-4);
  }

  .cp-fcard--lead {
    grid-row: auto;
    grid-column: auto;
  }

  .cp-fcard--lead .cp-fcard-link {
    min-height: 280px;
  }

  .cp-fcard--med .cp-fcard-link {
    min-height: 180px;
  }

  .cp-fcard-title--lg {
    font-size: 1.375rem;
  }

  .cp-fcard-excerpt {
    display: none;
  }

  .cp-small-row {
    grid-template-columns: 1fr;
  }

  .cp-fcard--sm .cp-fcard-link {
    min-height: 160px;
  }

  .cp-feed-controls {
    flex-wrap: wrap;
    gap: var(--cp-space-2);
  }

  .cp-lead-link {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }

  .cp-lead-overlay {
    padding: var(--cp-space-6);
  }

  .cp-lead-title {
    font-size: 1.5rem;
  }

  .cp-lead-excerpt {
    display: none;
  }

  /* Story cards: stack vertically */
  .cp-story {
    flex-direction: column;
  }

  .cp-story-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Inline newsletter: stack */
  .cp-inline-subscribe {
    flex-direction: column;
    text-align: center;
    gap: var(--cp-space-4);
  }

  .cp-inline-subscribe-form {
    width: 100%;
    flex-direction: column;
  }

  .cp-inline-subscribe-input {
    width: 100%;
  }

  /* Article subscribe */
  .cp-article-subscribe-form {
    flex-direction: column;
  }

  /* Section header */
  .cp-sec-header {
    flex-wrap: wrap;
    gap: var(--cp-space-2);
  }

  /* Headlines list */
  .cp-headline-time {
    width: 44px;
    font-size: 0.65rem;
  }

  /* Breaking bar */
  .cp-breaking-bar--static .cp-breaking-bar-inner {
    flex-direction: column;
    gap: var(--cp-space-2);
  }

  /* Post nav: single column */
  .cp-post-nav {
    grid-template-columns: 1fr;
  }

  .cp-post-nav-next {
    text-align: left;
  }

  /* Form row: single column */
  .cp-form-row {
    grid-template-columns: 1fr;
  }

  /* Byline */
  .cp-byline-details {
    flex-wrap: wrap;
  }
}

/* ---- Small mobile (< 400px) ---- */
@media (max-width: 399px) {
  .cp-fcard--lead .cp-fcard-link {
    min-height: 220px;
  }

  .cp-fcard-title--lg {
    font-size: 1.2rem;
  }

  .cp-fcard--med .cp-fcard-link,
  .cp-fcard--sm .cp-fcard-link {
    min-height: 140px;
  }

  .cp-lead-link {
    min-height: 220px;
  }

  .cp-lead-title {
    font-size: 1.25rem;
  }

  .cp-lead-byline {
    flex-wrap: wrap;
  }

  .cp-story-img-wrap {
    display: none;
  }
}


/* ==========================================================================
   14. PRINT STYLES — for article pages
   ========================================================================== */

@media print {
  .cp-header,
  .cp-footer,
  .cp-reading-progress-track,
  .cp-scroll-top,
  .cp-article-share,
  .cp-inline-subscribe,
  .cp-article-subscribe,
  .cp-post-nav,
  .cp-comments,
  .cp-breaking-bar {
    display: none !important;
  }

  .cp-article-body {
    color: #000;
    max-width: 100%;
  }

  .cp-article-title {
    color: #000;
  }
}