/* ----------------------------------------------------------
   DINGETHAL.DESIGN

   Projekt:
   arsvenditio · INKE HAGEN · Monster & Kreaturen

   Komponente:
   MonsterGalerie – Stufe 1 und Werkdetail

   Datei:
   inke-hagen-monstergalerie.css

   Beschreibung:
   Responsive Ausstellung der Originalzeichnungen. Stufe 1
   zeigt die Werke mit virtuellem Passepartout und Status.

   Version:
   0.5.2

   Entwicklung:
   Mario Dingethal

   © DINGETHAL.DESIGN
---------------------------------------------------------- */

@font-face {
    font-family: "PTSans-Narrow";
    src:
        url("../../assets/fonts/PTSans-Narrow/PTSansNarrow-Regular.woff2")
        format("woff2"),
        url("../../assets/fonts/PTSans-Narrow/PTSansNarrow-Regular.woff")
        format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "PTSans-NarrowBold";
    src:
        url("../../assets/fonts/PTSans-NarrowBold/PTSansNarrow-Bold.woff2")
        format("woff2"),
        url("../../assets/fonts/PTSans-NarrowBold/PTSansNarrow-Bold.woff")
        format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --ih-red: #d20a11;
    --ih-black: #000;
    --ih-white: #fff;
    --ih-grey: #707070;
    --ih-light-grey: #ececec;
    --ih-frame-grey: #d6d6d6;
    --ih-content-width: 1320px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--ih-white);
}

body {
    margin: 0;
    background: var(--ih-white);
    color: var(--ih-black);
    font-family: "PTSans-Narrow", "Arial Narrow", Arial, sans-serif;
}

button,
a {
    font: inherit;
}

button {
    border-radius: 0;
}

[hidden] {
    display: none !important;
}

.monsterGalerieSeite {
    width: min(100%, var(--ih-content-width));
    min-height: 60vh;
    margin: 0 auto;
    padding: 24px 28px 72px;
}

.monsterGalerieKopf {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.monsterGalerieEingang {
    width: min(100%, 405px);
}

.seitenTitel {
    margin: 0 0 10px;
    color: var(--ih-red);
    font-family: "Rubik Dirt", cursive;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 0.9;
    text-align: center;
}

.ars-seitenUntertitel {
    margin: 0 0 36px;
    color: var(--ars-color-grey, #666666);
    font-family: var(--ars-font-body, "PTSans-Narrow", "Arial Narrow", Arial, sans-serif);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
}

.monsterGalerieGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 42px 28px;
}

.monsterGalerieWerk {
    appearance: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.monsterGalerieWerk__bildWrap {
    --passepartout-breite: clamp(28px, 4vw, 50px);
    --rahmen-breite: clamp(15px, 1.5vw, 20px);

    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: var(--passepartout-breite);
    background: var(--ih-white);
    border: 1px solid var(--ih-frame-grey);
    box-shadow: inset 0 0 0 var(--rahmen-breite) var(--ih-light-grey);
    overflow: hidden;
}

.monsterGalerieWerk__bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}

.monsterGalerieWerk:hover .monsterGalerieWerk__bild,
.monsterGalerieWerk:focus-visible .monsterGalerieWerk__bild {
    transform: scale(1.025);
}

.monsterGalerieWerk__titel {
    display: block;
    margin-top: 12px;

    color: var(--ih-grey);

    font-family: "PTSans-Narrow", "Arial Narrow", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;

    text-transform: none;

    transition: color 180ms ease;
}

.monsterGalerieLaden,
.monsterGalerieLeer,
.monsterGalerieFehler {
    grid-column: 1 / -1;
    margin: 50px auto;
    color: var(--ih-grey);
    font-family: "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}

/* STUFE 2 bleibt funktionsfähig und wird später final gestaltet. */

#werkDetail {
    margin-top: 50px;
    padding-top: 36px;
    border-top: 2px solid var(--ih-red);
}

.werkDetailGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 52px;
    align-items: start;
}

.werkDetailBildWrap {
    padding: clamp(18px, 3vw, 36px);
    border: 1px solid var(--ih-frame-grey);
    background: var(--ih-white);
    box-shadow: inset 0 0 0 10px var(--ih-light-grey);
}

.werkDetailBildWrap img {
    display: block;
    width: 100%;
    height: auto;
}

.werkDetailText h1 {
    margin: 0 0 28px;
    color: var(--ih-grey);
    font-family: "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
}

#werkDetailSteckbrief {
    margin: 0 0 30px;
    color: var(--ih-grey);
    font-family: "PTSans-Narrow", "Arial Narrow", Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.25;
}

.werkMetadaten {
    margin: 0 0 28px;
    border-top: 1px solid var(--ih-frame-grey);
}

.werkMetadaten div {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ih-frame-grey);
}

.werkMetadaten dt,
.werkMetadaten dd {
    margin: 0;
}

.werkMetadaten dt {
    font-family: "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.werkOriginalStatus {
    margin: 0 0 16px;
    color: var(--ih-grey);
    font-family: "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.werkOriginalKaufen,
.werkZurueck {
    width: 100%;
    margin-top: 12px;
}

.werkOriginalKaufen {
    min-height: 48px;
    padding: 9px 28px;
    border: 2px solid var(--ih-red);
    background: var(--ih-red);
    color: var(--ih-white);
    font-family: "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.werkOriginalKaufen:hover,
.werkOriginalKaufen:focus-visible {
    border-color: var(--ih-black);
    background: var(--ih-black);
}


@media (max-width: 760px) {
    .monsterGalerieSeite {
        padding: 24px 18px 54px;
    }

    .monsterGalerieKopf {
        margin-bottom: 32px;
    }

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

    .werkDetailGrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 430px) {
    .monsterGalerieGrid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   ORIGINALSTATUS · FEINE LINIE IM PASSEPARTOUT
========================================================= */

.monsterGalerieWerk__bildWrap::after {
    content: "";
    position: absolute;
    /*
     * Die 4-px-Statuslinie sitzt direkt am inneren Rand
     * des grauen Passepartouts. Der weiße Abstand bis zum
     * Bild bleibt vollständig erhalten.
     */
    inset: var(--rahmen-breite);
    z-index: 2;

    border: 4px solid transparent;
    pointer-events: none;
}

.monsterGalerieWerk__bildWrap.verfuegbar::after {
    border-color: var(--ars-color-status-available);
}

.monsterGalerieWerk__bildWrap.verkauft::after {
    border-color: var(--ars-color-status-sold);
}