/* design-single-compact.css – overrides on top of design-single-default.css */

/* Main grid: content + sidebar image + similar courses */
#ka .course-container-compact .course-information .compact-main-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "content image"
        "content aside";
    gap: var(--ka-space-md) var(--ka-space-2xl);
    align-items: start;
}

#ka .course-container-compact .course-information .compact-main-grid .content {
    grid-area: content;
}

#ka .course-container-compact .course-information .compact-main-grid .compact-grid-image {
    grid-area: image;
}

#ka .course-container-compact .course-information .compact-main-grid .compact-aside {
    grid-area: aside;
}

/* No featured image: two columns without image row */
#ka .course-container-compact:not(.has-course-image) .course-information .compact-main-grid {
    grid-template-rows: auto;
    grid-template-areas: "content aside";
}

@media screen and (max-width: 768px) {
    #ka .course-container-compact .course-information .compact-main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "image"
            "content"
            "aside";
        gap: var(--ka-space-xl);
    }

    #ka .course-container-compact:not(.has-course-image) .course-information .compact-main-grid {
        grid-template-areas:
            "content"
            "aside";
    }
}

/* Compact header (no hero image) */
#ka .course-container-compact .ka-compact-header {
    min-height: 30vh;
    padding: 6rem 2em 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: visible;
}

#ka .course-container-compact .ka-compact-header .header-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--ka-space-sm);
}

#ka .course-container-compact .ka-compact-header .header-content h1 {
    margin: 0;
    font-size: var(--ka-font-xxl);
    color: inherit;
}

#ka .course-container-compact .compact-header-subtitle {
    margin: 0;
    font-size: var(--ka-font-lg);
}

#ka .course-container-compact .compact-header-subtitle .compact-header-location {
    color: var(--ka-color, #2a7a7b);
    text-decoration: none;
    font-weight: 400;
    opacity: 0.85;
}

#ka .course-container-compact .compact-header-subtitle .compact-header-location:hover {
    text-decoration: underline;
}

#ka .course-container-compact .compact-header-subtitle .compact-header-date {
    margin-left: 0.35em;
    opacity: 0.95;
}

#ka .course-container-compact .compact-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ka-space-md);
    margin-top: var(--ka-space-2xl);
    width: 100%;
}

#ka .course-container-compact .compact-header-actions .header-links {
    flex: 1 1 auto;
}

#ka .course-container-compact .compact-header-actions .course-buttons {
    margin-right: 3rem;
    margin-top: 0;
}

#ka .course-container-compact .ka-compact-header .header-content i.ka-icon {
    background-color: var(--ka-color-light, #eee);
}

@media screen and (max-width: 768px) {
    #ka .course-container-compact .compact-mobile-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--ka-space-sm);
        padding: var(--ka-space-sm) var(--ka-space-md);
        background: var(--ka-alt-background, #f5f5f0);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        font-size: var(--ka-font-s-plus);
    }

    #ka .course-container-compact .compact-mobile-nav a {
        color: inherit;
        text-decoration: none;
        padding: 0.35em 0.75em;
    }

    #ka .course-container-compact .ka-compact-header .header-content h1,
    #ka .course-container-compact .compact-header-subtitle {
        text-align: center;
    }

    #ka .course-container-compact .compact-header-actions {
        flex-direction: column;
        align-items: center;
        margin-top: var(--ka-space-xl);
    }

    #ka .course-container-compact .ka-compact-header .header-links {
        justify-content: center;
    }

    #ka .course-container-compact .compact-header-actions .course-buttons {
        justify-content: center;
        width: 100%;
        margin-right: 0;
    }
}

/* Mobile quick nav */
#ka .course-container-compact .compact-mobile-nav {
    display: none;
}

/* Infostripe */
#ka .course-container-compact .ka-infostripe {
    background: var(--ka-alt-background, #f5f5f0);
    padding: 2.5em 2em;
}

#ka .course-container-compact .compact-infostripe-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ka-space-xl);
    align-items: stretch;
}

#ka .course-container-compact .compact-infostripe-col {
    min-height: 100%;
}

#ka .course-container-compact .compact-infostripe-times {
    display: flex;
    flex-direction: column;
}

#ka .course-container-compact .compact-infostripe-times-body {
    flex: 0 0 auto;
}

#ka .course-container-compact .compact-infostripe-col h2.small {
    margin: 0 0 var(--ka-space-sm);
    font-weight: 600;
}

#ka .course-container-compact .compact-infostripe-col .iconlist {
    row-gap: var(--ka-space-xs);
}
#ka .course-container-compact .compact-infostripe-col .iconlist .compact-contact-item{
    align-items: flex-start;
}

