/* =========================================================
   PETRA STYLING — style.css
   Design systém webu: proměnné, komponenty, layout, responzivita
   ========================================================= */

/* ---------- Design tokeny ---------- */
:root{
  /* barvy */
  --navy: #0b2d5c;
  --navy-hover: #143d70;
  --ink: #26334a;
  --lavender: #a68bbc;
  --lavender-light: #e9e2ef;
  --pearl: #f2f3f4;
  --ivory: #fbfaf8;
  --blue-accent: #7896b8;
  --sage-accent: #93a28d;
  --wine-accent: #a36070;

  /* odvozené */
  --text: var(--ink);
  --muted: #5b6478;
  --border: rgba(11, 45, 92, .10);
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .55);

  /* spacing škála */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* layout */
  --container-max: 1560px;
  /* plynule roste s šířkou okna, takže boční odsazení nikdy nespadne pod 20px
     (dřívější pevné kroky nechávaly úzká okna pod první hranicí jen na 16px) */
  --side-pad: clamp(20px, 3vw, 44px);
  --radius-panel: 36px;
  --radius-card: 24px;
  --radius-pill: 999px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* základní velikost písma 18px místo výchozích 16px – vše v rem se zvětší o 12,5 %
   (v procentech, aby zůstalo respektované nastavení velikosti písma v prohlížeči);
   h1 a h2 mají hodnoty přepočtené zpět, aby zůstaly ve stejné velikosti jako dřív */
html { scroll-behavior: smooth; font-size: 112.5%; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html{ background: var(--pearl); }
body{
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
main{ display: block; overflow-x: clip; }

:focus-visible{ outline: 2.5px solid var(--blue-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typografie ---------- */
h1, h2, h3{ font-family: 'Instrument Serif', serif; font-weight: 400; color: var(--navy); line-height: 1.12; margin: 0; }
h1{ font-size: clamp(2.667rem, 1.956rem + 3vw, 3.911rem); }
h2{ font-size: clamp(1.689rem, 1.333rem + 1.6vw, 2.311rem); }
h3{ font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); }
em.serif-italic{ font-style: italic; }
p{ margin: 0; }
a{ color: var(--navy); text-decoration: none; }
a:hover{ color: var(--navy-hover); }
.contact-lines a, .quote-card a, footer p a{ text-decoration: underline; text-underline-offset: 2px; }

.eyebrow{ font-family: 'DM Sans', sans-serif; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--sp-3); }
.signature{ font-family: 'Allura', cursive; font-size: 2.6rem; color: var(--lavender); line-height: 1; }

/* ---------- Ikony (inline SVG sprite, currentColor) ---------- */
.icon{ width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -0.2em; color: currentColor; }
.btn .icon{ width: 17px; height: 17px; color: var(--lavender-light); }
.package summary .icon{ width: 14px; height: 14px; color: var(--lavender); transition: transform .2s ease; }
.package details[open] summary .icon{ transform: rotate(90deg); }
.nav-toggle .icon{ width: 22px; height: 22px; color: var(--navy); }
.package-meta .icon{ color: var(--pkg-accent, var(--navy)); }

/* ---------- Layout ---------- */
.container{ max-width: var(--container-max); margin: 0 auto; padding-left: var(--side-pad); padding-right: var(--side-pad); }
.section{ padding: var(--sp-8) 0 var(--sp-5); }
#sluzby{ padding-top: var(--sp-5); }
#uvod{ padding-top: var(--sp-5); }
.section-head{ display:flex; align-items:center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section-head img{ height: 22px; width: auto; opacity: .9; }

/* ---------- Skleněné panely / karty ---------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 60px rgba(11, 45, 92, .10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
/* fallback pro prohlížeče bez podpory backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{ background: rgba(255,255,255,.92); }
}
.glass-panel{ border-radius: var(--radius-panel); }
.glass-card{ border-radius: var(--radius-card); }

/* výraznější, "sklenější" varianta – silnější rozostření, průhlednější podklad, jemný lesk nahoře */
.glass-strong{
  position: relative;
  background: rgba(255, 255, 255, .38);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 24px 70px rgba(11, 45, 92, .14), inset 0 1px 0 rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
  overflow: hidden;
}
.glass-strong::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 45%);
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass-strong{ background: rgba(255,255,255,.92); }
}

.lav-tint{ background-image: radial-gradient(120% 140% at 0% 0%, rgba(166,139,188,.30), transparent 65%); }

/* ---------- Tlačítka ---------- */
.btn{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--navy); color: #fff;
  padding: 15px 30px; border-radius: var(--radius-pill);
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  border: none; cursor: pointer; white-space: nowrap; min-height: 44px;
  transition: background .2s ease, transform .15s ease;
}
.btn img{ height: 17px; width: 17px; }
.btn:hover{ background: var(--navy-hover); color: #fff; }
.btn:active{ transform: translateY(1px); }
.btn-ghost{ background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-ghost:hover{ background: var(--navy); color: #fff; }
.btn-sm{ padding: 11px 22px; font-size: .85rem; }
.btn-block{ width: 100%; justify-content: center; }

/* ---------- Header / navigace ---------- */
.site-header{ position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background .2s ease, border-color .2s ease; }
.site-header.is-scrolled{ background: rgba(251,250,248,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--border); }
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 16px var(--side-pad); }
.logo{ display: flex; align-items: center; gap: var(--sp-2); }
.logo img{ height: 52px; width: auto; }
.logo-word{ font-family: 'Allura', cursive; font-size: 1.5rem; color: var(--navy); }
.logo-word .caps{ font-family: 'DM Sans', sans-serif; font-weight: 600; letter-spacing: .1em; font-size: .68rem; color: var(--ink); vertical-align: 2px; margin-left: 2px; }

.nav-main{ display: none; align-items: center; gap: var(--sp-6); font-size: .95rem; font-weight: 500; list-style: none; margin: 0; padding: 0; }
.nav-main a{ padding: var(--sp-2) 0; border-bottom: 2px solid transparent; }
.nav-main a.is-active, .nav-main a:hover{ border-bottom-color: var(--lavender); color: var(--navy); }
.header-cta{ display: none; }

.nav-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border);
  background: transparent; cursor: pointer;
}

