/* ============================================================
   KS Portfolio Übersicht – Frontend Styles  v2.1.0
   ============================================================

   GRID-SYSTEM (ab v2.0.2):
   ─ grid-auto-rows wird auf die HALBE ursprüngliche Höhe gesetzt
     (Basis-Reihe), damit alle Kacheln durch integer span-Werte
     präzise gesteuert werden können:
       • Klein / Mittel  →  grid-row: span 2  (= 1× Basis × 2 = volle Höhe)
       • Vollbreite      →  grid-row: span 3  (= 1× Basis × 3 = 1,5× Höhe)
   ─ Kein min-height auf Grid-Items nötig (overflows Grid-Tracks nicht).

   HINWEIS zur Mathematik (Desktop, 3 Spalten):
     Basis-Reihe:   clamp(100px, 12.5vw, 225px)
     Normal-Höhe:   2 × clamp(…) = clamp(200px, 25vw,  450px)  ← wie v1.x
     Vollbreite:    3 × clamp(…) = clamp(300px, 37.5vw, 675px) ← 50% mehr

   ============================================================ */

/* ── Container ─────────────────────────────────────── */
.ks-portfolio-overview {
    display: grid;
    grid-template-columns: repeat( var(--po-cols, 3), 1fr );

    /*
     * Basis-Reihe = halbe Normalhöhe.
     * Klein/Mittel belegen span 2 → normale Höhe.
     * Vollbreite belegt span 3  → 1,5× Höhe.
     */
    grid-auto-rows: clamp( 100px, 12.5vw, 225px );

    gap: var(--po-gap, 4px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Kachel ─────────────────────────────────────────── */
.ks-po-cell {
    grid-column: span var(--cell-span, 1);
    grid-row: span 2;          /* 2 Basis-Reihen = normale Höhe */
    position: relative;
    overflow: hidden;
    background-color: #111;
}

/* Vollbreite-Kacheln: 3 Basis-Reihen = 1,5× normale Höhe */
.ks-po-cell.size-large {
    grid-row: span 3;
}

/* ── Hintergrundbild ─────────────────────────────── */
.ks-po-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.ks-po-bg-empty {
    background-color: #2a2a2a;
}

/* Hover-Zoom für normale Kacheln (1/3 und 2/3) */
.ks-po-cell:hover .ks-po-bg {
    transform: scale(1.06);
}

/* ── Parallax für Vollbreite-Kacheln (size-large) ── *
 *
 * CSS-Transition deaktiviert – das JS (parallax.js)
 * setzt transform via requestAnimationFrame, kein Lag.
 * Scale 1.28 = genug Puffer damit Kanten beim Scrollen
 * nicht sichtbar werden (±30 % * Bildhöhe ≈ 40–60 px).
 *
 * ─────────────────────────────────────────────────── */
.ks-po-cell.size-medium .ks-po-bg,
.ks-po-cell.size-large .ks-po-bg {
    transition: none;                  /* JS übernimmt, kein CSS-Lag */
    transform: scale(1.28);            /* CSS-Fallback falls JS deaktiviert */
    transform-origin: center center;
}

/* Hover-CSS-Zoom für size-medium + size-large aufheben (JS-Parallax reicht) */
.ks-po-cell.size-medium:hover .ks-po-bg,
.ks-po-cell.size-large:hover .ks-po-bg {
    transform: scale(1.28);
}

/* ── Gradient-Overlay ────────────────────────────── */
.ks-po-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 36px 32px;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(0, 0, 0, 0.30) 60%,
        rgba(0, 0, 0, 0.75) 100%
    );
    z-index: 2;
    transition: background 0.35s ease;
}

.ks-po-cell:hover .ks-po-overlay {
    background: linear-gradient(
        to bottom,
        transparent 20%,
        rgba(0, 0, 0, 0.35) 55%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* ── Titel ── */
.ks-po-title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* ── Untertitel ── */
.ks-po-subtitle {
    margin: 8px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1.1rem, 1.65vw, 1.35rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* ── Pfeil ────────────────────────────────────────── */
.ks-po-arrow {
    display: inline-block;
    margin-top: 12px;
    color: #fff;
    font-size: 1.6rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ks-po-cell:hover .ks-po-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ── Link ─────────────────────────────────────────── */
.ks-po-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    text-decoration: none;
    color: inherit;
}

/* ── Hover-Modus: Overlay nur beim Hovern ─────────── */
.ks-portfolio-overview.label-hover .ks-po-overlay {
    background: transparent;
    opacity: 0;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.ks-portfolio-overview.label-hover .ks-po-cell:hover .ks-po-overlay {
    background: linear-gradient(
        to bottom,
        transparent 20%,
        rgba(0, 0, 0, 0.80) 100%
    );
    opacity: 1;
}


/* ════════════════════════════════════════════════════
   RESPONSIV
════════════════════════════════════════════════════ */

/*
 * Mittlere Laptops / Tablet landscape – 2 Spalten ab 1280 px
 * Vorher (3-Spalten) entstehen bei Vollbreite-Kacheln
 * Höhenunterschiede zu benachbarten Kacheln.
 *
 * Basis-Reihe: clamp(100px, 14vw, 200px)
 * Normal (span 2): clamp(200px, 28vw, 400px)
 * Vollbreite (span 3): clamp(300px, 42vw, 600px)
 */
@media (max-width: 1280px) {
    .ks-portfolio-overview {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(100px, 14vw, 200px);
    }

    .ks-po-cell            { grid-column: span 1 !important; }
    .ks-po-cell.size-large { grid-column: span 2 !important; }
    /* grid-row: span 2 / span 3 bleiben wie gesetzt */
}

/*
 * Tablet portrait – 2 Spalten, kompakter
 *
 * Basis-Reihe: clamp(80px, 17vw, 170px)
 */
@media (max-width: 768px) {
    .ks-portfolio-overview {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: clamp(80px, 17vw, 160px);
        gap: 3px;
    }

    .ks-po-cell            { grid-column: span 1 !important; }
    .ks-po-cell.size-large { grid-column: span 2 !important; }

    .ks-po-title    { font-size: 1.7rem; }
    .ks-po-subtitle { font-size: 1.4rem; }
    .ks-po-overlay  { padding: 14px 18px 18px; }
}

/*
 * Smartphone – 1 Spalte, alle Kacheln gleich hoch
 */
@media (max-width: 480px) {
    .ks-portfolio-overview {
        grid-template-columns: 1fr;
        grid-auto-rows: clamp(200px, 65vw, 340px);
        gap: 2px;
    }

    .ks-po-cell,
    .ks-po-cell.size-large {
        grid-column: span 1 !important;
        grid-row:    span 1 !important;
    }

    .ks-po-title    { font-size: 1.7rem; }
    .ks-po-subtitle { font-size: 1.4rem; }
    .ks-po-overlay  { padding: 12px 16px 16px; }
    .ks-po-arrow    { display: none; }
}