/* ============================================================
   publiek/voet_groot.css - de grote voet van de voorpagina.
   Hoort bij templates/public/delen/_voet_groot.html.
   ============================================================ */

.vg {
    position: relative;
    margin-top: 32px;
    border-top: 1px solid var(--rand);
    background:
        radial-gradient(900px 260px at 50% 0, rgba(76, 29, 149, .28), transparent),
        linear-gradient(180deg, #080c24, #04061a);
    color: var(--tekst-zacht);
}
.vg::before {
    content: "";
    position: absolute;
    left: 10%; right: 10%; top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--paars-licht), transparent);
}
.vg-binnen { padding: 0 var(--rand-ruimte); }

/* de band met cijfers */
.vg-cijfers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--rand);
    text-align: center;
}
.vg-cijfers b {
    display: block;
    font-size: 26px;
    font-weight: 900;
    background: linear-gradient(90deg, #fff, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vg-cijfers span { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }

/* logo, kolommen, meedoen */
.vg-kolommen {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
    gap: 36px;
    padding: 30px 0 24px;
}
.vg-merk img { display: block; height: 52px; width: auto; }
.vg-merk p { font-size: 13.5px; max-width: 310px; margin: 14px 0 0; }
.vg h4 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.vg ul { list-style: none; margin: 0; padding: 0; }
.vg li { margin: 9px 0; font-size: 13.5px; }
.vg li a { color: var(--tekst-zacht); text-decoration: none; }
.vg li a:hover { color: #fff; }
.vg-uit { color: var(--tekst-dof); }
.vg li small {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #2c3370;
    border-radius: 999px;
    font-size: 10px;
    color: var(--tekst-dof);
}
.vg-vak {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 16px;
}
.vg-vak p { margin: 0 0 12px; font-size: 13px; }
.vg-knop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #7c3aed, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.vg-knop.uit { opacity: .45; }

/* helemaal onderaan */
.vg-onder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 14px 0 22px;
    border-top: 1px solid var(--rand);
    font-size: 12.5px;
}
.vg-igdb { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-zacht); text-decoration: none; }
.vg-igdb b {
    padding: 1px 7px;
    border: 1px solid #9147ff;
    border-radius: 6px;
    color: #c4b5fd;
    font-size: 11px;
    letter-spacing: 1px;
}
.vg-igdb:hover { color: #fff; }

@media (max-width: 1100px) {
    .vg-kolommen { grid-template-columns: 1fr 1fr 1fr; }
    .vg-merk, .vg-mee { grid-column: span 3; }
}
@media (max-width: 600px) {
    .vg-cijfers { grid-template-columns: 1fr 1fr; }
    .vg-cijfers b { font-size: 26px; }
    .vg-kolommen { grid-template-columns: 1fr 1fr; gap: 26px; }
    .vg-merk, .vg-mee { grid-column: span 2; }
}