/* Bliže riječima – plakát ve švýcarském stylu, dvojité rámy, rohové značky */
:root{
  --cihla:#96462c; --cihla-tm:#5f2c1c; --mata:#59c0a6; --modra:#229bc3;
  --papir:#faf6f5; --plocha:#f3e7e2; --inkoust:#2d1f1b;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"IBM Plex Sans", "Helvetica Neue", sans-serif;
  --okraj:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papir);color:var(--inkoust);font-family:var(--sans);font-size:18px;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;padding-bottom:96px}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--modra);outline-offset:3px}

/* mřížka */
.mriz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:0 var(--okraj);max-width:1440px;margin:0 auto}

/* hlavička */
.hlava{border-bottom:2px solid var(--inkoust)}
.hlava .mriz{align-items:center;padding-top:18px;padding-bottom:18px}
.znacka{grid-column:1/7;font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.1;text-decoration:none;letter-spacing:-.02em}
.znacka span{display:block}
.hlava .cta{grid-column:7/13;justify-self:end}

/* tlačítka */
.tlac{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--modra);color:#fff;
  font-family:var(--sans);font-weight:600;text-decoration:none;border:3px solid var(--inkoust);
  min-height:60px;padding:14px 28px;font-size:19px;line-height:1.2;transition:background .15s}
.tlac:hover{background:var(--cihla-tm)}
.tlac-hlava{min-height:52px;font-size:17px;padding:10px 22px}
.tlac-velke{min-height:84px;min-width:300px;font-size:23px;padding:18px 36px;box-shadow:none;outline:3px solid var(--modra);outline-offset:4px}

/* hero */
.hero{padding:24px 0 72px}
.obri{grid-column:1/13;font-family:var(--serif);font-weight:700;line-height:.82;letter-spacing:-.035em;
  font-size:24.2vw;color:var(--cihla);border-bottom:6px double var(--inkoust);padding-bottom:18px}
