/* CSP extracted styles & inline conversions */
/* moved from index.html */
/* Robust O plemene layout (centered h2, stable split) */
#o-plemene{ scroll-margin-top: clamp(110px, 14vh, 180px); }
#o-plemene .container{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items:start;
}
/* Make h2 span full width and be centered */
#o-plemene .container > h2{
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 0 .8rem;
  justify-self: center;
}
/* Place the non-h2 children into the second row explicitly */
#o-plemene .container > :not(h2){ grid-row: 2; }
#o-plemene .container > :not(h2):first-of-type{ grid-column: 1; align-self: center; } /* left (image) */
#o-plemene .container > :not(h2):last-of-type{ grid-column: 2; }                    /* right (text) */
@media (max-width: 980px){
  #o-plemene .container{ grid-template-columns: 1fr }
  #o-plemene .container > :not(h2){ grid-row: auto }
}
/* moved from index.html */
/* === Kontakt — Pro jemný vzhľad s ikonami === */
#kontakt .panel{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:clamp(16px,2vw,28px);
  align-items:start; padding:clamp(12px,1.8vw,16px);
  border:1px solid var(--border); border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
  box-shadow: var(--shadow-soft);
}
#kontakt .lead{ color:var(--muted); margin:.15rem 0 .5rem }
#kontakt .person{ display:flex; align-items:center; gap:.75rem; margin:.4rem 0 1rem }
#kontakt .avatar{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(114,224,209,.12), rgba(255,255,255,.04)); font-weight:800 }
#kontakt .name{ font-weight:800; letter-spacing:.2px }

#kontakt .actions{ display:grid; gap:.35rem; margin-top:.2rem }
#kontakt .actions li{ display:grid; grid-template-columns: 22px 110px 1fr auto; align-items:center; gap:.5rem;
  padding:.4rem .5rem; border:1px solid transparent; border-radius:10px; background:transparent }
#kontakt .actions li:hover{ border-color: var(--border) }
#kontakt .actions .ico{ display:grid; place-items:center }
#kontakt .actions .icon{ width:18px; height:18px; fill:currentColor; opacity:.9 }
#kontakt .actions .label{ color:var(--muted); font-weight:600 }
#kontakt .actions .value{ font-variant-numeric: tabular-nums }
#kontakt .actions .copy{ padding:.35rem .6rem; border-radius:10px; border:1px solid var(--border); background:transparent; cursor:pointer }
#kontakt .actions .copy:active{ transform: translateY(1px) }

#kontakt .actions a.social{ display:inline-flex; align-items:center; gap:.45rem; justify-content:center; padding:.45rem .7rem;
  border:1px solid var(--border); border-radius:10px; font-weight:700; min-width: 150px; text-align:center; background:transparent }
#kontakt .actions a.social:hover{ filter:brightness(1.08) }

#kontakt .right img.photo{ width:100%; height:auto; border-radius:16px; border:1px solid var(--border) }

@media (max-width: 980px){
  #kontakt .panel{ grid-template-columns:1fr }
  #kontakt .actions li{ grid-template-columns: 22px 90px 1fr auto }
}


/* Constrain Kontakt width */
#kontakt .kontakt-wrap{ width:min(980px, 92%); margin-inline:auto }
/*
 * Kontakt – prepracované akcie: modernejšie ikonky, čistejší layout a
 * jednotné zarovnanie. Pôvodný grid na šírku bol nahradený flexboxom,
 * ktorý zaručí jednotnú medzeru medzi ikonou, popisom, hodnotou a
 * tlačidlom kopírovania. Transparentné pozadie bol nahradený jemným
 * prekrytím, ktoré vynikne na tmavom pozadí. Kopírovanie a sociálne
 * odkazy si zachovávajú interaktivitu.
 */
#kontakt .actions{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.2rem;
}
#kontakt .actions li{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.5rem .8rem;
  background:rgba(255,255,255,.03);
  border-radius:12px;
  border:1px solid var(--border);
  transition:background .2s, border-color .2s;
}
#kontakt .actions li:hover{
  border-color:var(--accent);
}
#kontakt .actions .ico{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#kontakt .actions .icon{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  opacity:.95;
}
#kontakt .actions .label{
  font-weight:600;
  color:var(--muted);
  min-width:90px;
}
#kontakt .actions .value{
  font-weight:600;
  flex-grow:1;
}
#kontakt .actions .copy{
  padding:.4rem .7rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  cursor:pointer;
  transition:background .2s;
}
#kontakt .actions .copy:hover{
  background:rgba(255,255,255,.08);
}
#kontakt .actions a.social{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  justify-content:center;
  padding:.55rem .8rem;
  border:1px solid var(--border);
  border-radius:10px;
  font-weight:700;
  min-width:150px;
  text-align:center;
  background:rgba(255,255,255,.04);
  transition:background .2s, border-color .2s;
}
#kontakt .actions a.social:hover{
  background:rgba(255,255,255,.07);
  border-color:var(--accent);
}