.mobile-menu{
  position: fixed; inset: 0; z-index: 50;
  background: var(--ivory);
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-6) var(--side-pad);
  transform: translateX(100%);
  transition: transform .25s ease;
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--sp-5); font-size:1.4rem; font-family:'Instrument Serif', serif; }
.mobile-menu a{ min-height: 44px; display:flex; align-items:center; }

/* ---------- Hero ---------- */
.hero-container{ position: relative; }
.hero-panel{ position: relative; z-index: 1; overflow: hidden; padding: var(--sp-7) var(--sp-5); }
.hero-grid{ display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--sp-5) var(--sp-7); }
.hero-text{ position: relative; z-index: 2; order: 1; }
.hero-media{ order: 2; position: relative; z-index: 1; }
.hero-media img{ width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.hero-lead{ max-width: 42ch; color: var(--muted); font-size: 1.08rem; margin: var(--sp-5) 0 var(--sp-6); }
.hero-actions{ display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero-locations{ margin-top: var(--sp-4); font-size: .85rem; color: var(--muted); }
.hero-text h1{ margin-top: var(--sp-4); }

/* VARIANTA C — čistě typografická */
.quote-typo{
  padding: var(--sp-7) 0;
  text-align: left;
}
/* varianta uvnitř sekce O mně – naváže rovnou na podpis */
.quote-typo--about{
  padding: var(--sp-6) 0 0;
}
.quote-typo-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.quote-typo-text{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2.15rem);
  color: var(--navy);
  line-height: 1.25;
  margin: 0;
}
.quote-typo-attribution{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.quote-typo-rule{
  flex: 0 0 auto;
  width: 40px;
  height: 2px;
  background: var(--lavender);
  margin: 0;
}
.quote-typo-author{
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lavender);
  font-weight: 600;
  margin: 0;
}
/* Varianta uvnitř sekce O mně – užší sloupec, takže menší písmo a těsnější odsazení */
/* Levandule je fixní vůči obrazovce (nescrolluje) a leží úplně vzadu (z-index -1) —
   skleněný panel i další skleněné karty nad ní se při rolování stránky posouvají
   normálně, takže "projíždí" přes pevné pozadí a levandule pod nimi prosvítá/mihotá
   (ostře v mezerách stránky, rozmazaně přes matné sklo). Pozadí stránky je proto na
   <html>, ne na <body> — jinak by neprůhledné pozadí body levanduli zakrylo. */
.hero-watermark{ position: fixed; left: 4%; bottom: -36px; width: 200px; opacity: .85; z-index: -1; pointer-events: none; }

/* ---------- Konzultace zdarma ---------- */
.consult-strip{ display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.consult-strip img.avatar{ width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-icon{
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lavender-light);
}
.avatar-icon .icon{ width: 34px; height: 34px; color: var(--lavender); }
.consult-info{ flex: 1 1 220px; }
.consult-price{ display:flex; align-items:center; gap: var(--sp-5); }
.consult-price .divider{ width: 1px; height: 32px; background: var(--border); }
.consult-price .free{ font-family:'Instrument Serif', serif; font-size: 1.2rem; color: var(--sage-accent); letter-spacing: .04em; }

/* ---------- Balíčky ---------- */
.packages-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: stretch; }
.package{ position: relative; overflow: hidden; display: flex; flex-direction: column; border-top: 3px solid var(--pkg-accent, var(--lavender)); height: 100%; }
.package-photo{ position: relative; z-index: 1; aspect-ratio: 3/2; overflow: hidden; }
.package-photo img{ width: 100%; height: 100%; object-fit: cover; }
.package-body{ position: relative; z-index: 1; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.package-body > .btn{ margin-top: auto; }
.package-watermark{ position: absolute; right: 0px; bottom: -50px; width: 280px; opacity: .16; pointer-events: none; z-index: 0; }
.package-watermark--left{ right: auto; left: 0px; transform: scaleX(-1); }
.package-name{ font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); color: var(--navy); line-height: 1.12; margin: 0; }
.package-subtitle{ font-family: 'DM Sans', sans-serif; font-weight: 400; color: var(--muted); font-size: .85rem; line-height: 1.5; margin-top: -6px; }
.package-desc{ font-size: .95rem; color: var(--ink); }
.package-meta{ display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4) 0; margin: var(--sp-2) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.package-meta li{ list-style:none; display: flex; align-items: center; gap: var(--sp-2); font-size: .82rem; color: var(--muted); }
.package-meta strong{ color: var(--navy); font-weight: 600; }

.package details{ margin-top: var(--sp-2); }
.package summary{
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: .9rem; color: var(--navy); min-height: 44px; padding: var(--sp-2) 0;
}
.package summary::-webkit-details-marker{ display:none; }
.package .steps{ margin: var(--sp-3) 0 0; padding-left: 1.2em; font-size: .88rem; color: var(--muted); display:flex; flex-direction:column; gap: var(--sp-2); }

.package--zakladni{ --pkg-accent: var(--sage-accent); }
.package--modry{ --pkg-accent: var(--blue-accent); }
.package--cerveny{ --pkg-accent: var(--wine-accent); }
.package--fialovy{ --pkg-accent: var(--lavender); }

/* ---------- Dárkový poukaz ---------- */
.gift-tile{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding: var(--sp-6); margin-top: var(--sp-5); }
.gift-photo{ flex: 0 0 auto; width: 160px; height: 130px; overflow: hidden; border-radius: 16px; }
.gift-photo img{ width: 100%; height: 100%; object-fit: cover; }
.gift-info{ flex: 1 1 220px; min-width: 0; }
.gift-value{ font-family:'Instrument Serif', serif; font-style: italic; color: var(--lavender); font-size: 1.1rem; margin-top: var(--sp-2); }

/* ---------- O mně ---------- */
.about-panel{ position: relative; overflow: hidden; padding: var(--sp-7) var(--sp-5); }
/* position+z-index, aby levandulový vodoznak (.about-watermark) ležel pod obsahem
   – jinak překrýval spodek textového sloupce včetně citátu a zesvětloval ho */
.about-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; position: relative; z-index: 1; }
.about-media img{ width: 100%; border-radius: var(--radius-card); object-fit: cover; aspect-ratio: 4/5; }
.about-content h2{ margin-bottom: var(--sp-5); }
.about-content p + p{ margin-top: var(--sp-4); }
.about-content p{ color: var(--muted); }
.about-content strong{ color: var(--navy); font-weight: 600; }
.about-watermark{ position: absolute; right: -20px; bottom: -20px; width: 170px; opacity: .16; pointer-events: none; }

