/* ==========================================================================
   COMMITMENTS SECTION
   ========================================================================== */

.commitments-section {
    position: relative;
    font-family: var(--default-serif-font-family), serif;
    box-shadow: 0 0px 12px rgba(202, 207, 214, 0.08);
}

/* ==========================================================================
   TOP SECTION - SDGs, Equality, Student Support
   ========================================================================== */

.commitments-top {
    background: rgb(248, 250, 252);
    padding: 3rem 0;
}

.commitment-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: rgba(15, 29, 112, 1);
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
}

.commitment-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(15, 29, 112, 0.75);
    margin-bottom: 1.25rem;
}

.commitment-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: .5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--palette-blue-2);
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
    line-height: 1.5rem;
}

.commitment-link:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1.5rem;
    background: currentColor;
    transform: skewX(-15deg);
    transition: width 0.25s ease;
}

.commitment-link:hover:before{
    width: 3px;
}

.commitment-link:hover {
    color: var(--palette-yellow-3);
    gap: 0.75rem;
}

.commitment-link i {
    font-size: 0.75rem;
}

.commitment-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.commitment-links-list li {
    margin: 0;
}

/* ==========================================================================
   BOTTOM SECTION - Emergency Contacts
   ========================================================================== */

.commitments-emergency {
    background: var(--palette-gray-3);
    padding: 3rem 0;
}

.emergency-icon {
    font-size: 3rem;
    color: var(--palette-yellow-3);
}

.emergency-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--palette-blue-1);
    margin: 0;
    letter-spacing: 0.02em;
}

.emergency-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--palette-blue-1);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.emergency-label {
    font-size: 0.9375rem;
    color: var(--palette-blue-2);
    margin-bottom: 1rem;
}

.emergency-divider {
    border: none;
    border-top: 3px solid var(--palette-yellow-3);
    width: 60%;
    margin: 1rem auto;
    opacity: 1;
}

.emergency-description {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--palette-blue-4);
    margin: 0;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .commitments-top,
    .commitments-emergency {
        padding: 2.5rem 0;
    }
}

@media (max-width: 768px) {
    .commitments-top,
    .commitments-emergency {
        padding: 2rem 0;
    }

    .commitment-title {
        font-size: 1.5rem;
    }

    .commitment-text {
        font-size: 0.875rem;
    }

    .emergency-icon {
        font-size: 2.5rem;
    }

    .emergency-title {
        font-size: 1.25rem;
    }

    .emergency-number {
        font-size: 1.25rem;
    }

    .emergency-divider {
        width: 40%;
    }
}