/* styles.css — lubosvrtik.sk (klon vzhľadu pôvodnej témy blacksilver: tmavé pozadie, Jost, koralový akcent) */

:root {
    --pozadie: #1a1a1a;
    --tmava: #131313;
    --seda: #222222;
    --hneda: #272525;
    --text: #ffffff;
    --text-tlmeny: rgba(255, 255, 255, 0.7);
    --akcent: #fc7676;      /* podnadpisy sekcií, výzva na úvode (.vyzva) */
    --odkaz: #add8e6;       /* odkazy v texte */
    --meno: #c7ae97;        /* mená v recenziách, kategórie */
    --pata-text: #b8b8b8;
    --sirka: 1140px;
    --sirka-siroka: 1600px;
    --sirka-mriezky: 1120px;
    --hlavicka-vyska: 97px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--pozadie);
    color: var(--text);
    font-family: "Jost", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.obal { max-width: var(--sirka); margin: 0 auto; padding: 0 20px; }
.sekcia-siroka .obal { max-width: var(--sirka-siroka); }

/* ---- Hlavička ---- */
.hlavicka {
    position: sticky; top: 0; z-index: 50;
    height: var(--hlavicka-vyska);
    background: #000;
}
.hlavicka-priesvitna { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, 0.41); }
.hlavicka-priesvitna.pevna { position: fixed; background: #000; }
.hlavicka-obal {
    max-width: var(--sirka-siroka); margin: 0 auto; padding: 0 20px; height: 100%;
    display: flex; align-items: center;
}
.logo { display: block; flex: 0 0 auto; }
.logo img { height: 71px; width: auto; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.menu-zoznam { display: flex; gap: 24px; }
.menu-zoznam a {
    color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.4px;
    transition: color 0.2s;
}
.menu-zoznam a:hover, .menu-zoznam a.aktivna { color: var(--akcent); }
.socialne { display: flex; gap: 16px; align-items: center; }
.socialne a { display: block; color: #fff; transition: color 0.2s; }
.socialne a:hover { color: var(--akcent); }
.socialne svg { width: 13px; height: 13px; display: block; }

/* Hamburger — na desktope skrytý */
.menu-prepinac {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px; margin-left: auto;
}
.menu-prepinac span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.menu-otvorene .menu-prepinac span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-otvorene .menu-prepinac span:nth-child(2) { opacity: 0; }
.menu-otvorene .menu-prepinac span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Hero (úvod) ---- */
.hero {
    position: relative; overflow: hidden; background: #000;
    height: 100vh; min-height: 560px; max-height: 993px;
}
.hero-slideshow, .hero-snimka { position: absolute; inset: 0; }
.hero-snimka { opacity: 0; transition: opacity 1.6s ease; }
.hero-snimka.aktivna { opacity: 1; }
.hero-snimka picture { display: contents; }
.hero-snimka img { width: 100%; height: 100%; object-fit: cover; }
.hero-snimka.aktivna img { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---- Sekcie ---- */
.sekcia { position: relative; padding: 70px 0; }
.sekcia > .obal { position: relative; z-index: 1; }
.sekcia-tmava { background: var(--tmava); }
.sekcia-seda { background: var(--seda); }
.sekcia-hneda { background: var(--hneda); }
.sekcia-s-pozadim { padding: 120px 0; overflow: hidden; }
.sekcia-s-pozadim > picture { display: contents; }
.sekcia-pozadie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sekcia-prekrytie { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; }

/* Názov stránky (H1), keď ho nenesie nadpis prvej sekcie (O mne, Kontakt) */
.stranka-uvod { text-align: center; margin-bottom: 30px; }
.stranka-nadpis {
    margin: 10px 0 0;
    font-size: 32px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.35; text-transform: uppercase;
}
/* Breadcrumbs (viditeľné + BreadcrumbList v JSON-LD) */
.breadcrumbs { text-align: center; margin-bottom: 26px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; }
.breadcrumbs li { color: rgba(255, 255, 255, 0.45); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.breadcrumbs a { color: rgba(255, 255, 255, 0.7); transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--akcent); }
.breadcrumbs span { color: #fff; }
/* Nadpis nad galériou článku (H2 s názvom priestoru) */
.nadpis-galerie { text-align: center; margin: 0 0 34px; font-size: 18px; letter-spacing: 3px; }
.popis-zaver { margin-top: 1em; }
/* Príbeh svadby (text o priebehu dňa) a úvod mestskej stránky — dlhší text zarovnaný vľavo */
.popis-vlavo, .pribeh { text-align: left; }
.pribeh { max-width: 800px; margin: 36px auto 0; }
.pribeh-nadpis { text-align: center; font-size: 18px; letter-spacing: 3px; margin: 0 0 18px; }
/* Stránka služby a texty galérií */
.sluzba-text { max-width: 800px; margin: 40px auto 0; }
.sluzba-nadpis { margin-top: 44px; }
.sluzba-text h2:first-child { margin-top: 0; }
/* Päta: odkazy na mestské stránky */
.pata-mesta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 22px; }
.pata-mesta span, .pata-mesta a { color: var(--pata-text); font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.pata-mesta a { color: #555; transition: color 0.2s; }
.pata-mesta a:hover { color: var(--akcent); }

/* ---- Nadpis sekcie ---- */
.nadpis-sekcie { text-align: center; margin: 0 auto 44px; }
.nadpis-sekcie:last-child { margin-bottom: 0; }
.podnadpis {
    display: inline-block; margin: 0 0 24px;
    color: var(--akcent); font-size: 13px; font-weight: 500; letter-spacing: 6px; line-height: 1.6;
    text-transform: uppercase;
}
.podnadpis::before, .podnadpis::after {
    content: ""; display: inline-block; width: 30px; height: 1px;
    background: rgba(255, 255, 255, 0.7); vertical-align: middle; margin: 0 16px;
}
.bez-ciar .podnadpis::before, .bez-ciar .podnadpis::after { display: none; }
.sekcia-s-pozadim .podnadpis { color: #fff; } /* na fotke koralová nesedí */
.podnadpis a { color: #fff; }
.nadpis {
    color: #fff; font-size: 25px; font-weight: 500; letter-spacing: 2.5px; line-height: 1.4;
    text-transform: uppercase; margin-bottom: 22px;
}
.nadpis-sekcie-velky .nadpis { font-size: 32px; letter-spacing: 0.5px; line-height: 1.35; }
.nadpis:last-child { margin-bottom: 0; }
.popis {
    max-width: 1000px; margin: 0 auto;
    color: var(--text-tlmeny); font-size: 16px; font-weight: 400; line-height: 27px;
}
.popis p { margin-bottom: 1em; }
.popis p:last-child { margin-bottom: 0; }
.popis a { color: var(--odkaz); text-decoration: underline; }
.popis strong { color: #fff; font-weight: 500; }
/* Podnadpisy odsekov v texte (príbeh svadby, FAQ) */
.popis h3 {
    color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 2px; line-height: 1.5;
    text-transform: uppercase; margin: 28px 0 10px;
}
/* Výzva pod H1 na úvode (termíny + cena) */
.popis .vyzva { color: var(--akcent); font-size: 18px; letter-spacing: 2.5px; margin: 8px 0; }
.popis .vyzva a { color: inherit; text-decoration: none; }
.popis .vyzva a:hover { color: #fff; }
.tlacidlo-riadok { margin-top: 30px; }
.tlacidlo {
    display: inline-block; padding: 10px 24px; border: 2px solid #fff; border-radius: 5px;
    color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 18px;
    text-transform: uppercase; transition: background 0.2s, color 0.2s;
}
.tlacidlo:hover { background: #fff; color: #000; }

/* ---- Späť na … ---- */
.spat-riadok { text-align: center; margin: 36px 0 0; }
.sekcia .mriezka + .spat-riadok { margin-top: 40px; }
.spat {
    display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
    transition: color 0.2s;
}
.spat:hover { color: var(--akcent); }
.spat svg { width: 26px; height: 26px; }

/* ---- Mriežka fotiek ---- */
.mriezka {
    display: grid; gap: 2px; max-width: var(--sirka-mriezky); margin: 10px auto;
    grid-template-columns: repeat(var(--stlpce, 3), 1fr);
}
.mriezka-2 { --stlpce: 2; } .mriezka-3 { --stlpce: 3; } .mriezka-4 { --stlpce: 4; } .mriezka-5 { --stlpce: 5; } .mriezka-6 { --stlpce: 6; }
.mriezka-masonry.js-masonry { grid-auto-rows: 2px; }
/* Galérie a články: mriežka na celú šírku (ako pôvodný web), väčšie medzery, menšie zaoblenie */
.sekcia-siroka .mriezka-masonry { max-width: none; gap: 6px; }
.sekcia-siroka .mriezka-masonry .mriezka-polozka { border-radius: 6px; }
.mriezka-polozka {
    position: relative; display: block; overflow: hidden; border-radius: 8px; background: #000;
}
.mriezka-stvorce .mriezka-polozka { aspect-ratio: 1; border-radius: 15px; }
.mriezka-polozka picture { display: contents; }
.mriezka-polozka img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mriezka-masonry .mriezka-polozka img { height: auto; }
.mriezka-masonry.js-masonry .mriezka-polozka img { height: 100%; }
.mriezka-polozka:hover img { transform: scale(1.06); }
.mriezka-ikona {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.3s;
}
.mriezka-ikona::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
}
.mriezka-ikona-plus::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M416 208H272V64c0-17.7-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32v144H32c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h144v144c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V304h144c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32z'/%3E%3C/svg%3E");
}
.mriezka-polozka:hover .mriezka-ikona, .clanok-obrazok:hover .mriezka-ikona { opacity: 1; }

/* ---- Karty článkov ---- */
.clanky {
    display: grid; gap: 8px; max-width: var(--sirka-mriezky); margin: 0 auto;
    grid-template-columns: repeat(var(--stlpce, 3), 1fr);
}
.clanky-2 { --stlpce: 2; } .clanky-3 { --stlpce: 3; } .clanky-4 { --stlpce: 4; }
.clanok-obrazok { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: #000; }
.clanky-stvorce .clanok-obrazok { aspect-ratio: 1; }
.clanok-obrazok picture { display: contents; }
.clanok-obrazok img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.clanok-obrazok:hover img { transform: scale(1.06); }
.clanok-info { text-align: center; padding: 14px 10px 18px; }
.kategorie { color: var(--meno); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.clanok-nadpis { font-size: 15px; font-weight: 500; letter-spacing: 1px; line-height: 1.35; text-transform: uppercase; margin-bottom: 8px; }
.clanok-nadpis a { color: #fff; transition: color 0.2s; }
.clanok-nadpis a:hover { color: var(--akcent); }
.clanok-popis { color: #fff; font-size: 14px; font-weight: 400; letter-spacing: 0.3px; line-height: 21px; }

/* ---- Flip boxy kategórií ---- */
.flip-boxy { display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 4), 1fr); }
.flip-boxy-2 { --n: 2; } .flip-boxy-4 { --n: 4; }
.flip-box { display: block; height: 400px; perspective: 1200px; }
.flip-vnutro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s; }
.flip-box:hover .flip-vnutro, .flip-box.otoceny .flip-vnutro { transform: rotateY(180deg); }
.flip-strana {
    position: absolute; inset: 0; overflow: hidden; background: #000;
    display: flex; align-items: center; justify-content: center;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flip-strana picture { display: contents; }
.flip-strana img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-prekrytie { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); }
.flip-zadna { transform: rotateY(180deg); }
.flip-predna h2 {
    position: relative; padding: 0 20px; text-align: center;
    color: #fff; font-size: 25px; font-weight: 500; letter-spacing: 2.5px; line-height: 1.4; text-transform: uppercase;
}
.flip-zadna .tlacidlo { position: relative; }

/* ---- Recenzie ---- */
.recenzie { max-width: 900px; margin: 0 auto; text-align: center; }
.recenzia { display: none; }
.recenzia.aktivna { display: block; animation: objavenie 0.9s ease; }
@keyframes objavenie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.recenzia-fotka { width: 150px; height: 150px; margin: 0 auto 26px; border-radius: 50%; overflow: hidden; }
.recenzia-fotka picture { display: contents; }
.recenzia-fotka img { width: 100%; height: 100%; object-fit: cover; }
.recenzia-text p { color: #fff; font-size: 15px; font-weight: 300; line-height: 1.6; }
.recenzia-meno { margin-top: 22px; color: var(--meno); font-size: 11px; font-weight: 500; letter-spacing: 1.7px; text-transform: uppercase; }
.recenzie-bodky { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.recenzie-bodka { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background 0.2s; }
.recenzie-bodka.aktivna, .recenzie-bodka:hover { background: #fff; }

/* ---- Rad obrázkov (logá partnerov, podpis + profilovka) ---- */
.obrazky-rad { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; margin: 10px auto; }
/* Logá partnerov (.obrazky-rad-loga): ľubovoľný počet, na desktope v jednom rade, na užších obrazovkách zalomené na stred */
.obrazky-rad-loga .obrazok { flex: 0 1 160px; min-width: 0; }
/* Podpis + profilovka (O mne): pod sebou, na stred, fotka s bielym rámom ako v pôvodnom webe */
.obrazky-rad-2 { flex-direction: column; gap: 24px; margin-top: 30px; }
.obrazok { display: block; }
.obrazok picture { display: contents; }
.obrazok img { max-height: 90px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; transition: opacity 0.2s; }
.obrazky-rad-2 .obrazok-foto img { max-height: none; width: 220px; height: 220px; object-fit: cover; border: 4px solid #fff; }
.obrazok-mensi img { max-height: 66px; max-width: 76%; }
a.obrazok:hover img { opacity: 0.7; }

/* ---- Karusel fotiek (O mne) ---- */
.karusel { overflow: hidden; }
.karusel-pas { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.karusel-pas::-webkit-scrollbar { display: none; }
.karusel-snimka { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; aspect-ratio: 3 / 2; overflow: hidden; }
.karusel-snimka picture { display: contents; }
.karusel-snimka img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 404 ---- */
.sekcia-404 { padding: 120px 0; min-height: 60vh; }

/* ---- Päta ---- */
.pata { background: #fff; color: #000; text-align: center; padding: 44px 20px 38px; }
.pata .socialne { justify-content: center; gap: 24px; margin-bottom: 36px; }
.pata .socialne a { color: #000; }
.pata .socialne svg { width: 19px; height: 19px; }
.pata .socialne a:hover { color: var(--akcent); }
.pata-logo { display: inline-block; margin-bottom: 26px; }
.pata-logo img { height: 60px; width: auto; } /* menšie než v hlavičke (71px) */
.copyright { color: var(--pata-text); font-size: 9px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; }

/* ---- Lightbox ---- */
.lightbox {
    position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.95);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-obsah { position: relative; margin: 0; max-width: 100%; }
.lightbox-obsah img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; z-index: 2; color: #fff; font-size: 34px; line-height: 1; opacity: 0.8; transition: opacity 0.2s; padding: 10px 16px; }
.lightbox button:hover { opacity: 1; }
.lightbox-zavriet { top: 10px; right: 14px; font-size: 44px; }
.lightbox-predosla { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-dalsia { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-pocitadlo { position: fixed; bottom: 12px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 12px; letter-spacing: 2px; }
body.lightbox-otvoreny { overflow: hidden; }

/* ---- Responzívne ---- */
@media (max-width: 1100px) {
    .menu-zoznam { gap: 18px; }
    .menu-zoznam a { font-size: 13px; }
    .flip-box { height: 320px; }
}
@media (max-width: 900px) {
    :root { --hlavicka-vyska: 80px; }
    .logo img { height: 56px; }
    .menu-prepinac { display: flex; }
    .menu {
        position: fixed; top: var(--hlavicka-vyska); left: 0; right: 0; bottom: 0;
        flex-direction: column; justify-content: flex-start; gap: 30px; padding: 40px 20px;
        background: rgba(0, 0, 0, 0.96); transform: translateX(100%); transition: transform 0.3s ease;
    }
    .menu-otvorene .menu { transform: none; }
    .menu-zoznam { flex-direction: column; align-items: center; gap: 22px; }
    .menu-zoznam a { font-size: 18px; }
    .hero { height: 70vh; min-height: 420px; }
    .sekcia { padding: 50px 0; }
    .sekcia-s-pozadim { padding: 80px 0; }
    .nadpis-sekcie-velky .nadpis { font-size: 26px; }
    .stranka-nadpis { font-size: 24px; }
    .mriezka-4, .mriezka-5, .mriezka-6 { --stlpce: 3; }
    .clanky-3, .clanky-4 { --stlpce: 2; }
    .flip-boxy-4 { --n: 2; }
    .obrazky-rad-loga .obrazok { flex: 0 0 calc((100% - 80px) / 3); }
    .karusel-snimka { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 600px) {
    .podnadpis { letter-spacing: 3px; }
    .podnadpis::before, .podnadpis::after { width: 16px; margin: 0 8px; }
    .nadpis { font-size: 21px; letter-spacing: 1.5px; }
    .mriezka, .mriezka-4, .mriezka-5, .mriezka-6 { --stlpce: 2; }
    .clanky, .clanky-2, .clanky-3, .clanky-4 { --stlpce: 1; }
    .flip-boxy, .flip-boxy-2, .flip-boxy-4 { --n: 1; }
    .flip-box { height: 260px; }
    .obrazky-rad-loga .obrazok { flex: 0 0 calc((100% - 40px) / 2); }
    .karusel-snimka { flex-basis: 100%; }
}