/* =========================================
   1. MODERN CSS RESET & NORMALIZACJA
   ========================================= */

/* Zerowanie marginesów i ustawienie modelu pudełkowego */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Padding nie powiększa elementu */
}

/* Ustawienia globalne dla płynnego przewijania i wielkości czcionki */
html {
    font-size: 16px; /* Baza: 1rem = 16px */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* Fix dla iOS, żeby nie powiększał tekstu samowolnie */
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Wygładzanie czcionek na Mac/iPhone */
    -moz-osx-font-smoothing: grayscale; /* Wygładzanie czcionek na Firefox */
    background-color: var(--bg-color);
    color: var(--text-color);
}

html, body {
    overflow-x: hidden; /* Kluczowe! Ukrywa to, co wyjedzie poza ekran przy przesuwaniu */
    width: 100%;
}

/* Kluczowe dla RWD: Obrazki nigdy nie są szersze niż ich kontener */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Formularze dziedziczą czcionkę ze strony (domyślnie tego nie robią) */
input, button, textarea, select {
    font: inherit;
}

/* --- GLOBALNY KONTENER TREŚCI --- */
/* Używaj tego wewnątrz sekcji, żeby wyrównać treść */
.container {
    width: 85%;       /* To Twoje ustalone 85% */
    max-width: 1440px; /* Blokada, żeby na dużym monitorze nie było za szeroko */
    margin: 0 auto;   /* Centrowanie kontenera na środku */
    
    /* Resetujemy paddingi, bo szerokość załatwia sprawę marginesów bocznych */
    padding: 0; 
}


/* =========================================
   KULOODPORNA BLOKADA SCROLLA NA IOS
   ========================================= */
.overflow-fix-wrapper {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}



/* =========================================
   2. ZMIENNE (COLORS & FONTS)
   ========================================= */
:root {
    /* Kolory */
    --text-color: #333333;
    --bg-color: #ffffff;
    --text-light: #f4f4f4; /* "Prawie biały" - łagodniejszy dla oka */
    --bg-color2: #f9f8f6;
    
    /* Fonty */
    --font-decorative: 'Alex Brush', cursive;
    --font-base: 'Nunito Sans', sans-serif;
    --font-menu: 'Cormorant Garamond', serif;
}

/* =========================================
   3. SEKCJA HERO (Pierwszy widok)
   ========================================= */
.hero {
    /* Ustawiamy wysokość na 100% wysokości okna przeglądarki (viewport height) */
    height: 100vh;
    width: 100%;
    
    /* Tło zdjęcia z przyciemnieniem */
    /* Używamy linear-gradient, żeby nałożyć półprzezroczystą czarną warstwę na zdjęcie */
    background-image: 
        /*linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), */
        url('images/hero-mobile.jpg');
    
    /* Kluczowe dla RWD: zdjęcie pokrywa cały obszar, nie deformuje się */
    background-size: cover;
    /* Zdjęcie jest wyśrodkowane */
    background-position: center;
    
    /* Centrowanie treści (Flexbox) */
    display: flex;
    align-items: center; /* Pionowo */
    justify-content: center; /* Poziomo */
    text-align: center;
    
    /* Kolor tekstu */
    color: var(--text-light);
    padding: 1rem; /* Margines bezpieczeństwa na małych telefonach */
}

.hero-content {
    margin-top: 30vh; 
}

.hero-title {
    font-family: var(--font-decorative);
    font-size: 2rem; 
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    /* Lekki cień pod tekstem dla lepszej czytelności */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-family: var(--font-base);
    font-size: 0.9rem;
    text-transform: uppercase; /* Wymuszenie wielkich liter */
    letter-spacing: 3px; /* Szerokie odstępy między literami (tracking) */
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.hero-icon {
    width: 1.5rem;   /* Rozmiar serduszka - dostosuj wg uznania */
    height: 3rem;
    margin: 10rem auto 0 auto;
    animation: heart-bounce 2s infinite;
}


/* =========================================
   5. NAWIGACJA (MENU OFF-CANVAS)
   ========================================= */

:root {
    --menu-bg: #f6f1f0;
    --menu-text: #5e5e5e; 
    --gold-accent: #BD945A;  
}

/* --- PRZYCISKI (Otwórz / Zamknij) --- */
.menu-btn {
    position: fixed; /* Zawsze widoczny, nawet jak scrollujesz */
    z-index: 100;    /* Musi być nad wszystkim */
    background-color: var(--gold-accent);
    color: var(--text-light);
    border: none;
    border-radius: 50%; /* Idealne koło */
    width: 3.5rem;      /* Rozmiar przycisku */
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Lekki cień */
    transition: transform 0.3s ease;
}

.menu-btn:hover {
    transform: scale(1.1); /* Powiększenie po najechaniu */
}

/* Pozycjonowanie przycisku otwierania */
.open-menu {
    top: 2rem;
    left: 2rem;
}

/* --- PRZYCISK ZAMYKANIA (X) --- */
.close-menu {
    /* Pozycjonowanie "na zewnątrz" po prawej stronie */
    position: absolute;
    top: 2rem;
    right: -4.5rem; /* Wyrzucamy go w prawo (ujemny margines) */
    
    /* Wygląd zgodny z Twoim opisem */
    background-color: var(--gold-accent); /* Złote tło */
    color: var(--text-light); /* Twój jasny kolor dla ikony */
    
    /* Upewniamy się, że nie zniknie */
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

    /*Ukrywanie przycisku */
    opacity: 0;            
    visibility: hidden;    
    transition: all 0.3s ease; 
}

/* Gdy menu jest aktywne -> Pokaż przycisk */
.nav-overlay.is-active .close-menu {
    opacity: 1;
    visibility: visible;
    /* Małe opóźnienie (delay), żeby przycisk pojawił się, gdy menu już trochę wyjedzie */
    transition-delay: 0.2s; 
}

/* --- WRAPPER TREŚCI --- */
.site-wrapper {
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); /* Płynne przesuwanie */
    background-color: var(--bg-color); /* Zabezpieczenie tła */
    position: relative;
    z-index: 1;
}

