/**
 * Konsulent detail pages – sidebar on LEFT, main content (tabs) on RIGHT.
 * Reuses --detail-hero-* tokens from kursus/event detail pages for consistent
 * hero height, sidebar overlap and pull-up.
 */

/* ----- Hero (gradient band + breadcrumb pill) -----
   The hero band is full-bleed (no max-width). Horizontal padding lives
   on `.hero-inner`, which is a 2-column grid that mirrors the .columns-inner
   below it (1fr / 2fr + var(--group-space) gap). All hero text is placed in
   column 2, so breadcrumb, h1 and rolle align vertically with the tabs widget
   in the right main column. */
.hero.hero--consultant-hero {
    max-width: none;
    text-align: var(--left-align);
    /* Asymmetric padding: more space at top, less at bottom – combined with
       align-content: end on .hero-inner, this places h1+rolle low in the
       hero so the h1 top horizontally aligns with the top of the profile
       photo (which overlaps up from the sidebar below). Hero stays at
       --detail-hero-min-height (15rem). */
    padding-top: var(--detail-hero-pad-block);
    padding-bottom: var(--section-space);
    min-height: var(--detail-hero-min-height);
    position: relative;
    z-index: var(--base-layer);
}

/* Reduce top padding whenever there is a secondary element (breadcrumb pill
   OR rolle/undertitel) above/below the h1, so the total hero height stays
   within --detail-hero-min-height (15rem) – same as kursus/event detail. */
.hero.hero--consultant-hero:has(.hero-breadcrumb-wrap),
.hero.hero--consultant-hero:has(.hero-description) {
    padding-top: var(--detail-hero-pad-top-breadcrumb);
}

.hero.hero--consultant-hero .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    /* Column-gap matches .columns-inner gap so the right column lines up.
       Row-gap is 0 – h1 and rolle space themselves via their own margins,
       so total hero height stays at --detail-hero-min-height (15rem). */
    column-gap: var(--group-space);
    row-gap: 0;
    align-items: var(--end-align);
    /* Stack content at the bottom of the hero so the h1 sits low and lines
       up vertically with the top of the profile photo. align-content needs
       the grid to be taller than its content – explicit min-height stretches
       hero-inner to fill the hero's content area (hero min-height minus the
       hero's top + bottom padding). */
    align-content: var(--end-align);
    min-height: calc(var(--detail-hero-min-height) - var(--detail-hero-pad-top-breadcrumb) - 2.5rem);
    max-width: var(--layout-measure);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--page-side-padding);
    box-sizing: border-box;
}

.hero.hero--consultant-hero .hero-inner > .hero-breadcrumb-wrap,
.hero.hero--consultant-hero .hero-inner > h1,
.hero.hero--consultant-hero .hero-inner > .hero-description {
    grid-column: 2;
}

.hero.hero--consultant-hero h1 {
    margin: var(--tight-space) 0 0;
    padding: 0;
    text-align: var(--left-align);
    font-size: var(--heading-1-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--banner-text-color);
}

/* Rolle as hero subtitle – sits directly under the h1, white but slightly
   muted. Override .hero-description's centred default. */
.hero.hero--consultant-hero .hero-description {
    margin: var(--tight-space) 0 0;
    max-width: none;
    text-align: var(--left-align);
    color: var(--banner-text-color);
    opacity: var(--muted-opacity);
    font-size: var(--body-font-size);
    font-weight: var(--heading-font-weight);
}

/* ----- Main two-column section -----
   layout: [1, 2] in the template → left sidebar (1fr), right main (2fr).
   Both columns begin at the bottom edge of the hero; only the profile photo
   reaches up into the band, exactly as on logb.dk. The section is pulled up so
   the photo has somewhere to overlap, and each column gives the offset back –
   the left one with a margin so the sticky box still starts at the card. */
.columns--consultant-detail {
    margin-top: calc(-1 * var(--detail-hero-pull-up));
    position: relative;
    z-index: var(--raised-layer);
}

