/* mod_portfolio_collection 1.0.1 */

.portfolio-collection {
    --portfolio-accent: #65000f;
    --portfolio-dark: #210003;
    --portfolio-paper: #f5f3ec;
    --portfolio-columns: 3;
    width: 100%;
    padding: clamp(100px, 11vw, 170px) 0;
    background:
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--portfolio-accent) 7%, transparent), transparent 32%),
        var(--portfolio-paper);
    color: #211c1a;
}

.portfolio-collection *,
.portfolio-collection *::before,
.portfolio-collection *::after {
    box-sizing: border-box;
}

.portfolio-collection__header,
.portfolio-collection__grid,
.portfolio-collection__empty {
    width: min(1256px, calc(100% - 112px));
    margin-inline: auto;
}

.portfolio-collection__header {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: clamp(48px, 8vw, 120px);
    align-items: end;
    margin-bottom: clamp(66px, 8vw, 112px);
}

.portfolio-collection__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    color: var(--portfolio-accent);
    font: 700 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
}

.portfolio-collection__eyebrow span {
    width: 35px;
    height: 1px;
    background: currentColor;
}

.portfolio-collection__header h1 {
    max-width: 790px;
    margin: 0;
    color: inherit;
    font: 400 clamp(58px, 7vw, 100px)/.96 Georgia, "Times New Roman", serif;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.portfolio-collection__intro {
    max-width: 520px;
    margin: 0;
    color: #68615b;
    font: 500 16px/1.8 "Helvetica Neue", Arial, sans-serif;
}

.portfolio-collection__grid {
    display: grid;
    grid-template-columns: repeat(var(--portfolio-columns), minmax(0, 1fr));
    gap: clamp(28px, 4vw, 58px) 24px;
}

.portfolio-collection__card {
    min-width: 0;
}

.portfolio-collection__card.is-featured {
    grid-column: 1 / -1;
}

.portfolio-collection__open {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.portfolio-collection__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 5px;
    background: #dfd9d0;
    box-shadow: 0 22px 55px rgb(33 0 3 / 10%);
}

.portfolio-collection__card.is-featured .portfolio-collection__media {
    aspect-ratio: 21 / 9;
}

.portfolio-collection__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(25 3 5 / 54%), transparent 52%);
    opacity: .72;
    content: "";
    transition: opacity .35s ease;
}

.portfolio-collection__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}

.portfolio-collection__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background:
        linear-gradient(135deg, transparent 40%, color-mix(in srgb, var(--portfolio-accent) 12%, transparent) 40% 60%, transparent 60%),
        #e4ded5;
    color: color-mix(in srgb, var(--portfolio-dark) 22%, transparent);
    font: 400 clamp(82px, 12vw, 170px)/1 Georgia, "Times New Roman", serif;
}

.portfolio-collection__number {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--portfolio-paper);
    color: var(--portfolio-dark);
    font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.portfolio-collection__view {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font: 700 12px/1.4 "Helvetica Neue", Arial, sans-serif;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.portfolio-collection__view b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 50%;
    font-weight: 400;
}

.portfolio-collection__info {
    display: block;
    padding: 21px 2px 0;
}

.portfolio-collection__meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
    color: var(--portfolio-accent);
    font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.portfolio-collection__info strong {
    display: block;
    font: 400 clamp(28px, 3vw, 43px)/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: -.045em;
}

.portfolio-collection__open:hover .portfolio-collection__media img,
.portfolio-collection__open:focus-visible .portfolio-collection__media img {
    transform: scale(1.035);
    filter: saturate(1.08);
}

.portfolio-collection__open:hover .portfolio-collection__media::after,
.portfolio-collection__open:focus-visible .portfolio-collection__media::after {
    opacity: 1;
}

.portfolio-collection__open:hover .portfolio-collection__view,
.portfolio-collection__open:focus-visible .portfolio-collection__view {
    transform: translateY(0);
    opacity: 1;
}

.portfolio-collection__open:focus-visible {
    outline: 3px solid var(--portfolio-accent);
    outline-offset: 7px;
    border-radius: 5px;
}

