/* ===== Color tokens ===== */
:root{
  --text-50:#f4f4f0;--text-100:#eaeae1;--text-200:#d5d5c3;--text-300:#c0c0a5;--text-400:#aaaa88;--text-500:#95956a;--text-600:#777755;--text-700:#5a5a3f;--text-800:#3c3c2a;--text-900:#1e1e15;--text-950:#0f0f0b;
  --background-50:#f4f4f0;--background-100:#e9e9e2;--background-200:#d3d3c5;--background-300:#bdbda8;--background-400:#a7a78b;--background-500:#91916e;--background-600:#747458;--background-700:#575742;--background-800:#3a3a2c;--background-900:#1d1d16;--background-950:#0f0f0b;
  --primary-50:#f1f3f1;--primary-100:#e3e8e3;--primary-200:#c7d1c7;--primary-300:#acb9ac;--primary-400:#90a290;--primary-500:#748b74;--primary-600:#5d6f5d;--primary-700:#465346;--primary-800:#2e382e;--primary-900:#171c17;--primary-950:#0c0e0c;
  --secondary-50:#f0f5f0;--secondary-100:#e0ebe0;--secondary-200:#c2d6c2;--secondary-300:#a3c2a3;--secondary-400:#85ad85;--secondary-500:#669966;--secondary-600:#527a52;--secondary-700:#3d5c3d;--secondary-800:#293d29;--secondary-900:#141f14;--secondary-950:#0a0f0a;
  --accent-50:#f0f5f1;--accent-100:#e0ebe4;--accent-200:#c2d6c9;--accent-300:#a3c2ad;--accent-400:#85ad92;--accent-500:#669977;--accent-600:#527a5f;--accent-700:#3d5c47;--accent-800:#293d30;--accent-900:#141f18;--accent-950:#0a0f0c;

  --text:#070705; --background:#f1f3f1;
  --primary:#a7b5a7; --secondary:#b0cab0; --accent:#91b59d;

  /* header height used to offset hero inner padding */
  --header-h:72px;
}

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

/* ===== Base typography ===== */
html{font-size:100%;}
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:400;color:var(--text);background:var(--background);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0 0 .35em 0;
}
h1{font-size:4.210rem;} h2{font-size:3.158rem;} h3{font-size:2.369rem;}
h4{font-size:1.777rem;} h5{font-size:1.333rem;} small{font-size:.750rem;}

.hero-content h1{
  font-weight:600;line-height:1.06;letter-spacing:-.012em;
  max-width:min(16ch,90vw);text-shadow:0 2px 16px rgba(0,0,0,.35);
  font-variation-settings:"opsz" 96;
}

/* start hidden to avoid first-char flash */
.typewriter{
  display:inline-block;
  text-align:center;
  opacity:0;
  transition:opacity .2s ease;
}
.typewriter.tw-ready{ opacity:1; }

.tw-line{ display:block; min-height:1em; white-space:nowrap; }
.tw-char{ display:inline-block; opacity:0; transform:translateY(6px); transition:opacity .32s ease, transform .32s ease; }
.tw-char.on{ opacity:1; transform:translateY(0); }

.hero-btn{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.hero-btn.visible{ opacity:1; transform:translateY(0); }

.hero-info small,.menu-head .small,.eyebrow,.label,.kicker{
  text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.78rem;opacity:.95;
}

/* ===== Brand ===== */
.brand-text{letter-spacing:.5px}
.brand-mark{width:14px;height:14px;border-radius:50%;background:var(--accent);display:inline-block}

/* ===== Header (not sticky) ===== */
.site-header{pointer-events:none}
.site-header .container-xxl,.site-header *{pointer-events:auto}
.hamburger{border:0;background:none}
.hamburger-box{display:inline-block;width:28px;height:18px;position:relative}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
  transition:transform .3s ease,opacity .2s;
}
.hamburger-inner{top:50%;transform:translateY(-50%)}
.hamburger-inner::before{top:-8px}
.hamburger-inner::after{bottom:-8px}
.hamburger[aria-expanded="true"] .hamburger-inner{background:transparent}
.hamburger[aria-expanded="true"] .hamburger-inner::before{transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger-inner::after{transform:translateY(-8px) rotate(-45deg)}

.menu-open .hamburger{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ===== Overlay menu ===== */
.overlay-menu{
  position: fixed; inset: 0 0 0 auto; width: min(92vw, 420px);
  background: var(--primary-600); color: #fff;
  display: flex; flex-direction: column; gap: 16px;
  height: 100dvh; max-height: 100dvh;
  padding: 24px 24px calc(16px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease;
  z-index: 1050;
  overflow: hidden; /* internal scroll only */
  pointer-events: none;
}

.overlay-menu [data-menu-close]{
  text-decoration: none !important;
}

.menu-open .overlay-menu{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* === backdrop (blur + fade) === */
.menu-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden;
  transition:
    opacity .45s ease,
    backdrop-filter .55s ease,
    visibility .45s ease;
  z-index: 1040;
}
.menu-open .menu-backdrop{
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(2px);
}

/* sticky head */
.menu-head{
  padding-block: 6px 14px;
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.0) 60%);
}

/* scrollable body */
.menu-scroll{
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable both-edges;
}

/* links */
.menu-list{
  list-style: none; margin: 0; padding: 8px 0 0;
}
.menu-link{
  display: inline-block; position: relative;
  padding: 10px 0;
  font-size: clamp(1.4rem, 2.2vw, 2.25rem);
  color: #fff; text-decoration: none;
  transition: opacity .35s ease, transform .35s ease;
}
.menu-link::after{
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.menu-link:hover::after{ transform: scaleX(1); }
.menu-link:hover{ opacity: .9; transform: translateX(2px); }

/* bottom contact block */
.menu-contact{
  text-align: left;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.menu-contact i{ color:#fff; opacity:.9; flex-shrink:0; }
.menu-contact small{ font-size:.8rem; letter-spacing:.08em; }

.menu-phone{
  position: relative; color: #fff; font-weight: 600; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s ease, opacity .3s ease;
}
.menu-phone:hover{ background-size: 100% 1px; opacity: .9; }



/* ===== Hero ===== */
.hero{
  position:relative;
  height:clamp(520px,75vh,660px);
  max-height:660px;
  color:#fff;
  border-bottom: 1px solid var(--primary-200);
}

.hero-bg,.hero-video{width:100%;height:100%;object-fit:cover}

.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.38) 40%,rgba(0,0,0,.72))}

/* === HERO fix: show video, keep image zoom only for .hero-bg === */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; } /* clip video */
.hero-video{
  display:block !important;        /* was: none */
  position:absolute; inset:0;      /* fill wrapper */
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;             /* clicks prejdú na obsah */
  -webkit-transform:translateZ(0); /* iOS compositing */
}

