/* Xarmo News index/section edition presentation cleanup.
   Keep editorial Purpose metadata in article records, not in the public card hierarchy. */

.xarmo-news-section-shelves {
  display: grid;
  gap: clamp(3.2rem, 6vw, 5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* These are internal taxonomy labels and add noise when repeated on every shelf/card. */
.xarmo-news-section-shelves .xarmo-news-section-label,
.xarmo-news-section-shelves .xarmo-news-card__section {
  display: none;
}

.xarmo-news-section-shelves .xarmo-news-topic-section > header {
  align-items: center;
  margin-bottom: 1.15rem;
  padding-bottom: .9rem;
}

.xarmo-news-section-shelves .xarmo-news-topic-section > header h2 {
  margin: 0;
}

.xarmo-news-section-shelves .xarmo-news-card--topic {
  padding-top: .35rem;
}

/* Links should signal interaction with colour/focus treatment, not an underline. */
.xarmo-news-page a:hover,
.xarmo-news-page a:focus-visible {
  text-decoration: none !important;
}

/* Preserve reflow when browser text is enlarged. Grid and flex children must be
   allowed to shrink and long prose labels must remain wrappable. */
.xarmo-news-page,
.xarmo-news-page * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The adjacent Top story label already names the section. Keep this decorative
   panel as XARMO NEWS branding only so section names are not repeated or crowded. */
.xarmo-news-feature-visual span {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.xarmo-news-feature-visual span:nth-child(3) {
  display: none;
}

@media (max-width: 760px) {
  .xarmo-news-section-shelves {
    gap: 2.6rem;
    margin-top: 2.6rem;
  }

  .xarmo-news-feature-visual {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 520px) {
  .xarmo-news-feature-visual {
    grid-template-columns: 1fr;
  }

  .xarmo-news-current-card > p,
  .xarmo-news-play-strip header {
    flex-wrap: wrap;
  }
}