/* ─── EcoLaserTech — main.css ───────────────────────────────────────────────
 * Global: CSS custom properties, reset, typography, layout, section scaffolding.
 * Component-specific styles live in components.css.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── Custom Properties ──────────────────────────────────────────────────── */
:root {
    --color-primary:    #0A2342;
    --color-accent:     #1F6FEB;
    --color-accent-dim: rgba(31, 113, 235, 0.55);
    --color-bg:         #0D1117;
    --color-bg-2:       #141618;
    --color-bg-3:       #1C1F22;
    --color-border:     rgba(255, 255, 255, 0.2);
    --color-text:       #F0F4FF;
    --color-text-muted: #8FA3BF;
    --color-header-bg:  var(--color-primary); /* Header-Hintergrund — unabhängig anpassbar */
    --color-footer-bg:  var(--color-bg-2);    /* Footer-Hintergrund — unabhängig anpassbar */

    --font-family:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:        400;
    --font-head:        600;

    --container-max:    1200px;
    --section-y:        6rem;
    --border-radius:    10px;
    --border-radius-sm: 6px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-family);
    font-weight: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

ul { list-style: none; padding: 0; margin: 0; }

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-weight: var(--font-head);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--color-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p {
    margin: 0 0 1.25rem;
    color: var(--color-text);
}

p:last-child { margin-bottom: 0; }

.text-muted { color: var(--color-text-muted); }

/* Body text: max-width 65ch for readability */
.prose { max-width: 65ch; line-height: 1.75; }

/* ─── Container ──────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 2rem;
}

/* ─── Section Base ───────────────────────────────────────────────────────── */
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--color-bg-2); }
.section--dark { background: var(--color-bg); }

/* ─── Section Label ──────────────────────────────────────────────────────── */
.section-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: var(--font-head);
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

/* ─── Hero — Startseite ──────────────────────────────────────────────────── */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 65% 35%, rgba(31, 111, 235, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 5%  80%, rgba(10, 35,  66, 0.5)  0%, transparent 50%),
        var(--color-bg);
}

/*
 * Background image: place full-bleed image at hero--has-image modifier.
 *   .hero--has-image { background-image: url('/path/to/hero.jpg'); background-size: cover; background-position: center; }
 *
 * Video background: uncomment the <video> block inside .hero and add hero.mp4 to assets/video/.
 *   .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.25; }
 */

.hero-content {
    position: relative;
    z-index: 1;
    padding: 6rem 0;
    max-width: 780px;
}

.hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.75rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero h1 .accent { color: var(--color-accent); }

.hero-sub {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ─── Hero — Split (text left, image right) ──────────────────────────────── */
.hero--split {
    min-height: 85vh;
    background: var(--color-bg);
}

.hero--split .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 5rem 0;
    width: 100%;
}

.hero--split .hero-content {
    padding: 0;
    max-width: none;
}

.hero--split .hero-image {
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.hero--split .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Hero — Background Image ────────────────────────────────────────────── */
.hero--bg-image {
    min-height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero--bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 23, 0.4);
    z-index: 0;
}

.hero--bg-image .hero-content { z-index: 1; }

/* ─── Hero — Text-Kachel (Kontrast über Bild/Video) ─────────────────────── */
.hero--bg-image .hero-content,
.hero--tile .hero-content {
    background: rgba(9, 12, 17, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    padding: 2.5rem 3rem;
    max-width: 825px;
}

@media (max-width: 640px) {
    .hero--bg-image .hero-content,
    .hero--tile .hero-content { padding: 1.75rem 1.5rem; }
}

/* ─── Hero — Video Background (portrait video rotated to landscape) ──────── */

/* Wrapper handles rotation + sizing. Video inside fills wrapper with object-fit.
 * Separating these prevents the mobile-browser bug where transform on a <video>
 * with object-fit causes the content to render undersized. */
.hero-video-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;   /* becomes display-height after -90deg rotation */
    height: 100vw;  /* becomes display-width after -90deg rotation */
    transform: translate(-50%, -50%) rotate(-90deg);
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}

/* Darkening overlay — same opacity as the bg-image hero */
.hero--has-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 23, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Content must sit above the overlay */
.hero--has-video .hero-content { z-index: 2; }

/* ─── Hero — Text Only ───────────────────────────────────────────────────── */
.hero--text-only {
    min-height: 65vh;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(31, 111, 235, 0.1) 0%, transparent 60%),
        var(--color-bg);
    text-align: center;
}

.hero--text-only .hero-content {
    max-width: 720px;
    margin-inline: auto;
}

/* ─── Fade-up Initial State (GSAP animates to visible) ───────────────────── */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    :root { --section-y: 4rem; }

    .hero { min-height: 80vh; }
    .hero-content { padding: 4rem 0; }

    .hero--split .hero-inner {
        grid-template-columns: 1fr;
        padding: 3rem 0;
        gap: 2.5rem;
    }

    .hero--split .hero-image { order: -1; }

    .hero--text-only { min-height: auto; padding: 4rem 0; }
}

@media (max-width: 600px) {
    :root { --section-y: 3rem; }

    .container { padding-inline: 1.25rem; }

    h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    h2 { font-size: clamp(1.4rem, 6vw, 2rem); }

    /* Lock hero to exact viewport height + paint containment for clean clipping */
    .hero--has-video {
        height: 100vh;
        min-height: 0;
        contain: paint;
    }

    /* Wrapper sized to the viewport so the rotated video fills the whole hero.
     * 5% oversize avoids subpixel rounding gaps. Video inside uses object-fit
     * to fill the wrapper — same approach as the bg-image hero. */
    .hero-video-wrap {
        width: 105vh;
        height: 105vw;
    }

    /* Tune focus on mobile (after -90deg rotation, axes are swapped):
     *   center center = neutral
     *   top / bottom  = shifts visible frame left/right after rotation
     *   left / right  = shifts visible frame up/down after rotation */
    .hero-video {
        object-position: center center;
    }

    /* Korrosionsschutz: show right side of landscape image on narrow viewport */
    .hero--bg-image {
        background-position: right center;
    }
}