/*
 * Activity Details Page
 * Shared typography, colors, header, and footer are provided by index.css.
 */

/* ========================================
   Page Layout
======================================== */

.activities-page {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 54px;
    color: var(--civi-text);
    font-family: var(--font-body);
}

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

.activities-main {
    min-width: 0;
}


/* ========================================
   Activity Header
======================================== */

.activities-header {
    margin-bottom: 24px;
}

.activities-eyebrow {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e0f5ee;
    color: #006d50;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Red pill for workshops */
.activities-eyebrow--workshop {
    background: #fbe9e9;
    color: #9b3037;
}

/* Green pill for academic lectures */
.activities-eyebrow--lecture {
    background: #e0f5ee;
    color: #006d50;
}

.activities-page .page-title {
    margin: 0 0 18px;
    padding-top: 0;
    /*color: var(--civi-navy);*/
    font-family: var(--font-heading);
    font-size: var(--font-page-title);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: left;
}

.activities-presenter {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 8px 0 0;
    color: var(--civi-muted);
    font-size: var(--font-base-sm);
    line-height: 1.55;
}

.activities-presenter i {
    flex: 0 0 auto;
    margin-top: 3px;
}

.activities-date {
    display: block;
    margin: 8px 0 0;
    color: var(--civi-muted);
    font-size: var(--font-base-sm);
    line-height: 1.55;
}


/* ========================================
   Embedded Video
======================================== */

.activities-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 26px 0 34px;
    overflow: hidden;
    border-radius: 9px;
    background: #101820;
}

.activities-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ========================================
   Activity Sections
======================================== */

.activities-sections {
    display: grid;
    gap: 28px;
}

.activities-section {
    min-width: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--civi-border);
}

.activities-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/*
 * Match the shared .subsubsection-title styling from index.css.
 * The shared class supplies the typography; this selector preserves
 * consistent spacing within the activity detail page.
 */
.activities-section-title {
    margin: 0 0 12px;
    padding: 0;
    color: var(--civi-navy);
    font-family: var(--font-heading);
    font-size: var(--font-xl);
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.activities-section p,
.activities-section li {
    color: var(--civi-text);
    font-family: var(--font-body);
    font-size: var(--font-base);
    letter-spacing: 0.2px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.activities-section p {
    margin: 0;
    white-space: pre-line;
}

.activities-section ul {
    margin: 0;
    padding-left: 1.35rem;
}

.activities-section li + li {
    margin-top: 7px;
}

.activities-section a {
    color: var(--civi-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.activities-section a:hover {
    color: var(--civi-navy);
}


/* ========================================
   Recent Activities Sidebar
======================================== */

.activities-sidebar {
    min-width: 0;
}

.activities-sidebar-title {
    margin: 0 0 20px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--civi-border);
    color: var(--civi-navy);
    font-family: var(--font-heading);
    font-size: var(--font-xl);
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.activities-sidebar-list {
    display: grid;
    gap: 18px;
}

/*
 * Adapted from .activities-card and .news-card on the homepage.
 * Cards use the same border, radius, surface, and hover treatment.
 */
.recent-activities-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--civi-border);
    border-radius: 9px;
    background: var(--civi-surface);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.recent-activities-card:hover {
    transform: translateY(-3px);
    border-color: var(--civi-border-strong);
    box-shadow: 0 10px 26px rgba(16, 43, 89, 0.08);
}

.recent-activities-card-link {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.recent-activities-card-link:hover,
.recent-activities-card-link:focus-visible {
    text-decoration: none;
}

.recent-activities-card-link:focus-visible {
    outline: 2px solid var(--civi-focus);
    outline-offset: 3px;
    border-radius: 9px;
}

.recent-activities-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--civi-soft);
}

.recent-activities-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 180ms ease;
}

.recent-activities-card:hover .recent-activities-thumbnail img {
    transform: scale(1.025);
}

.recent-activities-card-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 17px 17px;
}

/* Pill categories match public/css/news.css */
.activities-card-type {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.activities-card-type.category-lecture,
.activities-card-type.category-awards {
    background: #e0f5ee;
    color: #006d50;
}

.activities-card-type.category-workshop,
.activities-card-type.category-activity {
    background: #fbe9e9;
    color: #9b3037;
}

.activities-card-type.category-conference {
    background: #e6efff;
    color: #204b9a;
}

.activities-card-type.category-faculty {
    background: #f1eaff;
    color: #6540a8;
}

.activities-card-type.category-general {
    background: #edf1f5;
    color: #4a5b70;
}

.recent-activities-card-content h3 {
    margin: 0 0 10px;
    color: var(--civi-navy);
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition: color 160ms ease;
}

.recent-activities-card-link:hover h3 {
    color: var(--civi-green);
}

.recent-activities-date {
    margin: 0 0 8px;
    color: var(--civi-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.recent-activities-presenter {
    margin: 0;
    color: #536781;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* ========================================
   Activity Not Found
======================================== */

.activities-error {
    padding: 24px;
    border: 1px solid var(--civi-border);
    border-radius: 9px;
    background: var(--civi-soft);
    color: var(--civi-text);
    line-height: 1.6;
}


/* ========================================
   Hidden Elements
======================================== */

[hidden] {
    display: none !important;
}


/* ========================================
   Tablet
======================================== */

@media (max-width: 900px) {
    .activities-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 26px;
    }

    .recent-activities-card-content {
        padding: 16px 15px;
    }
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 720px) {
    .activities-page {
        width: min(calc(100% - 32px), 680px);
        padding-top: 22px;
        padding-bottom: 40px;
    }

    .activities-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
    }

    .activities-sidebar-title {
        margin-bottom: 18px;
    }

    .activities-sidebar-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .recent-activities-card-content {
        padding: 16px;
    }
}


/* ========================================
   Small Mobile Screens
======================================== */

@media (max-width: 480px) {
    .activities-sidebar-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .recent-activities-card-content {
        padding: 18px;
    }
}


/* ========================================
   Reduced Motion
======================================== */

@media (prefers-reduced-motion: reduce) {
    .recent-activities-card,
    .recent-activities-thumbnail img,
    .recent-activities-card-content h3 {
        transition: none;
    }

    .recent-activities-card:hover {
        transform: none;
    }

    .recent-activities-card:hover .recent-activities-thumbnail img {
        transform: none;
    }
}