/* === HERO video: hide native play button and controls === */
.hero-video {
  -webkit-appearance: none;
  appearance: none;
}

/* iOS Safari overlay play icon */
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Android Chrome overlay play icon */
.hero-video::-webkit-media-controls {
  display: none !important;
}

/* general controls hiding */
.hero-video::-internal-media-controls-overlay-cast-button,
.hero-video::-internal-media-controls-play-button,
.hero-video::-internal-media-controls-button-panel {
  display: none !important;
}

.hero .container-xxl{
  position:relative; 
  z-index:1;
  height:100%;
  padding-top:var(--header-h);
  display:flex;
}
.hero .row.h-100{
  min-height:100%;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.hero-content{
  text-align:center;
  margin-block:auto; 
  flex:0 0 auto;
}

.hero-info{
  padding-block:28px;
  margin-top:auto; 
}
.hero-info .col-12{align-items:center}
.hero-info i{opacity:.9}


.hero .link-underline,
.hero span {
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}

/* === MOBILE FIX === */
@media (max-width: 575.98px){
  .hero{
    height: auto;
    min-height: 75svh;
    max-height: none;
  }
  @supports (height: 100dvh){
    .hero{ min-height: 75dvh; }
  }

  .hero .container-xxl{
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    padding-bottom: 16px;
  }

  .hero .row.h-100{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }

  .hero-content{
    margin-block: 0;
    flex: 0 0 auto;
    padding-top: 30px;
  }

  .hero-info{
    margin-top: 30px;
    margin-bottom: 30px;
    padding-left: 14px;
    padding-block: 16px 0;
  }
}

/* === HERO zoom-in animation === */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  animation: heroZoom 12s ease-out forwards;
}

/* jemný zoom-in */
@keyframes heroZoom {
  0% {
    transform: scale(1);
    filter: brightness(0.98);
  }
  100% {
    transform: scale(1.08);
    filter: brightness(1);
  }
}

/* ak máš video, spustíme len obrázkový efekt */
.hero-video { animation: none; }



/* ===== Buttons ===== */
.btn-pill{
  border-radius:999px;padding:.85rem 1.35rem;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:600;letter-spacing:.02em;border:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .45s cubic-bezier(.25,.1,.25,1),color .45s cubic-bezier(.25,.1,.25,1),transform .25s ease;
}
/* === BOOTSTRAP BUTTON VARIABLE OVERRIDES (no blue on :active) === */
.btn-primary, .btn-secondary, .btn-accent, .btn-ghost, .btn-ellie {
  --bs-btn-border-width: 0;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
}

.btn-primary{
  --bs-btn-bg: var(--primary-700);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--primary-700);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--primary-700);
  --bs-btn-hover-border-color: var(--primary-700);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
}

.btn-secondary{
  --bs-btn-bg: var(--secondary-700);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--secondary-700);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--secondary-700);
  --bs-btn-hover-border-color: var(--secondary-700);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--secondary-700);
  --bs-btn-active-border-color: var(--secondary-700);
}

.btn-accent{
  --bs-btn-bg: var(--accent);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--accent-800);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--accent-800);
  --bs-btn-active-border-color: var(--accent);
}

.btn-ghost{
  --bs-btn-bg: var(--accent);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-700);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-hover-border-color: var(--accent-700);
  --bs-btn-active-bg: var(--accent-700);
  --bs-btn-active-color: var(--accent);
  --bs-btn-active-border-color: var(--accent-700);
}

/* === BTN ELLIE === */
.btn-ellie{
  --bs-btn-bg: var(--secondary-700);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--secondary-700);

  --bs-btn-hover-bg: var(--secondary-800);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--secondary-800);

  --bs-btn-active-bg: var(--secondary-800);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--secondary-800);
}

/* unified state (hover = active = focus-visible) */
.btn-ellie:hover,
.btn-ellie:active,
.btn-ellie:focus-visible {
  background-color: var(--secondary-800) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}



