/* ==========================================================================
   Strategic Activities page
   Loaded after styles/index.css.
   ========================================================================== */

/* Keep the tallest programme cards from dragging the whole row down: each
   card sizes itself and the grid packs them densely. */
.activity-grid {
    align-items: start;
}

/* Strategic objectives — numbered tiles on the dark band */
.objective-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
}

.objective {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md);
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease-out);
}

.objective:hover {
    background: rgba(255, 89, 0, 0.12);
    border-color: var(--brand-500);
    transform: translateY(-4px);
}

.objective__num {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--brand-500);
    padding-top: 0.28rem;
    flex: none;
    min-width: 26px;
}

.objective p {
    font-weight: 500;
    font-size: var(--step-0);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.88);
}