/* Základné resetovanie štýlov pre všetky elementy */
body {
    font-family: Arial, sans-serif; /* Nastaví predvolené písmo pre celú stránku na 'Arial'. Ak Arial nie je dostupný, použije sa generické 'sans-serif' (bezpätkové písmo). */
    margin: 0; /* Odstráni všetky predvolené vonkajšie okraje (marginy) okolo tela stránky, ktoré prehliadače zvyknú pridávať. */
    padding: 0; /* Odstráni všetky predvolené vnútorné odsadenia (paddingy) v tele stránky. */
    box-sizing: border-box; /* Nastaví box model tak, aby sa šírka a výška elementu počítala vrátane paddingu a borderu. To uľahčuje rozloženie elementov. */
    background-color: #fff; /* Nastaví farbu pozadia celej stránky na bielu (#fff je hexadecimálny kód pre bielu). */
}

/* -- DEFINÍCIA CENTRÁLNEJ ŠÍRKY PRE CELÝ OBSAH -- */
:root {
    --main-content-max-width: 1000px; /* Definuje vlastnú CSS premennú (--main-content-max-width) a nastaví jej hodnotu na 1000 pixelov. Túto premennú potom môžeš použiť na viacerých miestach a zmeniť ju globálne. */
}

/* Hlavička stránky */
header {
    background-color: #f7f7f7; /* Nastaví svetlošedú farbu pozadia pre hlavičku stránky. */
    color: #000; /* Nastaví predvolenú farbu textu v hlavičke na čiernu. */
    padding: 1em; /* Pridá vnútorné odsadenie 1em (relatívne k veľkosti písma) na všetkých stranách obsahu hlavičky. */
    width: 100%; /* Hlavička zaberie celú dostupnú šírku rodičovského elementu (typicky 100% šírky okna prehliadača). */
    box-sizing: border-box; /* Zabezpečí, že padding je zahrnutý do celkovej šírky hlavičky, aby sa predišlo pretečeniu. */
    display: flex; /* Použije Flexbox na usporiadanie obsahu vo vnútri hlavičky. To umožňuje flexibilné zarovnávanie. */
    justify-content: center; /* Horizontálne vycentruje obsah vo vnútri Flexbox kontajnera (hlavičky). */
    align-items: center; /* Vertikálne vycentruje obsah vo vnútri Flexbox kontajnera (hlavičky). */
}

/* Kontajner pre logo a navigáciu v hlavičke */
.header-content {
    display: flex; /* Použije Flexbox pre rozloženie prvkov v tomto kontajneri (napríklad logo a navigačné menu). */
    justify-content: space-between; /* Rozdelí prvky v kontajneri tak, aby boli krajné prvky na opačných stranách a priestor medzi nimi bol rovnomerne rozložený. */
    align-items: center; /* Vertikálne vycentruje prvky vo vnútri kontajnera. */
    max-width: var(--main-content-max-width); /* Obmedzí maximálnu šírku tohto kontajnera na hodnotu definovanú v CSS premennej `--main-content-max-width` (1000px). */
    width: 100%; /* Zabezpečí, že kontajner bude vždy zaberať 100% šírky rodičovského elementu, ale nie viac ako `max-width`. */
    padding: 10px 20px; /* Pridá vnútorné odsadenie: 10px hore a dole, 20px vľavo a vpravo. */
    box-sizing: border-box; /* Zabezpečí, že padding je zahrnutý do celkovej šírky tohto elementu. */
}

/* Štýly pre text/odkaz loga */
.logo {
    font-weight: bold; /* Nastaví písmo loga na tučné. */
    color: #000; /* Nastaví farbu textu loga na čiernu. */
    font-size: 24px; /* Nastaví veľkosť písma loga na 24 pixelov. */
    line-height: 1.2; /* Nastaví výšku riadka pre text loga (1.2-násobok veľkosti písma). */
    text-align: center; /* Vycentruje text loga horizontálne. */
    white-space: normal; /* Umožní textu loga zalomiť sa na nový riadok, ak je príliš dlhý. */
    flex-shrink: 0; /* Zabraňuje tomu, aby sa logo zmenšovalo, ak je v Flexbox kontajneri málo miesta. */
    padding-right: 10px; /* Pridá 10px odsadenie vpravo od loga. */
    display: flex; /* Použije Flexbox pre vnútorné zarovnanie (ak je text na viacerých riadkoch alebo sú tam iné prvky). */
    flex-direction: column; /* Usporiada vnútorné prvky loga (napr. text, ak je rozdelený do viacerých riadkov) pod seba. */
    align-items: center; /* Horizontálne vycentruje vnútorné prvky loga. */
}

/* Štýly pre odkaz v logu (ak je logo odkazom) */
.logo a {
    color: #000; /* Nastaví farbu odkazu v logu na čiernu. */
    text-decoration: none; /* Odstráni predvolené podčiarknutie odkazu. */
    display: block; /* Urobí odkaz blokovým elementom, aby zabral celú dostupnú šírku vo svojom kontajneri. */
}

/* Zoznam navigačných položiek (menu) */
nav ul {
    list-style: none; /* Odstráni predvolené odrážky (bodky) zo zoznamu. */
    margin: 0; /* Odstráni predvolené vonkajšie okraje zoznamu. */
    padding: 0; /* Odstráni predvolené vnútorné odsadenia zoznamu. */
    display: flex; /* Použije Flexbox na horizontálne usporiadanie položiek menu. */
    flex-wrap: nowrap; /* Zabraňuje zalomeniu položiek menu na nový riadok, aj keď je málo miesta (budú sa posúvať). */
    justify-content: flex-end; /* Zarovná položky menu na pravú stranu (koniec Flexbox kontajnera). */
    flex-grow: 1; /* Umožní navigačnému menu zabrať všetok dostupný priestor v rámci rodičovského elementu. */
    overflow-x: auto; /* Ak sa menu nezmestí do šírky, umožní horizontálne posúvanie. */
    -webkit-overflow-scrolling: touch; /* Vylepšuje plynulosť posúvania na dotykových zariadeniach iOS (starší prefix). */
    scrollbar-width: none; /* Skryje posuvník vo Firefoxe. */
    -ms-overflow-style: none; /* Skryje posuvník v prehliadačoch Internet Explorer a Edge. */
}