.obri small{display:block;text-align:right;margin-bottom:-.2em;font-size:clamp(21px,3.2vw,46px);letter-spacing:0;color:var(--inkoust);font-weight:600;line-height:1.1;margin-top:1em;font-style:italic}
.hero-foto{grid-column:7/13;margin-top:26px}
.hero-text{grid-column:1/7;margin-top:26px;align-self:start;border:5px double var(--inkoust);padding:24px;background:#fff}
.hero-text p{font-size:20px;margin-bottom:22px}
.hero-text .pozn{font-size:16px;margin:18px 0 0}

/* rámy s rohovými značkami */
.ram{position:relative;border:5px double var(--inkoust);padding:10px;background:var(--papir)}
.ram::before,.ram::after{content:"";position:absolute;width:22px;height:22px;border:3px solid var(--cihla)}
.ram::before{top:-14px;left:-14px;border-right:0;border-bottom:0}
.ram::after{bottom:-14px;right:-14px;border-left:0;border-top:0}
.ram img{width:100%;filter:grayscale(1) contrast(1.05)}
figcaption{font-size:15px;padding:10px 4px 2px;line-height:1.45}

/* sekce */
.sekce{padding:88px 0}
.cislo{grid-column:1/3;font-family:var(--serif);font-size:96px;line-height:.8;font-weight:700;color:var(--cihla)}
.sekce h2{grid-column:3/13;font-family:var(--serif);font-weight:700;font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.015em;margin-bottom:22px;overflow-wrap:anywhere}
.uvod{grid-column:3/10;font-size:19px;margin-bottom:44px}

/* mýty */
.myty{grid-column:3/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.mit{border:4px double var(--inkoust);padding:26px 26px 28px;position:relative;background:#fff}
.mit::before{content:"";position:absolute;top:8px;right:8px;width:16px;height:16px;border-top:3px solid var(--cihla);border-right:3px solid var(--cihla)}
.mit h3{font-family:var(--serif);font-size:30px;line-height:1.05;margin-bottom:16px}
.mit dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:17px}
.mit dt{font-weight:700;color:var(--cihla)}
.mit dt.real{color:#2f7f6b}
.obsah-foto{grid-column:3/11;margin-top:56px}

/* fakta – plný pás */
.pas{background:var(--cihla);color:var(--papir)}
.pas .cislo{color:var(--plocha)}
.fakta{grid-column:3/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.fakt{grid-column:span 4;border:3px solid var(--papir);outline:1px solid var(--papir);outline-offset:-9px;padding:24px}
.fakt h3{font-family:var(--serif);font-size:28px;line-height:1.05;margin-bottom:12px}
.fakt p{font-size:17px}
.fakt .zdroj{font-size:14px;margin-top:10px;opacity:.9}
@media (min-width:1001px){.fakt:nth-of-type(n+2){grid-column:span 6}}
.fakt-graf{grid-column:span 8;background:var(--plocha);color:var(--inkoust);padding:18px;border:5px double var(--papir)}
.fakt-graf img{width:100%}
.fakt-graf figcaption{font-size:15px}

/* nabídka */
.nabidka-text{grid-column:1/8;font-size:21px;align-self:center}
.nabidka-text p+p{margin-top:16px}
.nabidka-akce{grid-column:8/13;border:6px double var(--papir);outline:3px solid var(--cihla-tm);outline-offset:-14px;background:var(--cihla);color:var(--papir);padding:40px 34px}
.nabidka-akce p{font-family:var(--serif);font-size:44px;line-height:1.05;margin-bottom:22px;font-weight:600}

/* závěr */
.plocha{background:var(--plocha)}
.zaver-foto{grid-column:1/9}
.zaver-text{grid-column:9/13;align-self:center}
.zaver-text h2{grid-column:auto;font-size:clamp(34px,3.6vw,52px)}
.zaver-text p{font-size:18px}

/* recenze */
.recenze{grid-column:3/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:6px double var(--inkoust);border-bottom:6px double var(--inkoust)}
.recenze figure{padding:28px 22px;border-right:1px solid var(--inkoust)}
.recenze figure:last-child{border-right:0}
.recenze blockquote{font-family:var(--serif);font-size:25px;line-height:1.15;font-weight:600;margin-bottom:16px}
.recenze cite{font-style:normal;font-size:15px;font-weight:600;color:var(--cihla)}

/* FAQ */
.faq{grid-column:3/11}
.faq details{border-bottom:2px solid var(--inkoust)}
.faq details:first-child{border-top:5px double var(--inkoust)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:27px;font-weight:700;padding:20px 40px 20px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:34px;color:var(--cihla)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;font-size:18px;max-width:62ch}

/* závěrečný pás */
.tmavy{background:var(--cihla-tm);color:var(--papir);padding:84px 0}
.tmavy h2{grid-column:1/13;font-family:var(--serif);font-weight:700;font-size:clamp(44px,8.5vw,128px);line-height:.9;letter-spacing:-.02em;margin-bottom:28px}
.tmavy p{grid-column:1/7;font-size:20px;margin-bottom:30px}
.tmavy .akce{grid-column:1/13}

/* patička */
.pata{border-top:6px double var(--inkoust);padding:26px 0}
.pata .mriz{align-items:center}
.pata p{grid-column:1/5;font-size:15px}
.pata nav{grid-column:5/13;justify-self:end;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}

/* podstránky */
.stranka{padding:64px 0}
.stranka .obsah{grid-column:2/10}
.stranka h1{font-family:var(--serif);font-size:clamp(42px,6vw,76px);line-height:1;margin-bottom:28px;border-bottom:6px double var(--inkoust);padding-bottom:14px}
.stranka h2{font-family:var(--serif);font-size:30px;margin:30px 0 8px}
.stranka p,.stranka li{font-size:18px;max-width:68ch}
.stranka ul{padding-left:22px}
.formular{display:grid;gap:16px;max-width:560px;margin-top:24px;border:5px double var(--inkoust);padding:24px;background:#fff}
.formular label{display:grid;gap:6px;font-weight:600;font-size:17px}
.formular input,.formular textarea{font:inherit;padding:12px;border:2px solid var(--inkoust);background:var(--papir)}
.formular button{justify-self:start;cursor:pointer}
#kontaktDakujeme{display:none;margin-top:24px;border:5px double var(--mata);padding:22px;font-size:19px;max-width:560px}

/* popup a lišta */
.modal-overlay{position:fixed;inset:0;background:rgba(45,31,27,.8);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--papir);width:min(640px,100%);border:6px double var(--inkoust);padding:44px 36px 36px;position:relative;text-align:center;max-height:94vh;overflow:auto}
.modal .close{position:absolute;top:8px;right:12px;background:none;border:0;font-size:42px;line-height:1;cursor:pointer;color:var(--inkoust)}
.modal .badge{display:inline-block;background:var(--cihla);color:#fff;font-weight:700;padding:6px 14px;margin-bottom:14px;font-size:17px}
.modal h3{font-family:var(--serif);font-size:48px;line-height:1;margin-bottom:12px;color:var(--cihla-tm)}
.modal .offer{font-size:20px;margin:10px 0 18px}
.modal p{font-size:18px}
.modal .btn{display:flex;align-items:center;justify-content:center;min-height:84px;font-size:23px;font-weight:700;background:var(--modra);color:#fff;text-decoration:none;
  border:3px solid var(--inkoust);padding:14px 22px;margin-top:18px;white-space:normal}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--inkoust);color:var(--papir);display:flex;align-items:center;justify-content:center;gap:22px;padding:12px var(--okraj);border-top:4px double var(--papir)}
.sticky-cta > span{font-size:17px}
.sticky-cta .btn{flex:0 0 auto;background:var(--modra);color:#fff;text-decoration:none;font-weight:700;font-size:18px;min-height:60px;display:inline-flex;align-items:center;padding:10px 22px;border:2px solid var(--papir)}

/* tablet */
@media (max-width:1000px){
  .hero-foto{grid-column:1/13}
  .hero-text{grid-column:1/13;order:2;margin-top:24px}
  .hero-foto{order:3}
  .obri{order:1}
  .fakt{grid-column:span 6}
  .fakt-graf{grid-column:span 12}
  .recenze{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recenze figure:nth-child(2){border-right:0}
  .zaver-foto,.zaver-text{grid-column:1/13}
  .zaver-text{margin-top:32px}
}
/* mobil */
@media (max-width:700px){
  body{font-size:17px;padding-bottom:132px}
  .mriz{column-gap:0;grid-template-columns:minmax(0,1fr)}
  .mriz > *{grid-column:1/-1 !important}
  .znacka{font-size:23px}
  .hlava .cta{justify-self:end;margin-top:0}
  .hlava .mriz{grid-template-columns:auto auto}
  .hlava .mriz > *{grid-column:auto !important}
  .tlac-hlava{font-size:16px;padding:8px 14px;min-height:48px}
  .tlac-velke{min-width:0;width:100%}
  .hero{padding:20px 0 52px}
  .hero-text{order:2;margin-top:20px}
  .hero-foto{order:3;margin-top:28px}
  .obri{order:1}
  .hero-text p{font-size:19px}
  .sekce{padding:60px 0}
  .cislo{font-size:64px;margin-bottom:8px}
  .uvod{margin-bottom:30px}
  .myty,.fakta,.recenze{grid-template-columns:minmax(0,1fr)}
  .fakt,.fakt-graf{grid-column:1/-1}
  .recenze figure{border-right:0;border-bottom:1px solid var(--inkoust)}
  .recenze figure:last-child{border-bottom:0}
  .obsah-foto{margin-top:40px}
  .nabidka-akce{margin-top:28px;padding:30px 22px}
  .nabidka-akce p{font-size:34px}
  .faq summary{font-size:23px}
  .pata nav{justify-self:start}
  .mit h3{font-size:26px}
  .ram{padding:6px}
  .sticky-cta{flex-direction:column;gap:8px;padding:10px 16px;text-align:center}
  .sticky-cta > span{font-size:15px}
  .sticky-cta .btn{min-height:52px;font-size:17px}
  .modal{padding:40px 18px 22px}
  .modal h3{font-size:38px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}