/* Celostránkové pozadie statického landingu.
   Kept separate from app.css (which is a Laravel Vite build copy, see DEPLOY.md)
   so regenerating app.css never silently removes this. Pozadie je dizajnovaná
   celoplošná ilustrácia uctujem-si-landing-bg-light.svg (1672×940, stred voľný pre
   obsah); zobrazuje sa ako fixný „cover" backdrop za scrollovaným skleneným
   panelom. Dark-mode override nižšie (vyššia špecificita) prehodí tmavú verziu. */
body.landing-page {
    background-color: #eef3ee;
    background-image: url('../images/uctujem-si-landing-bg-light.svg');
    background-repeat: no-repeat;
    background-position: center top;
    /* cover + fixed: ilustrácia vyplní viewport a pri scrollovaní „stojí" za obsahom;
       fixed rieši aj to, že cover by inak na vysokej stránke zväčšil len útržok. */
    background-size: cover;
    background-attachment: fixed;
}

/* The site-wide frosted-glass shell (18px blur, ~70% white) otherwise hides the photo behind
   almost every section. Thin it out on the landing page only so the background shows through.
   Scoped to html[data-theme='light'] explicitly — without it this rule's higher specificity
   (one more type selector than the existing dark-mode rule) would win in dark mode too and
   wreck its contrast, since the inline theme script always sets data-theme before first paint. */
html[data-theme='light'] body.landing-page .landing-shell {
    /* Jemný modrý nádych (~9 % — biela posunutá k svetlomodrej) zvýrazní sklo voči
       farebnej ilustrácii, bez straty priehľadnosti. */
    background: linear-gradient(180deg, rgba(232, 240, 255, 0.24), rgba(232, 240, 255, 0.135));
    backdrop-filter: blur(6px);
}

/* Dark-mode counterpart: same full-width treatment with the dark illustration and a
   dark-tinted shell instead of the light one above. */
html[data-theme='dark'] body.landing-page {
    background-color: #10161b;
    background-image: url('../images/uctujem-si-landing-bg-dark.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

html[data-theme='dark'] body.landing-page .landing-shell {
    background: linear-gradient(180deg, rgba(28, 33, 46, 0.41), rgba(24, 29, 42, 0.3));
    backdrop-filter: blur(6px);
}

/* Subtle "coming soon" tag for individual pricing list items (replaces the old separate
   "Funkcie čoskoro" block). */
.landing-soon-tag {
    margin-left: 4px;
    color: var(--landing-muted);
    font-size: 0.78em;
}

.landing-footer {
    margin-top: 24px;
    padding: 28px 4px 8px;
    border-top: 1px solid var(--landing-line);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.landing-footer__brand p {
    max-width: 32ch;
    margin-top: 8px;
    color: var(--landing-muted);
    font-size: 0.92rem;
}

.landing-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.landing-footer__links a {
    color: var(--landing-muted);
    font-size: 0.92rem;
}

.landing-footer__links a:hover {
    color: var(--landing-text);
}

/* .landing-section__intro (app.css) has no mobile breakpoint at all — it's always a 3-item
   flex row (kicker / h2 / lead), which crams into unreadable narrow columns once a section
   has all three (now true for "Čo získaš" and "Ako to funguje" too, not just pricing). Stack
   it vertically on narrow screens instead. */
@media (max-width: 800px) {
    .landing-section__intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .landing-section__intro h2 {
        max-width: none;
    }
}

/* "Čo získaš v jednej aplikácii" and "Pre koho je Účtujem si?" should read as one line instead
   of wrapping like the app.css default (max-width: 14ch) forces — other section headings are
   fine to wrap. Font-size is reduced only enough to keep these two on one line at narrow
   widths without overflowing (there's no overflow-x guard on body for this reverted version). */
#funkcie .landing-section__intro h2,
#prekoho .landing-section__intro h2 {
    max-width: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    #funkcie .landing-section__intro h2,
    #prekoho .landing-section__intro h2 {
        font-size: clamp(1.15rem, 6.4vw, 2.2rem);
    }
}

/* The "Čo získaš" intro lead sits close to the hero photo bleeding through the thinned shell,
   so the default --landing-muted gray loses contrast in light mode. Darken just this paragraph
   (not .landing-lead globally, which is used elsewhere on backgrounds where it's fine). */
html[data-theme='light'] #funkcie .landing-section__intro .landing-lead {
    color: #2b3340;
}

/* "Čo získaš" now has 6 cards, not 4 — app.css's fixed 4-column grid would leave an
   unbalanced last row (4 + 2). Use 3 columns here so 6 cards form a clean 3x2 layout. */
#funkcie .landing-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Číslovanie kariet „Čo získaš v jednej aplikácii" — #1, #2… v pravom hornom rohu,
   brandová zelená „Účtujem si". CSS counter = čísla sa preusporiadajú samy. */
#funkcie .landing-feature-grid {
    counter-reset: feature-card;
}

#funkcie .landing-feature-grid .landing-feature-card {
    counter-increment: feature-card;
    position: relative;
}

#funkcie .landing-feature-grid .landing-feature-card::after {
    content: "#" counter(feature-card);
    position: absolute;
    top: 14px;
    right: 18px;
    color: #16a34a;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: none;
}

#funkcie .landing-feature-card--spotlight {
    min-height: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(21, 28, 38, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

html.dark #funkcie .landing-feature-card--spotlight,
[data-theme='dark'] #funkcie .landing-feature-card--spotlight {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.98));
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

#funkcie .landing-feature-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#funkcie .landing-feature-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    background: transparent;
}