/* Skryje scrollbar v Chrome, Safari */
nav ul::-webkit-scrollbar {
    display: none; /* Skryje posuvník v prehliadačoch založených na WebKit (Chrome, Safari, atď.). */
}

/* Jednotlivé navigačné položky */
nav ul li {
    margin: 0 10px; /* Pridá 10px vodorovný okraj (vľavo a vpravo) medzi jednotlivými položkami menu. */
    flex-shrink: 0; /* Zabraňuje zmenšovaniu položiek menu, ak je málo miesta. */
    min-width: max-content; /* Zabezpečí, aby každá položka menu mala minimálnu šírku potrebnú na zobrazenie celého textu bez zalomenia. */
}

/* Odkazy v navigačnom menu */
nav ul li a {
    text-decoration: none; /* Odstráni podčiarknutie odkazu. */
    color: #555; /* Nastaví farbu textu odkazu na tmavošedú. */
    font-size: 16px; /* Nastaví veľkosť písma odkazu na 16 pixelov. */
    padding: 5px 0; /* Pridá 5px vnútorné odsadenie hore a dole, vľavo a vpravo je 0. */
    transition: color 0.3s ease; /* Zabezpečí plynulý prechod farby textu (počas 0.3 sekundy s pomalým štartom a koncom) pri zmene (napr. pri najazdení myšou). */
}

/* Zmena farby odkazov pri najazdení myšou */
nav ul li a:hover {
    color: #007bff; /* Zmení farbu textu odkazu na modrú, keď naň používateľ prejde myšou. */
}

/* NOVÝ WRAPPER PRE HLAVNÝ OBSAH - APLIKUJE CENTROVANIE A ŠÍRKU NA CELÝ OBSAH STRÁNKY */
.main-content-wrapper {
    max-width: var(--main-content-max-width); /* Obmedzí maximálnu šírku tohto kontajnera na 1000px (z premennej). */
    margin: 0 auto; /* Vycentruje kontajner horizontálne na stránke (0px okraj hore/dole, auto okraj vľavo/vpravo). */
    padding: 1em; /* Pridá 1em vnútorné odsadenie okolo obsahu. */
    box-sizing: border-box; /* Zabezpečí, že padding je zahrnutý do celkovej šírky elementu. */
    overflow: hidden; /* Skryje akýkoľvek obsah, ktorý by pretekal mimo tohto kontajnera. */
}

/* Slider sekcia (ak by bola použitá - tento kód sa v aktuálnom HTML nepoužíva, ale je tu) */
.slider {
    position: relative; /* Nastaví relatívne pozicovanie, čo umožňuje absolútne pozicovanie vnorených elementov (slidov) voči tomuto kontajneru. */
    width: 100%; /* Slider zaberie celú šírku rodičovského elementu. */
    height: 0; /* Pôvodná výška je nastavená na 0, pretože skutočnú výšku určuje `padding-bottom` pre udržanie pomeru strán. */
    padding-bottom: 25%; /* Používa sa na udržanie pomeru strán slideru (napr. 4:1, ak je šírka 100% a výška je 25% zo šírky). */
    max-height: 500px; /* Obmedzí maximálnu výšku slideru na 500 pixelov. */
    overflow: hidden; /* Skryje akýkoľvek obsah, ktorý preteká mimo slideru. */
    margin: 0; /* Odstráni vonkajšie okraje. */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky vrátane paddingu a borderu. */
}

.slide {
    position: absolute; /* Absolútne pozicovanie, vďaka ktorému sa slidy prekrývajú vo vnútri slideru. */
    top: 0; /* Zarovná slide k hornému okraju rodičovského elementu (slideru). */
    left: 0; /* Zarovná slide k ľavému okraju rodičovského elementu. */
    right: 0; /* Zarovná slide k pravému okraju rodičovského elementu. */
    bottom: 0; /* Zarovná slide k spodnému okraju rodičovského elementu. Tým zaberie celú plochu slideru. */
    opacity: 0; /* Nastaví počiatočnú priehľadnosť slide na 0, čo ho robí neviditeľným. */
    transition: opacity 1s ease-in-out; /* Zabezpečí plynulý prechod priehľadnosti (animáciu) počas 1 sekundy s pomalým štartom a koncom. */
    display: block; /* Zabezpečí, že slide je blokový element. */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
}

.slide.active {
    opacity: 1; /* Nastaví priehľadnosť aktívneho slide na 1, čím ho zviditeľní. */
    z-index: 1; /* Zabezpečí, že aktívny slide je zobrazený nad ostatnými (neaktívnymi) slidmi. */
}

.slider img {
    width: 100%; /* Obrázok v slide zaberie celú šírku. */
    height: 100%; /* Obrázok v slide zaberie celú výšku. */
    object-fit: contain; /* Zabezpečí, aby sa celý obrázok zmestil do kontajnera bez orezania, prípadne s prázdnym priestorom okolo. */
    display: block; /* Zabezpečí, že obrázok je blokový element a odstráni prípadné medzery pod ním. */
    max-width: 100%; /* Obmedzí maximálnu šírku obrázka na 100% rodičovského elementu. */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
}

/* ŠTÝLY PRE CENTROVANIE LEN JEDNEJ FOTKY (horný obrázok na stránkach) */
.single-main-image-section {
    padding: 1em 0; /* ZMENA: Zmenšený padding z 2em na 1em (vnútorné odsadenie 1em hore/dole, 0 vľavo/vpravo). */
    display: flex; /* Použije Flexbox na zarovnanie obsahu. */
    justify-content: center; /* Horizontálne vycentruje obsah. */
    align-items: center; /* Vertikálne vycentruje obsah. */
}

.single-main-image-wrapper {
    width: 100%; /* Wrapper zaberie celú šírku (už je vo main-content-wrapper). */
    margin: 0 auto; /* Vycentruje wrapper horizontálne. */
}

