/* ============================================================
   ALTULA — news.css
   News list page: hero breadcrumb + news cards with date badge;
   news article page styles.
   Hero is shared in common.css; header / footer styles come
   from style.css.
   ============================================================ */

/* Hero breadcrumb, bottom-right (per design) */
.hero-breadcrumb {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.hero-breadcrumb a:hover {
  color: var(--color-gold);
}

.hero-breadcrumb .sep {
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   News grid (uniform cards with gaps, like the cases grid)
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.news-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* let the column shrink so nowrap titles can't overflow the grid */
  animation: news-card-in 0.5s ease both;
  animation-delay: var(--d, 0s);
}

@keyframes news-card-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Title: single line with ellipsis, gold on hover */
.news-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card__title a {
  color: var(--color-ink);
}

.news-card__title a:hover {
  color: var(--color-gold-dark);
}

/* Summary: exactly two lines (clamp + min-height) so every card
   stays the same height and all images align.
   NOTE: do not add flex-grow here — a flex item loses its
   -webkit-box display and the two-line clamp stops working. */
.news-card__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  min-height: calc(0.9375rem * var(--lh-body) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Image with solid date badge (day + month/year) */
.news-card__media {
  position: relative;
  display: block;
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card__media:hover img {
  transform: scale(1.06);
}

.news-card__date {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.625rem 0.875rem;
  text-align: center;
  background-color: var(--color-gold);
  color: var(--color-white);
}

.news-card__date .day {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.news-card__date .ym {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "View More" pinned to the bottom-right of the card */
.news-card__more {
  margin-top: 1.25rem;
  align-self: flex-end;
}

/* Empty state */
.news-empty {
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  text-align: center;
  color: var(--color-muted);
}

/* ============================================================
   News article page (news-detail.html):
   article column + recommended-reading sidebar
   ============================================================ */
.article-section {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem));
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 4vw, 4rem);
}

/* Hairline divider between article and sidebar */
.article-main {
  padding-right: clamp(2rem, 4vw, 4rem);
  border-right: 1px solid var(--color-line);
}

.article-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin-top: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--color-line);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.article-content {
  margin-top: 2rem;
}

.article-lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-ink);
}

.article-figure {
  margin-top: 2rem;
}

.article-figure img {
  width: 100%;
  border-radius: var(--radius);
}

.article-content [data-news="content"] {
  margin-top: 2rem;
}

.article-content [data-news="content"] p + p {
  margin-top: 1.25rem;
}

.article-main .link-more {
  margin-top: 2.5rem;
}

/* Sidebar: recommended reading */
.article-side__title {
  display: inline-block;
  padding-bottom: 0.375rem;
  border-bottom: 3px solid var(--color-gold);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
}

.article-recs {
  margin-top: 1.75rem;
}

/* First recommendation: image card */
.rec-card {
  display: block;
}

.rec-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
}

.rec-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.rec-card:hover .rec-card__media img {
  transform: scale(1.06);
}

.rec-card__title,
.rec-row__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}

.rec-card__title {
  margin-top: 1.25rem;
}

.rec-card__text {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-card__date,
.rec-row__date {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Further recommendations: text rows with dashed separators */
.rec-row {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--color-line);
}

.rec-card:hover .rec-card__title,
.rec-row:hover .rec-row__title {
  color: var(--color-gold-dark);
}

/* --- 768px — 1024px : tablet portrait --- */
@media (max-width: 64rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

/* --- < 768px : mobile (sidebar stacks below the article) --- */
@media (max-width: 48rem) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-main {
    padding-right: 0;
    border-right: none;
  }

  .article-side {
    margin-top: 1rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-line);
  }
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- 768px — 1024px : tablet portrait --- */
@media (max-width: 64rem) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- < 768px : mobile --- */
@media (max-width: 48rem) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .hero-breadcrumb {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-card {
    animation: none;
  }
}