/* --- KONTENER MENU (SZUFLADA) --- */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 75vw; 
    height: 100vh;
    background-color: var(--menu-bg);
    z-index: 999; /* Musi przykryć stronę */
    
    /* MECHANIZM UKRYWANIA */
    /* Przesuwamy menu o 100% w lewo, poza ekran */
    transform: translateX(-100%); 
    
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); /* Płynna animacja */
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    
    /* Centrowanie treści wewnątrz */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    overflow: visible;
}

/* KLASA POMOCNICZA DO TESTOWANIA */
/* Gdy dodamy tę klasę w HTML, menu się wysunie */
.nav-overlay.is-active {
    transform: translateX(0); /* Powrót na miejsce */
}


/* --- STANY AKTYWNE (PUSH EFFECT) --- */

/* Gdy menu jest aktywne, przesuwamy wrapper w prawo */
body.menu-active .site-wrapper {
    transform: translateX(75vw); /* Przesuwamy o tyle, ile szerokości ma menu */
}

/* Opcjonalnie: Przyciemnienie strony, gdy menu jest otwarte (kliknięcie w to zamknie menu) */
.site-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5); /* Półprzezroczysta czerń */
    opacity: 0;
    pointer-events: none; /* Domyślnie przepuszcza kliknięcia */
    transition: opacity 0.5s;
    z-index: 99; /* Musi być nad treścią, ale pod menu */
}

body.menu-active .site-wrapper::after {
    opacity: 1;
    pointer-events: auto; /* Teraz łapie kliknięcia */
}


/* --- TREŚĆ MENU --- */
.nav-decoration {
    display: block;
    width: 45px; 
    height: auto; 
    margin: 2rem auto; 
    object-fit: contain; 
}

.nav-title {
    font-family: var(--font-decorative);
    font-size: 1.8rem;
    color: var(--gold-accent);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.nav-date {
    font-family: var(--font-base);
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 3rem;
    color: var(--text-color);
}

.nav-links {
    list-style: none; 
}

.nav-links li {
    margin-bottom: 0.5rem;
}

.nav-links a {
    text-decoration: none; 
    color: var(--text-color);
    font-family: var(--font-menu); 
    font-size: 1.2rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--gold-accent);
}



/* =========================================
   6. SEKCJA PARY MŁODEJ (COUPLE)
   ========================================= */


/* Kontener trzymający karty */
.couple-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; 
    background-color: var(--bg-color2);
    padding: 3rem 0 3rem 0;
}

/* Wygląd pojedynczej karty */
.couple-card {
    background-color: var(--bg-color);
    padding: 3rem 1.5rem; /* Dużo oddechu w środku karty */
    text-align: center;
    border-radius: 1px; 
    width: 85%;       /* Zajmuje 85% szerokości ekranu (zostawia marginesy po bokach) */
    max-width: 440px; /* Nigdy nie będzie szerszy niż 440px (nawet na komputerze) */
    margin: 0 auto;   /* To jest kluczowe - centruje kontener w poziomie */
}


/* Stylizacja zdjęcia */
.img-wrapper {
    margin-bottom: 1.5rem;
}

.couple-photo {
    width: 140px;  /* Rozmiar zdjęcia */
    height: 140px;
    border-radius: 50%; /* Robi idealne koło */
    object-fit: cover; /* Zapobiega spłaszczeniu zdjęcia */
    margin: 0 auto; /* Centrowanie */
}

.couple-name {
    font-family: var(--font-menu);
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-weight: 500; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem; /* Odstęp między imieniem a serduszkiem */
}

.name-icon {
    width: 0.7em;  
    height: 0.7em;
    color: var(--gold-accent);
}

.couple-role {
    font-family: var(--font-decorative);
    font-size: 1.5rem; 
    color: var(--gold-accent);
    line-height: 0.9;
}


/* =========================================
   7. SEKCJA ODLICZANIA (COUNTDOWN) - MOBILE FIRST
   ========================================= */

