/* ==========================================================================
   Chester Dance Centre — footer.css
   (Mirrors Cambridge; fully token-driven, so the accent comes from base.css.)
   ========================================================================== */

.footer {
    background: var(--black);
    padding: var(--sp-8) 0 var(--sp-5);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--sp-7);
    margin-bottom: var(--sp-7);
}

.footer__brand .logo {
    color: var(--white);
    margin-bottom: var(--sp-4);
}

.footer__brand p {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--fs-sm);
    max-width: 32ch;
}

.footer__tearoff {
    margin-top: var(--sp-6);
    display: inline-block;
    transform: rotate(-1.5deg);
}

.tearoff__header {
    background: var(--mustard-bright);
    padding: var(--sp-3) var(--sp-4);
    text-align: center;
    position: relative;
}

.tearoff__header span {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--black);
}

.tearoff__header::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 40% 35%, #e0e0e0 0%, #aaa 50%, #888 70%, #666 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.tearoff__tabs {
    display: flex;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.tearoff__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 56px;
    background: var(--mustard-bright);
    color: var(--black);
    font-size: var(--fs-base);
    border-right: 1px dashed rgba(0, 0, 0, 0.15);
    transition: background var(--transition), transform var(--transition);
}

.tearoff__tab:last-child {
    border-right: none;
}

.tearoff__tab--torn {
    height: 18px;
    background: var(--mustard-bright);
    border-bottom: none;
    clip-path: polygon(0 0, 100% 0, 95% 40%, 100% 55%, 90% 70%, 100% 85%, 92% 100%, 8% 100%, 0 80%, 10% 65%, 0 45%, 5% 30%);
    pointer-events: none;
}

.tearoff__tab:hover {
    background: var(--mustard);
    transform: translateY(4px);
}

.tearoff__tab--torn:hover {
    background: var(--mustard-bright);
    transform: none;
}

.footer__col h3 {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: var(--sp-5);
}

.footer__col li {
    margin-bottom: var(--sp-3);
}

.footer__col a {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--fs-sm);
    transition: color var(--transition);
}

.footer__col a:hover {
    color: var(--white);
}

.footer__contact li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-3);
}

.footer__contact i {
    color: var(--mustard-bright);
    width: 16px;
    text-align: center;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--fs-xs);
}

@media (max-width: 900px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
}

@media (max-width: 560px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}