/* === UNIFIED STATES: hover = active = focus-visible === */
.btn:focus, .btn:active, .btn:focus-visible { box-shadow: none !important; outline: none !important; border: none !important; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible {
  background-color: #fff !important; color: var(--primary-700) !important; transform: translateY(-1px);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus-visible {
  background-color: var(--secondary-50) !important; color: var(--secondary-700) !important; transform: translateY(-1px);
}
.btn-accent:hover, .btn-accent:active, .btn-accent:focus-visible {
  background-color: #fff !important; color: var(--accent-800) !important; transform: translateY(-1px);
}
.btn-ghost:hover, .btn-ghost:active, .btn-ghost:focus-visible {
  background-color: var(--accent-700) !important; color: var(--accent) !important; transform: translateY(-1px);
}

/* tap highlight off (mobile) */
button.btn, a.btn { -webkit-tap-highlight-color: transparent; }

/* ===== Link underline ===== */
.link-underline{
  color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease;
}
.link-underline:hover{background-size:100% 1px}

/* ===== Padding guards ===== */
.site-header .container-xxl,.hero .container-xxl{
  padding-left:clamp(1rem,5vw,3rem);padding-right:clamp(1rem,5vw,3rem);
}

@media (max-width:768px){
  :root{ --header-h:64px; } 
  .hero-content h1{font-size:clamp(2.2rem,6vw,3rem);font-variation-settings:"opsz" 72;justify-items: center;}
}
@media (max-width:576px){
  h1{font-size:2.25rem}
  .hero-content .btn{width:100%}
  .hero-info{row-gap:18px}
  .hero-info .fs-3{font-size:1.35rem!important}
}

/* ===== Brand ===== */
.brand-logo{
  height:56px;
  width:auto;
  display:block;
  transition:opacity .3s ease, transform .3s ease;
}

.brand-logo:hover{
  opacity:.9;
  transform:scale(1.05);
}

@media (max-width:768px){
  .brand-logo{
    height:36px;
  }
}

/* ===== Overlay menu social icons ===== */
.social-link{
  font-size:1.25rem;
  opacity:.85;
  transition:opacity .3s ease, transform .3s ease;
}
.social-link:hover{
  opacity:1;
  transform:scale(1.15);
  color:#fff;
}

/* ===== WHY US ===== */
:root{
  --primary-50:#f1f3f1;
  --primary-100:#e3e8e3;
  --primary-200:#c7d1c7;
  --primary-300:#acb9ac;
  --primary-400:#90a290;
  --primary-500:#748b74;
  --primary-600:#5d6f5d;
  --primary-700:#465346;
  --primary-800:#2e382e;
  --primary-900:#171c17;
  --primary-950:#0c0e0c;

  --why-radius:24px;

  /* desktop track heights */
  --why-r1:280px;
  --why-r2:140px;
  --why-r3:280px;
}

/* section */
.whyus{
  background: linear-gradient(to bottom, var(--primary-50) 0%, var(--primary-100) 100%);
  color:var(--primary-800);
}
.whyus-title{
  font-family:'Fraunces', Georgia, serif;
  letter-spacing:-.01em;
  color:var(--primary-700);
}

/* grid base */
.whyus-grid{display:grid;gap:22px;}
.item-1{grid-area:i1;}
.item-2{grid-area:i2;}
.item-3{grid-area:i3;}
.item-4{grid-area:i4;}
.item-5{grid-area:i5;}
.item-6{grid-area:i6;}

/* tiles */
.whyus-tile{
  background:var(--primary-50);
  border-radius:var(--why-radius);
  overflow:hidden;
  height:100%;
}

/* photo tiles */
.whyus-photo{position:relative;width:100%;max-width:100%;overflow:hidden;}
.whyus-photo .whyus-figure{position:relative;width:100%;height:100%;margin:0;}
.whyus-photo img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  border-radius:inherit;
}

/* bubble overlay (container only) */
.whyus-bubble{
  position:absolute;
  left:18px;
  margin:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  color:var(--primary-900);
  font-family:'Fraunces', Georgia, serif;
  font-weight:400;
  font-size:1.5rem;
  line-height:1.25;
  max-width:min(88%,32ch);
  z-index:1;
  white-space:normal;
  hyphens:auto;
}

/* per-line pills */
.whyus-bubble .bubble-lines{
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;

  background:var(--primary-50);
  padding:8px 12px;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  color:var(--primary-900);

  line-height:1.6;
  margin-bottom:2px;
}

/* anchors */
.bubble-top .whyus-bubble{top:18px;}
.bubble-bottom .whyus-bubble{bottom:18px;}

/* text cards */
.whyus-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:22px;
  padding:3rem 2.5rem;
  font-family:'Fraunces', Georgia, serif;
  color:var(--primary-900);
  height:100%;
  min-height:0;
}
.whyus-icon{width:78px;height:78px;flex:0 0 78px;opacity:.95;}
.whyus-text{
  margin:0;
  font-size:1.5rem;
  line-height:1.45;
  max-width:30ch;
  font-weight:400;
  color:var(--primary-900);
}

.bg-blue{background:var(--primary-200);}
.bg-mint{background:var(--primary-200);} 
.bg-ice{ background:var(--primary-300);} 

/* prevent content-based overflow */
.whyus-grid > *{min-width:0;max-width:100%;box-sizing:border-box;}

/* ===== Desktop (≥992px) ===== */
@media (min-width:992px){
  .whyus-grid{
    grid-template-columns:1.1fr 1fr 1fr;
    grid-template-rows:var(--why-r1) var(--why-r2) var(--why-r3);
    grid-template-areas:
      "i1 i2 i3"
      "i1 g56 g56"
      "i4 g56 g56";
    align-items:stretch;
  }
  .whyus-group-right{
    grid-area:g56;
    display:grid;
    gap:22px;
    grid-template-columns:.8fr 1.2fr;
    grid-template-rows:var(--why-r2) var(--why-r3);
    grid-template-areas:
      "i5 i6"
      "i5 i6";
  }
}

/* ===== Tablet (576–991.98px) ===== */
@media (min-width:576px) and (max-width:991.98px){
  .whyus-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    grid-template-areas:
      "i1 i1"
      "i2 i3"
      "i4 i4"
      "i5 i6";
    align-items:stretch;
  }
  .whyus-group-right{display:contents;}

  .whyus-card{padding:2.5rem 2rem;gap:18px;min-height:260px;height:auto;}
  .whyus-icon{width:68px;height:68px;}
  .item-1.whyus-photo,
  .item-6.whyus-photo{aspect-ratio:16/9;}

  .item-1 .whyus-bubble{top:16px;left:16px;right:auto;bottom:auto;}
  .item-6 .whyus-bubble{bottom:16px;left:16px;right:16px;top:auto;}
}