/* ---------- Jak spolupráce probíhá ---------- */
.steps-panel{ padding: var(--sp-6) var(--sp-5); }
.steps-layout{ display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
/* position+z-index kvůli bílému lesku .glass-strong::before, který by jinak nadpis překryl
   a vybledl (stejně jako u .step níže) */
.steps-heading{ font-size: 1.4rem; margin: 0; position: relative; z-index: 1; }
.steps-row{ display: grid; grid-template-columns: 1fr; gap: var(--sp-6); position: relative; }
.step{ text-align: left; position: relative; z-index: 1; }
.step .num{ font-family:'Instrument Serif', serif; font-size: 2.2rem; line-height: 1; color: var(--lavender); display:block; margin-bottom: var(--sp-2); }
.step p{ color: var(--muted); font-size: .92rem; margin-top: var(--sp-2); }
/* hotová spojovací linka s levandulí (obrázek) mezi čísly – jen na šířku ≥900px, kde jsou kroky ve 3 sloupcích */
.steps-curve{ display: none; }

/* ---------- Reference ---------- */
.ref-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
.ref-stars{ color: var(--lavender); letter-spacing: .18em; font-size: .95rem; margin: 0 0 var(--sp-3); }
.ref-source{ display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lavender); margin-top: var(--sp-1); }
.ref-track{ display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; }
.ref-pair{ flex: 0 0 auto; width: 260px; scroll-snap-align: start; }
.ref-photos{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ref-photos figure{ margin: 0; position: relative; }
.ref-photos img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; }
.ref-tag{ position: absolute; top: var(--sp-2); left: var(--sp-2); background: rgba(11,45,92,.82); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--radius-pill); }
.ref-pair figcaption{ margin-top: var(--sp-2); font-size: .8rem; color: var(--muted); text-align: center; }
.ref-nav-hint{ font-size: .78rem; color: var(--muted); margin-top: var(--sp-2); }