.countdown-section {
    background-image: url('images/wedding.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

.countdown-overlay-bg {
    background-color: rgba(0, 0, 0, 0.3);
    /* Domyślny padding dla telefonu (mniejszy) */
    padding: 4rem 1rem; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-content {
    text-align: center;
    color: var(--text-light);
    width: 100%;
    max-width: 800px;
}

/* TYTUŁ */
.countdown-title {
    font-family: var(--font-decorative);
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Niezbędny dla czytelności na zdjęciu */
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

/* KONTENER NA CYFRY */
.timer-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Pozwala spaść cyfrom jedna pod drugą na bardzo małych ekranach */
    
    /* MOBILE: Małe odstępy */
    gap: 1rem; 
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* MOBILE: Mniejsza minimalna szerokość */
    min-width: 60px; 
}

/* CYFRY */
.time-number {
    font-family: var(--font-base);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    
    /* MOBILE: Rozmiar czytelny na telefonie, ale nie gigantyczny */
    font-size: 2.5rem;
    margin-bottom: 0.2rem;
}

/* PODPISY (DAYS, HOURS...) */
.time-label {
    font-family: var(--font-base);
    font-size: 0.75rem; /* Mniejsze na mobile */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    opacity: 0.9;
}

/* =========================================
   MEDIA QUERIES (TABLET I DESKTOP)
   ========================================= */

/* Dopiero gdy ekran jest szerszy niż 768px (Tablet/PC), powiększamy elementy */
@media (min-width: 768px) {
    .countdown-overlay-bg {
        padding: 5rem 1.5rem; /* Większy oddech */
    }

    .countdown-title {
        font-size: 3.5rem; /* Wielki tytuł */
        margin-bottom: 3rem;
    }

    .timer-wrapper {
        gap: 3rem; /* Duże odstępy między liczbami */
    }

    .time-number {
        font-size: 4.5rem; /* Ogromne cyfry */
    }

    .time-label {
        font-size: 0.9rem;
    }
}


/* =========================================
   8. NAGŁÓWKI SEKCJI (REUŻYWALNE)
   ========================================= */
.section-header-wrapper {
    text-align: left; 
    margin-bottom: 2rem;
}

.section-subtitle {
    display: block;
    font-family: var(--font-decorative);
    font-size: 1.7rem;
    color: var(--gold-accent);
    line-height: 0.8;
}

.section-title {
    font-family: var(--font-menu); 
    font-size: 1.7rem;
    text-transform: uppercase;
    color: var(--text-color);
    font-weight: 500; 
    letter-spacing: 1px;
}


/* =========================================
   9. SEKCJA HISTORIA (POPRAWIONA)
   ========================================= */

.story-section {
    padding: 3rem 0;
    background-color: #fff; /* Tło sekcji musi być białe dla masek */
    overflow: hidden; 
}

/* Kontener główny */
.timeline-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Odstęp między wierszami */
}

/* PIONOWA LINIA (Centrum) */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background-color: var(--gold-accent);
    transform: translateX(-50%);
    z-index: 0; 
}

/* WIERSZ */
.timeline-row {
    display: flex;
    align-items: center; 
    width: 100%;
    position: relative;
    z-index: 1;
    min-height: 85px; /* Minimalna wysokość wiersza (tyle co zdjęcie) */
}

/* KOLUMNY BOCZNE - PEŁNE CENTROWANIE */
.timeline-col {
    width: 50%; /* Idealna połówka */
    display: flex;
    flex-direction: column; /* Żeby tekst i data były pod sobą */
    justify-content: center; /* Centrowanie w poziomie (lewo-prawo) */
    align-items: center;     /* Centrowanie w pionie (góra-dół) */
    padding: 0; /* Zero paddingów - czysta matematyka 50% */
}

/* ŚRODEK (Dla rombu) */
.timeline-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* ROMB */
.diamond-marker {
    width: 10px;
    height: 10px;
    background-color: var(--gold-accent); 
    transform: rotate(45deg);
    border: 1px solid var(--gold-accent);
    /* Trik z cieniami na białe obramowanie */
    box-shadow: 
        0 0 0 4px #fff, 
        0 0 0 6px var(--gold-accent);
    margin: 5px;
}

/* --- ZDJĘCIA --- */
.story-img {
    width: 85px;  
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0;
    
    /* KLUCZOWE: Zapobiega ściskaniu zdjęcia */
    flex-shrink: 0; 
}

/* --- TEKSTY --- */
/* Resetujemy style tekstowe - teraz dziedziczą centrowanie od rodzica (.timeline-col) */
.story-title {
    font-family: var(--font-decorative);
    font-size: 1.3rem; 
    color: var(--gold-accent);
    line-height: 0.8;
    font-weight: 500;
    text-align: center;
    margin-bottom: 6px;
    width: 100%;
}

.story-date {
    font-family: var(--font-base);
    font-size: 0.8rem;
    color: var(--text-color);
    letter-spacing: 1px;
    display: block;
    text-align: center;
    width: 100%;
}

/* Klasy pomocnicze z HTML (już nie muszą nic robić, bo .timeline-col załatwia sprawę) */
.text-align-right, .text-align-left, .col-left, .col-right {
    /* Puste, żeby nie przeszkadzały */
}

/* =========================================
   POPRAWKA LINII (Maski)
   ========================================= */

/* Maska NAD pierwszym rombem */
.timeline-line + .timeline-row .timeline-center::before {
    content: '';
    display: block;
    position: absolute;
    width: 20px; 
    background-color: #fff; /* MUSI BYĆ BIAŁY */
    
    top: -30px; /* Zwiększony zasięg w górę */
    bottom: 50%; 
    
    left: 50%;
    transform: translateX(-50%);
    z-index: -1; 
}

/* Maska POD ostatnim rombem */
.timeline-row:last-child .timeline-center::before {
    content: '';
    position: absolute;
    width: 20px;
    background-color: #fff; /* MUSI BYĆ BIAŁY */
    
    top: 50%; 
    bottom: -30px; /* Zwiększony zasięg w dół */
    
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}



/* =========================================
   POPRAWKA RWD (Ekrany poniżej 450px)
   ========================================= */

@media (max-width: 450px) {
    
    .timeline-row .timeline-col:first-child {
        padding-right: 1.5rem; 
    }

    .timeline-row .timeline-col:last-child {
        padding-left: 1.5rem; 
    }
}


/* =========================================
   10. SEKCJA LOKALIZACJA (ŚLUB)
   ========================================= */

.wedding-location-section {
    padding: 3rem 0;
    position: relative;
    background-color: var(--bg-color2); 
    overflow: hidden;
}

/* --- TŁO W KROPKI (DEKORACJA) --- */
.dotted-pattern-bg {
    position: absolute;
    /* Kropki zaczynają się za napisem "TAK" */
    top: 6.3rem; 
    left: 10px;
    width: 80%; 
    height: 480px; 
    z-index: 0; /* Najniżej */
    
    /* Wzór kropek */
    background-image: radial-gradient(#d0d0d0 1px, transparent 1px);
    background-size: 10px 10px; /* Nieco rzadsze kropki */
    opacity: 0.6;
}

/* --- NAGŁÓWEK --- */
.location-header {
    position: relative;
    z-index: 2; /* Nad kropkami */
    margin-bottom: 1.5rem;
}

.gold-text {
    color: var(--gold-accent);
}

/* --- KONTENER ZDJĘCIA (WYMUSZENIE PIONU) --- */
.location-image-wrapper {
    position: relative;
    width: 90%; /* Szerokość na mobile */
    max-width: 350px; 
    margin-bottom: 3rem;
    margin-left: 5px;
    z-index: 2;

    /* KLUCZOWE: Wymusza prostokąt pionowy (proporcje 3:4) */
    aspect-ratio: 3 / 4;
}

/* --- SAMO ZDJĘCIE --- */
.location-img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 2; /* Zdjęcie NAWIERZCHU */
    
    /* KLUCZOWE: Przycina poziome zdjęcie (hero.jpg) do pionu bez zniekształceń */
    object-fit: cover; 
}

/* --- ZŁOTA RAMKA (DEKORACJA) --- */
.location-frame {
    position: absolute;
    /* Przesunięcie ramki względem zdjęcia (w prawo i w dół) */
    top: 20px;    
    left: 20px;   
    
    /* Ramka ma ten sam rozmiar co zdjęcie */
    width: 100%; 
    height: 100%;
    
    /* Gruba złota linia */
    border: 5px solid var(--gold-accent); 
    z-index: 1;   /* Ramka POD spodem */
    background: transparent;
}

/* --- TREŚĆ TEKSTOWA --- */
.location-content {
    position: relative;
    z-index: 2;
    color: var(--text-color);
    font-family: var(--font-base);
}

.location-venue {
    font-family: var(--font-menu); 
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.location-address {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.map-link {
    color: var(--gold-accent);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.8rem;
    transition: opacity 0.3s;
}

.map-link:hover {
    opacity: 0.7;
}

.location-desc {
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

/* --- LISTA Z IKONAMI --- */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    position: relative;
    padding-left: 2.5rem; /* Miejsce na ikonę */
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Ikona rombu (robiona CSSem, żeby pasowała do osi czasu) */
.info-list li::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 5px; /* Wyrównanie z pierwszą linią tekstu */
    width: 12px;
    height: 12px;
    
    transform: rotate(45deg);
    border: 1px solid var(--gold-accent);
    
    /* Efekt podwójnej ramki (taki jak w Timeline, ale mniejszy) */
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--gold-accent);
    background-color: var(--gold-accent);
}



/* =========================================
   BLOK DATY I GODZINY Z IKONĄ
   ========================================= */

.location-datetime-box {
    display: flex;
    flex-direction: column; /* Układa elementy jeden pod drugim */
    align-items: center;    /* Centruje w poziomie */
    margin: 2.5rem 0 2rem 0;         /* Odstęp od adresu z góry i opisu z dołu */
    text-align: center;
}

.rings-icon {
    width: 80px; /* Rozmiar ikony - możesz dostosować */
    height: auto;
    margin-bottom: 0.5rem; /* Odstęp między ikoną a datą */
}

.location-date {
    font-family: var(--font-menu); 
    font-size: 2.2rem; 
    color: var(--gold-accent); 
    line-height: 1;
    font-weight: 500;
}

/* --- GODZINA (Zróżnicowana wielkość) --- */
.location-time {
    display: flex;
    align-items: baseline; /* Magia: Wyrównuje różnej wielkości teksty do jednej dolnej linii */
    justify-content: center;
    gap: 8px; /* Odstęp między słowem a cyframi */
    color: var(--text-color);
    font-weight: 600;
    margin-top: -10px;
}

.wedding-time-text {
    font-family: var(--font-menu);
    font-size: 0.9rem; /* Zmniejszone słowo */
    text-transform: uppercase;
    letter-spacing: 2px; /* Trochę szersze rozstrzelenie dla elegancji */
}

.wedding-time-number {
    font-family: var(--font-menu);
    font-size: 1.8rem; /* Powiększone cyfry */ 
}

.time-number sup {
    font-size: 0.55em; 
    vertical-align: super;
    margin-left: 2px;
}


/* Stylizacja indeksu górnego dla minut */
.location-time sup {
    font-size: 0.6em; /* Zmniejszamy zera, żeby były subtelniejsze */
    vertical-align: super; /* Upewniamy się, że są u góry */
    margin-left: 2px; /* Minimalny odstęp od trzynastki */
}






/* =========================================
   11. SEKCJA LOKALIZACJA (WESELE)
   ========================================= */

#wedding {
    background-color: var(--bg-color);
}


.wedding-features {
    display: flex;
    flex-direction: column; /* Na mobile układamy jeden pod drugim */
    gap: 2rem; /* Odstęp między kolejnymi elementami (ikona+tekst) */
    margin-top: 2rem; /* Odstęp od tekstu wyżej */
}

.feature-item {
    display: flex;
    flex-direction: column; /* Układa ikonę nad tekstem */
    align-items: center; /* Wyśrodkowuje ikonę i tekst w poziomie */
    text-align: left; 
}

.feature-icon {
    width: 60px; 
    height: auto;
    margin-bottom: 1rem; /* Odstęp między ikoną a tekstem pod nią */
}

.info-icon {
    width: 185px; 
    height: auto;
    margin: 1rem 0; 
}


.feature-text {
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: var(--text-color);
}




/* =========================================
   12. SEKCJA GALERIA (FORMULARZ)
   ========================================= */

#h2g,
#h2r {
    line-height: 1.2;
}