/* === Kontakt — UX tweaks per spec === */
#kontakt .panel{
  /* subtle accent-tinted surface */
  background:
    linear-gradient(180deg, rgba(114,224,209,.06), rgba(114,224,209,.02)),
    var(--surface);
}

/* spacing +20% */
#kontakt .actions{ gap: calc(1.2 * 0.35rem); }
#kontakt .actions li{ padding: calc(1.2 * 0.4rem) calc(1.2 * 0.5rem); }

/* layout: socials side-by-side */
#kontakt .actions{ grid-template-columns: 1fr 1fr; }
#kontakt .actions li{ grid-column: 1 / -1; }
#kontakt .actions li:has(a.social){ grid-column: auto; }
#kontakt .actions a.social{ width: 100%; }

/* mobile: stack socials */
@media (max-width: 640px){
  #kontakt .actions{ grid-template-columns: 1fr; }
}

/* copy: icon-only that appears on row hover */
#kontakt .actions .copy{
  display:inline-grid; place-items:center;
  width:36px; height:36px; padding:0; margin:0;
  border-radius:10px; border:1px solid var(--border);
  background:transparent;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, background .18s ease, transform .05s ease;
  position:relative;
}
#kontakt .actions li:hover .copy{ opacity:1; pointer-events:auto; }
#kontakt .actions .copy:hover{ background:rgba(255,255,255,.08); }
#kontakt .actions .copy:active{ transform: translateY(1px); }
#kontakt .actions .copy .icon{ width:18px; height:18px; fill:currentColor; opacity:.9; }

/* a11y helper */
#kontakt .actions .copy .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* tooltip when copied (JS toggles [data-copied]) */
#kontakt .actions .copy[data-copied="1"]::after{
  content: "Skopírované";
  position:absolute; top:-34px; right:0;
  padding:.25rem .5rem; font-size:.8rem;
  background:rgba(0,0,0,.6); border:1px solid var(--border); border-radius:8px;
  white-space:nowrap; transform: translateY(4px);
  opacity:0; animation: kontaktToast .9s ease forwards;
}
@keyframes kontaktToast{
  20%{ opacity:1; transform: translateY(0); }
  80%{ opacity:1; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(-2px); }
}

/* === Patch: socials side-by-side + brighter clipboard === */

/* Force grid layout (override any flex) */
#kontakt .actions{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap: calc(0.35rem * 1.2);
}

/* All standard rows span full width */
#kontakt .actions > li{ grid-column: 1 / -1; }

/* Social rows take half width (2 columns) */
#kontakt .actions > li:has(a.social){ grid-column: span 1; }

/* Fallback for browsers bez :has() — predpokladáme IG a FB sú posledné dve položky */
#kontakt .actions > li:nth-last-child(2),
#kontakt .actions > li:last-child{ grid-column: span 1; }

/* Mobile stacking */
@media (max-width: 680px){
  #kontakt .actions{ grid-template-columns: 1fr !important; }
  #kontakt .actions > li{ grid-column: 1 / -1 !important; }
}

/* Brighter clipboard icon + hover */
#kontakt .actions .copy{
  color: var(--accent);
  border-color: rgba(114,224,209,.35);
}
#kontakt .actions .copy:hover{
  background: rgba(114,224,209,.12);
}

