/*
 * Homepage only (loaded by VNM_Site_Layout for the "home" template).
 * The example, use-case and article cards come from use-cases.css and features.css.
 */

/* ---------- Feature segments on the dark band ---------- */
.vn-home-segs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vn-home-segs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .vn-home-segs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.vn-home-seg {
    position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0;
    padding: clamp(1.35rem, 1.1rem + .8vw, 1.85rem);
    border-radius: var(--vnm-radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
    transition: background-color .2s var(--vnm-ease), border-color .2s var(--vnm-ease), transform .2s var(--vnm-ease);
}
.vn-home-seg:hover { background: rgba(255, 255, 255, .09); border-color: rgba(127, 216, 206, .55); }
.vn-home-seg:has(.vn-home-seg__link:focus-visible) { box-shadow: 0 0 0 3px var(--vnm-bg-dark), 0 0 0 5px #7FD8CE; }
@media (prefers-reduced-motion: no-preference) {
    .vn-home-seg:hover { transform: translateY(-2px); }
}
.vn-home-seg__icon {
    display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: .25rem;
    border-radius: 14px; background: rgba(127, 216, 206, .14); color: #7FD8CE;
}
.vn-home-seg__title { margin: 0; font-size: var(--vnm-fs-h3); line-height: 1.25; color: #fff; }
.vn-home-seg__link { color: #fff !important; text-decoration: none !important; }
.vn-home-seg__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vn-home-seg__link:focus-visible { outline: none; box-shadow: none; }
.vn-home-seg__text { margin: 0; color: rgba(233, 244, 242, .82); font-size: var(--vnm-fs-sm); line-height: 1.55; }
.vn-home-seg__list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.vn-home-seg__list li {
    padding: .2rem .65rem; border-radius: var(--vnm-radius-pill);
    background: rgba(127, 216, 206, .12); color: #DDF3F0; font-size: var(--vnm-fs-xs); font-weight: 600; line-height: 1.6;
}
.vn-home-seg__more {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .75rem;
    font-family: var(--vnm-font-heading); font-weight: 600; color: #7FD8CE;
}
.vn-home-seg:hover .vn-home-seg__more { text-decoration: underline; text-underline-offset: .2em; }
/* Phones: three feature chips per card keep the dark band short; the detail page lists all. */
@media (max-width: 639px) {
    .vn-home-seg__list li:nth-child(n+4) { display: none; }
}