/* ==========================================================================
   Single course template (templates/single-course.html)

   The header is Page Header V2 on primary with the rounded bottom corners, but
   its wrapper holds a two-column forge/grid: breadcrumbs, title and intro on
   the left, the featured image on the right. Built on the model of the article
   category hero (taxonomy-article-category.css), with its own file because the
   class names are the course template's, not that hero's.
   ========================================================================== */

/* --- Header ---------------------------------------------------------------- */

/* The grid block switches to two columns at its own lg breakpoint (1024px).
   The theme's layouts turn at 992px, so the two columns start there instead and
   the header matches the rest of the site through the tablet range. */
@media (min-width: 992px) and (max-width: 1023.98px) {
    .cf-course-header .cf-course-header__grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        column-gap: var(--wp--preset--spacing--xl);
    }
}

/* core/post-featured-image renders nothing at all when a course has no
   featured image, so the grid is left holding a single child. Spanning both
   columns is what keeps the text at its own 640px measure on the left rather
   than squeezed into half the header beside an empty column. */
.cf-course-header .cf-course-header__grid > :only-child {
    grid-column: 1 / -1;
}

.cf-course-header .cf-course-header__content {
    min-width: 0;
}

.cf-course-header .cf-course-header__content h1 {
    margin: 0;
}

/* The radius is set on the figure; the image is clipped to it here. */
.cf-course-header .cf-course-header__media {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
}

.cf-course-header .cf-course-header__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
}