/* Global base styles for the Med z Údolí Bystřice site.
   Fonts are self-hosted — see fonts.css (loaded before this file).
   Component-level styling stays inline in the views to preserve the design 1:1. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: oklch(0.93 0.012 78);
    color: oklch(0.18 0.010 55);
    font-family: 'Jost', sans-serif;
    overflow-x: hidden;
}

::selection { background: oklch(0.63 0.095 74 / 0.22); }

input:focus, button:focus { outline: none; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.4; transform-origin: top; }
    50%      { transform: scaleY(1);   opacity: 1;   transform-origin: top; }
}

/* ── Story slideshow ─────────────────────────────────────────────────────────
   Ordinary snapshots are unified with a warm film grade, a soft-light gold wash
   and a vignette, then made to emerge from the dark text panel via a left-edge
   fade. Motion is a slow Ken Burns drift with a long crossfade. */
.story-media {
    position: relative;
    width: 44%;
    flex: none;
    overflow: hidden;
    background: oklch(0.135 0.010 55);
}

.story-media .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.8s ease;
    will-change: opacity;
}
/* No-JS fallback: show the first photo until the script takes over. */
.story-media:not(.is-ready) .slide:first-child { opacity: 1; }
.story-media.is-ready .slide.is-active { opacity: 1; }

.story-media .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.05);
    filter: saturate(0.78) contrast(1.06) brightness(0.92) sepia(0.22);
}
.story-media.is-ready .slide.is-active img {
    animation: kenburns 7.5s ease-out both;
}
.story-media.is-ready .slide:nth-child(even).is-active img {
    animation-name: kenburns-alt;
}

@keyframes kenburns {
    from { transform: scale(1.04) translate(0, 0); }
    to   { transform: scale(1.17) translate(-2.5%, -2%); }
}
@keyframes kenburns-alt {
    from { transform: scale(1.17) translate(2.5%, 1.5%); }
    to   { transform: scale(1.04) translate(0, 0); }
}

/* Warm gold wash that ties the photos to the brand colour. */
.story-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg,
        oklch(0.63 0.095 74 / 0.20) 0%,
        oklch(0.45 0.040 70 / 0.05) 55%);
    mix-blend-mode: soft-light;
}

/* Vignette + fade into the dark text panel on the left and along the bottom. */
.story-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to right, oklch(0.135 0.010 55) 0%, oklch(0.135 0.010 55 / 0) 16%),
        linear-gradient(to top, oklch(0.135 0.010 55 / 0.50) 0%, oklch(0.135 0.010 55 / 0) 36%),
        radial-gradient(125% 95% at 62% 42%, oklch(0.10 0.010 55 / 0) 52%, oklch(0.10 0.010 55 / 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .story-media .slide { transition-duration: 0.5s; }
    .story-media.is-ready .slide.is-active img,
    .story-media.is-ready .slide:nth-child(even).is-active img {
        animation: none;
        transform: scale(1.05);
    }
}

/* ── Mobile layout ───────────────────────────────────────────────────────────
   Desktop is unchanged; on narrow screens the side-by-side sections stack
   vertically. Inline styles in the markup are overridden here with !important. */
@media (max-width: 768px) {
    /* Nav: keep just the logo and the CTA, drop the section links. */
    .site-nav { padding: 14px 20px !important; }
    .nav-links { gap: 18px !important; }
    .nav-sec { display: none !important; }
    .site-nav a[href="#objednat"] {
        font-size: 11px !important;
        letter-spacing: 0.16em !important;
        padding: 8px 14px !important;
    }

    /* Hero variety tags + invite helper: tighten tracking so they fit one line. */
    .hero-tags { gap: 16px !important; }
    .hero-tags span { font-size: 12px !important; letter-spacing: 0.22em !important; }
    .lock-help { letter-spacing: 0.04em !important; }

    /* Hero: content first, info panel stacked below full-width. */
    .hero { flex-direction: column !important; min-height: auto !important; }
    .hero-hex { width: 100% !important; }
    .hero-main { padding: 112px 24px 72px !important; }
    .hero-panel { width: 100% !important; padding: 54px 28px !important; }

    /* Products: one card per row. */
    .product-grid { grid-template-columns: 1fr !important; }
    .product-card { padding: 56px 30px !important; }

    /* Story: text first, slideshow below as a banner. */
    .story { flex-direction: column !important; min-height: auto !important; }
    .story-text { padding: 76px 28px !important; }
    .story-media { width: 100% !important; height: 300px !important; }
    /* Full-bleed bottom fade only (no left seam to hide when stacked). */
    .story-media::after {
        background:
            linear-gradient(to top, oklch(0.135 0.010 55) 0%, oklch(0.135 0.010 55 / 0) 30%),
            radial-gradient(130% 100% at 50% 45%, oklch(0.10 0.010 55 / 0) 55%, oklch(0.10 0.010 55 / 0.5) 100%) !important;
    }

    /* Order section: tighter padding, single-column inputs, simpler rows. */
    .order-section { padding: 84px 22px 96px !important; }
    .form-row { grid-template-columns: 1fr !important; }
    .order-row { gap: 12px !important; }
    .order-row [data-subtotal] { display: none !important; } /* total shown below */

    /* Footer: stacked and centred. */
    .site-footer {
        flex-direction: column !important;
        gap: 26px !important;
        padding: 48px 28px !important;
        text-align: center !important;
    }
    .site-footer > div { text-align: center !important; align-items: center !important; }
}