#ka .course-container-compact .compact-more-dates {
    margin: 0;
    margin-top: auto;
    padding-top: var(--ka-space-md);
}

#ka .course-container-compact button.compact-more-dates-link,
#ka .course-container-compact .compact-more-dates-link {
    display: inline;
    border: 1px dashed #00000045;
    padding: 0 .8em;
    background: none !important;
    box-shadow: none !important;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    color: var(--ka-color, #2a7a7b);
    appearance: none;
    -webkit-appearance: none;
}

#ka .course-container-compact .compact-more-dates-link:hover,
#ka .course-container-compact .compact-more-dates-link:focus-visible {
    background: none !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--ka-color, #2a7a7b) 82%, #000 18%) !important;
    border: 1px dashed #00000087;
}

#ka .course-container-compact .compact-more-dates-link.is-open {
    font-weight: 700;
}

#ka .course-container-compact .compact-more-dates--panel-close {
    margin: var(--ka-space-md) 0 0;
    padding-top: 0;
    text-align: center;
}

#ka .course-container-compact .compact-more-dates--panel-close[hidden] {
    display: none;
}

#ka .course-container-compact .compact-contact-item span a {
    word-break: break-word;
}

/* Toggle panel under infostripe */
#ka .course-container-compact .compact-infostripe-panel {
    background: var(--ka-alt-background, #f5f5f0);
    border-top: 1px solid color-mix(in srgb, var(--ka-alt-background, #f5f5f0) 75%, #000 7%);
    padding: var(--ka-space-lg) 0 var(--ka-space-xl);
}

#ka .course-container-compact .compact-infostripe-panel[hidden] {
    display: none;
}

#ka .course-container-compact .compact-courselist--panel .compact-courselist-locations {
    margin: 0 0 var(--ka-space-md);
}

#ka .course-container-compact .compact-courselist--panel .courselist-items-wrapper {
    background: #ffffff7a;
    margin: 0;
}
#ka .course-container-compact .compact-courselist--panel .courselist-item {
    border-bottom: 1px solid #eee;
}
#ka .course-container-compact .compact-courselist--panel .courselist-main .text-area,
#ka .course-container-compact .compact-courselist--panel .courselist-main .links-area{
    flex-direction: row;
    gap: var(--ka-space-sm);
}

#ka .course-container-compact .compact-courselist--panel .courselist-content {
    height: 0;
    overflow: hidden;
    padding: 0 10px;
    transition: height 0.3s ease, padding 0.3s ease;
    background: color-mix(in srgb, var(--ka-alt-background, #f5f5f0) 88%, #fff 12%);
    font-size: var(--ka-font-s);
}

#ka .course-container-compact .compact-courselist--panel .courselist-content.open {
    padding: .75em 1em 1em;
    border-top: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
}

#ka .course-container-compact .compact-courselist--panel .courselist-content.open p {
    margin-bottom: .6em;
}

#ka .course-container-compact .compact-courselist--panel .courselist-content.open p:last-child {
    margin-bottom: 0;
}
#ka .course-container-compact .compact-courselist--panel .content-area,
#ka .course-container-compact .compact-courselist--panel a,
#ka .course-container-compact .compact-courselist--panel .more-info {
    font-size: var(--ka-font-s);
}
#ka .course-container-compact .compact-courselist--panel a.courselist-button.pameldingskjema {
    padding: .5em 1em;
    border-radius: 4px;
}

#ka .course-container-compact .compact-courselist--panel .courselist-content.open a {
    color: var(--ka-color);
}