/* Brighter toast */
#kontakt .actions .copy[data-copied="1"]::after{
  background: rgba(114,224,209,.22);
  border-color: rgba(114,224,209,.45);
  color: var(--text);
}
/* moved from chov.html */
/* === Naši psi – identical cards + show full ears/head === */
#psy .dog-card{ grid-template-columns: 1.1fr .9fr !important; }
#psy .dog-card > div:first-child{ order: 0 !important; }
#psy .dog-card > div:last-child{ order: 0 !important; }
#psy .dog-card img.photo{ object-position: 50% 16% !important; transition: transform .35s ease }
#psy .dog-card:nth-of-type(2) img.photo{ object-position: 50% 14% !important; }
/* Reduce hover scale so ears don't crop */
#psy .dog-card:hover img.photo{ transform: scale(1.008) }
/* moved from chov.html */
#psy .dog-card .photo--face{ aspect-ratio:3/4; object-fit:cover; object-position:50% 28%; border-radius:16px }
#psy .dog-card{ margin-top: 1rem; background: var(--surface); padding: clamp(16px, 2.5vw, 24px); border:1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-soft) }
#psy h3{ margin:0 0 .35rem; }
#psy .badges .badge{ background: rgba(61,183,173,.12); }
/* moved from chov.html */
/* Experiment 2 – Naši psi (refined layout & scale) */
#psy{ --gap: clamp(18px, 2.6vw, 30px); }
#psy .container{ display:grid; gap: calc(var(--gap) * 1.1) }

#psy .dog-card{
  position: relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap);
  align-items: center;
  border:1px solid var(--border);
  border-radius: 24px;
  padding: clamp(16px, 2.4vw, 26px);
  background:
    radial-gradient(220px 200px at 0% 0%, rgba(114,224,209,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

#psy .dog-card > div:first-child{ position: relative; }
#psy .dog-card img.photo{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 18px;
  transition: transform .5s cubic-bezier(.2,.6,0,1);
}
#psy .dog-card:hover img.photo{ transform: scale(1.025) }

#psy .dog-card > div:last-child{
  background: linear-gradient(180deg, rgba(10,20,24,.5), rgba(10,20,24,.28));
  border:1px solid rgba(26,42,49,.6);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 22px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}

#psy h3{ font-size: clamp(1.3rem, 1.15rem + .9vw, 1.8rem); margin: 0 0 .45rem }
#psy p{ margin:.4rem 0 }
#psy p.muted{ opacity:.95; line-height: 1.65 }

#psy .badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 .7rem }
#psy .badge{
  border:1px solid var(--border);
  border-radius: 999px;
  padding:.42rem .7rem;
  font-weight: 600;
  background: rgba(61,183,173,.12);
  transition: background .2s ease, border-color .2s ease;
}
#psy .badge:hover{ background: rgba(114,224,209,.16); border-color: var(--accent) }
#psy .btn{ margin-top:.7rem }

/* Subtle offset for rhythm */

/* Responsive stack */
@media (max-width: 980px){
  #psy .dog-card{ grid-template-columns: 1fr; }
  }
/* moved from stenata.html */
/* === Šteniatka — Aktuálny vrh (Hero + info + 1-riadok karty + rodičia) === */
#stenata .hero{ margin-bottom: clamp(14px, 2vw, 22px) }
#stenata .hero img{ width:100%; height:auto; border-radius:16px; border:1px solid var(--border) }

/* Content flow: info (meta/note) above, then puppies row, then parents */
#stenata .content{ display:block }
#stenata .meta{ color:var(--muted); margin:.2rem 0 .5rem }
#stenata .note{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; background:rgba(114,224,209,.09); font-weight:600; margin-bottom: .9rem }
#stenata .note::before{ content:"🗓️" }

/* Puppies grid: single row on desktop (no scroll), wraps on smaller screens */
#stenata .puppies{ display:grid; gap:clamp(12px, 1.6vw, 18px); margin-bottom: clamp(16px,2.2vw,24px) }
@media (min-width: 1100px){
  #stenata .puppies{ grid-template-columns: repeat(4, 1fr) } /* 4 karty v jednom riadku */
}
@media (max-width: 1099px) and (min-width: 700px){
  #stenata .puppies{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 699px){
  #stenata .puppies{ grid-template-columns: 1fr }
}

#stenata .puppy-card{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); box-shadow: var(--shadow-soft) }
#stenata .puppy-card .thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden }
#stenata .puppy-card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .28s ease }
#stenata .puppy-card .thumb img.alt{ opacity:0 }
#stenata .puppy-card:hover .thumb img.alt,
#stenata .puppy-card:focus-within .thumb img.alt{ opacity:1 }
#stenata .puppy-card:hover .thumb img:not(.alt),
#stenata .puppy-card:focus-within .thumb img:not(.alt){ opacity:0 }
#stenata .puppy-card .body{ padding:.65rem .75rem }
#stenata .puppy-card h4{ margin:.1rem 0; font-weight:800 }