/* TOTO JE UPRAVENÁ ČASŤ PRE HORNÚ FOTKU */
.single-main-image-wrapper img {
    max-width: 100%; /* Zabezpečí, že obrázok nepresiahne šírku svojho kontajnera. */
    height: auto; /* Zachováva pomer strán obrázka pri zmene šírky. */
    display: block; /* Zabezpečí, že obrázok je blokový element a odstráni medzery pod ním. */
    margin: 0 auto; /* Horizontálne vycentruje obrázok. */
    object-fit: contain; /* Zabezpečí, aby sa celý obrázok zmestil do kontajnera bez orezania, prípadne s prázdnym priestorom okolo. */
    
    /* TU JE PRIDANÉ JEMNÉ TIEŇOVANIE A OBLEJŠIE ROHY */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Pridá tieň pod obrázok: 0px horizontálne, 8px vertikálne, 16px rozmazanie, farba priesvitná čierna (20% opacity). */
    border-radius: 8px; /* Zaoblí rohy obrázka s polomerom 8 pixelov. */
}

/* Sekcie s textom a fotkami (.text-fotky - používané na index.html) */
.text-fotky {
    padding: 2em 0; /* Vertikálne vnútorné odsadenie 2em (hore a dole). */
    max-width: 100%; /* Zaberie celú šírku `main-content-wrapper`. */
    margin: 0 auto 2em auto; /* Vycentruje sekciu horizontálne a pridá spodný okraj 2em. */
}

.row {
    display: flex; /* Použije Flexbox pre rozloženie obrázka a textu vedľa seba. */
    margin-bottom: 2em; /* Spodný okraj pod každým "riadkom". */
    align-items: center; /* Vertikálne vycentruje prvky v riadku (obrázok a text). */
    gap: 2em; /* Nastaví medzeru 2em medzi prvkami v riadku (Flexbox gap). */
    text-align: left; /* ZAROVNANIE: Text zostane zarovnaný doľava pre desktop. */
}

.row.reverse {
    flex-direction: row-reverse; /* Zmení poradie prvkov v riadku: obrázok bude vpravo, text vľavo. */
}

.row img {
    width: 50%; /* Obrázok zaberie 50% šírky riadku. */
    height: auto; /* Zachováva pomer strán obrázka. */
    object-fit: contain; /* Zabezpečí, aby sa celý obrázok zmestil do kontajnera. */
    border-radius: 10px; /* Zaoblí rohy obrázka s polomerom 10 pixelov. */
    flex-shrink: 0; /* Zabraňuje zmenšovaniu obrázka, ak je v riadku málo miesta. */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Pridá jemný tieň pod obrázok. */
}

.row .text { /* Štýluje textový kontajner v riadku */
    width: 50%; /* Text zaberie 50% šírky riadku. */
    padding: 0; /* Odstráni vnútorné odsadenie. */
    flex-grow: 1; /* Umožní textu zabrať všetok dostupný priestor v riadku. */
    color: #333; /* Nastaví farbu textu na tmavošedú. */
}

/* Všeobecná textová sekcia (.text-section) */
.text-section {
    padding: 2em 0; /* Vertikálne vnútorné odsadenie 2em. */
    text-align: left; /* ZAROVNANIE: Text zostane zarovnaný doľava. */
    max-width: 100%; /* Zaberie celú šírku `main-content-wrapper`. */
    margin: 0 auto; /* Vycentruje sekciu horizontálne. */
    line-height: 1.6; /* Zlepšuje čitateľnosť textu nastavením výšky riadka na 1.6-násobok veľkosti písma. */
}

.text-section h1 {
    text-align: center; /* Vycentruje nadpis h1. */
    margin-bottom: 1em; /* Pridá spodný okraj 1em pod nadpis h1. */
}

.text-section p:first-child {
  text-indent: 3em; /* Odsadí prvý riadok prvého odseku v `.text-section` o 3em. */
}

.text-section p {
    margin-bottom: 1em; /* Pridá spodný okraj 1em pod každý odsek. */
}

.text-section ul {
    list-style: disc inside; /* Použije bodky ako odrážky zoznamu a zarovná ich dovnútra textu. */
    margin-bottom: 1em; /* Pridá spodný okraj 1em pod zoznam. */
    padding-left: 1.5em; /* Odsadí zoznam zľava o 1.5em. */
}
.text-section ul li {
    margin-bottom: 0.5em; /* Pridá spodný okraj 0.5em pod každú položku zoznamu. */
}

/* Sekcia so širokou fotografiou (ak sa používa) */
.wide-foto img {
    width: 80%; /* Obrázok zaberie 80% šírky. */
    height: 100px; /* Pevná výška obrázka na 100 pixelov. */
    object-fit: cover; /* Obrázok vyplní priestor kontajnera a oreže sa, ak je to potrebné, aby sa zachoval pomer strán. */
    border-radius: 10px; /* Zaoblí rohy obrázka. */
    margin: 2em auto; /* Vycentruje obrázok horizontálne a pridá vertikálne okraje 2em. */
    display: block; /* Zabezpečí, že obrázok je blokový element. */
}

/* Galéria obrázkov (používané na svadba.html) */
.galeria {
    padding: 2em 0; /* Vertikálne vnútorné odsadenie 2em. */
    max-width: 100%; /* Zaberie celú šírku `main-content-wrapper`. */
    margin: 0 auto; /* Vycentruje galériu horizontálne. */
}

/* Koláž obrázkov v galérii */
.kolaz {
    display: grid; /* Použije Grid layout pre rozloženie obrázkov. */
    grid-template-columns: repeat(4, 1fr); /* Vytvorí 4 rovnako široké stĺpce (každý zaberie 1 časť dostupného priestoru). */
    grid-gap: 10px; /* Nastaví medzeru 10px medzi položkami v gride. */
    justify-content: center; /* Horizontálne vycentruje grid v rodičovskom elemente. */
}

