/* ============================================================
   Footer V4 — Shared footer for V4 design pages.
   ============================================================ */

.v4-footer {
    width: 100%;
    background: linear-gradient(160deg, var(--color-brand-dark) 0%, var(--color-primary-800) 100%);
}
.v4-footer__inner {
    max-width: var(--max-container);
    margin: 0 auto;
    padding: 56px 20px;
}
@media (min-width: 768px) {
    .v4-footer__inner { padding: 64px 40px; }
}
.v4-footer__top {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media (min-width: 768px) {
    .v4-footer__top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 32px; }
}
.v4-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.v4-footer__brand img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.v4-footer__brand-desc {
    font-size: var(--text-body-sm);
    color: var(--color-primary-200);
    max-width: 220px;
}
.v4-footer__columns {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media (min-width: 640px) {
    .v4-footer__columns { flex-direction: row; gap: 48px; }
}
.v4-footer__col { display: flex; flex-direction: column; gap: 16px; }
.v4-footer__col-title {
    font-size: var(--text-label);
    color: var(--color-neutral-0);
    font-weight: 500;
}
.v4-footer__col-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.v4-footer__col-links a {
    font-size: var(--text-body-sm);
    color: var(--color-primary-200);
    text-decoration: none;
    transition: color var(--duration-base);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v4-footer__col-links a:hover { color: var(--color-neutral-0); }
.v4-footer__bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(171, 125, 247, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 640px) {
    .v4-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.v4-footer__copy {
    font-size: var(--text-caption);
    color: var(--color-primary-300);
}
.v4-footer__legal {
    display: flex;
    align-items: center;
    gap: 20px;
}
.v4-footer__legal a {
    font-size: var(--text-caption);
    color: var(--color-primary-300);
    text-decoration: none;
    transition: color var(--duration-base);
}
.v4-footer__legal a:hover { color: var(--color-neutral-0); }