/* splendid Seaside Kennel – landing page */
:root{
    --bg:#ffffff;
    --ink:#3d4043;
    --muted:#3d4043;
    --splendid-700:#C89B4A;
    --splendid-200:#ece8ff;
    --splendid-100:#f5f3ff;
    --border:#e8e6f2;
    --purple:#2B8A9E;
    --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0; background-color: #fff}
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(--splendid-100);
    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(--splendid-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(--splendid-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(--splendid-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(--splendid-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(--splendid-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, #F5F1EC, #F5F1EC);
    height:130vh;
    display:flex; align-items:flex-start; justify-content:right;
}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:140px; background:linear-gradient(0deg,#F5F1EC, rgba(255,255,255,0))}
.hero .headline{
    position:relative; z-index:2; text-align:right; margin-top:250px; color:var(--splendid-700); margin-right: 5%;
}
.hero h1{
    font-size:48px; font-weight:500; margin:0 0 6px;
    color:var(--splendid-700); line-height: 45px;
}
.hero p{margin:0 0 0 0; font-size: 24px; color:var(--splendid-100); 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 ============= */


.lilac-link{
    color: var(--splendid-700);
}

.lilac-link:hover{
    text-decoration: underline;
}

section{padding:72px 0}

#onas{
    background-color: #F5F1EC; position: relative; margin-top: -30px; padding: 92px 0 72px 0;
}
section h2{
    font-weight:600; letter-spacing:.2px; color:var(--splendid-700);
    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(--splendid-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(--splendid-700); border-color:var(--splendid-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;
}

#koty{
    background-color: #F5F1EC;
}

#koty .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;
    }

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

.cats {color: var(--muted); background-color: #fff}
.cats .headline{grid-column: 1 / -1; }
.cats h2{color:var(--purple)}
.cats h3{color:var(--purple); font-weight: 400; font-size: 32px; margin-top: -15px}
.cats .split{grid-template-columns:420px 1fr; gap:36px}
.cats .btn{background:var(--purple); box-shadow:0 8px 22px rgba(75,54,160,.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 #D4B273; 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:#D4B273; font-weight:700; text-transform: uppercase}
.footer a{display:block; margin:6px 0; opacity:.9}
.footer a:hover{color:var(--splendid-700)}
.footer img {width:18px; margin-right: 10px}
.footer .contact-line{display:flex; margin-bottom: 10px}
.bottom-bar{ font-size:12px; color:#fff; background-color: #D4B273; 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, .hero3{
    width:100%;
    height: 500px;
    display:flex; align-items:flex-start; justify-content:center;
    position:relative;
}
.hero2{
    background: url('/img/hero2.jpg') center top/cover no-repeat, linear-gradient(0deg, #fff, #f4f1ff);
}
.hero3{
    background: url('/img/hero3.jpg') center top/cover no-repeat, linear-gradient(0deg, #fff, #f4f1ff);
}

.eyebrow{
    position:relative;
    margin-top:100px;
    font-weight:700;
    color:var(--splendid-700);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:.78rem
}
.lead{
    color:var(--splendid-700);
    font-size:1.05rem;
    max-width:100%;
}
.hero2 h1{color: var(--splendid-700);}
.hero2 .lead {color: var(--purple); max-width: 45%}
.hero3 .lead { max-width: 45%}

.pill-row{position: relative; display:flex;flex-wrap:wrap;margin-top:-80px; background-color: transparent}
.pills{display:grid; grid-template-columns:repeat(4,1fr);
     background-color: transparent}
.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(--splendid-700)}

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

    .hero2, .hero3{
        height: 650px;
    }

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

    .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 }
}


.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(--splendid-700);color:#fff;display:grid;place-items:center;font-weight:800}
.step h4{margin:0 0 4px 0}
.step ul{
    padding-left: 20px;
}
/* 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(--splendid-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;
}

.cta img{height: 32px}
.cta .btn{width: 400px; margin-bottom: 10px; display:inline-flex;gap:15px;align-items:center;background:var(--splendid-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(--splendid-700);border:1px solid #dfe3fb}

/* ============= GALERIA — PREMIUM CLEAN ============= */

.section{
    margin:80px auto 0;
}

.section > h1{
    font-size:clamp(32px, 4vw, 52px);
    line-height:1.05;
    margin:70px auto 18px!important;
    color:var(--splendid-700);
    letter-spacing:-.03em;
}

.lead{
    color:rgba(45,35,45,.78);
    font-size:17px;
    line-height:1.75;
}

.lilac-link{
    color:var(--splendid-700);
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid currentColor;
}

.lilac-link:hover{
    opacity:.75;
}

/* ============= NASZE KOTKI ============= */

.queens-section{
    max-width:1180px;
    margin:0 auto 90px;
    padding:0!important;
    text-align:center;
}

.queens-section h2{
    font-size:clamp(34px, 4vw, 56px);
    line-height:1.05;
    margin:0 0 20px;
    color:var(--splendid-700);
    letter-spacing:-.035em;
}

.queens-intro,
.queens-summary{
    max-width:820px;
    margin:0 auto 46px;
    color:rgba(45,35,45,.78);
    font-size:17px;
    line-height:1.8;
}

.queens-summary{
    margin-top:44px;
    margin-bottom:0;
}

.queens-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    margin-top:42px;
}

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

.queen-card{
    position:relative;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(120,80,120,.12);
    border-radius:28px;
    padding:18px 18px 26px;
    box-shadow:0 18px 50px rgba(50,30,50,.08);
    text-align:left;
    overflow:hidden;
}

.queen-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    pointer-events:none;
}

.queen-photos{
    position:relative;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:12px;
    margin-bottom:24px;
}

.queen-photos a{
    display:block;
    overflow:hidden;
    border-radius:22px;
    background:#f7f1f7;
}

.queen-photos a:first-child{
    grid-row:span 2;
}

.queen-photos img{
    width:100%;
    height:100%;
    min-height:230px;
    aspect-ratio:1 / 1.15;
    object-fit:cover;
    display:block;
    transition:transform .45s ease, filter .45s ease;
}

.queen-photos a:not(:first-child) img{
    min-height:109px;
    aspect-ratio:1 / 1;
}

.queen-photos a:hover img{
    transform:scale(1.045);
    filter:saturate(1.03);
}

.queen-card h3{
    position:relative;
    text-align:center;
    margin:6px 0 14px;
    color:var(--splendid-700);
    font-size:24px;
    letter-spacing:-.02em;
}

.queen-card p{
    position:relative;
    color:rgba(45,35,45,.78);
    font-size:16px;
    line-height:1.75;
    margin:0;
}

/* ============= SIATKA ZDJĘĆ ============= */

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

@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:0;
    margin:0;
}

.card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#f7f1f7;
    box-shadow:0 14px 36px rgba(45,25,45,.08);
}

.card a{
    display:block;
    height:100%;
}

.card img{
    width:100%;
    aspect-ratio:4 / 3;
    height:auto;
    object-fit:cover;
    display:block;
    transition:transform .45s ease, filter .45s ease;
}

.card:hover img{
    transform:scale(1.045);
    filter:saturate(1.04);
}

/* ============= CTA ============= */

.cats{
    margin:80px auto 40px;
    text-align:center;
}

.cats .btn{
    float:none!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:14px 28px;
    box-shadow:0 12px 30px rgba(45,25,45,.12);
}

/* ============= LIGHTBOX ============= */

dialog.gallery-dlg{
    border:none;
    padding:0;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.38);
    background:transparent;
    max-width:min(1080px, 92vw);
    max-height:90vh;
}

dialog.gallery-dlg::backdrop{
    background:rgba(20,12,20,.62);
    backdrop-filter:blur(4px);
}

.viewer{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#fff;
    border-radius:28px;
    max-width:min(1080px, 92vw);
    max-height:90vh;
    overflow:hidden;
}

.viewer .bar{
    width:100%;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:12px 14px;
    background:rgba(255,255,255,.96);
    color:var(--splendid-700);
    font-size:14px;
    flex-shrink:0;
    border-bottom:1px solid rgba(120,80,120,.1);
}

#caption{
    color:rgba(45,35,45,.72);
    line-height:1.35;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.viewer img{
    width:auto;
    height:auto;
    max-width:92vw;
    max-height:76vh;
    object-fit:contain;
    display:block;
    background:#fff;
}

.viewer button{
    border:1px solid rgba(120,80,120,.22);
    color:var(--splendid-700);
    background:#fff;
    border-radius:999px;
    padding:8px 13px;
    font-weight:500;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.viewer button:hover{
    background:var(--splendid-700);
    border-color:var(--splendid-700);
    color:#fff;
}

.viewer button:focus-visible{
    outline:2px solid var(--splendid-700);
    outline-offset:3px;
}

/* ============= MOBILE ============= */

@media (max-width:640px){
    .section{
        margin-top:56px;
    }

    .queens-section{
        margin-bottom:64px;
    }

    .queen-card{
        border-radius:22px;
        padding:14px 14px 22px;
    }

    .queen-photos{
        grid-template-columns:1fr 1fr;
    }

    .queen-photos a:first-child{
        grid-column:1 / -1;
        grid-row:auto;
    }

    .queen-photos img{
        min-height:220px;
        aspect-ratio:4 / 3;
    }

    .queen-photos a:not(:first-child) img{
        min-height:130px;
    }

    .viewer .bar{
        align-items:flex-start;
        flex-direction:column;
    }
}