#email {
    margin-bottom: 0;
}

.gallery-section {
    padding: 3rem 0;
    background-color: var(--bg-color2); 
    /* USUNIĘTO: text-align: center; -> Teraz nagłówek dziedziczy styl do lewej */
}

/* Kontener na treść pod nagłówkiem (Tekst + Formularz) */
.gallery-content {
    max-width: 600px;
    margin: 0 auto;   /* Centrowanie bloku */
    padding: 0 1rem;
    text-align: center; /* Wyśrodkowanie tekstu i formularza */
}

.gallery-info-main {
    font-family: var(--font-base);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.gallery-info-sub {
    font-family: var(--font-base);
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* --- STYLIZACJA FORMULARZA --- */
#gallery-form {
    display: flex;
    flex-direction: column;
}



/* --- WALIDACJA I KOMUNIKATY --- */
.error-msg {
    color: red;
    font-size: 0.8rem;
    display: none; 
    
    /* ZMIANA: Pozycjonowanie absolutne zapobiega skakaniu elementów */
    position: absolute;
    bottom: -20px; /* Wisi w pustej przestrzeni pod inputem */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Żeby tekst ładnie się wyśrodkował */
    margin: 0;
    pointer-events: none; /* Żeby nie blokował klikania w nic pod spodem */
}

.error-msg.visible {
    display: block;
}

/* Komunikat o sukcesie też warto zablokować, żeby nie psuł układu, jeśli formularz się wyczyści */
.success-msg {
    color: green;
    font-weight: 600;
    margin-top: 1rem;
    display: none;
    /* Ewentualnie możesz mu też dać absolute, ale on pojawia się na samym dole, więc nie powinien przeszkadzać */
}

.success-msg.visible {
    display: block;
}




/* --- FORMATOWANIE NAGŁÓWKA (Lamanie tekstu) --- */

/* Domyślnie (Mobile): Wymuszamy nową linię dla frazy "SOBIE TAK" */
.text-break {
    display: block; /* Sprawia, że tekst w środku spada do nowej linii */
    margin-top: -0.6rem; /* Opcjonalnie: mały odstęp między liniami */
}

/* Wersja Desktop (Powyżej 768px): Przywracamy jedną linię */
@media (min-width: 768px) {
    .text-break {
        display: inline; /* Tekst wraca do jednej linii z resztą */
    }
}



/* =========================================
   13. SEKCJA PRZERYWNIK (CZEKAMY)
   ========================================= */

.separator-section {
    position: relative;
    /* Ta wartość definiuje wysokość sekcji. 
       Jeśli różni się od countdown-section, skopiuj padding stamtąd tutaj. */
    padding: 4rem 0; 
    
    /* Zdjęcie w tle */
    background-image: url('images/wedding2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 

    /* Centrowanie zawartości (Flexbox) */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Ciemna nakładka na zdjęcie, żeby tekst był czytelny */
.separator-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Półprzezroczysta czarna warstwa (dostosuj ostatnią cyfrę 0.5 jeśli za ciemno/jasno) */
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Kontener na tekst (musi być nad nakładką) */
.separator-content {
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

/* Stylizacja tekstu */
.separator-text {
    font-family: var(--font-decorative); /* Ozdobna czcionka */
    font-size: 3rem; /* Duży, wyraźny tekst */
    color: var(--text-light); /* Biały kolor */
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Lekki cień dla lepszej czytelności */
}



/* =========================================
   14. SEKCJA RSVP (Potwierdzenie)
   ========================================= */

.rsvp-section {
    padding: 3rem 0;
    background-color: var(--bg-color);
}

.rsvp-intro {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    color: var(--text-color);
    font-family: var(--font-base);
}

.rsvp-section .info-list {
    margin-bottom: 3rem;
}


.info-list-font {
    font-family: var(--font-base);
}

.tel-icon {
  width: 50px;
  height: auto;
  margin-bottom: 0.7rem;
}

/* Sekcja kontaktowa */
.rsvp-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    text-align: center;
}

.contact-person {
    font-size: 1.6rem;
    font-family: var(--font-menu);
    color: var(--text-color);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.gold-name {
    font-family: var(--font-decorative);
    font-size: 1.8rem;
    color: var(--gold-accent);
}



/* --- Linki telefoniczne --- */
.phone-link {
    color: inherit; /* Dziedziczy kolor z var(--text-color) ustawionego w .contact-person */
    text-decoration: none; /* Usuwa niebieskie podkreślenie */
    transition: color 0.3s ease; /* Dodajemy płynne przejście koloru... */
}

/* ...aby po najechaniu (np. na komputerze) numer delikatnie zmieniał kolor na złoty */
.phone-link:hover {
    color: var(--gold-accent);
}



/* --- STYLIZACJA FORMULARZA RSVP --- */
.rsvp-form-wrapper {
    max-width: 450px;
    margin: 0 auto;
}

.form-group-line {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Input / Textarea z samą dolną linią */
.line-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--gold-accent);
    padding: 10px 0;
    background: transparent;
    font-family: var(--font-base);
    font-size: 0.95rem;
    color: var(--text-color);
    outline: none;
    transition: border-bottom-width 0.3s;
}

.line-input:focus {
    border-bottom: 2px solid var(--gold-accent);
}

.line-input::placeholder {
    color: #888;
}

/* Specyficzne dla Textarea (Wiadomość) */
textarea.line-input {
    resize: none; /* Blokuje trójkącik do rozciągania w rogu */
    overflow: hidden; /* Ukrywa pasek przewijania */
    min-height: 40px;
    line-height: 1.5;
}

/* --- CUSTOM RADIO i CHECKBOX --- */
.form-group-radio, .form-group-checkbox {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: var(--font-base);
}

.custom-radio, .custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
}

.custom-radio input, .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-mark {
    position: absolute;
    left: 0;
    height: 22px;
    width: 22px;
    border: 2px solid var(--gold-accent);
    border-radius: 50%;
}

.custom-radio input:checked ~ .radio-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--gold-accent);
}

