.nf-grid {
  display: grid;
  gap: var(--nf-space-16);
}

.nf-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.nf-grid--media {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.nf-grid--split {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.nf-card {
  padding: 1.25rem;
  border-radius: var(--nf-radius-24);
  background: var(--nf-surface-600);
  border: var(--nf-border-subtle);
  box-shadow: var(--nf-shadow-soft);
}

.nf-home-block {
  display: grid;
  gap: var(--nf-space-20);
}

.nf-home-block__intro {
  display: grid;
  gap: var(--nf-space-12);
  width: min(100% - 2rem, 60rem);
  margin: 0 auto;
}

.nf-home-block__intro .nf-title,
.nf-home-block__intro .nf-copy {
  margin: 0;
}

.nf-home-block--spotlight .nf-home-block__intro {
  padding: 1.25rem;
  border-radius: var(--nf-radius-24);
  background: rgba(255, 255, 255, 0.03);
  border: var(--nf-border-subtle);
}

.nf-home-block--compact {
  gap: var(--nf-space-12);
}

.nf-home-block--compact .nf-home-block__intro {
  width: min(100% - 2rem, 48rem);
}

.nf-card--media {
  display: grid;
  gap: var(--nf-space-12);
}

.nf-card__title {
  margin: 0 0 var(--nf-space-12);
  font-family: var(--nf-font-heading);
  font-size: 1.05rem;
}

.nf-card__stack {
  display: grid;
  gap: var(--nf-space-8);
}

.nf-card__cluster {
  display: flex;
  gap: var(--nf-space-8);
  flex-wrap: wrap;
  align-items: center;
}

.nf-card__meta {
  color: var(--nf-text-300);
}

.nf-card__meta p {
  margin: 0 0 var(--nf-space-12);
}

.nf-card__meta p:last-child {
  margin-bottom: 0;
}

.nf-card__description {
  margin: 0;
  color: var(--nf-text-300);
}

.nf-card__links {
  display: flex;
  gap: var(--nf-space-12);
  flex-wrap: wrap;
}

.nf-card__footer {
  display: flex;
  gap: var(--nf-space-12);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.nf-card__actions {
  display: flex;
  gap: var(--nf-space-12);
  flex-wrap: wrap;
  align-items: center;
}

.nf-banner-card {
  display: grid;
  gap: var(--nf-space-16);
  overflow: hidden;
}

.nf-banner-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--nf-radius-16);
}

.nf-banner-card__body {
  display: grid;
  gap: var(--nf-space-12);
}

.nf-media-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--nf-radius-16);
}

.nf-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--nf-radius-pill);
  background: rgba(0, 234, 255, 0.14);
  color: var(--nf-accent-1);
  font-size: 0.75rem;
}

.nf-chip-button {
  border: 1px solid rgba(0, 234, 255, 0.24);
  background: transparent;
  color: var(--nf-text-100);
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--nf-radius-pill);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.nf-chip-button:hover,
.nf-chip-button:focus-visible {
  border-color: rgba(0, 234, 255, 0.55);
  background: rgba(0, 234, 255, 0.1);
  color: var(--nf-accent-1);
}

.nf-chip-button.is-active {
  border-color: rgba(0, 234, 255, 0.55);
  background: rgba(0, 234, 255, 0.14);
  color: var(--nf-accent-1);
}

.nf-retention-card {
  display: grid;
  gap: var(--nf-space-12);
}

.nf-retention-list {
  display: grid;
  gap: var(--nf-space-12);
}

.nf-retention-item {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-radius: var(--nf-radius-16);
  border: var(--nf-border-subtle);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nf-retention-item:hover,
.nf-retention-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 234, 255, 0.34);
  background: rgba(0, 234, 255, 0.06);
}

.nf-retention-item strong {
  color: var(--nf-text-100);
}

.nf-retention-item__meta {
  color: var(--nf-text-300);
  line-height: 1.5;
}

.nf-countdown {
  display: grid;
  gap: var(--nf-space-12);
}

.nf-countdown__grid {
  display: grid;
  gap: var(--nf-space-12);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nf-countdown__unit {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  border-radius: var(--nf-radius-16);
  background: rgba(255, 255, 255, 0.03);
  border: var(--nf-border-subtle);
  text-align: center;
}

.nf-countdown__unit strong {
  font-family: var(--nf-font-heading);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.nf-countdown__unit span {
  color: var(--nf-text-300);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .nf-countdown__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}