/* ===== Mobile (<576px) ===== */
@media (max-width:575.98px){
  .whyus-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:
      "i1"
      "i2"
      "i3"
      "i4"
      "i5"
      "i6";
    align-items:stretch;
  }
  .whyus-group-right{display:contents;}

  .whyus-card{padding:2.25rem 1.75rem;gap:16px;min-height:240px;height:auto;}
  .whyus-icon{width:56px;height:56px;}

  .item-1.whyus-photo,
  .item-6.whyus-photo{aspect-ratio:4/3;}

  .whyus-bubble{left:14px;right:14px;font-size:1.25rem;}
  .whyus-bubble .bubble-lines{padding:8px 12px;border-radius:14px;}
  .item-1 .whyus-bubble{top:14px;}
  .item-6 .whyus-bubble{bottom:14px;}
}

/* ===== Guards for the last photo card (no overflow) ===== */
.item-6{width:100%;justify-self:stretch;align-self:stretch;}


/* section reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  will-change:opacity, transform;
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* optional: jemný kaskádový nábeh dlaždíc */
.reveal.is-visible .whyus-tile{ transition:transform .5s ease, opacity .5s ease; }
.reveal.is-visible .whyus-tile:nth-child(1){ transition-delay:.05s; }
.reveal.is-visible .whyus-tile:nth-child(2){ transition-delay:.10s; }
.reveal.is-visible .whyus-tile:nth-child(3){ transition-delay:.15s; }
.reveal.is-visible .whyus-tile:nth-child(4){ transition-delay:.20s; }
.reveal.is-visible .whyus-tile:nth-child(5){ transition-delay:.25s; }
.reveal.is-visible .whyus-tile:nth-child(6){ transition-delay:.30s; }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* ===== SERVICES (contained shadows, correct edges) ===== */
.services{
  background:var(--primary-100);
  color:var(--primary-900);
  overflow:hidden;                    /* keep everything inside section */
}

.services h2{
color: var(--primary-700);
}

.svc-slider{
  position:relative;
  overflow:visible;                   /* allow internal shadows */
  padding-block:16px 40px;            /* top/bottom buffer for hover shadow */
}

.svc-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  overflow-y:visible;                 /* show card shadows */
  scroll-snap-type:x mandatory;
  padding: 10px 0px;
  margin:0;

  /* hide scrollbar */
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.svc-track::-webkit-scrollbar{ display:none; }

/* cursor states */
.svc-track, .svc-card{ cursor:grab; }
.svc-track.grabbing, .svc-card:active{ cursor:grabbing; }

/* cards */
.svc-card{
  scroll-snap-align:start;
  flex:0 0 100%;
  background: var(--primary-200);
  border:1px solid var(--primary-200);
  border-radius:22px;
  padding:28px;
  min-height:240px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .28s ease, border-color .28s ease; /* minimal English comment */
}
.svc-card:hover{
  transform:translateY(-6px);
  border-color:var(--primary-300);
}

/* icon */
.svc-icon{
  width:56px; height:56px; border-radius:14px;
  background:var(--primary-500);
  display:inline-flex; align-items:center; justify-content:center;
}
.svc-icon img{ width:28px; height:28px; filter:invert(1) brightness(100%); }

/* text */
.svc-title{ margin:8px 0 0; color:var(--primary-900); }
.svc-text{ margin:0 0 12px; color:var(--primary-800); }

/* CTA button */
.svc-btn{ min-width:120px; }

/* nav buttons */
.svc-prev, .svc-next{ min-width:44px; }

/* disabled nav (visual + block clicks) */
.svc-prev[disabled],
.svc-next[disabled],
.svc-prev.is-disabled,
.svc-next.is-disabled{
  opacity:.5;
  pointer-events:none;
}


/* responsive: 1 / 2 / 4 per view */
@media (min-width:576px){ .svc-card{ flex:0 0 calc(50% - 10px); } }
@media (min-width:992px){ .svc-card{ flex:0 0 calc(25% - 15px); } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .svc-card{ transition:none !important; }
}

/* ===== CONTACT ===== */
.contact{
  background: var(--primary-50);
  color: var(--primary-900);
}

.section-pad{
  padding-block: clamp(48px, 7vw, 96px);
}

.contact-left{
  background: var(--primary-100);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 36px);
  height: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.contact-title{
  color: var(--primary-700);
}

.contact-link{
  color: var(--primary-700);
  text-decoration: none;
  transition: color .25s ease;
}

.contact-link:hover{ color: var(--primary-700); }

.contact-link .link-text{
  position: relative;
  display: inline-block;
}

.contact-link .link-text::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background-color: var(--primary-700);
  transition: width .3s ease;
}

.contact-link:hover .link-text::after{
  width: 100%;
}

.contact-ico{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500);
  color: #fff;
}

.contact-form-wrap{
  background: var(--background-100);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* inputs */
.contact .form-label{
  font-weight: 600;
  color: var(--primary-800);
}

.contact .form-control{
  background: var(--background-50);
  border: 1px solid var(--background-300);
  border-radius: 16px;
  padding: .9rem 1rem;
  color: var(--primary-900);
  box-shadow: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.contact .form-control::placeholder{
  color: rgba(0,0,0,.45);
}

.contact .form-control:focus{
  background: var(--background-50);
  border-color: var(--secondary-700);
  box-shadow: 0 0 0 .2rem rgba(61,87,61,.15);
  outline: 0;
}

/* checkbox */
.contact .form-check-input{
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--background-300);
  background: var(--background-50);
  box-shadow: none;
  transition: all .25s ease;
}

.contact .form-check-input:checked{
  background-color: var(--secondary-700);
  border-color: var(--secondary-700);
}

/* social icons */
.contact-social{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: auto; 
  padding-top: 2rem;
}

.contact-social .social-link{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500);
  color: #fff;
  font-size: 1rem;
  transition: all .25s ease;
  text-decoration: none; 
}