.checkmark {
    position: absolute;
    left: 0;
    height: 22px;
    width: 22px;
    border: 2px solid var(--gold-accent);
}

.custom-checkbox input:checked ~ .checkmark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--gold-accent);
}

/* Guzik Wyślij */
.line-submit-btn {
    display: block;
    width: 160px;
    margin: 3rem auto 0 auto;
    padding: 12px 0;
    background: transparent;
    border: 1px solid var(--gold-accent);
    color: var(--text-color);
    font-family: var(--font-base);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.line-submit-btn:hover {
    background-color: var(--gold-accent);
    color: var(--text-light);
}


/* =========================================
   15. SEKCJA DZIĘKUJEMY
   ========================================= */

.thank-you-section {
    position: relative;
    padding: 3rem 0 3rem 0; 
    text-align: center; 
    background-color: var(--bg-color2); 
    overflow: hidden; /* Żeby ramka nie wystawała poza stronę na mobile */
}

/* Kontener zdjęcia (Format 16:9) */
.thank-you-image-wrapper {
    position: relative;
    width: 90%;          /* Szerokość na mobile */
    max-width: 800px;    /* Maksymalna szerokość na komputerze */
    margin: 0 auto 3rem auto; /* Wyśrodkowanie kontenera i odstęp od dołu */
    z-index: 1;

    /* KLUCZOWE: Wymuszenie proporcji panoramicznych */
    aspect-ratio: 16 / 9;
}

/* Samo zdjęcie */
.thank-you-img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 2; /* Zdjęcie NA ramce */
    object-fit: cover; /* Wypełnia kadr 16:9 bez zniekształceń */
}