/* Obrázky v koláži */
.kolaz img {
    width: 100%; /* Obrázok zaberie celú šírku svojej grid položky. */
    height: auto; /* Zachováva pomer strán. */
    object-fit: cover; /* Obrázok vyplní priestor a oreže sa. */
    border-radius: 10px; /* Zaoblí rohy obrázka. */
    transition: transform 0.2s; /* Zabezpečí plynulú animáciu zmeny transformácie počas 0.2 sekundy. */
    cursor: pointer; /* Zmení kurzor myši na ukazovateľ (ruku), naznačujúc interaktivitu. */
}

/* Zväčšenie obrázka v koláži pri najazdení myšou */
.kolaz img:hover {
    transform: scale(1.25); /* Zväčší obrázok o 25% (1.25-násobne) pri najazdení myšou. */
}

/* Lightbox navigačné šípky (štýly pre Lightbox JS knižnicu) */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
    opacity: 1; /* Zabezpečí, že navigačné šípky Lightboxu sú plne viditeľné. */
}

/* Formulár pre kontakty (teraz hlavný kontajner, ktorý nahrádza main-content-wrapper pre túto sekciu) */
.kontakt-info {
    margin-bottom: 2em; /* Spodný okraj */
    max-width: 1200px; /* NOVINKA: Zväčšená maximálna šírka pre širší obsah na desktope */
    margin-left: auto; /* NOVINKA: Vycentruje element horizontálne */
    margin-right: auto; /* NOVINKA: Vycentruje element horizontálne */
    padding: 1em; /* NOVINKA: Pridal som padding aj vľavo/vpravo pre lepšie odsadenie */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
}

.kontakt-info .row { /* Toto je pre desktop verziu, kde sú text a formulár vedľa seba */
    display: flex;
    justify-content: center; /* Zabezpečí centrovanie obsahu v riadku */
    align-items: flex-start; /* Zarovná položky hore */
    margin-bottom: 2em; /* Spodný okraj pod každým "riadkom". */
    gap: 4em; /* Zväčšená medzera medzi stĺpcami */
}

.kontakt-text {
    width: 40%; /* Textová časť zaberie 40% šírky */
    padding: 0; /* Odstráni vnútorné odsadenie. */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
}

.kontakt-form {
    width: 50%; /* Formulár zaberie 50% šírky - bude širší */
    padding: 0; /* Odstráni vnútorné odsadenie. */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
}

.kontakt-form form {
    width: 100%; /* Formulár zaberie celú šírku svojho kontajnera. */
    padding: 20px; /* Vnútorné odsadenie formulára 20px zo všetkých strán. */
    background-color: #f7f7f7; /* Svetlošedé pozadie formulára. */
    border-radius: 10px; /* Zaoblí rohy formulára. */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Pridá jemný tieň formuláru. */
}

.kontakt-form label {
    display: block; /* Urobí label blokovým elementom, aby zabral celú šírku a ďalší prvok sa zobrazil na novom riadku. */
    margin-bottom: 10px; /* Spodný okraj 10px pod labelom. */
    font-weight: bold; /* Tučné písmo labelu. */
}

.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
    width: 100%; /* Vstupné polia (input, select, textarea) zaberú celú šírku svojho kontajnera. */
    padding: 10px; /* Vnútorné odsadenie 10px pre vstupné polia. */
    margin-bottom: 20px; /* Spodný okraj 20px pod vstupnými poliami. */
    border: 1px solid #ccc; /* Tenký šedý okraj (border) vstupných polí. */
    border-radius: 5px; /* Zaoblí rohy vstupných polí. */
    box-sizing: border-box; /* Zabezpečí, že padding a border sú zahrnuté do celkovej šírky. */
}

.kontakt-form input[type="submit"] {
    background-color: #333; /* Tmavá farba pozadia pre tlačidlo odoslania formulára. */
    color: #fff; /* Biela farba textu tlačidla. */
    padding: 10px 20px; /* Vnútorné odsadenie 10px hore/dole, 20px vľavo/vpravo pre tlačidlo. */
    border: none; /* Odstráni okraj tlačidla. */
    border-radius: 5px; /* Zaoblí rohy tlačidla. */
    cursor: pointer; /* Zmení kurzor myši na ukazovateľ. */
}

.kontakt-form input[type="submit"]:hover {
    background-color: #555; /* Tmavšia farba pozadia tlačidla pri najazdení myšou. */
}

.map {
    width: 100%; /* Mapa zaberie celú šírku kontajnera. */
    text-align: center; /* Vycentruje obsah (iframe s mapou). */
    margin-top: 2em; /* Horný okraj 2em nad mapou. */
}

.map iframe {
    width: 100%; /* Iframe s mapou zaberie celú šírku. */
    height: 450px; /* Pevná výška mapy na 450 pixelov. */
    border: 0; /* Odstráni okraj (border) iframe. */
    max-width: 600px; /* Obmedzí maximálnu šírku mapy na 600 pixelov. */
}

/* Pätička stránky */
footer {
    color: #000; /* Nastaví farbu textu v pätičke na čiernu. */
    padding: 1em; /* Vnútorné odsadenie 1em zo všetkých strán. */
    text-align: center; /* Vycentruje text v pätičke. */
    clear: both; /* Vyčistí efekty floatovania, zabezpečí, že pätička bude pod všetkým predchádzajúcim floatovaným obsahom. */
    background-color: #fff; /* Biele pozadie pätičky. */
}

/* ŠTÝLY PRE ZOBRAZENIE VIACERÝCH OBRÁZKOV V RIADKU (z fotostudio33.html) */
.intro-images.grid-display {
    display: grid; /* Použije Grid layout. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Dynamické stĺpce: automaticky sa prispôsobuje počet stĺpcov, pričom každý stĺpec má minimálnu šírku 180px a maximálne 1fr (rovnaký podiel). */
    justify-content: center; /* Horizontálne vycentruje grid v rodičovskom elemente. */
    gap: 1.5em; /* Medzera 1.5em medzi grid položkami. */
    padding: 2em 0; /* Vertikálne vnútorné odsadenie 2em. */
    max-width: 100%; /* Zaberie celú šírku `main-content-wrapper`. */
    margin: 0 auto; /* Vycentruje grid-display horizontálne. */
    align-items: stretch; /* Položky v gride sa roztiahnu na rovnakú výšku. */
}