#funkcie .landing-feature-card--green .landing-feature-card__icon {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
}

#funkcie .landing-feature-card--blue .landing-feature-card__icon {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
}

#funkcie .landing-feature-card--violet .landing-feature-card__icon {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
}

#funkcie .landing-feature-card__icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
}

#funkcie .landing-feature-card__icon img {
    width: 92%;
    height: 92%;
    object-fit: contain;
    display: block;
}

#funkcie .landing-feature-card__arrow {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
    margin-top: 4px;
}

#funkcie .landing-feature-card--spotlight h3 {
    font-size: 1.2rem;
    line-height: 1.15;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

html.dark #funkcie .landing-feature-card--spotlight h3,
[data-theme='dark'] #funkcie .landing-feature-card--spotlight h3 {
    color: #f8fafc;
}

#funkcie .landing-feature-card--spotlight p {
    margin: 0;
    color: #475569;
    font-size: .95rem;
    line-height: 1.45;
    max-width: 28ch;
}

html.dark #funkcie .landing-feature-card--spotlight p,
[data-theme='dark'] #funkcie .landing-feature-card--spotlight p {
    color: #cbd5e1;
}

@media (max-width: 1200px) {
    #funkcie .landing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    #funkcie .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    #funkcie .landing-feature-card--spotlight {
        min-height: 180px;
    }
}

/* Pricing keeps all 4 cards in a single desktop row. */
#cennik .uctujemsi-pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

#cennik .uctujemsi-pricing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#cennik .uctujemsi-pricing-card .landing-hero__actions {
    margin-top: auto !important;
}

@media (max-width: 980px) {
    #cennik .uctujemsi-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    #cennik .uctujemsi-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Zelený brandový akcent „si" (predtým inline štýly roztrúsené po HTML). */
.landing-si-accent {
    color: #16a34a;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.landing-brand-word {
    font-weight: 800;
}

/* Riadky hero sloganu — každý na vlastnom riadku, bez nowrap (na mobile sa smie zalomiť). */
.landing-hero__title-line {
    display: block;
}

/* Podtitulok stojí mimo <h1> (SEO: h1 nesie len slogan), veľkosť si preto rieši sám. */
.landing-hero .landing-hero__subtitle {
    margin-top: 10px;
    font-size: clamp(1.05rem, 2.4vw, 1.6rem);
    line-height: 1.2;
    font-weight: 400;
}

/* CTA tlačidlá v cenníkových kartách (predtým inline štýly). */
.landing-pricing-card__cta {
    margin-top: 1rem;
}

.landing-button--block {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    white-space: nowrap;
}

.landing-button--strong {
    font-weight: 700;
}

/* Prepínač témy v hlavičke landing page (predtým inline štýly). */
.app-theme-toggle--landing {
    min-height: 52px;
    padding: 0 24px;
    font-size: .98rem;
    border-radius: 16px;
}

/* Vlajky prepínača jazyka (predtým inline štýly). */
.app-flag-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Hero text — čitateľnosť v svetlom aj tmavom režime.
   Zelené „si" ostáva akcent (má vlastnú farbu), zvyšok sa v tmavom režime zosvetlí. */
.landing-hero .landing-hero__subtitle { color: #475569; }
.landing-hero .landing-hero__lead { color: #0f172a; }

html.dark .landing-hero .landing-hero__subtitle,
[data-theme="dark"] .landing-hero .landing-hero__subtitle { color: #cbd5e1; }

html.dark .landing-hero .landing-hero__lead,
[data-theme="dark"] .landing-hero .landing-hero__lead { color: #e2e8f0; }

/* Právne stránky (obchodné podmienky, ochrana osobných údajov). */
.landing-legal {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 4px 48px;
}

.landing-legal h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: 8px;
}

.landing-legal .landing-legal__updated {
    color: var(--landing-muted);
    font-size: 0.92rem;
    margin-bottom: 28px;
}

.landing-legal h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 28px 0 10px;
}

.landing-legal p,
.landing-legal li {
    line-height: 1.6;
    margin-bottom: 10px;
}

.landing-legal ul {
    padding-left: 22px;
    list-style: disc;
}

/* Zvýraznené miesta, ktoré musí prevádzkovateľ doplniť pred publikovaním. */
.landing-legal .landing-legal__todo {
    background: rgba(234, 179, 8, 0.18);
    border-radius: 6px;
    padding: 0 6px;
    font-weight: 600;
}

/* Logo v hlavičke sa prepína podľa témy — rovnako ako admin portal
   (logo.svg pre svetlý režim, logo_dark.svg so svetlým textom pre tmavý). */
.landing-brand__logo--dark { display: none; }

html.dark .landing-brand__logo--light,
[data-theme="dark"] .landing-brand__logo--light { display: none; }

html.dark .landing-brand__logo--dark,
[data-theme="dark"] .landing-brand__logo--dark { display: block; }

/* Daňový kalendár (hero vizuál) bol odstránený — hero je teraz jednostĺpcový. */
.landing-hero {
    grid-template-columns: 1fr;
}

.landing-hero__copy {
    max-width: 760px;
}

/* Prvá deliaca čiara (border-top na prvej sekcii #funkcie hneď pod hero tlačidlami)
   je nadbytočná — hero má plynúť do prvej sekcie bez čiary. Cielené cez ID, aby
   ostatné oddeľovače (#prekoho, #workflow, #faq) zostali. */
#funkcie.landing-section {
    border-top: none;
}