.contact-social .social-link:hover{
  background: var(--secondary-700);
  color: #fff;
  transform: translateY(-2px);
}

/* custom checkbox checkmark */
.contact .form-check-input:checked {
  background-color: var(--secondary-700);
  border-color: var(--secondary-700);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l3 3 7-7'/%3e%3c/svg%3e");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* responsive */
@media (max-width: 575.98px){
  .contact-left,
  .contact-form-wrap{
    border-radius: 18px;
  }
}

/* ===== CONTACT form feedback ===== */
.contact-alert{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  padding: 0.9rem 1.5rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--secondary-700);
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
  transition: all .4s ease;
  z-index: 20;
}
.contact-alert.error{
  background: #d9534f;
}
.contact-alert.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* disable color change for valid checkboxes */
.contact .form-check-input:valid ~ .form-check-label,
.contact .form-check-input:checked:valid ~ .form-check-label {
  color: var(--primary-900) !important; /* vráti pôvodnú farbu textu */
}

/* disable Bootstrap valid state color for checkbox */
.contact .form-check-input:valid,
.contact .form-check-input:checked:valid {
  border-color: var(--background-300) !important;
  background-color: var(--secondary-700) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l3 3 7-7'/%3e%3c/svg%3e") !important;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== MAPBOX ===== */
.mapbox{
  background: var(--primary-100);
  color: var(--primary-900);
}

.mapbox-title{
  color: var(--primary-700);
}

.mapbox .mini-ico{
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-600);
  color: #fff;
  flex: 0 0 28px;
  margin-top: .15rem;
}

.mapbox-link{
  color: var(--primary-800);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
.mapbox-link:hover{ background-size: 100% 1px; color: var(--primary-800); }

/* map */
.mapframe{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--primary-200);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.mapframe iframe{ width:100%; height:100%; border:0; filter:none; transition: opacity .4s ease, transform .4s ease; }

@media (max-width: 575.98px){
  .mapframe{ border-radius: 16px; }
}

/* right panel (hours) */
.hours-card{
  background: var(--primary-50);
  border-radius: 20px;
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;  /* desktop */
  align-items: center;      /* desktop */
  text-align: center;
  min-height: 100%;
}

.hours-card h3{ color: var(--primary-700); }

.hours-list{
  margin: 0 0 1.5rem 0;
  width: 100%;
  max-width: 380px;
}
.hours-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--primary-200);
  font-weight: 600; color: var(--primary-900);
}
.hours-row.soft{
  font-weight: 500; color: var(--primary-800);
  border-bottom: 1px dashed var(--primary-200);
}

.hours-card .btn{
  align-self: center;
  margin-top: 2rem;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 50px;
  min-width: 70%;
}

/* --- mobile & tablet: center button vertically --- */
@media (max-width: 991.98px){
  .hours-card{
    justify-content: flex-start;      /* top content at top */
    min-height: clamp(460px, 68vh, 640px); /* room to center */
  }
  .hours-card .btn{
    margin-top: auto;                  /* push from top */
    margin-bottom: auto;               /* push from bottom => centered */
  }
}

/* small tweaks */
@media (max-width: 575.98px){
  .hours-card{ border-radius: 16px; padding: 22px; }
}

/* ===== FOOTER ===== */
.site-footer{
  background: var(--primary-50);
  color: var(--primary-800);
  border-top: 2px solid var(--primary-200);
  font-size: .95rem;
}

.site-footer h6{
  color: var(--primary-700);
  font-family: 'Fraunces', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: .75rem;
  font-size: 1rem;
}

/* --- menu list --- */
.footer-list a{
  display: inline-block;
  padding-block: .25rem;
}

.footer-contact li{
  display: grid;                     
  grid-template-columns: 20px 1fr;
  column-gap: .6rem;
  margin-bottom: .6rem;
  color: var(--primary-800);
}
.footer-contact i{
  color: var(--secondary-700);
  line-height: 1.4;
  margin-top: .15rem;
}

/* --- divider & logo --- */
.footer-divider{ border-color: rgba(0,0,0,0.4); }
.footer-logo{ height: 46px; width: auto; }

/* --- bottom row links --- */
.footer-bottom a{
  color: var(--secondary-700);
  text-decoration: none;
  transition: color .25s ease;
}
.footer-bottom a:hover{ color: var(--primary-700); }

/* --- social icons: smooth scale only --- */
.footer-social .social-link{
  color: var(--primary-700);
  font-size: 1.1rem;
  transition: transform .3s ease, color .3s ease;
  background-image: none; 
}
.footer-social .social-link:hover,
.footer-social .social-link:focus-visible{
  color: var(--secondary-700);
  transform: scale(1.15);
}

.site-footer a{
  color: var(--primary-800);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 95%; 
  background-repeat: no-repeat;
  transition: background-size .25s ease, color .25s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color: var(--primary-700);
  background-size: 100% 1px;
  outline: none;
}

.site-footer .footer-list a.active{
  color: var(--secondary-700);
  font-weight: 600;
}

.site-footer .footer-contact a{
  display: inline;
  width: auto;
  max-width: max-content;
  padding-bottom: 2px;
  background-position: 0 100%;
}

.site-footer a:visited{ color: var(--primary-800); }

@media (max-width: 575.98px){
  .footer-logo{ height: 36px; }
}


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

.hero-wave{
  position:relative;
  background:var(--primary-700);
  color:#fff;
  min-height: clamp(320px, 40vh, 440px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:4rem;
  overflow:hidden;
  isolation:isolate;
}

.hero-wave-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-wave-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(0.9) saturate(0);
}


.hero-wave-overlay{
  position:absolute;
  inset:0;
  background:var(--primary-600);
  mix-blend-mode:multiply;
  opacity:.9;
}

/* content */
.hero-wave-inner{
  position:relative;
  z-index:1;
  max-width:60rem;
  color:#fff;
}