.portfolio-collection__empty {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border: 1px dashed color-mix(in srgb, var(--portfolio-dark) 28%, transparent);
    border-radius: 5px;
    color: #68615b;
}

.portfolio-collection__empty span {
    color: color-mix(in srgb, var(--portfolio-accent) 28%, transparent);
    font: 400 90px/1 Georgia, "Times New Roman", serif;
}

.portfolio-collection__empty p {
    max-width: 300px;
    margin: 0;
    font: 500 15px/1.7 "Helvetica Neue", Arial, sans-serif;
}

/* Projectvenster */
.portfolio-collection__dialog {
    width: min(1080px, calc(100% - 48px));
    max-width: none;
    max-height: min(820px, calc(100dvh - 48px));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 6px;
    background: var(--portfolio-paper);
    color: #211c1a;
    box-shadow: 0 35px 110px rgb(20 0 3 / 46%);
}

.portfolio-collection__dialog[open] {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
}

.portfolio-collection__dialog::backdrop {
    background: rgb(19 1 4 / 78%);
    backdrop-filter: blur(10px);
}

.portfolio-collection__close {
    position: fixed;
    z-index: 5;
    top: max(36px, calc((100dvh - min(820px, 100dvh - 48px)) / 2 + 14px));
    right: max(36px, calc((100vw - min(1080px, 100vw - 48px)) / 2 + 14px));
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0 0 3px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 50%;
    background: rgb(33 0 3 / 82%);
    color: #fff;
    font: 300 28px/1 Arial, sans-serif;
    cursor: pointer;
}

.portfolio-collection__dialog-media {
    min-height: 610px;
    background:
        linear-gradient(145deg, var(--portfolio-dark), var(--portfolio-accent));
}

.portfolio-collection__dialog-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-collection__dialog-media > span {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgb(255 255 255 / 18%);
    font: 700 12px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}

.portfolio-collection__dialog-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(44px, 6vw, 82px);
}

.portfolio-collection__dialog-meta {
    margin: 0 0 20px;
    color: var(--portfolio-accent);
    font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.portfolio-collection__dialog h2 {
    margin: 0;
    font: 400 clamp(42px, 5vw, 68px)/1 Georgia, "Times New Roman", serif;
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
}

.portfolio-collection__dialog-content > p:not(.portfolio-collection__dialog-meta) {
    margin: 28px 0 0;
    color: #68615b;
    font: 500 15px/1.8 "Helvetica Neue", Arial, sans-serif;
    white-space: pre-line;
}

.portfolio-collection__dialog-content > a {
    align-self: flex-start;
    margin-top: 34px;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    color: var(--portfolio-accent);
    text-decoration: none;
    font: 700 13px/1.4 "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 900px) {
    .portfolio-collection__header,
    .portfolio-collection__grid,
    .portfolio-collection__empty {
        width: min(100% - 56px, 680px);
    }

    .portfolio-collection__header {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .portfolio-collection__grid {
        grid-template-columns: 1fr;
    }

    .portfolio-collection__card.is-featured {
        grid-column: auto;
    }

    .portfolio-collection__card.is-featured .portfolio-collection__media {
        aspect-ratio: 16 / 10;
    }

    .portfolio-collection__dialog[open] {
        grid-template-columns: 1fr;
    }

    .portfolio-collection__dialog-media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .portfolio-collection__dialog-content {
        padding: 38px 30px 44px;
    }
}

@media (max-width: 560px) {
    .portfolio-collection {
        padding-block: 82px;
    }

    .portfolio-collection__header,
    .portfolio-collection__grid,
    .portfolio-collection__empty {
        width: calc(100% - 36px);
    }

    .portfolio-collection__header h1 {
        font-size: clamp(49px, 15vw, 67px);
    }

    .portfolio-collection__view {
        transform: none;
        opacity: 1;
    }

    .portfolio-collection__dialog {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 20px);
    }

    .portfolio-collection__close {
        top: 20px;
        right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-collection *,
    .portfolio-collection *::before,
    .portfolio-collection *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}