.quote-card{ padding: var(--sp-6); border-left: 3px solid var(--lavender); margin-top: var(--sp-5); }
.quote-card p.quote{ font-family: 'DM Sans', sans-serif; font-size: .95rem; line-height: 1.7; color: var(--muted); margin: 0; }
/* zvýrazněné pasaže stejně jako v sekci O mně – tučně a sytě modře */
.quote-card p.quote strong{ font-weight: 600; color: var(--navy); }
.quote-card .author{ color: var(--muted); font-size: .9rem; font-weight: 600; margin-top: var(--sp-4); }
.quote-card p.author{ font-weight: 400; font-size: .85rem; margin-top: var(--sp-2); }
.quote-placeholder{ border-style: dashed; border-width: 1.5px; border-color: var(--border); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Galerie ---------- */
.gallery-filter{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.filter-btn{
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .01em;
  color: var(--navy); background: transparent; border: 1.5px solid var(--border);
  padding: 9px 20px; border-radius: var(--radius-pill); cursor: pointer; min-height: 40px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.filter-btn:hover{ border-color: var(--lavender); }
.filter-btn.is-active{ background: var(--navy); border-color: var(--navy); color: #fff; }

.gallery-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); }
.gallery-item{
  position: relative; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 18px; overflow: hidden; line-height: 0;
}
.gallery-item img{ width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .3s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img{ transform: scale(1.05); }
.gallery-item.is-hidden{ display: none; }
.gallery-tag{
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(11,20,35,.72); padding: 5px 12px; border-radius: var(--radius-pill);
}

.gallery-divider{ display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-7) 0 var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.gallery-divider h3{ font-family: 'Instrument Serif', serif; font-size: 1.4rem; }
.gallery-divider p{ color: var(--muted); font-size: .88rem; }

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed; inset: 0; z-index: 90; background: rgba(11,20,35,.92);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
}
.lightbox[hidden]{ display: none; }
.lightbox-figure{ margin: 0; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.lightbox-img{ max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 14px; object-fit: contain; }
.lightbox-caption{ color: #fff; font-size: .85rem; text-align: center; opacity: .85; }
.lightbox-btn{
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; transition: background .2s ease;
}
.lightbox-btn:hover, .lightbox-btn:focus-visible{ background: rgba(255,255,255,.24); }
.lightbox-btn .icon{ width: 20px; height: 20px; }
.lightbox-close{ top: var(--sp-4); right: var(--sp-4); }
.lightbox-prev{ left: var(--sp-4); top: 50%; transform: translateY(-50%) rotate(90deg); }
.lightbox-next{ right: var(--sp-4); top: 50%; transform: translateY(-50%) rotate(-90deg); }

/* ---------- Kontakt ---------- */
.contact-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.contact-side{ display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-card{ padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.contact-card-deco{ position: absolute; left: 60%; bottom: -60px; width: 280px; opacity: .16; pointer-events: none; transform: translateX(-50%) scaleX(-1); }
.contact-lines{ font-size: .95rem; color: var(--muted); line-height: 2; }
.contact-lines a{ color: var(--navy); font-weight: 500; }
.social-row{ display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
.social-row a{ width: 44px; height: 44px; border-radius: 50%; background: var(--pearl); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: color .2s ease, border-color .2s ease; }
.social-row a:hover, .social-row a:focus-visible{ color: var(--lavender); border-color: var(--lavender); }
.social-row .icon{ width: 20px; height: 20px; }
.todo-note{ font-size: .74rem; color: var(--wine-accent); margin-top: var(--sp-2); }

.contact-form{ padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.field{ display: flex; flex-direction: column; gap: var(--sp-2); }
.field label{ font-size: .85rem; font-weight: 500; color: var(--ink); }
.field .opt{ color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea{
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: .95rem; width: 100%; background: #fff; min-height: 44px;
}
.field textarea{ resize: vertical; min-height: 120px; }
.consent{ display: flex; align-items: flex-start; gap: var(--sp-3); font-size: .84rem; color: var(--muted); }
.consent input{ margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status{ font-size: .88rem; min-height: 1.2em; }
.form-status[data-state="ok"]{ color: var(--sage-accent); }
.form-status[data-state="error"]{ color: var(--wine-accent); }
.form-error{ font-size: .78rem; color: var(--wine-accent); min-height: 1em; }

/* ---------- Footer ---------- */
.site-footer{
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}
.footer-card{ padding: var(--sp-6) var(--sp-5) var(--sp-3); }
.footer-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
.footer-brand .logo-word{ font-size: 1.5rem; }
.footer-grid p{ font-size: .88rem; color: var(--muted); }
.footer-heading{ font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); }
.footer-links{ display: flex; flex-direction: column; gap: var(--sp-3); font-size: .92rem; list-style:none; padding:0; margin:0; }
.footer-links a{ color: var(--ink); }
.footer-bottom{ margin-top: var(--sp-6); border-top: 1px solid var(--border); display:flex; flex-wrap:wrap; gap: var(--sp-3); justify-content: space-between; padding-top: var(--sp-4); }
.footer-bottom p{ font-size: .78rem; color: var(--muted); }
/* Navigace v patičce schovaná na mobilu — uživatelé používají horní menu */
.footer-nav{ display: none; }

/* ---------- Citát banner ---------- */
.quote-banner{
  position: relative;
  overflow: hidden;
  padding: var(--sp-8) var(--side-pad);
  text-align: center;
  /* lav. gradient přes celý šířku bez containeru */
  background: linear-gradient(135deg,
    rgba(166,139,188,.22) 0%,
    rgba(233,226,239,.38) 40%,
    rgba(166,139,188,.18) 100%);
}
.quote-banner::before{
  /* dekorativní fialová elipsa vlevo */
  content: "";
  position: absolute; left: -80px; top: -60px;
  width: 340px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166,139,188,.35), transparent 70%);
  pointer-events: none;
}
.quote-banner::after{
  /* dekorativní fialová elipsa vpravo */
  content: "";
  position: absolute; right: -80px; bottom: -60px;
  width: 300px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166,139,188,.30), transparent 70%);
  pointer-events: none;
}
.quote-banner-watermark{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 180%; width: auto; opacity: .12; pointer-events: none;
}
.quote-banner-inner{
  position: relative; z-index: 1;
  max-width: 640px; margin: 0 auto;
}
.quote-banner-inner .quote{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--navy);
  line-height: 1.35;
}
.quote-banner-inner .quote::before{ content: "„"; color: var(--lavender); }
.quote-banner-inner .quote::after{  content: "“"; color: var(--lavender); }
.quote-banner-inner .author{
  margin-top: var(--sp-4);
  font-size: .88rem;
  letter-spacing: .08em;
  color: var(--lavender);
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------- Cookie lišta ---------- */
.cookie-bar{
  position: fixed; bottom: var(--sp-4); left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 900px;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  box-shadow: 0 16px 48px rgba(11,45,92,.18); z-index: 60;
}
.cookie-bar[hidden]{ display: none; }
.cookie-bar p{ font-size: .85rem; color: var(--muted); flex: 1 1 260px; }
.cookie-actions{ display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- Tlačítko zpět nahoru ---------- */
.back-to-top{
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 55;
  width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; cursor: pointer;
  box-shadow: 0 10px 28px rgba(11,45,92,.28);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.back-to-top.above-cookie-bar{ bottom: calc(var(--sp-4) + 88px); }
.back-to-top:hover, .back-to-top:focus-visible{ background: var(--navy-hover); }
.back-to-top .icon{ width: 20px; height: 20px; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .back-to-top{ transition: opacity .1s linear; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; } }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position: absolute; left: var(--sp-4); top: -60px; z-index: 100;
  background: var(--navy); color:#fff; padding: 12px 20px; border-radius: 10px; transition: top .2s ease;
}
.skip-link:focus{ top: var(--sp-4); }

/* =========================================================
   Responzivita — breakpointy 600 / 900 / 1200
   ========================================================= */
@media (min-width: 600px){
  /* Navigace v patičce vidělná od 600 px naříz nahoru */
  .footer-nav{ display: block; }
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* patička: mezi 600–899px má okno dost místa na 2 sloupce (navigace + kontakt
     vedle sebe pod brandem), místo jednoho úzkého sloupce uprostřed prázdné plochy */
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

@media (min-width: 900px){
  .ref-grid{ grid-template-columns: 1fr 1fr; }
  .nav-main{ display: flex; }
  .header-cta{ display: inline-flex; }
  .nav-toggle{ display: none; }

  .hero-grid{ grid-template-columns: .85fr 1.15fr; align-items: stretch; column-gap: var(--sp-4); }
  .hero-text{ order: 0; }
  .hero-media{
    order: 0; align-self: stretch; position: relative; overflow: hidden;
    min-height: 560px;
    margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-7)) 0;
  }
  .hero-media img{
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
    object-fit: cover; object-position: left top;
    -webkit-mask-image: linear-gradient(to right, transparent, black 32%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, black 32%);
    mask-composite: intersect;
  }
  .hero-watermark{ left: -40px; bottom: -50px; width: 280px; }

  .packages-grid{ grid-template-columns: 1fr 1fr; }
  .package{ flex-direction: row; border-top: none; border-left: 3px solid var(--pkg-accent, var(--lavender)); }
  .package-photo{ flex: 0 0 30%; aspect-ratio: auto; align-self: stretch; }

  .gallery-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }

  .about-grid{ grid-template-columns: .8fr 1.2fr; align-items: start; }

  .steps-layout{ grid-template-columns: auto 1fr; gap: var(--sp-7); }
  .steps-heading{ white-space: nowrap; }
  .steps-row{ grid-template-columns: repeat(3, 1fr); }
  .step .num{ margin-bottom: var(--sp-2); }
  /* dvě samostatné spojovací linky (obrázky) v úrovni čísel – jedna mezi 01–02, druhá mezi 02–03, každá jen ve své mezeře, nedotýkají se */
  .steps-curve{ display: block; position: absolute; top: 2px; width: 26%; height: auto; z-index: 0; pointer-events: none; }
  .steps-curve--1{ left: 8%; top: 6px; width: 26%; }
  .steps-curve--2{ left: 38%; top: 8px; transform: scale(1, -1); }

  .contact-grid{ grid-template-columns: .9fr 1.1fr; }

  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-brand{ grid-column: auto; }
}

@media (min-width: 1200px){
  .packages-grid{ grid-template-columns: repeat(4, 1fr); }
  .package{ flex-direction: column; border-left: none; border-top: 3px solid var(--pkg-accent, var(--lavender)); }
  .package-photo{ flex: none; aspect-ratio: 3/2; align-self: auto; }
}