/* SISV v1 — division home pages (vgp.aspx, ls.aspx, qs.aspx): banner, quick-link tiles, Courses & Events / News feed cards.
   Linked from those pages. Uses the --ed-* tokens from v1-base.css. */
/* ---------- Page shell ---------- */
#edPage { color: var(--ed-ink); }
#edPage *, #edPage *::before, #edPage *::after { box-sizing: border-box; }
#edPage .py-section-sm { padding: 0 0 22px !important; background: transparent !important; }
#edPage .hbanner-wrap { width: 100% !important; padding: 0 !important; }
#edPage .hbanner { border-radius: 22px; overflow: hidden; box-shadow: var(--ed-shadow-lg); animation: ed-rise .5s ease both; }

/* the v1 content styles reset <section> padding inside #edPage, so the cards set theirs with an id selector */
#edPage section.vg-card { padding: 22px; border: 1px solid var(--ed-line); }

/* ---------- Quick links ---------- */
.vg-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.vg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--ed-radius);
    background: #fff;
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow);
    color: var(--ed-ink) !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    animation: ed-rise .5s ease both;
}
.vg-tile:nth-child(2) { animation-delay: .06s; }
.vg-tile:nth-child(3) { animation-delay: .12s; }
.vg-tile:nth-child(4) { animation-delay: .18s; }
.vg-tile::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--vg-tint, rgba(29, 111, 209, .08));
    transition: transform .4s ease;
}
.vg-tile:hover { transform: translateY(-4px); box-shadow: var(--ed-shadow-lg); border-color: #d3deeb; }
.vg-tile:hover::after { transform: scale(1.6); }
.vg-tile-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #fff;
    background: var(--vg-grad, linear-gradient(135deg, var(--ed-primary-2), var(--ed-primary)));
    box-shadow: 0 10px 18px -10px var(--vg-glow, rgba(29, 111, 209, .9));
    position: relative;
    z-index: 1;
}
.vg-tile b { font-size: 14.5px; position: relative; z-index: 1; }
.vg-tile small { font-size: 12px; color: var(--ed-muted); line-height: 1.45; position: relative; z-index: 1; }
.vg-tile .fa-arrow-right {
    position: absolute;
    right: 16px;
    top: 18px;
    color: var(--ed-muted);
    transition: transform .25s ease, color .25s ease;
    z-index: 1;
}
.vg-tile:hover .fa-arrow-right { transform: translateX(4px); color: var(--ed-primary-2); }
.vg-tile.is-teal { --vg-grad: linear-gradient(135deg, #22b8cf, #0e7490); --vg-glow: rgba(34, 184, 207, .9); --vg-tint: rgba(34, 184, 207, .1); }
.vg-tile.is-red { --vg-grad: linear-gradient(135deg, #ef4444, #b91c1c); --vg-glow: rgba(239, 68, 68, .9); --vg-tint: rgba(239, 68, 68, .08); }
.vg-tile.is-violet { --vg-grad: linear-gradient(135deg, #8b5cf6, #5b21b6); --vg-glow: rgba(139, 92, 246, .9); --vg-tint: rgba(139, 92, 246, .09); }

/* ---------- Feed cards ---------- */
.vg-feeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vg-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    box-shadow: var(--ed-shadow);
    padding: 22px;
    animation: ed-rise .5s .1s ease both;
}
.vg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vg-card-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 17px; font-weight: 700; color: var(--ed-ink); }
.vg-card-title .ed-ico {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; color: #fff;
    background: linear-gradient(135deg, var(--ed-primary-2), var(--ed-primary));
    box-shadow: 0 8px 16px -8px rgba(29, 111, 209, .8);
}
.vg-card-title .ed-ico.is-amber { background: linear-gradient(135deg, #f59e0b, #c2410c); box-shadow: 0 8px 16px -8px rgba(245, 158, 11, .8); }
.vg-card-title small { display: block; font-size: 12px; font-weight: 600; color: var(--ed-muted); }
.vg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; align-content: start; }
.vg-item > a {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    color: inherit !important;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}
.vg-item > a:hover { background: var(--ed-soft); transform: translateX(3px); }
.vg-date {
    flex: 0 0 52px;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--ed-line);
    background: #fff;
}
.vg-date-m { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding: 3px 0; background: linear-gradient(135deg, var(--ed-primary-2), var(--ed-primary)); }
.vg-date-d { display: block; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ed-ink); }
.vg-news .vg-date-m { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.vg-date.is-ico { display: grid; place-items: center; height: 52px; font-size: 20px; color: #fff; border: 0; background: linear-gradient(135deg, var(--ed-primary-2), var(--ed-primary)); }
.vg-item-body { min-width: 0; flex: 1; }
.vg-item-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ed-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}
.vg-item > a:hover .vg-item-title { color: var(--ed-primary-2); }
.vg-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--ed-muted); font-weight: 600; }
.vg-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #067647;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}
.vg-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12b76a; animation: ed-pulse 1.8s infinite; }
.vg-skel {
    height: 58px;
    border-radius: 14px;
    margin: 4px 0;
    background: linear-gradient(90deg, #f1f5f9 25%, #e5ebf2 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: ed-shimmer 1.4s ease infinite;
}
.vg-empty { text-align: center; color: var(--ed-muted); font-size: 13.5px; padding: 24px 10px; border: 2px dashed var(--ed-line); border-radius: 14px; }
.vg-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--ed-line);
    background: var(--ed-soft);
    color: var(--ed-primary) !important;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none !important;
    transition: all .2s ease;
}
.vg-all:hover { color: #fff !important; border-color: transparent; background: linear-gradient(135deg, var(--ed-primary-2), var(--ed-primary)); box-shadow: 0 10px 20px -10px rgba(29, 111, 209, .9); }
.vg-all .fa { transition: transform .25s ease; }
.vg-all:hover .fa { transform: translateX(4px); }

.vg-all-row { display: flex; gap: 10px; margin-top: 14px; }
.vg-all-row .vg-all { flex: 1; margin-top: 0; }
.vg-more { margin-top: 24px; }
.vg-more .vg-card + .vg-card { margin-top: 20px; }
.vg-media { text-align: center; }
.vg-media img, .vg-media video { display: block; width: 100%; height: auto; border-radius: 14px; }
.vg-media h3 { margin: 22px 0 12px; font-size: 17px; font-weight: 700; color: var(--ed-ink); }
.vg-media .vg-all { display: inline-flex; padding: 0 22px; }

@keyframes ed-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ed-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes ed-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes ed-pulse {
    0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .55); }
    70% { box-shadow: 0 0 0 6px rgba(18, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}

.vg-tile { --vg-c: var(--ed-primary-2); }
.vg-tile.is-teal { --vg-c: #0e7490; }
.vg-tile.is-red { --vg-c: #b91c1c; }
.vg-tile.is-violet { --vg-c: #5b21b6; }

/* tablets and phones: the icon moves into the corner circle, so each tile is just a title line */
@media (max-width: 1199px) {
    .vg-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vg-tile { justify-content: center; gap: 3px; min-height: 76px; padding: 14px 70px 14px 16px; }
    .vg-tile::after { right: -22px; bottom: -22px; width: 84px; height: 84px; background: var(--vg-tint, rgba(29, 111, 209, .08)); filter: saturate(1.6); }
    .vg-tile-ico { position: absolute; right: 12px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; font-size: 17px; color: var(--vg-c); background: none; box-shadow: none; z-index: 1; }
    .vg-tile .fa-arrow-right { top: 12px; right: 12px; font-size: 12px; }
    .vg-tile:hover .vg-tile-ico { transform: scale(1.12); }
    .vg-tile-ico { transition: transform .25s ease; }
}
@media (max-width: 767px) {
    .vg-feeds { grid-template-columns: minmax(0, 1fr); }
    .vg-quick { gap: 10px; }
    .vg-tile { min-height: 62px; padding: 12px 54px 12px 14px; }
    .vg-tile b { font-size: 13.5px; line-height: 1.3; }
    .vg-tile small { display: none; }
    .vg-tile .fa-arrow-right { display: none; }
    .vg-tile-ico { right: 8px; bottom: 6px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    #edPage * { animation: none !important; transition: none !important; }
}