/**
 * 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 .kolonner-inner
   below it (1fr / 2fr + var(--spacing-lg) 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--konsulent-hero {
    max-width: none;
    text-align: left;
    /* 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 (240px). */
    padding-top: var(--detail-hero-pad-block);
    padding-bottom: 2.5rem;
    min-height: var(--detail-hero-min-height);
    position: relative;
    z-index: 0;
}

/* 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 (240px) — same as kursus/event detail. */
.hero.hero--konsulent-hero:has(.hero-breadcrumb-wrap),
.hero.hero--konsulent-hero:has(.hero-description) {
    padding-top: var(--detail-hero-pad-top-breadcrumb);
}

.hero.hero--konsulent-hero .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    /* Column-gap matches .kolonner-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 (240px). */
    column-gap: var(--spacing-lg);
    row-gap: 0;
    align-items: end;
    /* 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: end;
    min-height: calc(var(--detail-hero-min-height) - var(--detail-hero-pad-top-breadcrumb) - 2.5rem);
    max-width: var(--v3-content-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--v3-side-padding);
    box-sizing: border-box;
}

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

.hero.hero--konsulent-hero h1 {
    margin: 0.5rem 0 0;
    padding: 0;
    text-align: left;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-white);
}

/* Rolle as hero subtitle — sits directly under the h1, white but slightly
   muted. Override .hero-description's centred default. */
.hero.hero--konsulent-hero .hero-description {
    margin: 0.35rem 0 0;
    max-width: none;
    text-align: left;
    color: var(--color-white);
    opacity: 0.9;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ----- 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. */
.kolonner--konsulent-detail {
    margin-top: calc(-1 * var(--detail-hero-pull-up));
    position: relative;
    z-index: 1;
}

.kolonner--konsulent-detail > .kolonner-inner > .kolonne: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. */
.kolonner--konsulent-detail .kolonne:nth-child(1) {
    position: sticky;
    top: 1.5rem;
    margin-top: calc(var(--detail-hero-pull-up) - var(--spacing-xl));
}

/* ----- 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. */
    --konsulent-foto-stoerrelse: 200px;
    /* The default card border is too pale to read on the tinted panel. */
    --konsulent-linje: #cbd5e0;

    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: #edf2f7;
    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(--konsulent-foto-stoerrelse) / 2);
    padding: 0 1rem 0.75rem;
}

