/* STUDIO Showcases als Kacheln (partials/components/showcase-tile.hbs, js/showcases.js).
   Startseite: „Wie ich arbeite“ mit drei Kacheln. Seite /showcases/ (page-showcases.hbs): alle.
   Sprache des Startbilds: Bild mit runden Ecken, Text unten links, das Thema als weiße Pille über der Überschrift.
   Die erste Kachel ist doppelt so breit und hoch, alle anderen gleich groß.
   Bewegung nur über transform und opacity. Bei „Bewegung reduzieren“ oder ohne JavaScript steht alles sofort da. */

[data-showcases] {
    --sc-gap: max(10px, calc(.7vw * var(--scale)));
    --sc-radius: max(18px, calc(1.6vw * var(--scale)));
    --sc-pad: max(22px, calc(1.7vw * var(--scale)));
    --sc-row: clamp(220px, 19vw, 340px);
}

/* Startseite */

.showcases-home {
    position: relative;
    z-index: 7;
    background-color: var(--background-color);
    color: var(--text-color);
}

.showcases-home-inner {
    max-width: calc(1200px + 2 * max(26px, 1.8vw)); /* gleiche Breite wie Über mich und Empfehlungen */
    margin-inline: auto;
    padding-inline: max(26px, 1.8vw);
}

.showcases-home-title {
    display: block;
    margin: 0 0 max(24px, calc(1.8vw * var(--scale)));
    text-align: center;
}

/* Raster */

.showcases-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--sc-row);
    gap: var(--sc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.showcases-grid.is-teaser {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.showcase {
    position: relative;
    min-width: 0;
}

.showcase.is-lead {
    grid-column: span 2;
    grid-row: span 2;
}

/* Kachel */

.showcase-link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    color: var(--overlay-text-color);
    text-decoration: none;
    border-radius: var(--sc-radius);
    isolation: isolate;
}

.showcase-link:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 4px;
}

/* Bild und Abdunklung, rund beschnitten */
.showcase-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--sc-radius);
    overflow: hidden;
    background-color: #F5F5F5;
}

.showcase-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-shade {
    position: absolute;
    inset: 0;
    background-color: var(--dark-overlay-background-color);
    opacity: .38;
}

/* Text unten links */
.showcase-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sc-pad);
}

/* Thema als weiße Pille knapp über der Überschrift, auf jedem Bild gut lesbar */
.showcase-label {
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin-bottom: 12px;
    padding: 0 13px;
    border-radius: 999px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.showcase-label[hidden] {
    display: none;
}

.showcase-title {
    font-family: var(--font1);
    font-size: clamp(19px, 1.45vw, 24px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.is-lead .showcase-text {
    max-width: min(760px, 78%);
}

.is-lead .showcase-label {
    height: 32px;
    padding: 0 14px;
    font-size: 15px;
}

.is-lead .showcase-title {
    font-size: clamp(30px, 3.1vw, 56px);
    line-height: 1.02;
    letter-spacing: -.035em;
}

.showcase-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 46ch;
    margin-top: max(14px, 1.1vw);
    font-family: var(--font2);
    font-size: 17px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
}

@media (hover: hover) {
    .showcase-media img {
        transition: scale 1.2s var(--ease-transition);
    }

    .showcase-link:hover .showcase-media img {
        scale: 1.04;
    }
}

/* Knopf unter den Kacheln: schwarze Pille */

.showcases-all {
    display: flex;
    align-items: center;
    width: fit-content;
    height: 56px;
    margin: max(28px, calc(2.2vw * var(--scale))) auto 0;
    padding: 0 28px;
    border-radius: 999px;
    background-color: var(--text-color);
    color: var(--background-color);
    font-family: var(--font2);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.showcases-all:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 3px;
}

@media (hover: hover) {
    .showcases-all {
        transition: opacity .3s var(--ease-transition);
    }

    .showcases-all:hover {
        opacity: .8;
    }
}

/* Seite /showcases/: großer Titel wie auf der Blogseite */

.showcases-page {
    --sc-row: clamp(240px, 21vw, 400px);
    color: var(--text-color);
}

.showcases-hero {
    padding-top: max(168px, calc(11.67vw * var(--scale)));
    padding-bottom: max(48px, calc(3.6vw * var(--scale)));
}

.showcases-page .showcases-hero-title {
    margin-left: -.06em;
    color: var(--text-color);
    font-size: clamp(72px, 13vw, 240px);
    font-weight: 500;
    line-height: .8;
    letter-spacing: -.045em;
}

.showcases-hero-intro {
    max-width: 40ch;
    margin-top: max(28px, calc(2.2vw * var(--scale)));
    font-size: 18px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-color) 58%, transparent);
}

.showcases-cta {
    padding: max(88px, calc(7vw * var(--scale))) 0 max(120px, calc(9vw * var(--scale)));
    text-align: center;
}

.showcases-cta-text {
    display: flex;
    flex-direction: column;
    gap: .25em; /* jeder Satz in einer eigenen Zeile, am Computer ohne Umbruch */
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--font1);
    font-size: clamp(24px, 2.4vw, 40px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* Einblenden beim Scrollen (js/showcases.js setzt .js-reveal nur, wenn Bewegung erlaubt ist) */

.js-reveal .showcase {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s var(--ease-transition), transform 1.1s var(--ease-transition);
    transition-delay: var(--showcase-delay, 0s);
}

.js-reveal .showcase.is-visible {
    opacity: 1;
    transform: none;
}

/* Tablet: zwei Spalten, die große Kachel über die ganze Breite */

@media screen and (max-width: 1080px) {
    [data-showcases],
    .showcases-page {
        --sc-row: clamp(240px, 34vw, 340px);
    }

    .showcases-grid,
    .showcases-grid.is-teaser {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Handy: eine Spalte, die große Kachel hochkant, die anderen quer */

@media screen and (max-width: 767px) {
    [data-showcases] {
        --sc-pad: 20px;
        --sc-radius: 24px;
    }

    .showcases-grid,
    .showcases-grid.is-teaser {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .showcase {
        aspect-ratio: 4 / 3;
    }

    .showcase.is-lead {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 5;
    }

    .is-lead .showcase-text {
        max-width: 100%;
    }

    .is-lead .showcase-title {
        font-size: clamp(28px, 8vw, 38px);
    }

    .showcase-title {
        font-size: 20px;
    }

    .showcase-excerpt {
        font-size: 16px;
    }

    .showcases-hero {
        padding-top: 140px;
    }

    .showcases-hero-intro {
        font-size: 17px;
    }
}