.fa-main {
    padding: 40px 20px;
}

.fa-container {
    max-width: 1400px;
    margin: 0 auto;
}

.fa-header {
    margin-bottom: 35px;
}

.fa-page-title {
    margin-bottom: 12px;
}

.fa-page-description {
    max-width: 900px;
}

.fa-grid {
    display: grid;
    gap: 28px;
}

.fa-card {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    background: #fff;
}

.fa-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.fa-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fa-card-content {
    padding: 20px;
}

.fa-card-title {
    margin-top: 0;
    margin-bottom: 10px;
}

.fa-card-text > :last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| NIVEAU 0 – HOVEDEMNER
|--------------------------------------------------------------------------
*/

.fa-level-0 {
    grid-template-columns:
        repeat(auto-fit, minmax(340px, 1fr));
}

.fa-level-0 .fa-card-image {
    aspect-ratio: 16 / 9;
}

.fa-level-0 .fa-card-title {
    font-size: 1.7rem;
}


/*
|--------------------------------------------------------------------------
| NIVEAU 1
|--------------------------------------------------------------------------
*/

.fa-level-1 {
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
}

.fa-level-1 .fa-card-image {
    aspect-ratio: 4 / 3;
}

.fa-level-1 .fa-card-title {
    font-size: 1.4rem;
}


/*
|--------------------------------------------------------------------------
| NIVEAU 2
|--------------------------------------------------------------------------
*/

.fa-level-2 {
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
}

.fa-level-2 .fa-card-image {
    aspect-ratio: 1 / 1;
}

.fa-level-2 .fa-card-title {
    font-size: 1.2rem;
}


/*
|--------------------------------------------------------------------------
| NIVEAU 3 OG DYBERE
|--------------------------------------------------------------------------
*/

.fa-level-3,
.fa-level-4,
.fa-level-5,
.fa-level-6 {
    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));
}


/*
|--------------------------------------------------------------------------
| ENVIRA
|--------------------------------------------------------------------------
*/

.fa-envira-gallery {
    margin-top: 30px;
}


/*
|--------------------------------------------------------------------------
| DIAGNOSE
|--------------------------------------------------------------------------
*/

.fa-warning {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #c58a00;
    background: #fff8df;
}


/*
|--------------------------------------------------------------------------
| MOBIL
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .fa-main {
        padding: 25px 15px;
    }

    .fa-grid {
        grid-template-columns: 1fr;
    }
}

/* 0.1.7: balancer afstanden mellem WordPress-sidetitlen og første kortrække
   på de to smalle KPhoto-layouts. Tablet-landscape forbliver reference. */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    .fa-root {
        margin-top: -20px;
    }
}

/* KPhoto-telefoner bruges i landscape uden for lightbox.
   Efter at den redundante sideoverskrift er fjernet, gives lidt luft efter
   breadcrumb og hovedemner vises i to kolonner. */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    .fa-root {
        margin-top: 10px;
    }

    .fa-level-0 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}


/*
 * 0.1.10 FORSØG – mobil-landscape: kompakte 2-kolonne-kort og native scroll snap.
 * Én kortrække dimensioneres til det frie område under sticky header/breadcrumb.
 */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    html {
        scroll-snap-type: y proximity;
        scroll-padding-top: 90px;
        scroll-behavior: smooth;
    }

    .fa-root {
        margin-top: 14px;
        margin-bottom: 18px;
    }

    .fa-level-0 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 18px;
    }

    .fa-level-0 .fa-card {
        scroll-snap-align: center;
        scroll-snap-stop: normal;
    }

    .fa-level-0 .fa-card-image {
        aspect-ratio: 16 / 8.2;
    }

    .fa-level-0 .fa-card-content {
        padding: 12px 16px 13px;
    }

    .fa-level-0 .fa-card-title {
        margin-bottom: 6px;
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .fa-level-0 .fa-card-text {
        font-size: 0.95rem;
        line-height: 1.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/*
 * 0.1.11 FORSØG – mobil-landscape: deterministisk række-snap.
 * Native proximity-snap fra 0.1.10 deaktiveres; JS centrerer nærmeste række
 * efter scrollstop. Reel bundluft etableres med padding, så den ikke kollapser.
 */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    html {
        scroll-snap-type: none;
        scroll-padding-top: 0;
    }

    .fa-root {
        margin-bottom: 0;
        padding-bottom: var(--kp-fa-end-space, 18px);
    }

    .fa-level-0 .fa-card {
        scroll-snap-align: none;
    }
}


/*
 * 0.1.16 – mobil-landscape, underemner:
 * - samme kompakte kortgeometri som hovedemner
 * - mindre afstand fra breadcrumb til emneoverskrift
 */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    /* Taxonomisidens overskrift bevares, men trækkes op mod breadcrumb. */
    .fa-main {
        padding-top: 12px;
    }

    .fa-header {
        margin-bottom: 18px;
    }

    /* Alle niveauer bruger samme 2-kolonne-geometri som niveau 0. */
    .fa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 18px;
    }

    .fa-grid .fa-card {
        scroll-snap-align: none;
    }

    .fa-grid .fa-card-image {
        aspect-ratio: 16 / 8.2;
    }

    .fa-grid .fa-card-content {
        padding: 12px 16px 13px;
    }

    .fa-grid .fa-card-title {
        margin-bottom: 6px;
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .fa-grid .fa-card-text {
        font-size: 0.95rem;
        line-height: 1.25;
    }
}


/*
 * 0.1.17 – mobil-landscape, underemneside:
 * Reducér Astras/primary's ekstra topafstand; overskrift og beskrivelse bevares.
 */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    body.tax-fa_emne #primary.fa-main {
        margin-top: 0 !important;
        padding-top: 12px !important;
    }

    body.tax-fa_emne #primary.fa-main .fa-header {
        margin-top: 0;
        margin-bottom: 18px;
    }
}


/*
 * 0.1.18 – mobil-landscape:
 * Sidste række skal stadig kunne snappe, men uden den store kunstige afstand
 * til footeren. JS beregner kun den nødvendige plads til snap.
 */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    .fa-root {
        padding-bottom: var(--kp-fa-end-space, 12px);
    }
}


/*
 * 0.1.19 – mobil-landscape, underemneside:
 * Astra ejer den vandrette content-container. Fjern kun fa-main's ekstra
 * 20px side-padding, så overskrift og grid flugter med Fotoarkiv-forsiden
 * og header/breadcrumbs indholdslinje.
 */
@media (orientation: landscape) and (max-height: 600px) and (any-pointer: coarse) {
    body.tax-fa_emne #primary.fa-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}