/* Parents: polished expandable cards with subtle animation */
#stenata .parents{ margin-top: clamp(16px, 2.2vw, 24px) }
#stenata .parents h4{ margin:.2rem 0; font-weight:800 }
#stenata .parent{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); box-shadow: var(--shadow-soft) }
#stenata .parent summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns: 120px 1fr auto; align-items:center; gap:.8rem; padding:.7rem .9rem; font-weight:700 }
#stenata .parent summary::-webkit-details-marker{ display:none }
#stenata .parent summary .thumb{ width:100%; aspect-ratio: 16/10; overflow:hidden; border-radius:10px; border:1px solid var(--border) }
#stenata .parent summary .thumb img{ width:100%; height:100%; object-fit:cover; object-position:center }
#stenata .parent summary .title{ display:flex; flex-direction:column; gap:.25rem }
#stenata .parent summary .title small{ color:var(--muted); font-weight:600 }
#stenata .parent summary .caret{ width:22px; height:22px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; transition: transform .25s ease }
#stenata details[open] .caret{ transform: rotate(180deg) }

#stenata .parent .body{ padding:.75rem .9rem; border-top:1px solid var(--border); overflow:hidden }
#stenata .parent .body > .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem }
#stenata .parent .badge{ display:inline-block; padding:.25rem .5rem; border:1px solid var(--border); border-radius:999px; font-size:.9rem }
#stenata .parent .text{ margin-top:.4rem }

/* Open/close animation using opacity + clip-path (safer than height) */
#stenata .parent .body{ opacity:0; clip-path: inset(0 0 100% 0); transition: opacity .22s ease, clip-path .22s ease }


@media (max-width: 800px){
  #stenata .parent summary{ grid-template-columns: 100px 1fr auto }
  #stenata .parent .body > .grid{ grid-template-columns: 1fr }
}

#stenata details.parent[open] .body{ opacity:1; clip-path: inset(0 0 0 0) }
/* Parents layout: two cards side-by-side on desktop, stack on small screens */
#stenata .parents{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 18px); align-items:start }
#stenata .parents > h3{ grid-column: 1 / -1 }
@media (max-width: 800px){
  #stenata .parents{ grid-template-columns: 1fr }
}

#stenata .parent summary .thumb img.kessi-focus{ object-position: center 15% }
/* moved from galeria.html */
/* --- Galéria (scoped) --- */
.gallery-wrap{scroll-margin-top:clamp(110px,14vh,180px)}
.gallery-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.gallery-title{font-size:clamp(28px,4vw,40px);margin:0}
.gallery-filters{display:flex;flex-wrap:wrap;gap:10px}
.gallery-filters button{
  appearance:none;border:1px solid var(--border);background:transparent;color:var(--text);
  padding:8px 12px;border-radius:999px;cursor:pointer;transition:transform .12s ease, background .2s ease, border-color .2s;
}
.gallery-filters button[aria-selected="true"]{background:var(--surface);border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 70%)}
.gallery-filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.masonry{
  column-gap:14px;
}
@media(min-width:640px){.masonry{column-count:2}}
@media(min-width:900px){.masonry{column-count:3}}
@media(min-width:1200px){.masonry{column-count:4}}
.masonry-item{break-inside:avoid;padding:0;margin:0 0 14px}
.masonry-item a{display:block;border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-soft);border:1px solid var(--border)}
.masonry-item img{display:block;width:100%;height:auto;object-fit:cover;transition:transform .35s ease;vertical-align:middle}
.masonry-item a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.masonry-item a:hover img{transform:scale(1.03)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox.open{display:flex}
.lightbox__stage{position:relative;max-width:min(92vw,1300px);max-height:min(88vh,92vh)}
.lightbox__img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
/*
   Lightbox ovládanie
   Šípky a zatváracie tlačidlo sú teraz fixne umiestnené voči viewportu,
   takže sa počas prezerania obrázkov nehýbu. Ich vzhľad ostáva
   rovnaký, meníme len positioning. Media query upravuje odsadenie na
   menších obrazovkách.
*/
.lb-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10001;
}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close{
  position:fixed;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  z-index:10002;
}
@media(max-width:720px){
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lb-close{top:8px;right:8px;background:rgba(0,0,0,.45)}
}
/* moved from galeria.html */
/* === Full Height Fix (only for galeria.html) === */
  html, body {
    height: 100%;
  }
  section#galeria {
    min-height: calc(100vh - 160px);
    display: block;
    position: relative;
  }
  footer {
    margin-top: auto;
  }