/* =========================================================
   ONE SOCIETY (/societies/{slug})
   --sp-c: the society's colour from the CMS
========================================================= */

.sp-hero.has-cover {
    background-image: linear-gradient(90deg, rgba(4,32,42,.92) 0%, rgba(4,32,42,.7) 55%, rgba(4,32,42,.35) 100%), var(--sp-cover);
    background-position: center;
    background-size: cover;
}

.sp-section {
    --sp-deep: #073b4c;
    --sp-ink: #173c4a;
    --sp-muted: #5d7078;
    --sp-line: #dde8eb;
    --sp-paper: #f6f9fa;

    padding: 70px 0 90px;
    background: var(--sp-paper);
}

.sp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
}


/* ---------- About ---------- */

.sp-about {
    color: var(--sp-ink);
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
    hyphens: auto;
}

    .sp-about h2, .sp-about h3 {
        margin: 26px 0 10px;
        color: var(--sp-deep);
        font-weight: 800;
        text-align: left;
    }

    .sp-about p { margin: 0 0 16px; }
    .sp-about ul, .sp-about ol { margin: 0 0 16px; padding-left: 22px; }
    .sp-about a { color: var(--sp-c); }

.sp-lead {
    font-size: 18px;
    font-weight: 500;
}

.sp-h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 18px;
    color: var(--sp-deep);
    font-size: 24px;
    font-weight: 800;
    scroll-margin-top: 120px;
}

    .sp-h2::before {
        content: "";
        width: 6px;
        height: 24px;
        border-radius: 3px;
        background: var(--sp-c);
    }

.sp-muted {
    color: var(--sp-muted);
}

    .sp-muted a { color: var(--sp-c); font-weight: 600; }


/* ---------- Coming up ---------- */

.sp-events {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 18px;
    background: #ffffff;
    list-style: none;
}

    .sp-events li + li { border-top: 1px solid var(--sp-line); }

    .sp-events a {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 16px 20px;
        color: var(--sp-ink);
        text-decoration: none;
        transition: background .2s ease;
    }

        .sp-events a:hover { background: #f3f9fa; }

.sp-date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-top: 4px solid var(--sp-c);
    border-radius: 14px;
    background: var(--sp-paper);
    line-height: 1;
}

    .sp-date b { color: var(--sp-deep); font-size: 24px; font-weight: 800; }
    .sp-date small { margin-top: 5px; color: var(--sp-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .sp-date.is-week small:first-child { margin: 0 0 3px; font-size: 9px; }
    .sp-date.is-tba b { font-size: 16px; letter-spacing: 1px; }

.sp-ev-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .sp-ev-body strong { font-size: 16px; font-weight: 700; line-height: 1.35; }
    .sp-ev-body > span { color: var(--sp-muted); font-size: 14px; line-height: 1.5; }
    .sp-ev-body small { color: var(--sp-muted); font-size: 12px; }
    .sp-ev-body small i { color: var(--sp-c); }

.sp-with { margin-left: 8px; font-style: italic; }

.sp-go { color: var(--sp-c); }


/* ---------- Pager ---------- */

.sp-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 26px;
}

    .sp-pager a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        border: 1px solid var(--sp-line);
        border-radius: 10px;
        background: #ffffff;
        color: var(--sp-ink);
        font-weight: 700;
        text-decoration: none;
    }

        .sp-pager a[aria-current="page"] {
            border-color: var(--sp-deep);
            background: var(--sp-deep);
            color: #ffffff;
        }


/* ---------- Side ---------- */

.sp-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-card {
    padding: 28px 26px;
    border-top: 5px solid var(--sp-c);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(20,55,67,.08);
}

    .sp-card h3 {
        margin: 14px 0 16px;
        color: var(--sp-deep);
        font-size: 20px;
        font-weight: 800;
    }

    .sp-card dl { margin: 0; }
    .sp-card dt { color: var(--sp-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
    .sp-card dd { margin: 2px 0 12px; color: var(--sp-ink); font-size: 15px; overflow-wrap: anywhere; }
    .sp-card dd a { color: var(--sp-c); }

.sp-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 18px;
    background: color-mix(in srgb, var(--sp-c) 12%, #ffffff);
    color: var(--sp-c);
    font-size: 30px;
}

    .sp-badge img { width: 100%; height: 100%; object-fit: contain; background: #ffffff; }

.sp-social {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

    .sp-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: var(--sp-paper);
        color: var(--sp-deep);
        text-decoration: none;
        transition: background .2s ease, color .2s ease;
    }

        .sp-social a:hover { background: var(--sp-c); color: #ffffff; }

.sp-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 14px;
    background: var(--sp-deep);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

    .sp-side-link:hover { background: #0b858d; color: #ffffff; }

    .sp-side-link.alt {
        border: 1px solid var(--sp-line);
        background: #ffffff;
        color: var(--sp-ink);
    }

        .sp-side-link.alt:hover { border-color: #0b858d; color: #0b858d; }

.sp-events a:focus-visible,
.sp-social a:focus-visible,
.sp-side-link:focus-visible,
.sp-pager a:focus-visible {
    outline: 3px solid #e5b83d;
    outline-offset: 2px;
}


/* ---------- /student-activities bar ---------- */

.sa-list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 28px;
}

.sa-list-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: #e8f1f3;
}

    .sa-list-tabs a {
        padding: 8px 18px;
        border-radius: 10px;
        color: var(--sp-ink, #173c4a);
        font-weight: 700;
        text-decoration: none;
    }

        .sa-list-tabs a[aria-current="page"] {
            background: #073b4c;
            color: #ffffff;
        }

.sa-list-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    .sa-list-links a {
        color: #0b858d;
        font-weight: 700;
        text-decoration: none;
    }

        .sa-list-links a:hover { color: #073b4c; }


/* ---------- Small screens ---------- */

@media (max-width: 991px) {
    .sp-layout { grid-template-columns: 1fr; gap: 32px; }
    .sp-side { position: static; order: -1; }
}

@media (max-width: 575px) {
    .sp-section { padding: 48px 0 64px; }
    .sp-events a { gap: 12px; padding: 14px; }
    .sp-date { width: 58px; height: 62px; }
    .sp-go { display: none; }
    .sp-about { text-align: left; }
}