/* UWAGA: Klasa .location-frame już istnieje w Twoim CSS
   i tutaj zadziała automatycznie, tworząc złotą ramkę pod spodem. */

/* Stylizacja tekstu */
.thank-you-text {
    font-family: var(--font-decorative); 
    font-size: 2.5rem; 
    font-weight: 500;
    color: var(--gold-accent); 
    margin: 0;
    line-height: 1;
}

.thank-you-section .dotted-pattern-bg {
  height: 288px;
  width: 90%;
  top: 1.3rem;
}


.footer-text a {
    color: inherit;       
    text-decoration: none; 
}

.footer-text a:hover {
    color: var(--gold-accent); 
}


/* =========================================
   15. STOPKA (FOOTER)
   ========================================= */

.site-footer {
    background-color: var(--bg-color); 
    padding: 1rem 0; 
    text-align: center;
}

.footer-text {
    font-family: var(--font-base);
    font-size: 0.6rem; 
    color: var(--text-color);
    margin: 0;
    opacity: 0.7; 
    letter-spacing: 1px; 
}


/* =========================================
   ANIMACJE
   ========================================= */

@keyframes heart-bounce {
    /* START na ziemi */
    0% { transform: translateY(0); }

    /* --- PIERWSZY, WYSOKI SKOK --- */
    /* Lecimy w górę (szybko startuje, zwalnia na szczycie) */
    12% { transform: translateY(-25px); animation-timing-function: ease-out; }
    /* Spadamy w dół (powoli startuje, przyspiesza na końcu -> UDERZENIE) */
    24% { transform: translateY(0); animation-timing-function: ease-in; }

    /* --- ODBICIE 1 (Średnie) --- */
    32% { transform: translateY(-12px); animation-timing-function: ease-out; }
    40% { transform: translateY(0); animation-timing-function: ease-in; }

    /* --- ODBICIE 2 (Małe) --- */
    46% { transform: translateY(-6px); animation-timing-function: ease-out; }
    52% { transform: translateY(0); animation-timing-function: ease-in; }

    /* --- ODBICIE 3 (Miniaturowe) --- */
    56% { transform: translateY(-3px); animation-timing-function: ease-out; }
    60% { transform: translateY(0); animation-timing-function: ease-in; }

    /* --- PAUZA --- */
    /* Od 60% do 100% serduszko leży nieruchomo */
    100% { transform: translateY(0); }
}




