/**
 * archive-cases.css — styles for post_type_archive(cases) = /cases/.
 *
 * Matcher design-sproget fra vehicle-inspection-archive.css og compare-archive.css:
 * hvid baggrund, rolig typografi, 1140px content-max-width, soft-shadow kort.
 *
 * Layout:
 *   main.fx-main--cases-archive
 *     ├── .fx-breadcrumb-wrap
 *     ├── section.fx-hero.fx-hero--cases
 *     ├── section.fx-logo-carousel-wrap       (reusable)
 *     ├── section.fx-cases-grid-section
 *     │     ├── header.fx-cases-grid-section__header
 *     │     └── ul.fx-cases-grid
 *     │           └── li.fx-cases-card × N
 *     └── section.fx-cta                      (reusable)
 */

/* Wrapper --------------------------------------------------------------- */
.fx-main--cases-archive {
    background: var(--fx-bg, #fff);
    color: var(--fx-text, #2d2f31);
}

/* Hero uden medie — centrér teksten. Når redaktøren ikke uploader hero-billede
 * på "Cases Archive Settings", får hero-sektionen .fx-hero--cases-text (i stedet
 * for .fx-hero--cases), så layoutet ikke kollapser til en tom højre-kolonne. */
.fx-main--cases-archive .fx-hero--cases-text .fx-hero__container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.fx-main--cases-archive .fx-hero--cases-text .fx-hero__content {
    max-width: 760px;
}

.fx-main--cases-archive .fx-hero--cases-text .fx-hero__actions {
    justify-content: center;
}

/* Normaliser sektion-padding (samme mønster som vehicle-inspection-archive) */
.fx-main--cases-archive > section:not(.fx-hero):not(.fx-logo-carousel-wrap):not(.fx-cta) {
    padding-top:    var(--fx-section-py, 96px);
    padding-bottom: var(--fx-section-py, 96px);
}

/* Grid-sektion ---------------------------------------------------------- */
.fx-cases-grid-section {
    padding-left:  var(--fx-gutter, 24px);
    padding-right: var(--fx-gutter, 24px);
}

.fx-cases-grid-section__container {
    max-width: var(--fx-max-content, 1140px);
    margin:    0 auto;
}

.fx-cases-grid-section__header {
    margin-bottom: clamp(32px, 4vw, 48px);
    text-align:    center;
}

.fx-cases-grid-section__heading {
    margin: 0 0 12px;
    font-family:    var(--fx-font-heading, "Ubuntu", sans-serif);
    font-size:      clamp(28px, 3.4vw, 44px);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.01em;
    color:          var(--fx-heading, #1a1b1d);
}

.fx-cases-grid-section__intro {
    max-width:   680px;
    margin:      0 auto;
    font-family: var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:   clamp(16px, 1.2vw, 18px);
    line-height: 1.55;
    color:       var(--fx-text-muted, #5f6770);
}

/* Grid ------------------------------------------------------------------ */
.fx-cases-grid {
    display:                grid;
    grid-template-columns:  repeat(auto-fill, minmax(280px, 1fr));
    gap:                    clamp(20px, 2.2vw, 28px);
    list-style:             none;
    margin:                 0;
    padding:                0;
}

/* Kort ------------------------------------------------------------------ */
.fx-cases-card {
    position:   relative;
    display:    flex;
    margin:     0;
    padding:    0;
    list-style: none;
}

.fx-cases-card__inner {
    position:       relative;
    display:        flex;
    flex-direction: column;
    width:          100%;
    background:     var(--fx-bg, #fff);
    border:         1px solid var(--fx-border, rgba(45, 47, 49, 0.10));
    border-radius:  20px;
    overflow:       hidden;
    box-shadow:     0 1px 2px rgba(17, 24, 39, 0.04);
    transition:     transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fx-cases-card:hover .fx-cases-card__inner,
.fx-cases-card:focus-within .fx-cases-card__inner {
    transform:     translateY(-2px);
    box-shadow:    0 12px 32px rgba(17, 24, 39, 0.10);
    border-color:  var(--fx-border-strong, rgba(45, 47, 49, 0.18));
}

/* Heldækkende link — gør hele kortet klikbart uden at wrappe det hele i en
 * <a> (vi vil have strukturel h3 inde i <article>). Absolute overlay over
 * alt undtagen interaktive children. */
.fx-cases-card__link {
    position: absolute;
    inset:    0;
    z-index:  1;
    border-radius: inherit;
    text-indent: -9999px;
    overflow: hidden;
}

.fx-cases-card__link:focus-visible {
    outline:        3px solid var(--fx-focus, #004642);
    outline-offset: 2px;
}

/* Media (featured image) */
.fx-cases-card__media {
    position:        relative;
    aspect-ratio:    16 / 10;
    background:      var(--fx-surface-muted, #f5f6f7);
    overflow:        hidden;
}

.fx-cases-card__media-img,
.fx-cases-card__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.fx-cases-card:hover .fx-cases-card__media-img,
.fx-cases-card:hover .fx-cases-card__media img {
    transform: scale(1.03);
}

/* Body */
.fx-cases-card__body {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding:        clamp(20px, 2vw, 24px);
    flex:           1;
}

.fx-cases-card__badge {
    align-self:      flex-start;
    padding:         4px 10px;
    border-radius:   999px;
    background:      var(--fx-mint, #E0F8DE);
    color:           var(--fx-dark-green, #004642);
    font-family:     var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:       12px;
    font-weight:     600;
    line-height:     1.4;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
}

.fx-cases-card__title {
    margin:         0;
    font-family:    var(--fx-font-heading, "Ubuntu", sans-serif);
    font-size:      clamp(18px, 1.4vw, 22px);
    font-weight:    700;
    line-height:    1.25;
    letter-spacing: -0.005em;
    color:          var(--fx-heading, #1a1b1d);
}

.fx-cases-card__title-text {
    display: block;
}

.fx-cases-card__summary {
    margin:      0;
    font-family: var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:   15px;
    line-height: 1.55;
    color:       var(--fx-text-muted, #5f6770);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer (metric + logo) */
.fx-cases-card__footer {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             16px;
    padding-top:     clamp(12px, 1.4vw, 16px);
    border-top:      1px solid var(--fx-border, rgba(45, 47, 49, 0.08));
    margin-top:      auto;
}

.fx-cases-card__metric {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.fx-cases-card__metric-value {
    display:        flex;
    align-items:    baseline;
    gap:            2px;
    font-family:    var(--fx-font-heading, "Ubuntu", sans-serif);
    font-weight:    700;
    line-height:    1;
    letter-spacing: -0.02em;
    color:          var(--fx-dark-green, #004642);
}

.fx-cases-card__metric-number {
    font-size: clamp(32px, 3vw, 42px);
}

.fx-cases-card__metric-unit {
    font-size:   clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    color:       var(--fx-dark-green, #004642);
}

.fx-cases-card__metric-label {
    margin:      0;
    font-family: var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:   12px;
    font-weight: 500;
    line-height: 1.3;
    color:       var(--fx-text-muted, #5f6770);
    max-width:   180px;
}

.fx-cases-card__logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-width:       40%;
    flex-shrink:     0;
}

.fx-cases-card__logo-img {
    display:    block;
    max-width:  120px;
    max-height: 48px;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* CTA-row (pil + "Read case") — appears nederst som affordance; layer 2
 * så overlay-linket stadig dækker den. z-index bruges ikke, det er bare
 * visuel pynt under footeren. */
.fx-cases-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    align-self:      flex-start;
    font-family:     var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    color:           var(--fx-dark-green, #004642);
    transition:      gap 0.2s ease;
}

.fx-cases-card:hover .fx-cases-card__cta {
    gap: 10px;
}

.fx-cases-card__cta-arrow {
    transition: transform 0.25s ease;
}

.fx-cases-card:hover .fx-cases-card__cta-arrow {
    transform: translateX(2px);
}

/* Empty state ----------------------------------------------------------- */
.fx-cases-grid__empty {
    margin:        48px auto;
    max-width:     480px;
    text-align:    center;
    font-family:   var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:     18px;
    line-height:   1.5;
    color:         var(--fx-text-muted, #5f6770);
}

/* Pagination ------------------------------------------------------------ */
.fx-cases-pagination {
    margin-top: clamp(40px, 4vw, 56px);
}

.fx-cases-pagination__list {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    list-style:      none;
    margin:          0;
    padding:         0;
}

.fx-cases-pagination__item a,
.fx-cases-pagination__item span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding:         0 12px;
    border:          1px solid var(--fx-border, rgba(45, 47, 49, 0.12));
    border-radius:   999px;
    background:      var(--fx-bg, #fff);
    color:           var(--fx-text, #2d2f31);
    font-family:     var(--fx-font-body, "Ubuntu", sans-serif);
    font-size:       14px;
    font-weight:     500;
    line-height:     1;
    text-decoration: none;
    transition:      background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fx-cases-pagination__item a:hover,
.fx-cases-pagination__item a:focus-visible {
    background:    var(--fx-mint, #E0F8DE);
    border-color:  var(--fx-dark-green, #004642);
    color:         var(--fx-dark-green, #004642);
}

.fx-cases-pagination__item .current {
    background:    var(--fx-dark-green, #004642);
    border-color:  var(--fx-dark-green, #004642);
    color:         #fff;
}

/* Responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
    .fx-cases-grid {
        grid-template-columns: 1fr;
    }

    .fx-cases-card__footer {
        flex-wrap: wrap;
    }

    .fx-cases-card__logo {
        max-width: 50%;
    }
}