/* ═══════════════════════════════════════════
   CC Enheds Grid – Frontend Styles
   ═══════════════════════════════════════════ */

/* ─── Grid Container ─── */
.cc-unit-grid {
    display: grid;
    grid-template-columns: repeat(var(--cc-grid-columns, 3), 1fr);
    gap: var(--cc-grid-gap, 4px);
    width: 100%;
}

/* ─── Grid Item ─── */
.cc-unit-grid-item {
    position: relative;
    font-weight: 600;
    line-height: 1.3;
}

/* ─── Fuld bredde (manuel toggle) ─── */
.cc-unit-grid-item.is-full-width {
    grid-column: 1 / -1;
}

.cc-unit-grid-item.is-full-width .cc-unit-grid-item__tile {
    aspect-ratio: auto;
    height: var(--cc-tile-height, auto);
}

/* ─── Tile (det klikkbare billede) ─── */
.cc-unit-grid-item__tile {
    position: relative;
    display: block;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    height: var(--cc-tile-height, auto);
    background: #e0e0e0;
    border-radius: 8px;
    border: 4px solid transparent;
    box-sizing: border-box;
    transition: height 0.38s ease, border-color 0.2s ease;
}

/* Når en tile-height er sat, drop aspect-ratio */
.cc-unit-grid:not(.has-open)[style*='--cc-tile-height'] .cc-unit-grid-item__tile {
    aspect-ratio: auto;
}

/* Krympe alle tiles når en expander er åben */
.cc-unit-grid.has-open .cc-unit-grid-item .cc-unit-grid-item__tile {
    aspect-ratio: auto;
}

.cc-unit-grid-item__tile:focus-visible {
    outline: 3px solid #0073aa;
    outline-offset: -3px;
}

.cc-unit-grid-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cc-unit-grid-item__tile:hover .cc-unit-grid-item__image {
    transform: scale(1.05);
}

.cc-unit-grid-item.is-active .cc-unit-grid-item__tile {
    border-color: var(--wp--preset--color--custom-knap-farve, #0073aa);
}

/* ─── Titel-overlay ─── */
.cc-unit-grid-item__title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
    color: #fff !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    pointer-events: none;
    font-size: inherit !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* ─── +/× ikon ─── */
.cc-unit-grid-item__icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    transition: background 0.2s;
}

.cc-unit-grid-item.is-active .cc-unit-grid-item__icon {
    background: rgba(0, 0, 0, 0.75);
}

/* ─── Skjult panel (kilde til expander-indhold) ─── */
.cc-unit-grid-item__panel {
    display: none !important;
}

/* Panel synligt når det er flyttet ind i expanderen */
.cc-unit-grid-item__expander .cc-unit-grid-item__panel {
    display: block !important;
}

/* ═══════════════════════════════════════════
   Expander (insat af JS)
   ═══════════════════════════════════════════ */
.cc-unit-grid-item__expander {
    grid-column: 1 / -1;
    position: relative;
    background: #fff;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.38s ease,
        opacity 0.38s ease,
        padding 0.38s ease;
}

.cc-unit-grid-item__expander.is-open {
    max-height: 2000px;
    opacity: 1;
    padding: 30px 30px 35px;
    border-radius: 8px;
}

/* Fade-switch: indholdet fader ud/ind ved skift */
.cc-unit-grid-item__expander .cc-unit-grid-item__panel {
    transition: opacity 0.25s ease;
    opacity: 1;
}

.cc-unit-grid-item__expander.is-switching .cc-unit-grid-item__panel {
    opacity: 0;
}

/* Pil der peger op mod den valgte tile */
/* Pil (skjult da border-top er fjernet) */
.cc-unit-grid-item__expander-arrow {
    display: none;
}

/* Luk-knap (×) */
.cc-unit-grid-item__expander-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: var(--wp--preset--color--contrast, #1e1e1e);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.2s;
}

.cc-unit-grid-item__expander-close:hover {
    opacity: 0.8;
}

.cc-unit-grid-item__expander-body > *:first-child {
    margin-top: 0;
}

.cc-unit-grid-item__expander-body > *:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .cc-unit-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cc-unit-grid-item__expander.is-open {
        padding: 20px;
    }

    .cc-unit-grid-item__title {
        font-size: 0.85em;
        padding: 20px 8px 8px;
    }
}

@media (max-width: 480px) {
    .cc-unit-grid {
        grid-template-columns: 1fr !important;
    }

    .cc-unit-grid-item__expander.is-open {
        padding: 15px;
    }
}