/*--------------------------------------------------------------
 * Photo / Video Grid — Nordic Elementor
 *------------------------------------------------------------*/

/* ── Grid Container (Desktop) ─────────────────────────────── */
.nordic-pvg {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 480px;
    overflow: hidden;
}

/* ── Items ─────────────────────────────────────────────────── */
.nordic-pvg__item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.nordic-pvg__item img,
.nordic-pvg__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero spans full left column (both rows) */
.nordic-pvg__item--hero {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}

/* Item 2 — middle column, top row */
.nordic-pvg__item--2 {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
}

/* Item 3 — right column, top row */
.nordic-pvg__item--3 {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

/* Item 4 — right column, bottom row */
.nordic-pvg__item--4 {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
}

/* Item 5 — hidden on desktop by default (shown on mobile) */
.nordic-pvg__item--5 {
    display: none;
}

/* ── Play Button Overlay ──────────────────────────────────── */
.nordic-pvg__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 0, 0, 0.85);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.25s ease;
    z-index: 2;
    padding: 0;
}

.nordic-pvg__play svg {
    width: 32px;
    height: 32px;
}

.nordic-pvg__play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 0, 0, 1);
}

/* When video is paused (is-paused class toggled via JS) */
.nordic-pvg__item--hero.is-paused .nordic-pvg__play svg path {
    d: path("M19 15l14 9-14 9V15z"); /* play icon */
}

/* When video is playing (not paused) */
.nordic-pvg__item--hero:not(.is-paused) .nordic-pvg__play svg path {
    d: path("M16 14h5v20h-5z M27 14h5v20h-5z"); /* pause icon */
}

/* Hide the play/pause button while video is playing, unless hovered */
.nordic-pvg__item--hero:not(.is-paused) .nordic-pvg__play {
    opacity: 0;
}

.nordic-pvg__item--hero:hover .nordic-pvg__play {
    opacity: 1;
}

/* ── CTA Link ─────────────────────────────────────────────── */
.nordic-pvg__cta {
    margin-top: 16px;
    text-align: center;
}

.nordic-pvg__cta a {
    color: #D32F2F;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nordic-pvg__cta a:hover {
    color: #B71C1C;
}

/* ── Mobile Layout ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .nordic-pvg {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        height: auto !important;
    }

    /* Hero spans full width on mobile */
    .nordic-pvg__item--hero {
        grid-row: 1 / 2;
        grid-column: 1 / -1;
        aspect-ratio: 16 / 10;
    }

    /* Item 2 — left side, spans two rows */
    .nordic-pvg__item--2 {
        grid-row: 2 / 4;
        grid-column: 1 / 2;
        aspect-ratio: auto;
    }

    /* Item 3 — right side, top square */
    .nordic-pvg__item--3 {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        aspect-ratio: 1 / 1;
    }

    /* Item 4 — right side, bottom square */
    .nordic-pvg__item--4 {
        grid-row: 3 / 4;
        grid-column: 2 / 3;
        aspect-ratio: 1 / 1;
    }

    /* Item 5 — explicitly hidden on mobile */
    .nordic-pvg__item--5 {
        display: none !important;
    }

    .nordic-pvg__play {
        width: 48px;
        height: 48px;
    }

    .nordic-pvg__play svg {
        width: 24px;
        height: 24px;
    }
}