/* Lilac Seaside Kennel – landing page */
:root{
    --bg:#ffffff;
    --ink:#2c2548;
    --muted:#3d4043;
    --lilac-700:#4b36a0;
    --lilac-200:#ece8ff;
    --lilac-100:#f5f3ff;
    --border:#e8e6f2;
    --orange:#D4B273;
    --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0; background-color: #ffffff}
html{scroll-behavior:smooth}
body{
    font-family: "Montserrat", sans-serif;
    color:var(--ink); line-height:1.65;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 100% - 48px); margin-inline:auto}


/* ============= NAV ============= */


/* --- Baza (desktop) --- */
.topbar{
    font-family:"Nunito",sans-serif;
    font-size:14px; color:var(--muted);
    padding:0; z-index:10; position:absolute; width:100%; left:0; top:0;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0 }
.topbar nav{ display:flex; gap:80px }
.topbar a{ opacity:.9; font-weight:600; font-size:16px; text-decoration:none; color:inherit }
.topbar a:hover{ color:var(--lilac-700) }

.brand{ display:flex; align-items:center; justify-content:center; padding:2px 0 8px; gap:8px; width:150px }
.brand img{ max-width:100%; height:auto }

.burger, .mobile-backdrop, .mobile-drawer { display:none }


/* --- Mobile / Tablet --- */
@media (max-width: 992px){
    .desktop-only{ display:none !important }

    .topbar .container{ padding:10px 16px }

    .brand{ order:0; margin:0 auto }

    /* Burger */
    .burger{
        display:inline-flex; align-items:center; justify-content:center;
        width:44px; height:44px; background:#fff; border:1px solid #e7e7f7; border-radius:10px;
        cursor:pointer; position:absolute; right:12px; top:8px; z-index:1002;
    }
    .burger:focus-visible{ outline:2px solid var(--lilac-700); outline-offset:2px }
    .burger-box{ display:inline-block; width:22px; height:16px; position:relative }
    .burger-line{
        position:absolute; left:0; right:0; height:2px; background:var(--lilac-700); border-radius:2px;
        transition:transform .25s ease, opacity .2s ease, top .25s ease;
    }
    .burger-line:nth-child(1){ top:0 }
    .burger-line:nth-child(2){ top:7px }
    .burger-line:nth-child(3){ top:14px }
    .burger[aria-expanded="true"] .burger-line:nth-child(1){ top:7px; transform:rotate(45deg) }
    .burger[aria-expanded="true"] .burger-line:nth-child(2){ opacity:0 }
    .burger[aria-expanded="true"] .burger-line:nth-child(3){ top:7px; transform:rotate(-45deg) }

    /* Backdrop (tło) */
    .mobile-backdrop{
        display:none; position:fixed; inset:0; background:rgba(0,0,0,.35);
        backdrop-filter: blur(1px);
        opacity:0; transition:opacity .25s ease; z-index:1000;
    }
    .mobile-backdrop.show{ opacity:1;  display:block;}

    /* Drawer (panel boczny) */
    .mobile-drawer{
        display:block; position:fixed; top:0; right:0; height:100vh;
        width:min(84vw, 320px);
        background:rgba(255,255,255,.98);
        border-left:1px solid #e9ebff;
        box-shadow: -12px 0 30px rgba(0,0,0,.08);
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index:1001;
        overflow:auto;
        padding-left: 10px;
    }
    .mobile-drawer.open{ transform: translateX(0) }

    .mobile-menu{
        display:grid; gap:10px; padding:24px 16px;
    }
    .mobile-menu a{
        display:block; padding:14px 12px; font-weight:700; text-align:center;
        background:#fff;
    }

    .mobile-menu a:hover{ color:var(--lilac-700); border-color:#dfe3fb }

    .mobile-menu{
        padding: 8px 0;
    }

    .mobile-list{
        list-style: none;
        margin: 0;
        padding: 8px 0;
        display: flex;
        flex-direction: column;
    }

    .mobile-list a{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        min-height: 44px;
        text-decoration: none;
        font-weight: 700;
        color: var(--muted);
        background: transparent;
        outline: none;
    }

    .mobile-list a span{
        pointer-events: none;
    }

    .mobile-list a::after{
        content: "›";
        font-size: 20px;
        line-height: 1;
        opacity: .5;
        margin-left: 32px;
    }

    .mobile-list a:hover{
        color: var(--lilac-700);
    }

    .mobile-drawer{
        padding-top: 64px; /* żeby linki nie kleiły się do krawędzi */
    }

    @media (prefers-reduced-motion: reduce){
        .burger-line, .mobile-backdrop, .mobile-drawer{ transition:none !important }
    }
}


/* ============= HERO ============= */

.hero{
    position:relative;
    background: url('/img/hero.jpg') center top/cover no-repeat, linear-gradient(0deg, #fff, #f4f1ff);
    height:130vh;
    display:flex; align-items:flex-start; justify-content:center;
}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:140px; background:linear-gradient(0deg,#fff, rgba(255,255,255,0))}
.hero .headline{
    position:relative; z-index:2; text-align:center; margin-top:100px; color:#4b36a0;
    text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.hero h1{
    font-size:48px; font-weight:500; margin:0 0 6px;
    color:#4b36a0;
}
.hero p{margin:-15px 0 0 0; font-size: 24px; color:#3d4043; font-weight: 200}

@media (max-width: 992px) {

    section {
        padding: 56px 0;
    }

    section h2 {
        font-size: 28px;
    }

    .ultra p {
        margin: 8px 0;
    }

    .hero {
        height: 85vh;
    }

    .hero .headline {
        margin-top: 120px !important
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 18px;
        margin-top: -6px;
    }

    .hero::after {
        height: 100px;
    }
}
/* ============= FEATURES ============= */


.feature-strip{ position:relative; margin-top:-74px; z-index:3}
.features{
    display:grid; grid-template-columns:repeat(3,1fr);
    box-shadow:0 8px 24px rgba(19,10,60,.06);
}
.feature{
    background:#fff;
    padding:20px 22px; display:flex; align-items:center; gap:14px;
}
.feature .icon{
    width:64px;
    display:grid; place-items:center; flex:0 0 auto;
}
.feature .icon img{width:64px;}
.feature span{display:block; font-size:15px; color: #3d4043; font-weight: 500}

@media (max-width: 992px) {

    .feature-strip {
        width: 70%;
        margin: -40px auto 0 auto;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 10px;
    }


    .feature .icon {
        width: 56px;
    }

    .feature .icon img {
        width: 56px;
    }

    .feature span {
        font-size: 14px;
    }
}
/* ============= SEKCJE ============= */

section{padding:72px 0}

#onas{
    background-color: #fefcfa;;
}
section h2{
    font-weight:600; letter-spacing:.2px; color:#4b36a0;
    margin:0 0 8px; font-size:32px;
}
section .lead{margin:0 0 18px; color:var(--muted)}

.split{
    display:grid; grid-template-columns: 420px 1fr; gap:56px; align-items:center;
}
.portrait{
    width:360px; height:360px; border-radius:50%; overflow:hidden;
    box-shadow:0 18px 50px rgba(19,10,60,.15); border:6px solid #fff;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 42px; border-radius:12px; background:var(--lilac-700); color:#fff;
    font-weight:400; letter-spacing:.2px; border:1px solid transparent;
}
.btn:hover{filter:brightness(.98); transform:translateY(-1px)}
.btn-outline{
    background:#fff; color:var(--lilac-700); border-color:var(--lilac-700); box-shadow:none;
}

.section-muted{background:#ffffff;}


.section-muted h2{
    font-weight:400;
    line-height: 40px;
}

.section-muted h2 strong{
    font-weight:800;
}

.ultra p{margin:10px 0}

.pill-cta{
    display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
    border:1px solid var(--border); background:#fff;
}
.pill-cta img{width:28px; height:28px}

.rounded-photo{
    width:340px; height:340px; border-radius:24px; overflow:hidden;
}

#pieski{
    background-color: #fefcfa;
}

#pieski .split{
    display:grid; grid-template-columns: 1fr 420px ; gap:56px; align-items:center;
}

@media (max-width: 992px) {

    .split {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .portrait {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }

    .rounded-photo {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }

    .btn {
        width: 100%;
        max-width: 420px;
    }

    #pieski .split {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
/* ============= KOTY ============= */

.cats .headline{grid-column: 1 / -1; }
.cats h2{color:var(--orange)}
.cats h3{color:var(--orange); font-weight: 400; font-size: 32px; margin-top: -15px}
.cats .split{grid-template-columns:420px 1fr; gap:36px}
.cats .btn{background:var(--orange); box-shadow:0 8px 22px rgba(212,178,115,.25); float: right}


@media (max-width: 992px){
    .cats .headline{ grid-column: 1 / -1; text-align: center; }
    .cats img{display: block; margin: auto}
    .cats h3{ font-size: 26px; margin-top: -6px; }
    .cats .split{ grid-template-columns: 1fr; gap: 24px; }
    .cats .btn{ float: none; margin: 0 auto; display: inline-flex; }
}



/* ============= FOOTER ============= */


.hr-line { border-bottom: 1px solid #6A57D3; width: 30%; margin-bottom: 10px; }

.footer{ padding:32px 0 18px; background:#fefcfa; color:var(--muted); font-size:14px; }
.footer .grid{display:grid; grid-template-columns: 200px 1fr 1fr; gap:32px; align-items:start}
.footer .logo img{width: 150px; display: block; margin-bottom: 10px}
.footer .logo .logo-mark{width:36px; height:36px}
.footer h4{margin:0 0 10px; color:#665ea9; font-weight:700; text-transform: uppercase}
.footer a{display:block; margin:6px 0; opacity:.9; cursor: pointer}
.footer a:hover{color:var(--lilac-700);cursor: pointer}
.footer img {width:18px; margin-right: 10px}
.footer .contact-line{display:flex; margin-bottom: 10px}
.bottom-bar{ font-size:12px; color:#fff; background-color: #665ea9; padding:10px 10px; text-align:right; }
.bottom-bar a{ color:#ffffff; text-decoration:none; }
.bottom-bar a:hover{ text-decoration:underline; }

/* --- MOBILE FOOTER --- */
@media (max-width: 768px) {
    .footer .grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer .logo img {
        margin: 0 auto 10px;
    }

    .footer .contact-line {
        justify-content: center;
    }

    .footer img {
        margin-right: 6px;
    }

    .hr-line {
        margin: 0 auto 10px;
        width: 50%;
    }

    .bottom-bar {
        text-align: center;
        padding: 12px;
    }
}


/* ============= FAQ ============= */


.hero2{
    background: center top/cover no-repeat var(--hero, url('/img/hero2.jpg')), linear-gradient(0deg, #fff, #f4f1ff);
    width:100%;
    height: 500px;
    display:flex; align-items:flex-start; justify-content:center;
    position:relative;
}
.eyebrow{
    position:relative;
    margin-top:100px;
    font-weight:700;
    color:var(--lilac-700);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.78rem
}
.lead{
    color:var(--muted);
    font-size:1.05rem;
    max-width:100%;
}

.hero2 .lead {max-width: 45%}

.pill-row{position: relative; display:flex;flex-wrap:wrap;margin-top:-80px}
.pills{display:grid; grid-template-columns:repeat(4,1fr);
    box-shadow:0 8px 24px rgba(19,10,60,.06)}
.pill{background:#fff;padding:20px 14px; display:flex;gap:8px;align-items:center;color:#3b3e4f;box-shadow:var(--muted)}
.pill .icon{
    width:64px;
    display:grid; place-items:center; flex:0 0 auto;
}
.pill .icon img{height:54px;}
.pill .dot{width:8px;height:8px;border-radius:999px;background:var(--lilac-700)}

/* ===== PILLS: mobile/tablet ===== */
@media (max-width: 992px){

    .hero2{
        height: 650px;
    }

    .pill-row{
        width: 70%;
        margin: 40px auto 0 auto;
    }

    .pills{
        grid-template-columns: 1fr;
    }

    .pill{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 16px 14px;
    }

    .pill .icon{
        width: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .pill .icon img{
        height: 56px;
        width: auto;
    }

    .pill span{ line-height: 1.4 }

    .hero2 .lead {max-width: 80%}
}


.grid{display:grid;gap:22px}

@media (min-width: 900px){
    .grid.cols-3{
        grid-template-columns:repeat(3,1fr);
        margin-bottom: 20px;
    }
    .grid.cols-2{
        grid-template-columns:repeat(2,1fr);
        margin-bottom: 50px;
    }
}

.card{background:var(--bg);border:1px solid #ececf6;border-radius:var(--radius);padding:22px;box-shadow:var(--muted)}
.card h3{margin:0 0 10px 0;font-size:1.15rem}
.card p{color:var(--muted)}

.steps{counter-reset:step}
.step{display:flex;gap:16px;padding:16px;border-radius:14px;border:1px dashed #e5e7f4;background:#fff}
.step:not(:last-child){margin-bottom:10px}
.step .num{flex:0 0 36px;height:36px;border-radius:12px;background:var(--lilac-700);color:#fff;display:grid;place-items:center;font-weight:800}
.step h4{margin:0 0 4px 0}

/* FAQ (details/summary) */
details{background:#fff;border:1px solid #ececf6;border-radius:14px;padding:14px 16px;transition:border-color .2s, box-shadow .2s}
details+details{margin-top:10px}
details[open]{box-shadow:0 8px 24px rgba(91,95,224,.10);border-color:#dee0f2}
summary{list-style:none;cursor:pointer;font-weight:700;color:#2b2f3c;display:flex;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
.chev{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:#f3f4ff;color:var(--lilac-700);transition:transform .25s}
details[open] .chev{transform:rotate(90deg)}
.faq-body{color:#54586a;margin-top:10px;line-height:1.65}
.faq-body ul{margin:8px 0 0 18px}

.checklist li{display:flex;gap:12px;margin:8px 0}
.check{flex:0 0 20px;height:20px;border-radius:6px;border:1.5px solid #d8dbef;display:grid;place-items:center}
.check.done{background:rgba(76,185,99,.12);border-color:rgba(76,185,99,.5)}

.cta{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    padding:22px;
    border-radius:var(--radius);
    border:1px solid #dee0f2;
    background:linear-gradient(180deg,#fff, #f7f7ff)
}

@media (max-width: 900px){
    .cta{
        flex-wrap: wrap;
    }
}
.cta .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center !important;
    margin-top: 20px;
    width: 100%;
}

.cta img{height: 32px}
.cta .btn{width: 400px; margin-bottom: 10px; display:inline-flex;gap:15px;align-items:center;background:var(--lilac-700);color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700;box-shadow:0 8px 20px var(--border);cursor:pointer}
.cta .btn.secondary{width: 400px; background:#fff;color:var(--lilac-700);border:1px solid #dfe3fb}


/* ============= GALERIA ============= */


.section{ margin:100px auto 0 auto }

.grid{
    display:grid; gap:16px;
    grid-template-columns: repeat(1, minmax(0,1fr));
}

@media (min-width:640px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.dogs{
    padding: 15px;
}
.card img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.card:hover img{ transform: scale(1.04); }

dialog.gallery-dlg{
    width: 90vw; max-width: 1100px; border:none; padding:0; border-radius:20px; overflow:hidden;
    height:90vh; height:90dvh; max-height:90vh; max-height:90dvh;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

dialog::backdrop{ background: rgba(0,0,0,.45); }

.viewer{
    display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; min-height:0; background:#fff;
}
.viewer img{ width:100%; height:100%; min-height:0; object-fit:contain; background:#000; }
.viewer .bar{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; padding:10px 12px;
    background: #ffffff; color:var(--ink); font-size:14px;
}
.viewer button{
    border: 1px solid var(--lilac-700); color:var(--lilac-700); background-color: transparent; border-radius:10px; padding:8px 12px; font-weight:400; cursor:pointer;
}
.viewer button:hover{
    background-color: var(--lilac-700); color:#ffffff;
}
.viewer button:focus{outline:none;}
.viewer .prev, .viewer .next{ border:1px solid var(--lilac-700); }
.viewer .prev:hover, .viewer .next:hover{ background-color: var(--lilac-700); color: #ffffff }

a{
    cursor: pointer;
}