.columns--consultant-detail > .columns-inner > .column:nth-child(2) {
    padding-top: var(--detail-hero-pull-up);
}

/* The sidebar starts flush with the bottom of the hero, so its margin also
   cancels the inner padding the section puts above both columns. */
.columns--consultant-detail .column:nth-child(1) {
    position: sticky;
    top: 1.5rem;
    margin-top: calc(var(--detail-hero-pull-up) - var(--section-space));
}

/* ----- Left sidebar: combined profile + mini-kurser panel -----
   Tinted like the sidebar column on logb.dk (#edf2f7). The tint is what makes
   the round photo read as a circle: the photos have a white backdrop, so on a
   white card the circular mask would be invisible. Not a floating card here –
   the tint runs out to the left page edge, following the full-bleed hero. */
.konsulent-profile-card {
    /* Half the photo hangs above the panel, so it must not be clipped. */

    position: relative;
    /* flow-root keeps the photo's negative margin inside the panel; without a
       border to stop it, the margin would otherwise drag the panel up too. */
    display: flow-root;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
    background: var(--body-background-color);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The tint continues from the panel's left edge to the edge of the window.
   Overflow to the left never creates a scrollbar, so 100vw is safe here. */
.konsulent-profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background: inherit;
    pointer-events: none;
}

/* Half the photo sits inside the hero band above. */
.konsulent-profile-card__photo {
    margin-top: calc(-1 * var(--thumb-measure) / 2);
    padding: 0 var(--item-space) var(--control-space);
}

/* Photos are square and exported at 200×200 (a few at 500×500). Show them all
   at the same 12.5rem and mask them to a circle – the round frame logb.dk uses.
   Stretching them to the card width only made them blurry. */
.konsulent-profile-card__photo img {
    display: block;
    width: var(--thumb-measure);
    height: var(--thumb-measure);
    max-width: 100%;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 50%;
    background: var(--body-background-color);
}

/* Email row directly below the photo. Border-top separator only when the
   photo is present (it gives a visual break between image and text). */
.konsulent-profile-card__email {
    margin: 0;
    padding: var(--control-space) var(--item-space);
    font-size: var(--small-font-size);
    text-align: var(--center-align);
    border-bottom: var(--hairline-width) solid var(--border-color);
}

.konsulent-profile-card__email a {
    color: var(--body-link-color);
    text-decoration: none;
    word-break: break-all;
}

.konsulent-profile-card__email a:hover {
    text-decoration: underline;
}

.konsulent-profile-card__title {
    margin: var(--item-space) var(--item-space) var(--tight-space);
}

.konsulent-mini-kurser-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A rule under every course row, including the last one, as on logb.dk. */
.konsulent-mini-kursus {
    border-bottom: var(--hairline-width) solid var(--border-color);
}

.konsulent-mini-kursus__link {
    display: flex;
    align-items: var(--center-align);
    gap: var(--control-space);
    padding: var(--tight-space) var(--item-space);
    text-decoration: none;
    color: var(--body-text-color);
    transition: background-color var(--fast-transition);
}

.konsulent-mini-kursus__link:hover {
    background: color-mix(in srgb, var(--body-link-color) 6%, transparent);
}

/* Course images are wide logos (2:1 or wider), so a square crop reduced them to
   an unreadable sliver. Same landscape thumbnail as logb.dk, and `contain` so
   the whole logo stays visible whatever its aspect ratio. */
.konsulent-mini-kursus__icon {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    height: 3rem;
    object-fit: contain;
    border-radius: var(--field-radius);
    background: var(--body-background-color);
    display: block;
}

.konsulent-mini-kursus__icon--placeholder {
    background: var(--body-background-color);
}

.konsulent-mini-kursus__titel {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--small-font-size);
    line-height: var(--compact-line-height);
    color: var(--body-link-color);
    font-weight: var(--button-font-weight);
}