.intro-images.grid-display >.image-wrapper {
    display: flex; /* Použije Flexbox pre vnútorné usporiadanie (obrázok + text). */
    flex-direction: column; /* Usporiada obrázok a text pod seba. */
    align-items: center; /* Horizontálne vycentruje obsah. */
    justify-content: flex-start; /* Zarovná obsah k vrchu kontajnera. */
    text-align: center; /* Vycentruje text. */
    background-color: #fff; /* Biele pozadie kontajnera. */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Jemný tieň. */
    border-radius: 10px; /* Zaoblí rohy kontajnera. */
    overflow: hidden; /* Skryje pretečenie obsahu. */
    height: auto; /* Automatická výška. */
    min-height: 250px; /* Minimálna výška kontajnera na 250px. */
}

.intro-images.grid-display >.image-wrapper img {
    width: 100%; /* Obrázok zaberie celú šírku svojho kontajnera. */
    height: 180px; /* Pevná výška obrázka na 180 pixelov. */
    object-fit: cover; /* Obrázok vyplní priestor a oreže sa, ak je to potrebné, aby sa zachoval pomer strán. */
    border-radius: 10px 10px 0 0; /* Zaoblí len horné rohy (horná-ľavá, horná-pravá). */
    flex-shrink: 0; /* Zabraňuje zmenšovaniu obrázka. */
}

.intro-images.grid-display >.image-wrapper .image-text {
    width: 100%; /* Textový kontajner zaberie celú šírku. */
    padding: 0.5em; /* Vnútorné odsadenie 0.5em. */
    box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
    flex-grow: 1; /* Umožní textu zabrať všetok dostupný priestor. */
    display: flex; /* Použije Flexbox na vnútorné zarovnanie textu. */
    flex-direction: column; /* Usporiada text pod seba. */
    justify-content: center; /* Vertikálne vycentruje text. */
    align-items: center; /* Horizontálne vycentruje text. */
}
.intro-images.grid-display >.image-wrapper .image-text p {
    margin: 0; /* Odstráni okraje odseku. */
    font-size: 0.9em; /* Menšia veľkosť písma. */
    word-wrap: break-word; /* Umožní zalomenie dlhých slov. */
    text-align: left; /* ZAROVNANIE: Text tu bude zarovnaný doľava. */
}

/* GOOGLE RECENZIE SEKCIA (používané na index.html a svadba.html) */
.google-reviews-promo {
    margin-top: 30px; /* Horný okraj 30px. */
    padding: 20px; /* Vnútorné odsadenie 20px. */
    background-color: #e9e9e9; /* Svetlošedé pozadie. */
    border-radius: 8px; /* Zaoblí rohy. */
    text-align: center; /* Vycentruje text. */
    max-width: 100%; /* Zaberie celú šírku `main-content-wrapper`. */
    margin: 30px auto 0 auto; /* Vycentruje a pridá horný/spodný okraj (hore 30px, dole 0). */
}

.google-reviews-promo img {
    max-width: 250px; /* Maximálna šírka obrázka na 250px. */
    height: auto; /* Zachováva pomer strán. */
    border-radius: 5px; /* Zaoblí rohy obrázka. */
    margin-bottom: 15px; /* Spodný okraj 15px. */
    object-fit: contain; /* Zabezpečí, aby sa celý obrázok zmestil bez orezania. */
}

.google-reviews-promo p a {
    color: #007bff; /* Modrá farba odkazu. */
    text-decoration: none; /* Odstráni podčiarknutie. */
    font-weight: bold; /* Tučné písmo. */
}

.google-reviews-promo p a:hover {
    text-decoration: underline; /* Podčiarkne odkaz pri najazdení myšou. */
}

