/* ========================================
   MOTYW — WESELE BOHO (PL / EN)
   Tu zmieniasz kolory, czcionki i wygląd kart.
   Szkielet strony (układ, okna, formularze) jest w css/baza.css.
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Italiana&family=Allura&family=Outfit:wght@300;400;500;600&display=swap');

/* ---- PALETA ---- */
:root {
    --piasek:    #f3e9dc;   /* tło */
    --len:       #faf5ee;   /* jasne karty */
    --terakota:  #c56a47;   /* główny akcent */
    --glina:     #a8674b;
    --brzoskwinia: #e9c9a8;
    --roz:       #e7b3a9;   /* pudrowy róż z bukietów */
    --oliwka:    #8a8a6a;
    --mosiadz:   #b8925a;   /* obrączki, drobne złocenia */
    --kawa:      #4a3428;   /* tekst */

    --font-display: 'Italiana', serif;
    --font-serif:   'Cormorant Garamond', serif;
    --font-body:    'Outfit', sans-serif;
    --font-script:  'Allura', cursive;
    --display-weight: 400;

    /* delikatna faktura papieru */
    --papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

    --bg: var(--piasek);
    --bg-open: var(--papier), radial-gradient(ellipse at 50% 0%, #f9efe6 0%, var(--piasek) 60%);
    --bg-envelope: var(--papier), radial-gradient(ellipse at 50% 35%, #fbf3ea 0%, #efdfcc 100%);
    --ink: var(--kawa);
    --accent: var(--terakota);
    --shadow: 110, 70, 40;

    --card-bg: var(--papier), var(--len);
    --card-ink: var(--kawa);
    --card-accent: var(--terakota);
    --card-line: var(--brzoskwinia);
    --card-radius: 4px;

    --btn-bg: var(--terakota);
    --btn-ink: #fff8f0;
    --btn-shadow: 0 2cqw 5cqw rgba(197, 106, 71, 0.3);

    --ui-bg: rgba(250, 245, 238, 0.9);
    --ui-ink: var(--kawa);
    --ui-accent: var(--terakota);
    --ui-border: 1px solid var(--brzoskwinia);

    --panel-bg: var(--len);
    --panel-ink: var(--kawa);
    --panel-radius: 26px;
    --field-bg: #f1e6d8;
    --field-border: #e2d0bb;
    --focus-ring: rgba(197, 106, 71, 0.22);
    --overlay: rgba(74, 52, 40, 0.5);
    --map-filter: sepia(0.35) saturate(0.85);
    --gallery-filter: sepia(0.28) saturate(0.9) contrast(0.96);

    --deco-opacity: 1;

    /* koperta z papieru pakowego z lakową pieczęcią */
    --env-paper:   #dcbc97;
    --env-paper-2: #c9a47b;
    --env-edge:    rgba(110, 70, 40, 0.28);
    --env-liner:   #f6e6d6;
    --env-liner-2: #dea487;
    --env-seal:    #b9573a;
    --env-seal-2:  #7a321f;
    --env-seal-3:  #ec9f80;
    --env-seal-ink:#6a2a18;
    --env-letter:  #fbf6ef;
    --env-ink:     var(--kawa);
}

/* ========================================
   EKRAN Z KOPERTĄ
   ======================================== */

.env-arches {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(820px, 150vw);
    transform: translate(-50%, -38%);
    opacity: 0.16;
    pointer-events: none;
}

.env-bouquet {
    position: absolute;
    width: min(560px, 75vw);
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 10px 18px rgba(110, 70, 40, 0.15));
    animation: sway 8s ease-in-out infinite;
}
.env-bouquet.l { left: -6%; bottom: -8%; transform-origin: bottom left; rotate: 8deg; }
.env-bouquet.r { right: -6%; top: -9%; transform: scale(-1, -1); animation-delay: -3s; }

@keyframes sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.envelope-intro .intro-kicker {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--glina);
}

.envelope-intro .intro-name {
    font-family: var(--font-script);
    font-size: 5.8rem;
    line-height: 1.1;
    color: var(--kawa);
}
.envelope-intro .intro-name .amp { color: var(--terakota); font-size: 0.8em; margin: 0 0.1em; }

.envelope-intro .intro-date {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 6px;
    color: var(--glina);
}