.hero-wave-title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
  color:#fff;
  font-size:clamp(2rem,2vw,3rem);
  margin:0 0 1rem 0;
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}

.hero-wave-sub{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:500;
  font-size:clamp(1rem,0.4vw,1.25rem);
  color:#fff;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  line-height:1.4;
  opacity:.95;
}


.hero-wave-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  line-height:0;
  z-index:1;
}

.hero-wave-bottom svg{
  display:block;
  width:100%;
  height:auto;
  min-height:80px;
  max-height:100px;
  fill:#f1f3f1;
}

.hero-wave-bottom path{
  /* custom shape */
  fill:#f1f3f1;
}

/* RESPONSIVE DOLADENIA */
@media (min-width:768px){
  .hero-wave{
    min-height: clamp(360px, 45vh, 520px);
    padding-bottom:5rem;
  }
  .hero-wave-title{
    font-size:clamp(2.5rem,1.2vw,3.25rem);
  }
  .hero-wave-sub{
    font-size:1.25rem;
  }
}

@media (max-width:575.98px){
  .hero-wave{
    padding-top:calc(var(--header-h) + 1.5rem);
    padding-bottom:3rem;
  }
  .hero-wave-bottom svg{
    min-height:70px;
  }
}

/* =========================================
   OBSAH PODSTRÁNKY / TYPOGRAFIA OBSAHU
   ========================================= */

.content-article{
  color: var(--primary-900);
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  font-size: 1rem;
  background: var(--primary-50);
  padding: clamp(1.25rem,2vw,2rem) clamp(1.25rem,2vw,2rem);
}

.content-article p{
  color: var(--primary-800);
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: 1.05rem;
}

@media (min-width:768px){
  .content-article p{
    font-size: 1.1rem;
    line-height: 1.7;
  }
}


/* =========================================
   NADPISY VNÚTRI ČLÁNKU (H1 – H4)
   ========================================= */

.content-article h1,
.content-article h2,
.content-article h3,
.content-article h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--primary-700);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* H1 – hlavný názov článku */
.content-article h1 {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--primary-800);
  margin-top: 0;               /* ak je prvý element na stránke */
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .content-article h1 {
    font-size: 2.5rem;
  }
}

/* H2 – veľké sekčné nadpisy */
.content-article h2 {
  font-size: 1.75rem;
  color: var(--primary-750);
}

@media (min-width: 768px) {
  .content-article h2 {
    font-size: 2rem;
  }
}

/* H3 – podnadpisy (už máš, len jemne vyladené) */
.content-article h3 {
  font-size: 1.35rem;
  color: var(--primary-700);
}

@media (min-width: 768px) {
  .content-article h3 {
    font-size: 1.5rem;
  }
}

/* H4 – menšie sekcie / podsekcie */
.content-article h4 {
  font-size: 1.15rem;
  color: var(--primary-700);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .content-article h4 {
    font-size: 1.25rem;
  }
}

/* nenalepovať prvý nadpis hneď za tlačidlo alebo iný blok */
.content-article h1:first-of-type,
.content-article h2:first-of-type,
.content-article h3:first-of-type,
.content-article h4:first-of-type {
  margin-top: 2.5rem;
}


/* =========================================
   LISTY (UL / OL) – ZÁKLADNÁ TYPOGRAFIA
   ========================================= */

.content-ul,
.content-ol{
  margin:0 0 1.5rem 0;
  padding-left:1.25rem;
  color: var(--primary-800);
  font-size:1.05rem;
  line-height:1.55;
}

@media (min-width:768px){
  .content-ul,
  .content-ol{
    font-size:1.1rem;
    line-height:1.6;
  }
}

.content-ul li,
.content-ol li{
  margin-bottom:.5rem;
}

/* UL – vlastné guličky */
.content-ul{
  list-style:none;
  padding-left:0;
}

.content-ul li{
  position:relative;
  padding-left:1.5rem;
  color: var(--primary-900);
  font-weight:500;
}

.content-ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  background:var(--secondary-700);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}


/* =========================================
   MODERNÝ ČÍSLOVANÝ ZOZNAM (bez čiary)
   ========================================= */

ol {
  counter-reset: step;
  list-style: none;
  margin: 3rem 0;
  padding: 0;
}

ol > li {
  counter-increment: step;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;

  color: var(--primary-800);
  font-size: 1.05rem;
  line-height: 1.6;
  transition: color .25s ease;
}

/* kruh s číslom */
ol > li::before {
  content: counter(step);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid var(--primary-300);
  background: var(--primary-50);
  color: var(--primary-700);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all .25s ease;
}

/* jemný hover efekt */
@media (hover:hover) {
  ol > li:hover {
    color: var(--primary-900);
  }
  ol > li:hover::before {
    background: var(--primary-200);
    border-color: var(--primary-400);
    color: var(--primary-900);
    transform: scale(1.05);
  }
}

/* posledný prvok bez spodného odsadenia */
ol > li:last-child {
  margin-bottom: 0;
}

/* väčšia typografia na väčších obrazovkách */
@media (min-width:768px) {
  ol > li {
    font-size: 1.1rem;
    line-height: 1.75;
    gap: 1.25rem;
  }
  ol > li::before {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
  }
}

/* =========================================
   TEXTOVÝ ODKAZ V OBSAHU
   ========================================= */

.content-link{
  color: var(--secondary-700);
  text-decoration:none;
  position:relative;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:color .25s ease, background-size .25s ease;
  font-weight:600;
}

.content-link:hover,
.content-link:focus-visible{
  color: var(--primary-700);
  background-size:100% 1px;
  outline:none;
}

/* =========================================
   OBRÁZOK V OBSAHU
   ========================================= */

.content-img-figure{
  margin:0;
  text-align:center;
}

.content-img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:20px;
  background: var(--background-100);
  border:1px solid var(--primary-200);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

