/**
 * Course detail pages — layout aligned with logb.dk (gradient hero, sidebar cards, tag cloud).
 */

/* ----- Hero (gradient band + breadcrumb pill) ----- */
.hero.hero--kursus-hero {
    max-width: none;
    text-align: left;
    padding: var(--detail-hero-pad-block) var(--v3-side-padding);
    min-height: var(--detail-hero-min-height);
    position: relative;
    z-index: 0;
}

/* When the breadcrumb pill is present we shrink the top padding so the pill+h1 stack stays
   visually balanced (matches event hero when no breadcrumb is rendered). */
.hero.hero--kursus-hero:has(.hero-breadcrumb-wrap) {
    padding-top: var(--detail-hero-pad-top-breadcrumb);
}

.hero-breadcrumb-wrap {
    max-width: var(--v3-content-max-width);
    margin: 0 auto 0.75rem;
    padding: 0 var(--v3-side-padding);
}

a.hero-breadcrumb__pill {
    display: inline-block;
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-white) !important;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

a.hero-breadcrumb__pill:hover {
    background: rgba(255, 255, 255, 0.18);
}

.hero.hero--kursus-hero h1 {
    max-width: var(--v3-content-max-width);
    margin: 0 auto;
    padding: 0 var(--v3-side-padding);
    text-align: left;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-white);
}

/* The section below pulls up over the hero, so the sidebar card floats on the
   band beside the title. Repeating the content grid here puts the title in the
   same column as the body text, so a long one wraps instead of disappearing
   behind the card. The columns collapse below the same width as the grid. */
@media (min-width: 769px) {
    .hero.hero--kursus-hero h1 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-lg);
    }
}

/* ----- Main two-column section (same pull-up / padding as .kolonner--event-detail) ----- */
.kolonner--kursus-detail {
    margin-top: calc(-1 * var(--detail-hero-pull-up));
    position: relative;
    z-index: 1;
}

.kolonner--kursus-detail > .kolonner-inner > .kolonne:first-child {
    padding-top: var(--detail-hero-pull-up);
}

.kolonner--kursus-detail .kolonne:nth-child(2) {
    position: sticky;
    top: 1.5rem;
}

/* Featured image (left column, top) */
.kursus-feature-image {
    margin-bottom: 2rem;
}

.kursus-feature-image img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    border-radius: var(--radius-md);
}

/* Body typography (long English content) */
.kursus-body-tekst {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-primary);
}

.kursus-body-tekst h2 {
    font-size: 1.35rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-heading);
}

.kursus-body-tekst ol {
    margin: 0 0 0 1.25rem;
}

/* Bullets are visually nested under the numbered headline above by indenting further.
   Combined with no top/bottom margin, the bullet block reads as sub-items of the ol. */
.kursus-body-tekst ul {
    margin: 0 0 0 2.75rem;
}

/* Each numbered headline (e.g. "1. React fundamentals") in the Content section gets a clear
   gap above so topic groups read as separated. The bullets that follow stay tight against the
   headline (no margin between ol and its trailing ul). */
.kursus-body-tekst ol {
    margin-top: 2rem;
}

.kursus-body-tekst li {
    margin-bottom: 0.35rem;
}

/* Bullet sub-items are tightly stacked — they're sub-points of the same topic, not separate items. */
.kursus-body-tekst ul li {
    margin-bottom: 0.1rem;
}

/* WordPress-imported content has inconsistent <li> markup: some items wrap text in <p>, others
   don't. Browser default <p> margins would create uneven gaps between numbered headlines and
   their first bullet. Neutralize so layout stays purely controlled by the ol/ul/li rules above. */
.kursus-body-tekst li > p {
    margin: 0;
}

/* ----- Sidebar cards ----- */
.kursus-sidebar-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-card, #e2e8f0);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
}

.kursus-sidebar-card__title {
    font-size: 1.05rem;
    margin: 0 0 1rem;
    color: var(--color-text-heading);
}

.kursus-praktisk-card h3 {
    font-size: 1.05rem;
    margin: 0 0 1rem;
    color: var(--color-text-heading);
}

.kursus-info-dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.95rem;
}

.kursus-info-dl dt {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.kursus-info-dl dd {
    margin: 0;
    color: var(--color-text-primary);
}

.kursus-se-naeste {
    color: var(--color-logb-blue);
    font-weight: 600;
    text-decoration: none;
}

.kursus-se-naeste:hover {
    text-decoration: underline;
}

.kursus-sidebar-cta {
    margin: 1.25rem 0 0;
}

.kursus-cta-btn.button {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.85rem 1rem;
}

/* Instructor — image on top, text full width below (matches readable sidebar layout) */
.kursus-instructor-card__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

.kursus-instructor-card__photo {
    width: 100%;
    text-align: center;
}

.kursus-instructor-card__photo img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-sm);
    display: block;
    margin: 0 auto;
}

.kursus-instructor-card__text {
    width: 100%;
}

.kursus-instructor-card__name {
    font-weight: 700;
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}

.kursus-instructor-card__role {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.kursus-instructor-card__email {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    word-break: break-word;
}

.kursus-instructor-card__bio {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.kursus-instructor-card__more {
    margin: 0;
}

/* Related courses */
.kursus-related-list {
    margin: 0;
    padding-left: 1.1rem;
}

.kursus-related-list li {
    margin-bottom: 0.5rem;
}

.kursus-related-list a {
    color: var(--color-logb-blue);
    text-decoration: none;
}

.kursus-related-list a:hover {
    text-decoration: underline;
}

/* Tag cloud in sidebar */
.kursus-explore-tags .kurser-tags-list {
    justify-content: flex-start;
}

.kursus-category-tags {
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .kolonner--kursus-detail .kolonne:nth-child(2) {
        position: static;
    }
}

@media (max-width: 600px) {
    .kolonner--kursus-detail {
        margin-top: 0;
    }

    .kolonner--kursus-detail > .kolonner-inner > .kolonne:first-child {
        padding-top: 0;
    }
}