/**
 * Indeholder styles, der er UNIKKE for forsiden (home.html).
 * Da denne fil importeres sidst i main.css, vil dens regler typisk vinde
 * over mere generelle regler i tilfælde af samme specificitet.
 */

body.page-home .grid--3.has-bg-color .grid-inner {
    max-width: var(--home-cards-measure);
    gap: var(--page-space);
    padding-inline: var(--none-space);
}

body.page-home .service-card h3,
body.page-home .service-card p {
    text-align: var(--center-align);
}

/* Nyhedsboksene følger de tre spor i produktgitteret. */
@media (min-width: 48.0625rem) {
    body.page-home .columns--1-2.has-bg-color .columns-inner {
        max-width: var(--home-cards-measure);
        padding-inline: var(--none-space);
        gap: var(--page-space);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.page-home .columns--1-2.has-bg-color .columns-inner > .column:last-child {
        grid-column: 2 / span 2;
    }

    body.page-home .feed-inner--nyheder {
        gap: var(--page-space);
    }
}

body.page-home .feed-inner--nyheder .feed-item {
    box-shadow: var(--service-card-shadow);
}

body.page-home .feed-inner--nyheder .feed-item-link {
    padding: var(--none-space);
}

body.page-home .feed-inner--nyheder .feed-item-billede img {
    margin-bottom: var(--none-space);
    border-radius: var(--card-radius);
    object-fit: cover;
}

body.page-home .feed-inner--nyheder .feed-item-titel,
body.page-home .feed-inner--nyheder .feed-item-dato {
    padding-inline: var(--section-space);
}

body.page-home .feed-inner--nyheder .feed-item-titel {
    padding-top: var(--hair-space);
}

body.page-home .feed-inner--nyheder .feed-item-dato {
    padding-bottom: var(--item-space);
}

body.page-home .hero {
    padding-top: var(--block-space);
    padding-bottom: var(--gutter-space);
}

body.page-home .hero h1 {
    margin-bottom: var(--hair-space);
}

body.page-home .hero .hero-description {
    font-size: var(--body-font-size);
    margin-top: var(--none-space);
}

body.page-home .columns.has-bg-image {
    min-height: var(--about-band-min-height);
}

body.page-home .columns.has-bg-image .columns-inner {
    max-width: none;
    padding: var(--about-band-padding);
}

body.page-home .columns.has-bg-image .column:not(:empty):first-child {
    background-color: var(--box-background-color);
    max-width: var(--about-box-measure);
    height: auto;
    padding: var(--about-box-padding);
}

@media (min-width: 48.0625rem) {
    body.page-home .columns.has-bg-image .columns-inner {
        width: var(--about-row-measure);
        margin-inline: auto;
        padding-inline: var(--none-space);
        grid-template-columns: 57.8% minmax(0, 1fr);
    }

    body.page-home .columns.has-bg-image .column:not(:empty):first-child {
        width: 100%;
        max-width: none;
        height: auto;
        transform: translateX(calc(-1 * var(--about-box-space)));
    }
}

body.page-home .columns.has-bg-image .column:not(:empty):first-child h2 {
    font-size: var(--heading-3-font-size);
    font-weight: var(--about-font-weight);
    line-height: var(--heading-line-height);
}

body.page-home .columns.has-bg-image .column:not(:empty):first-child p,
body.page-home .columns.has-bg-image .column:not(:empty):first-child .arrow-link {
    font-size: var(--small-font-size);
    font-weight: var(--about-font-weight);
    line-height: var(--body-line-height);
}

body.page-home .columns.has-bg-image .column:not(:empty):first-child .link {
    margin-top: var(--block-space);
}

/* Specifik styling for hero-sektionen øverst på forsiden. */
.hero-section {
    /* Fjernet background-color - flyttet til .hero-section-wrapper */
    padding: var(--control-space) 0 var(--gutter-space) 0;
    text-align: var(--center-align);
    position: relative;
}

/* Ny klasse for hero section wrapper - får hele bredden som "Hvem er vi" sektionen */
.hero-section-wrapper {
    background-color: var(--body-background-color);
    padding: 0;
}

/* Specifikke overrides for overskrifter i hero-sektionen for at matche designet præcist. */
.hero-section h1 {
    /* important: Disse regler sikrer, at hero-teksten er unik og ikke påvirkes af generelle h1-styles. */
    font-size: var(--heading-1-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--body-text-color);
    margin-bottom: var(--hair-space);
    line-height: var(--heading-line-height);
    white-space: nowrap; /* Forhindrer tekst-wrap */
    text-align: var(--center-align);
}

.hero-section h5 {
    /* important: Disse regler sikrer, at hero-underoverskriften er unik. */
    font-size: var(--heading-4-font-size);
    color: var(--body-text-color);
    font-weight: var(--body-font-weight);
    line-height: var(--compact-line-height);
    max-width: 100%;
    margin: 0 auto 0 auto;
    text-align: var(--center-align);
    white-space: nowrap;
}

/* Deaktiverer hover-effekten for kort KUN i hero-sektionen. */
.hero-section .content-column:hover {
    /* important: Denne regel fjerner hover-effekten fra .column-with-shadow:hover. */
    transform: none;
}

/* Giver nyhedssektionen på forsiden en specifik baggrundsfarve. */
.news-section {
    background-color: var(--body-background-color);
    padding: var(--page-space) 0;
}

.news-feed-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter-space);
    padding-top: var(--gutter-space);
}

/* Giver "Hvem er vi?" sektionen på forsiden en specifik baggrund.
 * Replaced non-brand purple gradient with LOGB brand gradient */
.about-section {
    position: relative;
    background: var(--banner-background-color);
    color: var(--banner-text-color);
    padding: var(--page-space) 0;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-color);
    z-index: var(--raised-layer);
}

/* Gradient sektioner med hvid tekst */
.gradient-section {
    background: var(--banner-background-color);
    color: var(--banner-text-color);
    padding: var(--section-space) 0 var(--control-space) 0; /* Minimal padding i bunden som original */
}

.gradient-section h1,
.gradient-section h2,
.gradient-section h3,
.gradient-section h4,
.gradient-section h5,
.gradient-section h6,
.gradient-section p,
.gradient-section a,
.gradient-section .content-heading,
.gradient-section .text-block {
    color: var(--banner-text-color);
}

/* Logo wall: one-row carousel under the last band.
   Same chrome as .testimonial-carousel: the track is a block with a
   definite width, so flex-basis percentages resolve to a visible cell. */
.logo-wall-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 var(--band-space);
}

.logo-wall-carousel__viewport {
    width: 100%;
    overflow: hidden;
}

.logo-wall-carousel__button {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: var(--center-align);
    justify-content: var(--center-align);
    width: var(--band-space);
    padding: 0;
    border: none;
    background: var(--body-background-color);
    color: var(--body-link-color);
    font-size: var(--heading-1-font-size);
    line-height: var(--heading-line-height);
    cursor: pointer;
    z-index: var(--front-layer);
    transition: color var(--fast-transition);
}

.logo-wall-carousel__button:hover:not(.is-disabled) {
    color: var(--body-link-hover-color);
}

.logo-wall-carousel__button.is-disabled {
    color: var(--border-color);
    cursor: default;
    pointer-events: none;
}

.logo-wall-carousel__prev {
    left: 0;
}

.logo-wall-carousel__next {
    right: 0;
}