@media (max-width:575.98px){
  .content-img{
    border-radius:16px;
  }
}

.content-img-cap{
  font-size:.8rem;
  line-height:1.4;
  color:var(--primary-700);
  font-weight:500;
  margin-top:.75rem;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* =========================================
   RELATÍVNE ČLÁNKY ("Súvisiace články")
   ========================================= */

.related-articles{
  background: var(--background);
  padding-block: clamp(3rem,6vw,3rem);
  border-top: 1px solid var(--primary-200);
  color: var(--primary-900);
}

.related-head{
  text-align:center;
  line-height:1.2;
}

.related-icon{
  font-size:1.5rem;
  color: var(--secondary-700);
  background: var(--secondary-100);
  width:3rem;
  height:3rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.related-title{
  font-family:'Fraunces', Georgia, serif;
  color:var(--primary-800);
  font-weight:600;
  letter-spacing:-0.01em;
  margin-top:.75rem;
  font-size:1.1rem;
}

.related-sub{
  color:var(--primary-700);
  opacity:.75;
  font-size:.95rem;
  margin-top:.25rem;
}

@media (min-width:768px){
  .related-title{
    font-size:1.25rem;
  }
}

/* grid layout článkov */
.related-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:2.5rem;
}

/* karta článku */
.related-card{
  display:block;
  text-decoration:none;
  background: var(--primary-50);
  border:1px solid var(--primary-200);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:all .3s ease;
  color: var(--primary-900);
  overflow:hidden;
}

.related-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  border-color:var(--secondary-200);
  background: var(--primary-100);
}

.related-card-body{
  padding:1.75rem 1.5rem;
}

.related-card h3{
  font-family:'Fraunces', Georgia, serif;
  font-size:1.15rem;
  line-height:1.4;
  margin:0 0 .75rem 0;
  color:var(--primary-800);
  transition:color .3s ease;
}

.related-card:hover h3{
  color:var(--secondary-700);
}

.related-more{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--secondary-700);
  font-weight:600;
  font-size:.9rem;
  opacity:.9;
  transition:transform .3s ease, opacity .3s ease;
}

.related-card:hover .related-more{
  transform:translateX(3px);
  opacity:1;
}

.related-more i{
  font-size:.9rem;
}

@media (max-width:575.98px){
  .related-card-body{
    padding:1.5rem 1.25rem;
  }
  .related-card h3{
    font-size:1.05rem;
  }
}

/* =========================================
   PAGE BACKGROUND / SEKCIA ZA VLNOU
   ========================================= */

.page-content{
  background: var(--background);
  position:relative;
  z-index:2;
}

/* =========================================
   GLOBÁLNA TABUĽKA (centrálna + responsívny scroll)
   ========================================= */

/* desktop / väčšie viewports:
   - tabuľka sa správa ako klasická tabuľka
   - šírka podľa obsahu, ale najviac 100%
   - vycentrovaná v rámci rodiča
   - minimalistický cenníkový štýl
*/
table{
  border-collapse:collapse;
  white-space:nowrap;
  width:max-content;        /* podľa obsahu */
  max-width:100%;           /* ale nepreteč cez kontajner */
  margin-left:auto;         /* centrovanie vodorovne */
  margin-right:auto;        /* centrovanie vodorovne */
  margin-top:2rem;
  margin-bottom:2.5rem;

  font-size:1rem;
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--primary-900);

  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

/* riadky */
table tr{
  background:transparent;
  border-bottom:1px solid var(--primary-200);
}
table tr:last-child{
  border-bottom:0;
}

/* bunky */
table th,
table td{
  text-align:left;
  vertical-align:top;
  padding:.9rem 1rem;
  line-height:1.5;
  color:var(--primary-900);
  font-weight:500;
  border:0;
  background:transparent;
  white-space:nowrap;
  font-size:.95rem;
}

/* hlavička = prvý riadok tabuľky */
table tr:first-child th,
table tr:first-child td{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:1rem;
  color:var(--primary-800);
  border-bottom:2px solid var(--primary-300);
  padding-top:0;
}

/* hover efekt na riadok (okrem hlavičky) */
@media (hover:hover){
  table tr:not(:first-child):hover td{
    background:var(--primary-50);
    transition:background .25s ease;
  }
}

/* responsívny režim:
   - tabuľka sa stane horizontálne scrollovateľným blokom
   - dostane vnútorný gutter, aby nebola nalepená na ľavom okraji
*/
@media (max-width:768px){
  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;

    margin-left:auto;
    margin-right:auto;

    padding-left:1rem;   /* optický "gutter" */
    padding-right:1rem;
  }

  table th,
  table td{
    padding:.75rem .75rem;
    font-size:.9rem;
  }

  table tr:first-child th,
  table tr:first-child td{
    font-size:.95rem;
  }

  /* scrollbar styling pre WebKit */
  table::-webkit-scrollbar{
    height:6px;
  }
  table::-webkit-scrollbar-track{
    background:var(--primary-100);
    border-radius:999px;
  }
  table::-webkit-scrollbar-thumb{
    background:var(--primary-300);
    border-radius:999px;
  }
  table::-webkit-scrollbar-thumb:hover{
    background:var(--primary-400);
  }

  /* scrollbar pre Firefox */
  table{
    scrollbar-width:thin;
    scrollbar-color:var(--primary-300) var(--primary-100);
  }
}

/* =========================================
   BLOCKQUOTE (citácia / zvýraznené tvrdenie)
   ========================================= */

blockquote{
  position: relative;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.25rem 3.5rem;
  margin: 2rem 0;
  color: var(--primary-800);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: -0.015em;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
}

