/* ==========================================================================
   Cards - the article card, shared by every list of articles.

   Global on purpose: the home page press section, the newsroom's featured
   block and both of its article lists render the same markup, so the card is
   defined once here rather than in whichever page sheet needed it first.

   Anatomy:

     .news-card              the shell
       .news-card__photo     .media-style ratio box
       .news-card__body
         .news-card__source  "Nguồn báo : TÊN BÁO"
         .news-card__main
           .news-card__text  title + teaser
           .btn--detail      "Xem chi tiết"

   Layout modifiers belong to the page: .news-card--row is here because it is
   the card's own horizontal form, but which cards go in which column is
   decided by home.css / newsroom.css.
   ========================================================================== */
.news-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 12px var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  height: 100%;
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.news-card__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 349/288;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--c-media-placeholder);
}

.news__feature .news-card__photo {
  aspect-ratio: 808/399;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  align-self: stretch;
}

/* "Nguồn báo : TÊN BÁO" — tên báo viết hoa toàn bộ */
.news-card__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-num);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-variation-settings: "wdth" 100;
}

.news-card__source span {
  text-transform: uppercase;
}

/* A blog post credits itself rather than a newspaper, and the design leaves
   that name in its own case. */
.news-card__source--plain span {
  text-transform: none;
}

.news-card__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex: 1 0 0;
}

.news-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.news-card__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  color: var(--c-ink-pure);
}

.news-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-pure);
}

/* Card lớn: mô tả cắt còn 2 dòng như design */
.news-card__desc--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Card ngang (cột phải) */
.news-card--row {
  padding: 12px;
}

@media (min-width: 768px) {
  .news-card--row {
    flex-direction: row;
    align-items: flex-start;
  }

  .news-card--row .news-card__photo {
    width: 40%;
  }

  .news-card--row .news-card__body {
    flex: 1 1 0;
  }
}


/* The card title is a link; it must not pick up prose underlining. */
.news-card__title a {
  color: inherit;
  text-decoration: none;
}

.news-card__title a:hover { color: var(--c-primary); }

/* The whole card is clickable, not just the title/detail links. Stretched-
   link technique - the title link's ::after covers the card (anchored to
   .news-card, its nearest positioned ancestor), so a click anywhere lands on
   the same link the title and "Xem chi tiết" already point to. No overlay is
   added when the article has no link. */
.news-card {
  position: relative;
}

.news-card .news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-card:has(.news-card__title a) {
  cursor: pointer;
}


/* --- Article list ----------------------------------------------------------
   A titled block of cards with "Xem thêm" underneath. Lives here rather than
   in newsroom.css because template-parts/newsroom/list.php renders it in two
   places now: the newsroom's Blog / Báo chí sections and the related articles
   under a blog post. */
.article-list > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.article-list__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .article-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.article-list__more {
  display: flex;
  justify-content: center;
}


/* --- Brand card ------------------------------------------------------------
   The card shared by the two exhibitor listings: a white box with artwork on
   top, a hairline, and a name underneath. Only the shell is here - what goes
   inside the box differs per page and lives in exhibitors.css.

   The tag is an <a> when the row carries a link and a <div> when it does not,
   so the link styling is attached to the element rather than to a modifier. */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--c-border-pill);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
}

a.brand-card {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

a.brand-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-card);
}

.brand-card__rule {
  width: 100%;
  height: 1px;
  background: var(--c-border-light);
}

.brand-card__name {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-org);
  text-transform: uppercase;
  color: var(--c-ink-pure);
}