@media screen and (max-width: 900px) {
    #ka .course-container-compact .ka-infostripe {
        padding: 1.5em 1.25em;
    }

    /* Stack columns; pull toggle button to bottom of infostripe via display:contents */
    #ka .course-container-compact .compact-infostripe-grid {
        display: flex;
        flex-direction: column;
        gap: var(--ka-space-lg);
    }

    #ka .course-container-compact .compact-infostripe-times {
        display: contents;
    }

    #ka .course-container-compact .compact-infostripe-times-body {
        order: 1;
    }

    #ka .course-container-compact .compact-infostripe-location {
        order: 2;
    }

    #ka .course-container-compact .compact-infostripe-other {
        order: 3;
    }

    #ka .course-container-compact .compact-infostripe-times .compact-more-dates {
        order: 4;
        margin-top: var(--ka-space-sm);
        padding-top: var(--ka-space-md);
        text-align: center;
    }

    #ka .course-container-compact .compact-infostripe-times .compact-more-dates-link {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0.7em 1em;
        box-sizing: border-box;
        text-align: center;
    }

    #ka .course-container-compact .compact-infostripe-panel {
        padding: var(--ka-space-md) 0 var(--ka-space-lg);
    }

    #ka .course-container-compact .compact-courselist--panel .compact-courselist-locations {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 768px) {
    /* Panel courselist: stack row content instead of cramped horizontal layout */
    #ka .course-container-compact .compact-courselist--panel .courselist-main {
        flex-direction: column;
        align-items: stretch;
        row-gap: var(--ka-space-sm);
        padding: var(--ka-space-md) var(--ka-space-sm);
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-main .text-area {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        width: 100%;
        row-gap: var(--ka-space-xs);
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-main .title-area {
        width: 100%;
        align-items: flex-start;
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-title strong {
        white-space: normal;
        word-break: break-word;
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-main .content-area {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2em;
        width: 100%;
        margin: 0;
        padding-left: 1.35em;
        font-size: var(--ka-font-s);
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-details {
        display: block;
        line-height: 1.4;
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-main .links-area {
        width: 100%;
        margin-left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--ka-space-sm);
        padding-top: var(--ka-space-sm);
        margin-top: var(--ka-space-xs);
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-main .links-area a {
        margin-left: 0;
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #ka .course-container-compact .compact-courselist--panel .more-info {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 1.35em;
    }

    #ka .course-container-compact .compact-courselist--panel .compact-courselist-details {
        padding-left: 0;
        padding-right: 0;
        grid-template-columns: 1fr;
        gap: var(--ka-space-md);
    }

    #ka .course-container-compact .compact-courselist--panel .courselist-content.open {
        padding: var(--ka-space-md) var(--ka-space-sm);
    }

    /* Bottom close is useful when scrolled; keep but tighten spacing */
    #ka .course-container-compact .compact-more-dates--panel-close {
        margin-top: var(--ka-space-sm);
        padding-top: var(--ka-space-sm);
    }

    #ka .course-container-compact .compact-more-dates--panel-close .compact-more-dates-link {
        display: block;
        width: 100%;
        padding: 0.7em 1em;
        box-sizing: border-box;
    }
}

/* Bottom section: more courses */
#ka .course-container-compact .ka-compact-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 3rem;
}

#ka .course-container-compact .compact-bottom-more h2.small {
    margin: 0 0 var(--ka-space-md);
    font-weight: 600;
}

#ka .course-container-compact .compact-courselist-locations {
    margin: 0 0 var(--ka-space-md);
}

#ka .course-container-compact .compact-courselist-details {
    padding-left: 2vw;
    padding-right: 2vw;
}

#ka .course-container-compact .compact-bottom-more .kursagenten-grid.stablet.kort .k-box {
    text-align: center;
}

/* Main content */
#ka .course-container-compact .course-information {
    padding-top: var(--ka-space-xl);
}

#ka .course-container-compact .compact-main-grid .excerpt {
    font-size: var(--ka-font-md);
    margin-bottom: var(--ka-space-lg);
}

#ka .course-container-compact .course-meta-content {
    border: none;
    padding: 0;
}

#ka .course-container-compact .course-meta-content p:last-child {
    margin-bottom: 0;
}

#ka .course-container-compact .compact-similar-courses {
    margin-top: 0;
}

#ka .course-container-compact .compact-similar-courses h2.small {
    margin-bottom: var(--ka-space-sm);
}

#ka .course-container-compact .compact-similar-courses .kursagenten-grid.rad.kort .k-box {
    box-shadow: none;
    background: transparent;
}

#ka .course-container-compact .compact-similar-courses .kursagenten-grid.rad.kort .k-text {
    padding: 0 0 0 0.65em;
}

#ka .course-container-compact .compact-similar-courses .kursagenten-grid.rad.kort .k-text a {
    padding: 0;
}

/* Single course image in sidebar (desktop) / above content (mobile) */
#ka .course-container-compact picture.compact-course-image {
    aspect-ratio: 4/3;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
}

#ka .course-container-compact picture.compact-course-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    #ka .course-container-compact .compact-similar-courses {
        padding-top: var(--ka-space-lg);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
}

#ka .course-information .content-buttons {
    margin-top: var(--ka-space-xl);
}

/* Extra WP content – full width, admin dashed border only here */
#ka .course-container-compact .compact-wp-content {
    margin-top: var(--ka-space-2xl);
    padding-top: var(--ka-space-2xl);
}

#ka .course-container-compact .compact-wp-content:empty {
    display: none;
}