/* --- RESPOZÍVNE ŠTÝLY PRE MOBILNÉ ZARIADENIA (do 768px šírky) --- */
@media (max-width: 768px) { /* Médiový dotaz: štýly sa aplikujú, ak je šírka obrazovky menšia alebo rovná 768px. */
    /* ==== HLAVIČKA A NAVIGÁCIA ==== */
    header {
        padding: 0.5em 0; /* Menšie vertikálne odsadenie hlavičky. */
    }

  .header-content {
        flex-direction: column; /* Usporiada logo a navigáciu pod seba (namiesto vedľa seba). */
        align-items: center; /* Horizontálne vycentruje obsah. */
        justify-content: center; /* Vertikálne vycentruje obsah. */
        padding: 0; /* Odstráni odsadenie. */
        max-width: 100%; /* Zaberie celú šírku. */
        width: 100%; /* Zaberie celú šírku. */
    }

  .logo {
        margin-bottom: 5px; /* Spodný okraj 5px pod logom. */
        font-size: 20px; /* Menšia veľkosť písma loga. */
        padding: 5px 0; /* Vertikálne odsadenie loga. */
        width: 100%; /* Logo zaberie celú šírku. */
        text-align: center; /* Vycentruje text loga. */
        white-space: normal; /* Umožní zalomenie textu. */
        flex-direction: column; /* Usporiada text loga pod seba. */
        align-items: center; /* Horizontálne vycentruje text loga. */
    }
    
  .logo br {
        display: block; /* Zabezpečí zalomenie riadku v logu, aby sa text rozdelil na viac riadkov. */
    }
    
    nav {
        width: 100%; /* Navigácia zaberie celú šírku. */
        padding: 0; /* Odstráni odsadenie. */
        margin: 0; /* Odstráni okraje. */
    }

    nav ul {
        flex-direction: column; /* Vracia na stĺpcové usporiadanie pre mobil */
        flex-wrap: nowrap; /* Zabraňuje zalomeniu, aby boli položky pod sebou */
        align-items: center; /* Horizontálne vycentruje položky menu. */
        justify-content: center; /* Vertikálne vycentruje položky menu. */
        padding: 0; /* Odstráni odsadenie. */
        margin: 0; /* Odstráni okraje. */
        width: 100%; /* Zoznam zaberie celú šírku. */
        list-style: none; /* Odstráni bodky zoznamu. */
        overflow-x: hidden; /* Skryje horizontálne pretečenie */
    }

    nav ul li {
        margin: 3px 0; /* Menšie vertikálne okraje medzi položkami menu. */
        width: 100%; /* Položka menu zaberie celú šírku. */
        text-align: center; /* Vycentruje text položky menu. */
        flex-shrink: 0; /* Zabraňuje zmenšovaniu položiek menu. */
        min-width: unset; /* Ponechaj unset, aby neobmedzoval šírku. */
    }

    nav ul li a {
        font-size: 14px; /* Menšia veľkosť písma odkazu. */
        padding: 5px 10px; /* Vnútorné odsadenie odkazu. */
        display: block; /* Urobí odkaz blokovým elementom. */
        text-decoration: none; /* Odstráni podčiarknutie. */
        color: #555; /* Nastaví farbu odkazu. */
    }
    nav ul li a:hover {
        color: #007bff; /* Modrá farba pri najazdení myšou. */
    }

    /* ==== NOVÝ WRAPPER PRE HLAVNÝ OBSAH ==== */
  .main-content-wrapper {
        padding: 0.5em; /* Menší padding na mobile. */
        max-width: 100%; /* Zaberie celú šírku obrazovky. */
        width: 100%; /* Zaberie celú šírku obrazovky. */
        box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
        overflow: hidden; /* Skryje pretečenie obsahu. */
    }

    /* ==== SEKCE S TEXTOM A FOTKAMI (.text-fotky) - OPRAVENÉ PRE INDEX.HTML ==== */
  .text-fotky {
        padding: 1em 0; /* Menší padding pre mobil. */
        max-width: 100%; /* Zaberie celú šírku `main-content-wrapper`. */
        margin: 0 auto; /* Vycentruje sekciu. */
    }

  .row {
        flex-direction: column!important; /*!! KĽÚČOVÁ ZMENA: Nariadi, aby sa prvky v riadku zoradili pod seba (stĺpcovo), a `!important` prebije prípadné iné pravidlá. */
        text-align: left; /* ZMENA: Zarovná text doľava pre celý riadok na mobile. */
        margin-bottom: 2em; /* Spodný okraj. */
        gap: 0.5em; /* Menšia medzera medzi prvkami. */
    }
   
  .row img {
        width: 100%; /* Obrázok zaberie celú šírku. */
        height: auto; /* Zachová pomer strán. */
        max-height: 250px; /* Maximálna výška obrázka. */
        margin-bottom: 0.5em; /* Spodný okraj. */
        object-fit: contain; /* Zabezpečí, aby sa obrázok zmestil bez orezania. */
        flex-shrink: 0; /* Zabraňuje scvrkávaniu obrázka. */
        order: 2; /* Obrázok bude zobrazený ako druhý v poradí Flexboxu. */
    }
  .row .text {
        width: 100%; /* Text zaberie celú šírku. */
        padding: 0.5em; /* Vnútorné odsadenie textu. */
        margin-top: 0.5em; /* Horný okraj. */
        color: #333; /* Nastaví farbu textu. */
        background-color: transparent; /* Zabezpečí priehľadné pozadie. */
        font-size: 1em; /* Veľkosť písma. */
        line-height: 1.5em; /* Výška riadka. */
        order: 1; /* Text bude zobrazený ako prvý v poradí Flexboxu. */
        display: block; /* Zabezpečí, že je element blokový. */
        min-height: auto; /* Výška sa prispôsobí obsahu. */
        z-index: 10; /* Zabezpečí, že text je nad ostatnými elementmi (ak sa prekrývajú). */
        position: relative; /* Aby fungoval z-index. */
        overflow: visible; /* Zabezpečí, že text nebude orezaný. */
    }
  .row .text h2 {
        margin-bottom: 0.2em; /* Spodný okraj pod nadpisom. */
        line-height: 1.2em; /* Výška riadka. */
        font-size: 1.4em; /* Veľkosť písma nadpisu. */
        text-align: left; /* TOTO NECHÁME PRE H2, aby bol nadpis zarovnaný doľava. */
    }
  .row .text p {
        margin-top: 0.2em; /* Horný okraj pod odsekom. */
        text-indent: 0; /* Odstráni odsadenie prvého riadka. */
        line-height: 1.5em; /* Výška riadka. */
        font-size: 0.95em; /* Veľkosť písma odseku. */
        text-align: left; /* TOTO NECHÁME PRE P, aby bol text odseku zarovnaný doľava. */
    }

    /* ==== VŠEOBECNÁ TEXTOVÁ SEKCE (.text-section) ==== */
  .text-section {
        padding: 1em 0; /* Vertikálne vnútorné odsadenie 1em. */
        width: 100%; /* Celá šírka. */
        max-width: 100%; /* Maximálna šírka 100%. */
        text-align: left; /* Zarovnanie textu doľava. */
        margin: 0 auto 1em auto; /* Vycentruje a pridá spodný okraj 1em. */
        box-sizing: border-box; /* Zabezpečí správny výpočet šírky/výšky. */
    }
  .text-section h1 {
        font-size: 1.6em; /* Menšia veľkosť písma nadpisu h1. */
        line-height: 1.2em; /* Výška riadka. */
        margin-bottom: 0.8em; /* Spodný okraj. */
        text-align: left; /* Zarovnanie nadpisu doľava. */
    }
  .text-section h3 { /* Nové pravidlo pre h3 v FAQ */
        font-size: 1.1em; /* Menšia veľkosť písma nadpisu h3. */
        line-height: 1.3em; /* Výška riadka. */
        margin-top: 1em; /* Horný okraj. */
        margin-bottom: 0.3em; /* Spodný okraj. */
    }
  .text-section p {
        font-size: 0.95em; /* Menšia veľkosť písma odseku. */
        line-height: 1.5em; /* Výška riadka. */
        text-align: left!important; /* <--- PRIDANÉ!important SEM PRE ZAROVNANIE POSLEDNÉHO ODSEKU naľavo. */
    }
  .text-section ul {
        list-style: disc inside; /* Bodky pre zoznam a zarovnanie dovnútra. */
        padding-left: 1.2em; /* Odsadenie zľava. */
        font-size: 0.95em; /* Menšia veľkosť písma zoznamu. */
        text-align: left; /* Zarovnanie zoznamu doľava. */
    }
    
    /* Extra pravidlo pre posledný odstavec v main-content-wrapper, ak predchádzajúce zlyhalo */
   .main-content-wrapper >.text-section:nth-last-of-type(2) p {
        text-align: left!important; /* Zarovná text posledného odseku v druhej od konca textovej sekcii doľava s `!important`. */
    }
    /* Prípadne, ak je to úplne posledná text-section pred footerom (môžeš použiť, ak horné nezabralo) */
   .main-content-wrapper.text-section:last-of-type p {
         text-align: left!important; /* Zarovná text úplne posledného odseku v textovej sekcii doľava s `!important`. */
    }

    /* ==== FOTOŠTÚDIO 33 - GRID DISPLAY KOLÁŽE ==== */
  .intro-images.grid-display {
        display: grid; /* Grid layout. */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Dynamické stĺpce s minimálnou šírkou 140px. */
        gap: 0.8em; /* Menšia medzera. */
        padding: 1em 0; /* Menší padding. */
        width: 100%; /* Celá šírka. */
        box-sizing: border-box; /* Správny výpočet šírky/výšky. */
        margin-bottom: 1em; /* Spodný okraj. */
    }
  .intro-images.grid-display >.image-wrapper {
        display: flex; /* Flexbox. */
        flex-direction: column; /* Usporiadanie stĺpcovo. */
        align-items: center; /* Horizontálne vycentruje. */
        justify-content: flex-start; /* Zarovná k vrchu. */
        text-align: center; /* Vycentruje text. */
        background-color: #fff; /* Biele pozadie. */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Tieň. */
        border-radius: 10px; /* Zaoblí rohy. */
        overflow: hidden; /* Skryje pretečenie. */
        height: auto; /* Auto výška. */
        min-height: 250px; /* Minimálna výška. */
    }
  .intro-images.grid-display >.image-wrapper img {
        width: 100%; /* Celá šírka. */
        height: 120px; /* Pevná výška obrázka. */
        object-fit: cover; /* Vyplní priestor a oreže. */
        border-radius: 10px 10px 0 0; /* Zaoblí horné rohy. */
        flex-shrink: 0; /* Zabraňuje zmenšovaniu. */
    }
  .intro-images.grid-display >.image-wrapper .image-text {
        width: 100%; /* Celá šírka. */
        padding: 0.5em; /* Padding. */
        box-sizing: border-box; /* Správny výpočet. */
        flex-grow: 1; /* Zaberie priestor. */
        display: flex; /* Flexbox. */
        flex-direction: column; /* Stĺpcovo. */
        justify-content: center; /* Vertikálne vycentruje. */
        align-items: center; /* Horizontálne vycentruje. */
    }
  .intro-images.grid-display >.image-wrapper .image-text p {
        margin: 0; /* Odstráni okraje. */
        font-size: 0.85em; /* Menšia veľkosť písma. */
        word-wrap: break-word; /* Zalomenie slov. */
        text-align: left; /* Zarovnanie doľava. */
    }

    /* ==== ŠPECIFICKÉ PRE KONTAKTNÚ SEKCIU (na mobile) ==== */
  .kontakt-info {
      max-width: 100%; /* Na mobile obmedzíme šírku na 100% */
      padding: 0.5em; /* Menší padding na mobile */
      margin: 0; /* Odstránime auto margin pre mobil, aby sa prispôsobil celej šírke */
  }
  .kontakt-info .row {
        flex-direction: column; /* Položky sa zoradia pod seba. */
        gap: 1em; /* Medzera medzi prvkami. */
    }
  .kontakt-info .kontakt-text,
  .kontakt-info .kontakt-form {
        width: 100%; /* Celá šírka. */
        padding: 1em; /* Padding. */
        box-sizing: border-box; /* Správny výpočet. */
        order: unset; /* Odstráni vynútené poradie na mobile - zoberie sa poradie z HTML */
    }
  .kontakt-text {
        text-align: left; /* Zarovnanie textu doľava. */
    }
  .kontakt-text p {
        text-align: left; /* Zarovnanie odsekov doľava. */
        margin-left: 0; /* Odstráni ľavý okraj. */
        text-indent: 0; /* Odstráni odsadenie prvého riadka. */
    }
  .kontakt-info .map {
        width: 100%; /* Celá šírka mapy. */
        margin-top: 1em; /* Horný okraj. */
        text-align: center; /* Vycentruje mapu. */
    }
  .kontakt-info .map iframe {
        width: 100%; /* Iframe zaberie celú šírku. */
        height: 250px; /* Menšia výška mapy. */
        max-width: 100%; /* Maximálna šírka 100%. */
    }
  .kontakt-info .row.reverse .kontakt-text {
        order: unset; /* Textová časť bude prvá. */
    }
  .kontakt-info .row.reverse .kontakt-form {
        order: unset; /* Formulár bude druhý. */
    }

    /* ==== PRE CENNIK.HTML: IMAGE STRIP NA MOBILE ==== */
  .image-strip {
        padding: 10px 0; /* Menší padding. */
        justify-content: flex-start; /* Zarovná obrázky na začiatok. */
    }
  .image-strip img {
        width: 80px; /* Menšia šírka obrázka. */
        height: 110px; /* Menšia výška obrázka. */
        min-width: 80px; /* Minimálna šírka. */
        min-height: 110px; /* Minimálna výška. */
        object-fit: cover; /* Vyplní priestor a oreže. */
        max-height: 120px; /* Maximálna výška. */
        flex-basis: auto; /* Automatická báza pre Flexbox. */
        flex-grow: 0; /* Nezaberie dodatočný priestor. */
        flex-shrink: 0; /* Nezmenšuje sa. */
        margin: 0; /* Žiadne okraje. */
        transform: none; /* Žiadne transformácie. */
    }

    /* Úpravy pre centovanie JEDNEJ fotky na doklady na mobiloch */
  .doklad-image-wrapper {
        padding: 10px 0; /* Menší padding. */
    }
  .doklad-image {
        width: 150px; /* Menšia šírka. */
        height: auto; /* Auto výška. */
        object-fit: cover; /* Vyplní a oreže. */
        max-height: 200px; /* Maximálna výška. */
    }

    /* Nový kontajner pre široký obrázok v info.html na mobile */
  .wide-image-container {
        margin: 1.5em auto; /* Menšie vertikálne medzery na mobile. */
    }
}