/* =========================================
   MEDIA QUERIES (TABLET & DESKTOP - MIN: 768px)
   ========================================= */




@media (min-width: 768px) {
    

    .hero {
        background-image: url('images/hero-desktop.jpg');
    }


    /* 1. MENU: Szerokość 40% zamiast 75% */
    .nav-overlay {
        width: 40vw;
    }

    /* 2. MENU: Przesunięcie strony po otwarciu też o 40% */
    body.menu-active .site-wrapper {
        transform: translateX(40vw);
    }

/* SEKCJA HERO */
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }



/* SEKCJA PAŃSTWA MŁODYCH (Karty obok siebie) */
    .couple-container {
        flex-direction: row; /* Wymusza układ poziomy (jeden obok drugiego) */
        justify-content: center; /* Wyśrodkowuje obie karty na środku ekranu */
        gap: 4rem; /* Zwiększamy odstęp między nimi, żeby miały oddech */
        padding: 5rem 0; /* Większy margines z góry i z dołu na dużym ekranie */
    }

    .couple-card {
        width: 40%; /* Każda karta zajmuje 40% miejsca */
        margin: 0; /* Usuwamy centrowanie auto, bo Flexbox już to robi */
    }

/* SEKCJA NASZA HISTORIA */
    .story-img {
        width: 100px;
        height: 100px;
    }

    .story-title {
        font-size: 1.6rem;
    }

    .story-date {
        font-size: 0.9rem;
    }


/* --- ŚLUB I WESELE: Wyśrodkowane i większe zdjęcie --- */
    .location-image-wrapper {
        margin: 0 auto 4rem auto; /* Magia: Auto po lewej i prawej wyśrodkowuje element, 4rem odstępu z dołu */
        max-width: 500px; /* Pozwalamy zdjęciu być sporo większym na PC (zamiast 350px) */
    }

    /* Kropki muszą podążyć za zdjęciem na środek ekranu */
    .wedding-location-section .dotted-pattern-bg {
        left: 30px; 
        width: 75%;
        height: 750px;
    }

    /* Ograniczamy szerokość tekstu pod zdjęciem, żeby nie rozciągał się od brzegu do brzegu */
    .location-content {
        max-width: 700px;
        margin: 0 auto; /* Centrujemy blok z tekstem, ale sam tekst zostaje do lewej */
    }