.konsulent-mini-kursus__link:hover .konsulent-mini-kursus__titel {
    text-decoration: underline;
}

/* Closing link of the panel – opens the Kurser tab. The list already draws the
   rule above it. */
.konsulent-profile-card__alle {
    margin: 0;
    padding: var(--control-space) var(--item-space);
    text-align: var(--center-align);
    font-size: var(--small-font-size);
}

.konsulent-profile-card__alle a {
    color: var(--body-link-color);
    font-weight: var(--heading-font-weight);
    text-decoration: none;
}

.konsulent-profile-card__alle a:hover {
    text-decoration: underline;
}

/* ----- Tabs widget (right column, top) ----- */
.konsulent-tabs {
    background: var(--body-background-color);
    border: var(--hairline-width) solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.konsulent-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: var(--hairline-width) solid var(--border-color);
    background: var(--body-background-color);
}

.konsulent-tab {
    flex: 1 1 0;
    padding: var(--item-space) var(--gutter-space);
    background: transparent;
    border: 0;
    border-bottom: var(--accent-width) solid transparent;
    font: inherit;
    font-weight: var(--heading-font-weight);
    color: var(--body-text-color);
    cursor: pointer;
    text-align: var(--center-align);
    transition: background-color var(--fast-transition), color var(--fast-transition), border-color var(--fast-transition);
}

.konsulent-tab:hover {
    background: color-mix(in srgb, var(--body-link-color) 6%, transparent);
    color: var(--body-text-color);
}

.konsulent-tab.is-active {
    background: var(--body-background-color);
    color: var(--body-link-color);
    border-bottom-color: var(--body-link-color);
}

.konsulent-tab:focus-visible {
    outline: var(--thin-width) solid var(--body-link-color);
    outline-offset: calc(-1 * var(--thin-width));
}

.konsulent-tabs__panels {
    padding: var(--group-space) var(--group-space) var(--block-space);
}

.konsulent-tab-panel[hidden] {
    display: none;
}

.konsulent-tab-empty {
    margin: var(--item-space) 0;
    color: var(--body-text-color);
    font-style: italic;
}

/* ----- Beskrivelse panel: bio + tags + anbefalinger ----- */
.konsulent-bio {
    margin: 0 0 var(--group-space);
}

.konsulent-tags-card {
    margin: 0 0 var(--group-space);
}

.konsulent-tags-card__title {
    font-size: var(--lead-font-size);
    margin: 0 0 var(--control-space);
    color: var(--body-heading-color);
}

.konsulent-tags-list {
    justify-content: var(--start-align);
}

.kurser-tag.kurser-tag--static {
    cursor: default;
    background: var(--body-background-color);
    color: var(--body-text-color);
}

/* ----- Customer testimonials (inside Beskrivelse panel) ----- */
.konsulent-section-title {
    font-size: var(--heading-5-font-size);
    margin: 0 0 var(--item-space);
    color: var(--body-heading-color);
}

.konsulent-anbefalinger {
    margin-top: var(--group-space);
}

.konsulent-anbefaling {
    margin: 0 0 var(--gutter-space);
    padding: var(--item-space) var(--gutter-space);
    background: var(--body-background-color);
    border-left: var(--accent-width) solid var(--body-link-color);
    border-radius: var(--card-radius);
}

.konsulent-anbefaling__title {
    font-size: var(--body-font-size);
    margin: 0 0 var(--tight-space);
    color: var(--body-heading-color);
}

.konsulent-anbefaling__text {
    margin: 0 0 var(--control-space);
    font-size: var(--small-font-size);
    line-height: var(--body-line-height);
    color: var(--body-text-color);
    font-style: italic;
}

.konsulent-anbefaling__person {
    margin: 0;
    font-size: var(--small-font-size);
}

.konsulent-anbefaling__role {
    color: var(--body-text-color);
    font-style: normal;
}

/* ----- Artikler panel: 2-column grid of news cards (matches logb.dk) ----- */
.konsulent-artikel-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