/* Štýly pre fotku na doklady */
.doklady-img {
    display: block; /* Dôležité pre margin auto na vycentrovanie obrázka. */
    margin: 15px auto; /* Vycentruje obrázok horizontálne a pridá 15px vertikálny priestor. */
    max-width: 100%; /* Zabezpečí, že obrázok nepretečie šírkou kontajnera. */
    height: auto; /* Zachováva pomer strán. */
    border-radius: 20px; /* Nastaví oblejšie rohy s polomerom 20px. */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Jemné tieňovanie. */
}

/* Štýly pre vycentrovanú fotku na spodku stránky s tieňom a oblejšími rohmi */
.centered-bottom-image img {
    display: block; /* Dôležité pre margin auto. */
    margin: 30px auto; /* Vycentruje obrázok horizontálne a pridá 30px vertikálny priestor. */
    max-width: 100%; /* Zabezpečí, že obrázok nebude pretekať. */
    height: auto; /* Zachová proporcie. */
    border-radius: 15px; /* Oblejšie rohy s polomerom 15px. */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); /* Jemný tieň. */
}

.product-images-wrapper {
    display: flex; /* Použije Flexbox. */
    justify-content: center; /* Horizontálne vycentruje obsah. */
    margin-top: 20px; /* Pridá 20px priestor nad obrázok. */
    margin-bottom: 20px; /* Pridá 20px priestor pod obrázok. */
}

