/*
Course cards on the Subsite List page (e.g. the MultiCourse Hub homepage) - hibbittsdesign.org
Colours, borders and corner radius come from the active style and Dark Mode; this file only shapes the cards.
*/

.course-card-col {
    display: flex;
    margin-bottom: 30px;
}

.course-card {
    width: 100%;
    overflow: hidden;
}

/* Edge-to-edge image with a consistent shape, so card heights line up */
.course-card .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}

.course-card .card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Quieter title in the heading colour, with an arrow as the "go" cue */
.course-card .card-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.course-card .card-title a {
    text-decoration: none;
}

/* Title in the heading colour at rest; on hover or keyboard focus the style's own link colour shows through */
.course-card:not(:hover):not(:focus-within) .card-title a {
    color: inherit;
}

.course-card-arrow {
    opacity: 0.6;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.course-card .card-text {
    margin-bottom: 0.5rem;
}

.course-card-meta {
    font-size: 0.9rem;
}

/* The whole card is one link: the style's usual card hover shadow, plus a clear ring for keyboard focus */
.course-card:hover .card-title a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.course-card:hover .course-card-arrow {
    opacity: 1;
}

.course-card .stretched-link:focus {
    outline: none;
}

.course-card .stretched-link:focus-visible::after {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Keep links inside a course's own card content clickable above the whole-card link */
.course-card .card-body > :not(.card-title) a {
    position: relative;
    z-index: 2;
}

.course-group-title {
    margin: 1rem 0;
}

/* Search box in the NavBar of the Subsite List page - stays beside the site name on small screens */
.navbar-home-search .form-control {
    width: 10rem;
}