/* dekoratívna ľavá "čiarka" + úvodzovky v bubline */
blockquote::before{
  content: "“";
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 12px;
  background: var(--secondary-700);
  color: #fff;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2rem;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

@media (min-width:768px){
  blockquote{
    font-size: 1.2rem;
    line-height: 1.55;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
  }
  blockquote::before{
    left: 1.25rem;
    top: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: 1.25rem;
    border-radius: 14px;
  }
}

/* ak chceš malé vysvetlenie autora / zdroja pod citáciou:
   stačí v HTML dať <cite>…</cite> dovnútra blockquote */
blockquote cite{
  display: block;
  margin-top: .75rem;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--primary-700);
  opacity: .8;
}

pre{
  display: block;
  background: var(--background);
  border: 1px solid var(--primary-200);
  border-radius: 12px;
  padding: 1rem 1rem 1rem 1rem;
  margin: 1.5rem 0 2rem 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--primary-900);
  font-weight: 500;
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

/* jemné zúženie písma na menších displejoch, aby to nevybuchlo do horizontálu príliš skoro */
@media (max-width:768px){
  pre{
    font-size: .85rem;
    line-height: 1.5;
    padding: .9rem .9rem;
    border-radius: 10px;
  }
}

/* scrollbar pre dlhé riadky kódu */
pre::-webkit-scrollbar{
  height: 6px;
}
pre::-webkit-scrollbar-track{
  background: var(--primary-100);
  border-radius: 999px;
}
pre::-webkit-scrollbar-thumb{
  background: var(--primary-300);
  border-radius: 999px;
}
pre::-webkit-scrollbar-thumb:hover{
  background: var(--primary-400);
}

/* firefox */
pre{
  scrollbar-width: thin;
  scrollbar-color: var(--primary-300) var(--primary-100);
}

/* =========================================
   GALÉRIA / GRID + LIGHTBOX (GLightbox)
   ========================================= */

/* hlavička sekcie */
.gallery-section{
  background: var(--primary-50);
  border-top:1px solid var(--primary-200);
}

.gallery-head{
  text-align:center;
  line-height:1.3;
}

.gallery-icon{
  font-size:1.25rem;
  color: var(--primary-700);
  background: var(--primary-100);
  width:3rem;
  height:3rem;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.07);
}

.gallery-title{
  font-family:'Fraunces', Georgia, serif;
  color:var(--primary-800);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:-0.02em;
  margin-top:.75rem;
}

.gallery-sub{
  color:var(--primary-700);
  opacity:.8;
  font-size:.95rem;
  margin-top:.25rem;
}

/* GRID WRAP */
.photos-grid-container{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto;
  grid-gap:1rem;
}

/* desktop rozloženie: veľká fotka vľavo, 2x2 fotky vpravo */
@media(min-width:768px){
  .photos-grid-container{
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:1rem;
  }
}

/* veľký obrázok */
.main-photo{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid var(--primary-200);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  aspect-ratio:4/3;
}

/* malá mriežka vpravo */
.sub{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:1rem;
}

@media(max-width:767.98px){
  .sub{
    order:2;
  }
}

/* jednotlivé boxy */
.img-box{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid var(--primary-200);
  box-shadow:0 12px 30px rgba(0,0,0,.07);
  aspect-ratio:1/1;
}

.img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

@media (hover:hover){
  .img-box:hover img{
    transform:scale(1.04);
  }
}

/* overlay na poslednej tile s +3 */
.transparent-box{
  position:absolute;
  inset:0;
  background-color:rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .3s ease;
}

.caption{
  color:#fff;
  font-size:1.25rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.03em;
  text-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* hover efekt len na tom poslednom boxe s overlayom */
.gallery-more-trigger .transparent-box{
  background-color:rgba(0,0,0,0.45);
}
@media (hover:hover){
  .gallery-more-trigger:hover .transparent-box{
    background-color:rgba(0,0,0,0.6);
  }
  .gallery-more-trigger:hover .caption{
    transform:translateY(-3px);
  }
}

.extra-images-container{
  /* stále existuje kvôli lightboxu */
}

/* prístupné skrytie elementov (ale stále v DOMe kvôli GLightbox) */
.hide-element{
  border:0;
  clip:rect(1px,1px,1px,1px);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
}

.content-article a {
  color: var(--secondary-700);
  text-decoration: none;
  position: relative;
  background-image: linear-gradient(currentColor,currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .25s ease, background-size .25s ease;
  font-weight: 600;
}

.content-article a:hover,
.content-article a:focus-visible {
  color: var(--primary-700);
  background-size: 100% 1px;
  outline: none;
}

/* fallback pre prípad, že CMS zhodí class="content-img" */
.content-article img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius:20px;
  background: var(--background-100);
  border:1px solid var(--primary-200);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  margin: 1.5rem auto;
}

/* odstrániť horný margin pre prvý element vo vnútri článku */
.content-article > *:first-child {
  margin-top: 0 !important;
}

/* mobile: vypni hover efekt kariet services */
@media (max-width: 575.98px){
  .svc-card:hover{
    transform:none;
  }  
}

/* slider cards: zabráň výberu textu počas swipe */
.svc-card {
  user-select: none;          /* desktop */
  -webkit-user-select: none;  /* Safari/iOS */
  -ms-user-select: none;      /* starší Edge/IE */
  -moz-user-select: none;     /* Firefox */
  touch-action: pan-y;        /* povol vertikálny scroll, blokuj horizontálne default gesto */
  -webkit-touch-callout: none; /* iOS: disable text callout menu */
}

/* hero-info: centrovanie na tablet/mobil, ale obsah boxov left */
@media (max-width: 991.98px){
  .hero-info {
    text-align: center;
    justify-content: center;
  }

  .hero-info .col-12 {
    justify-content: flex-start;  /* ikona + text ostanú pri sebe vľavo */
    text-align: left;
    max-width: 320px;             /* aby neboli príliš dlhé riadky, vyzerá lepšie pod sebou */
  }
}

/* vypnúť hover efekt kariet služieb na mobile a tablete */
@media (max-width: 991.98px){
  .svc-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}