.product-img {
    max-width: 100%; /* Zabezpečí, že obrázok nepresiahne šírku kontajnera. */
    height: auto; /* Zachováva pomer strán. */
    border-radius: 15px; /* Zaoblené rohy. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Jemný tieň. */
}

/* ÚPRAVY PRE IMAGE STRIP (PLATÍ PRE CENNIK.HTML) */
.image-strip {
    display: flex; /* Flexbox pre horizontálne usporiadanie. */
    overflow-x: auto; /* Umožní horizontálne posúvanie, ak je obsah širší ako kontajner. */
    -webkit-overflow-scrolling: touch; /* Vylepšuje posúvanie na dotykových zariadeniach iOS. */
    white-space: nowrap; /* Zabraňuje zalomeniu obsahu na nový riadok. */
    padding: 15px 0; /* Vertikálne vnútorné odsadenie 15px. */
    gap: 10px; /* Medzera 10px medzi obrázkami. */
    justify-content: flex-start; /* Zarovnáme obrázky na začiatok. */
    margin-bottom: 20px; /* Spodný okraj. */
    scrollbar-width: none; /* Skryje posuvník vo Firefoxe. */
    -ms-overflow-style: none; /* Skryje posuvník v IE/Edge. */
    flex-wrap: nowrap; /* Zabraňuje zalomeniu. */
    width: 100%; /* Celá šírka. */
    box-sizing: border-box; /* Správny výpočet. */
    align-items: center; /* Vertikálne centruje. */
}

.image-strip::-webkit-scrollbar {
    display: none; /* Skryje posuvník vo WebKit prehliadačoch. */
}

.image-strip img {
    /* Desktop štýly pre vertikálne obrázky 13x18 */
    width: 130px; /* Pevná šírka pre obrázky (napr. 13 cm). */
    height: 180px; /* Pevná výška pre obrázky (napr. 18 cm). */
    min-width: 130px; /* Zabezpečí minimálnu šírku aj pri skrolovaní. */
    min-height: 180px; /* Zabezpečí minimálnu výšku aj pri skrolovaní. */
    object-fit: cover; /* Vyplní priestor, oreže, ak treba. */
    border-radius: 8px; /* Zaoblí rohy. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tieň. */
    flex-shrink: 0; /* Zabraňuje scvrkávaniu obrázkov. */
    margin: 0; /* Odstránime akékoľvek rotácie alebo externé marginy. */
    transform: none; /* Zrušíme akúkoľvek rotáciu. */
}

/* Štýly pre centovanie JEDNEJ fotky (napr. Darčeková poukážka, alebo Fotenie na doklady) */
.doklad-image-wrapper {
    display: flex; /* Flexbox. */
    justify-content: center; /* Horizontálne vycentruje. */
    padding: 15px 0; /* Vertikálne odsadenie. */
    margin-bottom: 20px; /* Spodný okraj. */
}

.doklad-image {
    max-width: 100%; /* Maximálna šírka 100%. */
    height: auto; /* Auto výška. */
    display: block; /* Blokový element. */
    border-radius: 8px; /* Zaoblí rohy. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tieň. */
    width: 200px; /* Pevná šírka pre túto centrovnú fotku. */
    height: auto; /* Výška sa prispôsobí. */
    object-fit: cover; /* Vyplní a oreže. */
    max-height: 250px; /* Maximálna výška. */
}

/* Nový kontajner pre široký obrázok v info.html */
.wide-image-container {
    text-align: center; /* Vycentruje obrázok. */
    margin: 2em auto; /* Vertikálne medzery 2em a horizontálne vycentrovanie. */
    max-width: var(--main-content-max-width); /* Obmedzí šírku na hlavný obsah. */
}

.wide-image-container img {
    max-width: 100%; /* Zabezpečí, že obrázok nepretečie. */
    height: auto; /* Zachováva pomer strán. */
    border-radius: 8px; /* Jemne zaoblené rohy. */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Jemný tieň. */
}