/* ═══════════════════════════════════════════════════════════════════
   Vietnam travel news, on the homepage
   ═══════════════════════════════════════════════════════════════════
   One lead story with its picture and standfirst, four more as a list
   beside it. Same hairlines and tokens as the tour categories above —
   this is a section of the same page, not a widget from a different
   product with its own gradients and badges.
   ═══════════════════════════════════════════════════════════════════ */

.nh-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

/* ── Cards ──────────────────────────────────────────────────────── */

.nh-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.nh-media {
    display: block;
    overflow: hidden;
    border-radius: var(--hub-radius);
    background: rgb(var(--hub-ink-rgb) / 0.06);
}

.nh-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* An item whose feed gave no picture keeps its space for the words
   rather than showing an empty frame. */
.nh-media-empty { display: none; }

.nh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.nh-cat,
.nh-place {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nh-cat { color: var(--hub-accent-strong); }

/* The destination the ingest matched. It is the one thing on this card
   that is ours rather than the publisher's, so it is marked as a place
   rather than as another label. */
.nh-place {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 600;
    color: var(--hub-ink-muted);
}

.nh-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.nh-link:hover .nh-title { color: var(--hub-accent-strong); }

.nh-excerpt {
    margin: 0.55rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hub-ink-muted);
    max-width: 62ch;
}

.nh-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--hub-ink-muted);
}

/* Where a byline would sit. These stories are not ours and the card
   says whose they are. */
.nh-source { font-weight: 700; }

.nh-meta time::before {
    content: '·';
    margin-right: 0.5rem;
    color: var(--hub-ink-faint);
}

/* ── The lead ───────────────────────────────────────────────────── */

.nh-card-lead .nh-media {
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
}

.nh-card-lead .nh-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* ── The list beside it ─────────────────────────────────────────── */

.nh-rest {
    display: flex;
    flex-direction: column;
}

.nh-rest .nh-card {
    padding: 0.9rem 0;
    border-top: 1px solid var(--hub-hairline);
}

.nh-rest .nh-card:first-child { border-top: 0; padding-top: 0; }
.nh-rest .nh-card:last-child { padding-bottom: 0; }

.nh-rest .nh-link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

/* A list item with no picture gives the whole width to its headline. */
.nh-rest .nh-link:has(.nh-media-empty) { grid-template-columns: minmax(0, 1fr); }

.nh-rest .nh-media { aspect-ratio: 4 / 3; }
.nh-rest .nh-title { font-size: 0.98rem; }
.nh-rest .nh-tags { margin-bottom: 0.3rem; }
.nh-rest .nh-meta { margin-top: 0.35rem; font-size: 0.76rem; }

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .nh-wrap { grid-template-columns: minmax(0, 1fr); }
    .nh-rest { margin-top: 0.5rem; }
    .nh-rest .nh-card:first-child { border-top: 1px solid var(--hub-hairline); padding-top: 0.9rem; }
}

@media (max-width: 480px) {
    .nh-rest .nh-link { grid-template-columns: 76px minmax(0, 1fr); gap: 0.75rem; }
}

/* The categories above end with 72px of their own padding and .td-section
   adds another 72, leaving 220px of white space before this heading. The
   two are consecutive answers to "what should I do in Vietnam", so they sit
   closer — the same treatment the planner and the categories already get. */
#trip-categories-wrap { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
#news-section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }