:root{
  --bg-1:#0e1417; --bg-2:#0f181c; --bg-3:#102026;
  --text:#eaf2f3; --muted:#b6c5c8;
  --primary:#3db7ad; --accent:#72e0d1; /* teal téma */
  --surface:#111a1f; --border:#1a2a31;
  --radius:18px; --maxw:1180px;
  --shadow:0 14px 34px rgba(0,0,0,.35);
  --shadow-soft:0 8px 22px rgba(0,0,0,.25);
  --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 var(--font); color:var(--text);
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><filter id="n"><feTurbulence baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".04"/></svg>') repeat,
    radial-gradient(900px 520px at 12% -8%, rgba(61,183,173,.12), transparent 60%),
    radial-gradient(900px 520px at 88% -10%, rgba(114,224,209,.10), transparent 65%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.16; margin:.2rem 0 .6rem}
p{margin:0 0 1rem 0}

.container{width:min(var(--maxw),92%); margin-inline:auto}
.section{padding:clamp(46px,6.2vw,90px) 0}
.card{background:#111a1f; border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow-soft)}

.btn{
  display:inline-flex; align-items:center; gap:.55rem; font-weight:700;
  padding:.85rem 1.05rem; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(135deg, var(--primary), var(--accent)); color:#062e2c;
  transition:transform .18s ease, box-shadow .18s ease; box-shadow:var(--shadow-soft)
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.28) }
.btn--ghost{ background:linear-gradient(180deg, #172229, #101820); color:var(--text) }

/* Header / nav */
.site-header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border);
  background:rgba(12,18,22,.7); backdrop-filter:saturate(170%) blur(8px) }
.site-header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.25); background:rgba(12,18,22,.88) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0 }
.brand{ display:flex; align-items:center; gap:.65rem; font-weight:800 }
.brand__logo{ width:42px; height:42px; border-radius:50%; border:1px solid var(--border); overflow:hidden; display:grid; place-items:center; background:#0f1519 }
.brand__logo img{ width:100%; height:100%; object-fit:cover; border-radius:50% }
.menu{ display:flex; align-items:center; gap:.5rem }
.menu a{ padding:.5rem .7rem; border-radius:12px; position:relative }
.menu a.active{ background:#132129 }
.menu a.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:3px;
  border-radius:6px; background:linear-gradient(90deg, var(--primary), var(--accent))
}
#menu-toggle{ display:none }
.hamburger{ display:none; cursor:pointer; padding:.5rem }
.hamburger span{ display:block; width:26px; height:2px; background:var(--text); margin:6px 0 }

/* Banner */
.banner{ min-height:220px; background:url('../assets/banner.jpg') center/cover no-repeat; position:relative }
.banner::after{ content:""; position:absolute; inset:auto 0 0 0; height:120px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)) }

/* HERO */
.hero{ position:relative }
.hero__inner{ width:min(1100px,92%); margin-inline:auto; display:grid; gap:1.2rem; grid-template-columns:.9fr 1.1fr; align-items:center }
.hero .panel{ background:rgba(16,23,28,.78); border:1px solid var(--border); border-radius:18px; padding:clamp(16px,2.6vw,24px); box-shadow:var(--shadow) }
.hero h1{ font-size:clamp(1.9rem, 4.8vw, 3rem); font-weight:800; margin:.4rem 0 .6rem }
.hero .lead{ font-size:1.1rem }
.logo-circle{ width:min(320px, 42vw); aspect-ratio:1/1; border-radius:50%; border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow); background:#0f1216 }
.logo-circle img{ width:100%; height:100%; object-fit:cover }

/* Layouty */
.grid{ display:grid; gap:1.2rem }
.grid--2{ grid-template-columns:1.15fr .85fr }
.photo{ border-radius:12px; border:1px solid var(--border) }

/* Psi */
.dog-card{ display:grid; grid-template-columns:.9fr 1.1fr; gap:1rem }
.badges{ display:flex; flex-wrap:wrap; gap:.35rem }
.badge{ border:1px solid var(--border); border-radius:999px; padding:.25rem .55rem; font-size:.9rem; background:rgba(61,183,173,.12) }
.badge--muted{ background:transparent; color:var(--muted) }

/* Rodičia vo vrhu */
.parents{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.parent-card img{ border-radius:12px; border:1px solid var(--border); aspect-ratio:3/4; object-fit:cover; object-position:center }

/* Galéria */
.gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem }
.gallery img{ border-radius:12px; border:1px solid var(--border); aspect-ratio:4/3; object-fit:cover }

/* Kontakt */
.contact{ background:#111a1f; border:1px solid var(--border); border-radius:16px; padding:clamp(18px,3vw,30px); box-shadow:var(--shadow) }
.contact-list{ list-style:none; padding:0; margin:0 } .contact-list li{ margin:.35rem 0 }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding:1rem 0; color:var(--muted); margin-top:40px }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }

/* Reveal a drobné animácie */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s ease }
.reveal.reveal--in{ opacity:1; transform:none }
.btn-magnet{ transition: transform .12s ease }

/* =========================
   CIEĽOVÉ ÚPRAVY PODĽA POKYNOV
   ========================= */

/* 1) O plemene – väčší text, dorovnať výšku s fotkou (desktop) */
@media (min-width: 981px){
  #o-plemene .grid{ align-items: stretch; }
  #o-plemene .container .reveal:last-child{
    font-size: 1.125rem;      /* ~18px */
    line-height: 1.75;
  }
  #o-plemene h2{
    font-size: clamp(1.8rem, 2.3vw, 2.2rem);
    margin-bottom: 0.9rem;
  }
  #o-plemene p{ margin-bottom: 1.1rem; }
  #o-plemene .contact-list li{ margin: .5rem 0; }
}

/* 2) O mne – menšia fotka + o málo väčší text (desktop) */
@media (min-width: 981px){
  #o-mne .container .reveal:first-child{
    font-size: 1.075rem;
    line-height: 1.75;
  }
  #o-mne .photo{
    max-width: 520px;           /* zmenš fotku vpravo */
    max-height: 620px;
    aspect-ratio: 3/4;
    object-fit: cover;
    margin-left: auto;          /* drž vpravo */
  }
}

/* 3) Naši psi – menšie fotky, nech nezostáva prázdno vpravo dole (desktop) */
@media (min-width: 981px){
  .dog-card .photo{
    aspect-ratio: 3/4;
    object-fit: cover;
    max-height: 560px;          /* zmenši výšku */
    width: 100%;
  }
}

/* 4) Šteniatka – zmenšiť hlavnú fotku vrhu + fotky rodičov (desktop) */
@media (min-width: 981px){
  /* hlavný obrázok vrhu */
  #stenata article.card > img.photo{
    max-height: 520px;
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
  }
  /* rodičia */
  .parents .parent-card img{
    max-height: 420px;
    aspect-ratio: 3/4;
    object-fit: cover;
  }
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns:1fr }
  .grid--2{ grid-template-columns:1fr }
  .menu{ display:none }
  .hamburger{ display:block }
  #menu-toggle:checked ~ .menu{
    display:flex; position:absolute; top:64px; right:4%; left:4%;
    flex-direction:column; gap:.5rem; background:#111a1f; border:1px solid var(--border);
    border-radius:12px; padding:.7rem; box-shadow:var(--shadow);
  }
  .dog-card{ grid-template-columns:1fr }
  .parents{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){ .gallery{ grid-template-columns:1fr } }

/* ================= FINAL OVERRIDES (#18–#27) ================= */

.site-header{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.banner{ height:auto !important; min-height:unset !important; }
.hero{ margin-top: clamp(8px, 1.8vh, 16px) !important; }
.hero__inner{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
  align-items:stretch;
}
.hero .panel{
  background: linear-gradient(180deg, #0f1d21, #0b171a);
  border: 1px solid rgba(47,213,192,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  min-height: clamp(220px, 36vh, 360px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero .logo-circle{
  height: 100%; aspect-ratio: 1 / 1;
  max-height: 380px;
  border-radius:50%; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35);
  align-self:stretch;
}
.hero .logo-circle img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); display:block; }

.banner{
  position:relative;
  background:url('../assets/banner.jpg') center/contain no-repeat !important;
  aspect-ratio: 2048 / 491;
}
.banner::after{ content:""; position:absolute; inset:auto 0 0 0; height:84px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

#o-plemene .container{ position:relative; }
#o-plemene .container .reveal:nth-child(2) h2{
  position:absolute; top:-56px; left:50%; transform:translateX(-50%);
  margin:0; white-space:nowrap; text-align:center; width:max-content;
}
@media (max-width: 900px){
  #o-plemene .container .reveal:nth-child(2) h2{
    position:static; transform:none; white-space:normal; text-align:left;
    margin-bottom:.5rem;
  }
}
#o-plemene .grid{ column-gap: clamp(22px, 3vw, 36px); }
#o-plemene p{ margin-bottom: .9rem; }

/*
 * The original full‑bleed implementation for the “Čo ponúkame” strip used a
 * 100vw width with negative margins to stretch the element beyond the
 * viewport. Because 100vw includes the scrollbar width, the strip ended up
 * overflowing horizontally, producing an unwanted horizontal scrollbar on
 * desktop. To remove the overflow without hiding it via overflow-x, we
 * simplify the layout: the strip now occupies 100% of the page width with
 * normal margins and positioning. All visual styling (background, border,
 * padding) is preserved.
 */
.info-strip{
  position:relative;
  left:0;
  right:0;
  margin-left:0;
  margin-right:0;
  width:100%;
  background:linear-gradient(180deg, #0f2c31, #0e2328);
  border-block:1px solid rgba(47,213,192,.18);
  padding:clamp(28px, 5vh, 48px) 0 !important;
}
.info-strip .container{ width:min(1100px,92%); margin-inline:auto; }
.info-strip h3{ font-size: clamp(20px, 2vw, 24px) !important; margin:0 0 .4rem; }
.info-strip p{ font-size: clamp(17px, 1.3vw, 18px) !important; margin:0; }

#o-mne .container{ align-items:center !important; }
#o-mne img.photo{
  width:100%; height:auto; max-height: clamp(320px, 44vh, 500px);
  object-fit: contain;
  border-radius: 14px;
}

.icon-btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
  border-radius:12px; background:rgba(255,255,255,.08); text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.10); box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn .icon{ width:20px; height:20px; display:block; object-fit:contain; }

img.photo, .card, .panel, .box{ border-radius: 14px; }


/* Zmena #28: jemná kontúra okolo pravého boxu s fotkou v sekcii O mne */
#o-mne .container > *:last-child{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:12px;
}
#o-mne .container > *:last-child img.photo{ border-radius:12px; }



/* === Patch v3: #29 smaller gap under banner; #30 equal logo height; #31/#32 logo fit without white edges === */
.hero{ margin-top: clamp(4px, 1.2vh, 10px) !important; }
.hero__inner{ align-items: stretch !important; }
.hero .panel{ min-height: clamp(220px, 34vh, 340px) !important; }
.hero .logo-circle{
  height: 100% !important;
  aspect-ratio: 1/1;
  max-height: 360px;
  background: #87b5b1;            /* fills circle behind logo to avoid white rim */
  padding: 4%;                     /* show entire logo without cutting text */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35);
}
.hero .logo-circle img{
  width: 100%; height: 100%; object-fit: contain !important; transform:none !important; display:block;
}

/* #33 remove borders around the O mne right box completely */
#o-mne .container > *:last-child{ border:none !important; padding:0 !important; }
#o-mne .container > *:last-child img.photo{ border-radius:14px; } /* keep only image radius */

/* Kontakt layout – keep name/email/phone, buttons stacked; fix icons */
#kontakt .contact-list{ display:flex; flex-direction:column; gap:.9rem; }
#kontakt .icon-btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.65rem 1.05rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:12px; width: fit-content;
}
#kontakt .icon-btn .icon{ width:20px; height:20px; object-fit:contain; display:block; }
#kontakt .contact-item{ display:flex; align-items:center; gap:.75rem; }
#kontakt .contact-item .ci{ width:18px; height:18px; opacity:.9; }



/* Patch v4 – HERO logo: no border/bg, fit cover, equal height as panel */
.hero .logo-circle{
  height: 100% !important;
  aspect-ratio: 1/1;
  max-height: 360px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important; /* ziadny okraj ani lem */
}
.hero .logo-circle img{
  width: 100%; height: 100%;
  object-fit: cover !important; /* oreze biely prstenec, logo bude plné */
  object-position: center;
  transform: none !important;
  display: block;
}



/* v5 Contact: name heading + consistent circular icons */
#kontakt .contact-name{ font-size: clamp(18px, 2vw, 20px); margin: 8px 0 12px; font-weight: 700; }
#kontakt .contact-list{ display:flex; flex-direction:column; gap:.9rem; }
.icon-circle{ width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 8px rgba(0,0,0,.2); color:#cfe9e6;
}
#kontakt .contact-item{ display:flex; align-items:center; gap:.75rem; }
#kontakt .icon-btn .icon{ width:20px; height:20px; display:block; object-fit:contain;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,.2);
}


/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:1000 }
.lightbox.open{ display:flex }
.lightbox .frame{ max-width:90vw; max-height:90vh; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.15) }
.lightbox img{ display:block; width:100%; height:auto }
.lightbox button{ position:absolute; top:16px; right:16px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:.5rem .7rem }


/* --- SAFEGUARD: disable reveal animation only in these sections --- */
#o-plemene .reveal,
#o-mne .reveal,
#psy .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* === Kontakt socials (stable) === */
#kontakt .actions li.social-item{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important }
#kontakt .actions li.social-item > a.social{ display:inline-flex; width:100%; justify-content:center; align-items:center; gap:.55rem; padding:.9rem 1.25rem; border-radius:16px; color:#fff; font-weight:700; letter-spacing:.2px; box-shadow:0 10px 24px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18); transition:transform .2s ease, filter .2s ease, box-shadow .2s ease }
#kontakt .actions a.social:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 12px 28px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.2) }
#kontakt .actions a.social .icon{ width:20px; height:20px; color:#fff }
#kontakt .actions a.social.ig{ background: radial-gradient(54% 140% at 30% 90%, #f58529 0%, #fd5949 35%, #d6249f 60%, #8134af 78%, #515bd4 100%) }
#kontakt .actions a.social.fb{ background:#1877F2 }



/* === Kontakt layout safety (no bullets + copy alignment) === */
#kontakt .actions { list-style: none; margin: 0; padding: 0; }
#kontakt .actions li { position: relative; }
#kontakt .actions .copy { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
#kontakt .actions li > a, 
#kontakt .actions li > button, 
#kontakt .actions .row { min-height: 44px; display: flex; align-items: center; }




/* ===== Lightbox (contain + fixed controls) ===== */
.lb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s ease }
.lb-overlay.open{ opacity:1; pointer-events:auto }
.lb-image{ max-width:92vw; max-height:92vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); border-radius:12px }
.lb-close{ position:fixed; top:18px; right:18px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:42px; cursor:pointer; z-index:10000 }
.lb-close:hover{ background:rgba(255,255,255,.25) }
.lb-nav{ position:fixed; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:36px; line-height:56px; cursor:pointer; z-index:10000 }
.lb-prev{ left:18px }
.lb-next{ right:18px }
.lb-nav:hover{ background:rgba(255,255,255,.25) }

/* Kontakt copy feedback */
#kontakt .actions .copy.copied::after{
  content:'Skopírované';
  position:absolute; right:12px; top:8px; background:rgba(0,0,0,.6);
  color:#fff; font-size:.75rem; padding:.2rem .45rem; border-radius:.4rem;
}

/* Galéria background fix */
#galeria, #galéria, section#galeria, section#galéria{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:scroll;
}



/* Hide any legacy lightbox overlays if present */
.pswp, .lg-backdrop, .lg-outer, .glightbox-container, .baguetteBox-overlay, .lightbox, .mfp-wrap, .mfp-bg { display:none !important; visibility:hidden !important; opacity:0 !important; }

/* removed old gallery bg fix */
#galeria, #galéria, section#galeria, section#galéria{
  position:relative;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
}
#galeria::before, #galéria::before, section#galeria::before, section#galéria::before{
  content:""; position:absolute; inset:0; background:inherit; background-repeat:no-repeat; background-size:cover; background-position:inherit; z-index:-1;
}



/* viewport-fixed overlay that mirrors section background */
#galeria::before, #galéria::before, section#galeria::before, section#galéria::before {
  content: "";
  position: fixed;       /* fixed to viewport to avoid banding when scrolling */
  inset: 0;
  background: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: inherit;
  pointer-events: none;
  z-index: -1;
}



#galeria,#galéria,section#galeria,section#galéria{background:transparent!important}


/* Background layers fix: keep noise tiled + gradient full-bleed */
body{
  /* If there are two backgrounds (e.g., noise + gradient), align per-layer values: */
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
  background-size: auto, cover !important;
  background-position: center top, center top !important;
}

/* hint browsers: light-only color scheme */
:root{ color-scheme: light; }