/* Shared course-row contract for catalogue lists and profile Teaching rows.
   Tokens match cle-people.css: navy #003366, gold #CC9900. */

.cle-course-row {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    padding-top: 8px;
    margin-bottom: 8px;
    width: fit-content;
    line-height: 1.4;
    text-decoration: none;
    color: var(--cle-people-navy, var(--cle-primary, #003366));
    background-image: linear-gradient(
        var(--cle-people-gold, var(--cle-secondary-light, #cc9900)),
        var(--cle-people-gold, var(--cle-secondary-light, #cc9900))
    );
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size 0.3s ease;
}

.cle-courses-list .views-row:last-child .cle-course-row {
    margin-bottom: 0;
}

.cle-course-row--linked:hover,
.cle-course-row--linked:focus {
    background-size: 100% 2px;
    color: var(--cle-people-navy, var(--cle-primary, #003366));
    text-decoration: none;
}

.cle-course-row__code {
    color: var(--cle-people-gold, var(--cle-secondary-light, #cc9900));
    padding-right: 16px;
    font-weight: 700;
}

.cle-course-row__title {
    color: var(--cle-people-navy, var(--cle-primary, #003366));
}

/* Linked rows: suppress global layout-content anchor underline on code/title. */
.layout-content a.cle-course-row {
    padding-bottom: 0;
    text-decoration: none;
}

.cle-course-row--linked .cle-course-row__code,
.cle-course-row--linked .cle-course-row__title {
    background-image: none;
    padding-bottom: 0;
    text-decoration: none;
}

.cle-course-row--linked:hover .cle-course-row__code,
.cle-course-row--linked:focus .cle-course-row__code {
    color: var(--cle-people-gold, var(--cle-secondary-light, #cc9900));
}

.cle-course-row--linked:hover .cle-course-row__title,
.cle-course-row--linked:focus .cle-course-row__title {
    color: var(--cle-people-navy, var(--cle-primary, #003366));
}

/* Long titles wrap without colliding with the code on narrow widths. */
.cle-course-row__code,
.cle-course-row__title {
    display: inline;
    overflow-wrap: anywhere;
}

@media only screen and (max-width: 767px) {
    .cle-course-row {
        width: 100%;
        max-width: 100%;
    }
}