/* Extra home page sections: faculty members, star achievers, student video stories (resources/views/web/partials/home-sections.blade.php).
   One scrolling row per section; colours come from vv-theme.css. */

.hs-wrap { position: relative; }
.hs-track {
    display: flex; gap: 20px; justify-content: safe center; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 6px 4px 18px; scrollbar-width: thin; scrollbar-color: var(--vv-gold) transparent; outline-offset: 4px;
}
.hs-track::-webkit-scrollbar { height: 6px; }
.hs-track::-webkit-scrollbar-thumb { background: var(--vv-gold-300); border-radius: 6px; }
.hs-card { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }

.hs-nav {
    position: absolute; top: 42%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--vv-line);
    background: #fff; color: var(--vv-maroon); box-shadow: 0 6px 18px rgba(61, 11, 12, .18); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hs-nav[hidden] { display: none; }
.hs-nav:disabled { opacity: .35; cursor: default; }
.hs-nav--prev { left: -14px; }
.hs-nav--next { right: -14px; }
@media (max-width: 575px) { .hs-nav--prev { left: -6px; } .hs-nav--next { right: -6px; } }

/* initials in place of a missing photo */
.hs-initials {
    display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700; letter-spacing: .04em;
    color: var(--vv-maroon); background: linear-gradient(160deg, var(--vv-cream-2), var(--vv-gold-300));
}

/* faculty */
.hs-fac { width: 310px; background: #fff; border: 1px solid var(--vv-line); border-radius: 18px; padding: 16px; box-shadow: 0 10px 28px rgba(61, 11, 12, .07); }
.hs-fac__photo { aspect-ratio: 4 / 3.4; border-radius: 12px; border: 1px solid var(--vv-line); overflow: hidden; background: var(--vv-cream); }
.hs-fac__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hs-fac__name { font-size: 1.15rem; margin: 14px 0 2px; color: var(--vv-ink); }
.hs-fac__role { margin: 0 0 8px; color: var(--vv-saffron-700); font-weight: 600; }
.hs-fac__facts { list-style: none; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--vv-line); }
.hs-fac__facts li { display: flex; gap: 8px; align-items: baseline; font-size: .93rem; color: var(--vv-ink); }
.hs-fac__facts i { color: var(--vv-maroon); width: 16px; flex: 0 0 16px; }
.hs-fac__about { margin: 0; font-size: .9rem; color: var(--vv-muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* star achievers */
.hs-person { width: 230px; text-align: center; }
.hs-person__photo {
    position: relative; aspect-ratio: 4 / 4.6; border-radius: 16px 16px 16px 60px; overflow: hidden;
    background: linear-gradient(170deg, #ffd24a 0%, #f5b82e 100%); box-shadow: 0 10px 24px rgba(61, 11, 12, .14);
}
.hs-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hs-person__tag {
    position: absolute; top: 12px; left: 0; padding: 6px 12px 6px 10px; border-radius: 0 10px 10px 0; background: var(--vv-maroon); color: #fff;
    font-weight: 700; font-size: .85rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.hs-person__name { font-size: 1.02rem; margin: 12px 0 6px; color: var(--vv-ink); text-transform: uppercase; letter-spacing: .03em; }
.hs-person__logo { display: block; max-width: 150px; max-height: 44px; margin: 0 auto 4px; background: #fff; padding: 6px 10px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); object-fit: contain; }
.hs-person__company { margin: 0 0 2px; font-weight: 600; color: var(--vv-maroon); }
.hs-person__course { margin: 0; font-size: .9rem; color: var(--vv-muted); }

/* video stories */
.hs-video { width: min(520px, 86vw); }
.hs-video__play, .hs-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; overflow: hidden; background: #000; }
.hs-video__play { position: relative; padding: 0; cursor: pointer; box-shadow: 0 12px 30px rgba(61, 11, 12, .2); }
.hs-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.hs-video__play:hover img { transform: scale(1.04); }
.hs-video__btn {
    position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #e62117; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); padding-left: 4px;
}
.hs-video figcaption { margin-top: 10px; font-weight: 600; color: var(--vv-ink); text-align: center; }

/* schools */
.hs-school { width: 300px; background: #fff; border: 1px solid var(--vv-line); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(61, 11, 12, .07); display: flex; flex-direction: column; border-bottom: 5px solid var(--vv-maroon-900); }
.hs-school__pic { aspect-ratio: 16 / 9; background: var(--vv-cream); }
.hs-school__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-school__pic .hs-initials { font-size: 2.6rem; }
.hs-school__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.hs-school__name { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; color: var(--vv-ink); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--vv-gold); display: inline-block; align-self: flex-start; }
.hs-school__text { margin: 0 0 14px; color: var(--vv-muted); font-size: .92rem; flex: 1; }
.hs-school__more { align-self: flex-start; padding: 8px 20px; border: 2px solid var(--vv-maroon-900); border-radius: 999px; color: var(--vv-maroon-900); font-weight: 700; font-size: .85rem; text-transform: uppercase; text-decoration: none; margin-top: auto; }
.hs-school__more:hover { background: var(--vv-maroon-900); color: #fff; }