/* sznurek pod pieczęcią */
.envelope::after {
    content: '';
    position: absolute;
    left: -1%;
    right: -1%;
    top: 61%;
    height: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, #f7ecde 0 6px, #e6d3bb 6px 9px);
    box-shadow: 0 1px 1px rgba(110, 70, 40, 0.25);
    z-index: 3;
    transition: opacity 0.3s ease;
}
.envelope.opening::after,
.envelope.has-img::after { opacity: 0; }

.envelope { --seal-font: var(--font-script); }
.env-letter { font-size: clamp(1.2rem, 6vw, 2.2rem); }

.tap-text { color: var(--glina); }

/* ========================================
   KARTY
   ======================================== */

/* łuk wewnątrz każdej karty */
.card::before {
    content: '';
    position: absolute;
    inset: 5cqw;
    border: 0.35cqw solid var(--card-line);
    border-radius: 45cqw 45cqw 1cqw 1cqw;
    pointer-events: none;
}
.card.has-img::before { display: none; }

.card.arch { border-radius: 50% 50% 3% 3% / 36% 36% 2% 2%; }
.card.arch::before { border-radius: 50% 50% 1% 1% / 36% 36% 1% 1%; }

.card.t-terakota {
    --card-bg: var(--papier), linear-gradient(170deg, #cf7652, #b25a3a);
    --card-ink: #fbeee3;
    --card-accent: #fde2cf;
    --card-line: rgba(253, 226, 207, 0.55);
    --btn-bg: #fbeee3;
    --btn-ink: var(--glina);
}
.card.t-brzoskwinia { --card-bg: var(--papier), linear-gradient(180deg, #f7e6d6, #efd4bd); }
.card.t-oliwka {
    --card-bg: var(--papier), linear-gradient(170deg, #9a9a79, #7f7f60);
    --card-ink: #f7f2e6;
    --card-accent: #efe6c8;
    --card-line: rgba(247, 242, 230, 0.5);
    --btn-bg: #f7f2e6;
    --btn-ink: #6d6d50;
}

.card-inner { padding: 14cqw 10cqw 10cqw; }
.card.has-actions .card-inner { padding-bottom: 24cqw; }

.c-kicker { letter-spacing: 1.1cqw; font-weight: 400; }
.c-h { font-size: 9.5cqw; letter-spacing: 0.4cqw; }
.c-script { font-family: var(--font-script); font-size: 14cqw; line-height: 1; }
.c-text { font-weight: 300; }
.c-text b, .c-small b { font-weight: 500; }

.c-icon { width: 18cqw; height: 18cqw; }
.c-dream { width: 15cqw; margin-top: -4cqw; }

/* bukiet wystający zza dolnej krawędzi karty */
.card-bouquet {
    position: absolute;
    left: 50%;
    width: 82cqw;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
}

/* ---- karta tytułowa: zdjęcie pary w łuku ---- */

.card-title .card-inner { padding-top: 9cqw; justify-content: flex-start; gap: 0; }

.couple {
    position: relative;
    width: 58cqw;
    aspect-ratio: 1 / 1.05;
    border-radius: 29cqw 29cqw 1cqw 1cqw;
    overflow: hidden;
    border: 1cqw solid #fffaf3;
    box-shadow: 0 0 0 0.35cqw var(--brzoskwinia), 0 3cqw 6cqw rgba(var(--shadow), 0.2);
}
.couple img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 60%; filter: sepia(0.12) saturate(0.95) brightness(1.04); }

.card-title .card-bouquet { top: 44cqw; width: 68cqw; }

.title-names {
    font-family: var(--font-script);
    font-size: 15cqw;
    line-height: 1;
    margin-top: 29cqw;
}
.title-names .amp { color: var(--terakota); font-size: 0.8em; margin: 0 0.05em; }

.title-date {
    font-family: var(--font-display);
    font-size: 5cqw;
    letter-spacing: 1.2cqw;
    margin-top: 2cqw;
}
.title-date span { color: var(--terakota); }

/* ---- karta z formalnym zaproszeniem ---- */

.formal .card-inner { gap: 1.6cqw; padding-top: 9cqw; padding-left: 11cqw; padding-right: 11cqw; }
.formal .salute { font-family: var(--font-serif); font-style: italic; font-size: 4.4cqw; color: var(--glina); }
.formal .guest { font-family: var(--font-script); font-size: 10cqw; line-height: 1; color: var(--kawa); }
.formal .words { font-family: var(--font-serif); font-size: 4.3cqw; line-height: 1.45; }
.formal .words b { font-weight: 500; display: block; font-size: 5.2cqw; margin: 0.8cqw 0; color: var(--terakota); letter-spacing: 0.2cqw; }
.formal .signed { font-family: var(--font-script); font-size: 8.5cqw; line-height: 1; margin-top: 1cqw; }

/* ---- plan dnia z ikonami ---- */

.w-timeline {
    list-style: none;
    width: 100%;
    position: relative;
    margin-top: 2cqw;
    text-align: left;
}
.w-timeline::before {
    content: '';
    position: absolute;
    left: 20cqw;
    top: 2cqw;
    bottom: 2cqw;
    border-left: 0.3cqw dashed var(--terakota);
    opacity: 0.4;
}
.w-timeline li {
    display: grid;
    grid-template-columns: 13cqw 8cqw 1fr;
    align-items: center;
    gap: 1.5cqw;
    padding: 1.1cqw 0;
    font-size: 3.5cqw;
    font-weight: 300;
    line-height: 1.25;
}
.w-timeline time { font-family: var(--font-display); font-size: 4.2cqw; color: var(--terakota); }
.w-timeline svg {
    width: 7cqw;
    height: 7cqw;
    padding: 1.2cqw;
    border-radius: 50%;
    background: #fbf2e8;
    color: var(--terakota);
    box-shadow: 0 0 0 0.3cqw var(--brzoskwinia);
    position: relative;
    z-index: 1;
}

/* ---- galeria: dwa zdjęcia jak odbitki ---- */

.prints { position: relative; width: 62cqw; height: 40cqw; margin-bottom: 3cqw; }
.prints img {
    position: absolute;
    width: 32cqw;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1.3cqw solid #fffaf3;
    border-bottom-width: 4.5cqw;
    box-shadow: 0 2cqw 4cqw rgba(0,0,0,0.3);
    filter: sepia(0.25) saturate(0.9);
}
.prints img:nth-child(1) { left: 2cqw; top: 1cqw; transform: rotate(-8deg); }
.prints img:nth-child(2) { right: 2cqw; top: 0; transform: rotate(7deg); }

/* ---- dobrze wiedzieć ---- */

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.6cqw 5cqw;
    text-align: left;
    width: 100%;
    margin-top: 2cqw;
}
.info-grid b {
    display: block;
    font-family: var(--font-display);
    font-size: 4.8cqw;
    font-weight: 400;
    color: var(--card-accent);
    margin-bottom: 0.8cqw;
}
.info-grid p { font-size: 3.2cqw; line-height: 1.45; font-weight: 300; }

/* ---- zakończenie ---- */

.closing .closing-dream { width: 96px; }
.closing .closing-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
    line-height: 1.4;
    margin: 0.6rem 0 0.2rem;
}
.closing .signature { font-family: var(--font-script); font-size: 3.4rem; color: var(--terakota); }
.closing .closing-bouquet { width: min(420px, 90vw); margin-top: 0.4rem; }

/* ---- dekoracje ---- */

.deco { width: 250px; }
.deco.flower { width: 120px; }
.deco-l { transform: translateY(-50%) rotate(-6deg); }
.deco-r { transform: translateY(-50%) rotate(6deg) scaleX(-1); }

/* ---- okna ---- */

.sheet-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 2.4rem; }
.sheet h3 { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; }
.f-field > span, .f-legend { font-weight: 500; }
.countdown-title { font-family: var(--font-serif); font-style: italic; font-size: 1rem; letter-spacing: 1px; }
.countdown-item b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; }
.lang-switch button { font-family: var(--font-body); }

.gift-hero { text-align: center; margin-bottom: 1rem; }
.gift-hero img { width: 80px; }

@media (max-width: 768px) {
    .envelope-intro .intro-name { font-size: 3.8rem; }
    .envelope-intro .intro-kicker { font-size: 1.05rem; }
    .envelope-intro .intro-date { font-size: 1.05rem; letter-spacing: 3px; }
    .env-bouquet { width: 88vw; }
    .env-bouquet.l { left: -18%; bottom: -5%; }
    .env-bouquet.r { right: -18%; top: -6%; }
    .closing .closing-quote { font-size: 1.45rem; }
    .deco { width: 30vw; }
    .deco.flower { width: 16vw; }
    .countdown-item b { font-size: 1.2rem; }
}

/* telefon poziomo — mniejsze bukiety, żeby nie zasłaniały imion */
@media (max-height: 520px) and (orientation: landscape) {
    .env-bouquet { width: min(300px, 36vw); }
    .env-bouquet.l { left: -3%; bottom: -10%; }
    .env-bouquet.r { right: -3%; top: -12%; }
}