@media (max-width: 45rem) {
    .konsulent-artikel-grid {
        grid-template-columns: 1fr;
    }
}

.konsulent-artikel-card {
    display: flex;
    background: var(--body-background-color);
    border: var(--hairline-width) solid var(--border-color);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: box-shadow var(--default-transition), transform var(--default-transition);
}

.konsulent-artikel-card:hover {
    box-shadow: var(--article-hover-shadow);
    transform: translateY(-0.125rem);
}

.konsulent-artikel-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.konsulent-artikel-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--body-background-color);
}

.konsulent-artikel-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.konsulent-artikel-card__body {
    padding: var(--item-space) var(--item-space) var(--item-space);
    display: flex;
    flex-direction: column;
    gap: var(--tight-space);
    flex: 1;
}

.konsulent-artikel-card__titel {
    margin: 0;
    font-size: var(--body-font-size);
    line-height: var(--compact-line-height);
    font-weight: var(--heading-font-weight);
    color: var(--body-link-color);
}

.konsulent-artikel-card__link:hover .konsulent-artikel-card__titel {
    text-decoration: underline;
}

.konsulent-artikel-card__dato {
    margin: 0;
    color: var(--body-text-color);
    font-size: var(--small-font-size);
}

.konsulent-artikel-card__uddrag {
    margin: 0;
    color: var(--body-text-color);
    font-size: var(--small-font-size);
    line-height: var(--body-line-height);
    /* Clamp to keep card heights aligned across the row */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- Kurser panel: thumbnail + titel + kort_om ----- */
.konsulent-kursus-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.konsulent-kursus-item {
    display: flex;
    gap: var(--item-space);
    padding: var(--item-space) 0;
    border-bottom: var(--hairline-width) solid var(--border-color);
}

.konsulent-kursus-item:last-child {
    border-bottom: 0;
}

.konsulent-kursus-item__thumb {
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    border-radius: var(--field-radius);
    overflow: hidden;
    background: var(--body-background-color);
    display: flex;
    align-items: var(--center-align);
    justify-content: var(--center-align);
}

.konsulent-kursus-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.konsulent-kursus-item__thumb--placeholder {
    background: var(--body-background-color);
}

.konsulent-kursus-item__text {
    flex: 1 1 auto;
    min-width: 0;
}

.konsulent-kursus-item__titel {
    display: inline-block;
    font-weight: var(--heading-font-weight);
    color: var(--body-link-color);
    text-decoration: none;
    font-size: var(--body-font-size);
}

.konsulent-kursus-item__titel:hover {
    text-decoration: underline;
}

.konsulent-kursus-item__kort {
    margin: var(--tight-space) 0 0;
    color: var(--body-text-color);
    font-size: var(--small-font-size);
    line-height: var(--body-line-height);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- Closing CTA (same pattern as /it-konsulenter) ----- */
.columns--consultant-cta {
    padding-top: var(--page-space);
    padding-bottom: var(--page-space);
}

.columns--consultant-cta .button-group {
    justify-content: var(--end-align);
}

/* ----- Mobile breakpoints ----- */
@media (max-width: 56.25rem) {
    .columns--consultant-detail .column:nth-child(1) {
        position: static;
    }
}

@media (max-width: 37.5rem) {
    /* Stacked layout: nothing overlaps the hero, so the photo sits inside the
       panel and the panel follows straight after the band. */
    .columns--consultant-detail {
        margin-top: 0;
    }

    .columns--consultant-detail > .columns-inner > .column:nth-child(2) {
        padding-top: 0;
    }

    .columns--consultant-detail .column:nth-child(1) {
        margin-top: 0;
    }

    .konsulent-profile-card__photo {
        margin-top: 0;
        padding-top: var(--gutter-space);
    }

    .konsulent-tab {
        padding: var(--control-space) var(--tight-space);
        font-size: var(--small-font-size);
    }

    .konsulent-tabs__panels {
        padding: var(--gutter-space);
    }
}