/* Photos are square and exported at 200×200 (a few at 500×500). Show them all
   at the same 200px 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(--konsulent-foto-stoerrelse);
    height: var(--konsulent-foto-stoerrelse);
    max-width: 100%;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 50%;
    background: var(--color-white);
}

/* 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: 0.75rem 1rem;
    font-size: 0.9rem;
    text-align: center;
    border-bottom: 1px solid var(--konsulent-linje);
}

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

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

.konsulent-profile-card__title {
    margin: 1rem 1rem 0.5rem;
}

.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: 1px solid var(--konsulent-linje);
}

.konsulent-mini-kursus__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.15s ease;
}

.konsulent-mini-kursus__link:hover {
    background: rgba(43, 135, 218, 0.06);
}

/* 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 88px;
    width: 88px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--color-white);
    display: block;
}

.konsulent-mini-kursus__icon--placeholder {
    background: linear-gradient(135deg, var(--color-bg-light, #f7fafc), var(--color-border-card, #e2e8f0));
}

.konsulent-mini-kursus__titel {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--color-logb-blue);
    font-weight: 500;
}

.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: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.konsulent-profile-card__alle a {
    color: var(--color-logb-blue);
    font-weight: 600;
    text-decoration: none;
}

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

/* ----- Tabs widget (right column, top) ----- */
.konsulent-tabs {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-card, #e2e8f0);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.konsulent-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border-card, #e2e8f0);
    background: var(--color-bg-light, #f7fafc);
}

.konsulent-tab {
    flex: 1 1 0;
    padding: 0.9rem 1.25rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    font: inherit;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.konsulent-tab:hover {
    background: rgba(43, 135, 218, 0.06);
    color: var(--color-text-primary);
}

.konsulent-tab.is-active {
    background: var(--color-bg-white);
    color: var(--color-logb-blue);
    border-bottom-color: var(--color-logb-blue);
}

.konsulent-tab:focus-visible {
    outline: 2px solid var(--color-logb-blue);
    outline-offset: -2px;
}

.konsulent-tabs__panels {
    padding: 1.75rem 1.75rem 2rem;
}

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

.konsulent-tab-empty {
    margin: 1rem 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ----- Beskrivelse panel: bio + tags + anbefalinger ----- */
.konsulent-bio {
    margin: 0 0 1.5rem;
}

.konsulent-tags-card {
    margin: 0 0 1.75rem;
}

.konsulent-tags-card__title {
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
    color: var(--color-text-heading);
}

.konsulent-tags-list {
    justify-content: flex-start;
}

.kurser-tag.kurser-tag--static {
    cursor: default;
    background: var(--color-bg-light, #f7fafc);
    color: var(--color-text-secondary);
}

/* ----- Customer testimonials (inside Beskrivelse panel) ----- */
.konsulent-section-title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
    color: var(--color-text-heading);
}

.konsulent-anbefalinger {
    margin-top: 1.5rem;
}

.konsulent-anbefaling {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-bg-light, #f7fafc);
    border-left: 3px solid var(--color-logb-blue);
    border-radius: var(--radius-md);
}

.konsulent-anbefaling__title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--color-text-heading);
}

.konsulent-anbefaling__text {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    font-style: italic;
}

.konsulent-anbefaling__person {
    margin: 0;
    font-size: 0.9rem;
}

.konsulent-anbefaling__role {
    color: var(--color-text-secondary);
    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: 1.5rem;
}

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

.konsulent-artikel-card {
    display: flex;
    background: var(--color-bg-white, #fff);
    border: 1px solid var(--color-border-card, #e2e8f0);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.konsulent-artikel-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.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(--color-bg-light, #f7fafc);
}

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

.konsulent-artikel-card__body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.konsulent-artikel-card__titel {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-logb-blue);
}

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

.konsulent-artikel-card__dato {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.konsulent-artikel-card__uddrag {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.93rem;
    line-height: 1.5;
    /* 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: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-card, #e2e8f0);
}

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

.konsulent-kursus-item__thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-light, #f7fafc);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.konsulent-kursus-item__thumb--placeholder {
    background: linear-gradient(135deg, var(--color-bg-light, #f7fafc), var(--color-border-card, #e2e8f0));
}

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

.konsulent-kursus-item__titel {
    display: inline-block;
    font-weight: 600;
    color: var(--color-logb-blue);
    text-decoration: none;
    font-size: 1rem;
}

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

.konsulent-kursus-item__kort {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- "Mød flere" band: full-bleed carousel of the other konsulenter -----
   The band is a kolonner section with the site's banner gradient, so _grid.css
   gives it the edge-to-edge background and the constrained inner width. */
/* Grid/flex items size to their content by default, so the 50-card track would
   stretch the column and give the page a horizontal scrollbar. min-width: 0 lets
   the column shrink to the band width and leaves the clipping to the viewport. */
.kolonner--konsulent-flere-band .kolonne,
.kolonner--konsulent-flere-band .kolonne > .tekst,
.konsulent-flere {
    min-width: 0;
}

.konsulent-flere__titel {
    margin: 0 0 2rem;
    text-align: center;
    color: var(--color-white);
    font-size: clamp(1.35rem, 2.5vw, 1.7rem);
    font-weight: 600;
}

.konsulent-karrusel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.konsulent-karrusel__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.konsulent-karrusel__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    transition: transform 0.35s ease;
}

/* Four cards per view at full width; the JS steps in the same rhythm. */
.konsulent-kort {
    flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
    min-width: 0;
}

.konsulent-kort__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 0.85rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.konsulent-kort__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.konsulent-kort__foto {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    display: block;
}

/* Fallback for the few konsulenter without a photo */
.konsulent-kort__foto--initialer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-logb-blue);
    background: var(--color-bg-hover);
}

.konsulent-kort__tekst {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.konsulent-kort__navn {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--color-text-heading);
}

.konsulent-kort__rolle {
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--color-logb-blue);
}

.konsulent-karrusel__knap {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-white-80);
    border-radius: 50%;
    background: transparent;
    color: var(--color-white);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.konsulent-karrusel__knap:hover {
    background: rgba(255, 255, 255, 0.15);
}

.konsulent-karrusel__knap.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.konsulent-flere__alle-wrap {
    margin: 2rem 0 0;
    text-align: center;
}

/* ----- Closing CTA (same pattern as /it-konsulenter) ----- */
.kolonner--konsulent-cta {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

.kolonner--konsulent-cta .knap-gruppe {
    justify-content: flex-end;
}

/* ----- Mobile breakpoints ----- */
@media (max-width: 1120px) {
    .konsulent-kort {
        flex-basis: calc((100% - 2 * 1.25rem) / 3);
    }
}

@media (max-width: 860px) {
    .konsulent-kort {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

@media (max-width: 560px) {
    .konsulent-kort {
        flex-basis: 100%;
    }
}

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

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

    .kolonner--konsulent-detail > .kolonner-inner > .kolonne:nth-child(2) {
        padding-top: 0;
    }

    .kolonner--konsulent-detail .kolonne:nth-child(1) {
        margin-top: 0;
    }

    .konsulent-profile-card__photo {
        margin-top: 0;
        padding-top: 1.25rem;
    }

    .konsulent-tab {
        padding: 0.7rem 0.5rem;
        font-size: 0.9rem;
    }

    .konsulent-tabs__panels {
        padding: 1.25rem;
    }
}