/* ===========================================================================
   Custom styles for Autoškola Miko (loaded after the theme's styles.css)
   =========================================================================== */

/* --- Cookie consent banner --- */
.cookie-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    max-width: 720px;
    margin: 0 auto;
    background: #1e3a5f;
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-buttons { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* --- Highlighted "next course" / promo block --- */
.course-banner {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    display: inline-block;
    backdrop-filter: blur(2px);
}

/* --- Scroll-reveal animations: modern fade/slide-up with per-row stagger --- */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, transform;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    /* Smooth jump between sections from the nav */
    html { scroll-behavior: smooth; }

    /* Subtle parallax/fade target for the hero */
    .masthead .container { will-change: transform, opacity; }
}

/* Keep section headings clear of the fixed navbar when scrolled to */
section[id] { scroll-margin-top: 72px; }

/* --- Slim scroll-progress indicator at the top of the page --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: linear-gradient(90deg, #fed136, #f0b400);
    pointer-events: none;
    transition: width 0.1s linear;
}

/* --- Pricing cards: subtle lift on hover --- */
.pricing .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* --- Form status helper --- */
#formStatus:empty { display: none; }

/* --- "Obsah kurzu" cards: equal height + centered content ---
   Each box used to grow only to fit its own text, so boxes with more lines
   were taller. We make every white box fill its column and center its text,
   so all four share the same shape regardless of how many lines they have. */
#portfolio .portfolio-item {
    height: 100%;
}
#portfolio .portfolio-item .portfolio-caption {
    height: 100%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#portfolio .portfolio-item:hover .portfolio-caption {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* --- Light scroll-snap: sections gently "lock" into place on scroll ---
   "proximity" = soft. The page only nudges to a section when you stop near
   one; you can always scroll freely through tall sections. Switch to
   "mandatory" for a stronger, full-screen lock (can feel aggressive).
   Limited to large screens + non-reduced-motion to stay comfortable. */
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
    html {
        scroll-snap-type: y proximity;
        scroll-padding-top: 72px; /* don't snap headings under the fixed navbar */
    }
    .masthead,
    section[id] {
        scroll-snap-align: start;
        scroll-snap-stop: normal; /* "always" would force a stop at every section */
    }
}