/* --- GALERIA: Zwężenie i wyśrodkowanie podtytułu --- */
    .gallery-info-sub {
        width: 70%;
        margin: 0 auto 2rem auto; /* Margines auto po bokach środkuje element, a 2rem zachowuje odstęp od formularza */
    }


/* --- SEKCJA DZIEKUJEMY --- */
    .thank-you-section .dotted-pattern-bg {
    height: 400px;
    width: 80%;
    left: 30px;
    }

    .thank-you-text {
        margin-top: 4rem;
    }
    
    .thank-you-section {
        padding: 3rem 0 2rem 0;
    }


    .separator-section {
        padding: 8rem 0; 
    }

    .separator-text {
            font-size: 5rem;
    }

}




/* =========================================
   MEDIA QUERIES (DESKTOP - MIN: 1024px)
   ========================================= */
@media (min-width: 1024px) {
    
    /* 1. Ukrywamy przyciski menu (hamburger i X) */
    .menu-btn {
        display: none !important;
    }

    /* 2. Menu staje się stałym panelem bocznym (22% szerokości) */
    .nav-overlay {
        transform: none !important; 
        width: 22%; /* Zmienione na 22% */
        box-shadow: none;
    }

    /* 3. Główna treść przesuwa się w prawo, robiąc miejsce na menu */
    .site-wrapper {
        width: 78%; /* Zmienione na 78% (100% - 22%) */
        margin-left: 22%; /* Zmienione na 22% */
        transform: none !important;
    }

    /* 4. Ukrywamy ciemną nakładkę na treść */
    .site-wrapper::after {
        display: none !important;
    }



/* --- SEKCJA NASZA HISTORIA --- */
    .story-img {
        width: 120px;
        height: 120px;
    }

    .story-title {
        font-size: 1.8rem;
    }

    .story-date {
        font-size: 1rem;
    }


/* =========================================
       SEKCJE ŚLUB I WESELE (Układ obok siebie)
       ========================================= */
    .wedding-location-section .container {
        display: grid;
        /* PROPORCJE: Lewa kolumna dostaje 4 części przestrzeni, prawa 6 części. 
           (Możesz to zmienić np. na 3.5fr 6.5fr, jeśli lewa ma być jeszcze węższa) */
        grid-template-columns: 5fr 5fr; 
        align-items: center; 
        gap: 2rem; 
    }

    /* 1. Nagłówek ląduje w prawej kolumnie, na samej górze */
    .section-header-wrapper.location-header {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 2rem;
    }

    /* 2. Zdjęcie ląduje w lewej kolumnie i zajmuje wysokość obu wierszy (nagłówka i tekstu) */
    .location-image-wrapper {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0; /* Kasujemy marginesy z mniejszych ekranów */
        max-width: 100%; 
    }

    /* 3. Reszta tekstu ląduje w prawej kolumnie, pod nagłówkiem */
    .location-content {
        grid-column: 2;
        grid-row: 2;
        margin: 0; /* Kasujemy marginesy z mniejszych ekranów */
        max-width: 100%;
    }

    /* 4. Przesuwamy kropki, żeby były tylko pod lewą kolumną (pod zdjęciem) */
    .wedding-location-section .dotted-pattern-bg {
        width: 40%; 
        height: 80%;
        top: 50%;
        transform: translateY(-50%); 
    }

    /* 5. Wyrównujemy ikony w sekcji Wesele z powrotem do lewej krawędzi */
    .feature-item {
        align-items: flex-start;
        text-align: left;
    }

/* Wyśrodkowanie ikony wewnątrz jej okrągłego kontenera */
    .feature-icon,
    .info-icon {
        display: flex;
        justify-content: center; /* Środek w poziomie */
        align-items: center;     /* Środek w pionie */
        margin: 1.5rem auto 1.5rem auto; /* Magia: auto po bokach wyśrodkowuje całe kółko względem tekstu poniżej */
    }


/* SEKCJA ZAKONCZENIE */
    .thank-you-section .dotted-pattern-bg {
        height: 520px;
    }


    .separator-section {
        background-position: calc(50% + 11vw) center !important;
    }

}





/* =========================================
   MEDIA QUERIES (DESKTOP - MIN: 1400px)
   ========================================= */
@media (min-width: 1400px) {

    .hero-title {
        font-size: 3.7rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }





/* =========================================
       SEKCJE ŚLUB I WESELE (Układ obok siebie)
       ========================================= */
    .wedding-location-section .container {
        display: grid;
        /* PROPORCJE: Lewa kolumna dostaje 4 części przestrzeni, prawa 6 części. 
           (Możesz to zmienić np. na 3.5fr 6.5fr, jeśli lewa ma być jeszcze węższa) */
        grid-template-columns: 4fr 6fr; 
        align-items: center; 
        gap: 2rem; 
    }





}