/* Lakše u dvoje – pismo kćeri mami (archetyp dopis)
   Tokeni: tinta #2d281b · med #967c2c · orah #5f4e1c · nebo #59a6c0 · plavi gumb #224bc3 · papir #faf9f5 · omotnica #f3efe2 */
:root {
  --tinta: #2d281b;
  --med: #967c2c;
  --orah: #5f4e1c;
  --nebo: #59a6c0;
  --nebo-tamno: #2f6f86;
  --gumb: #224bc3;
  --gumb-tamno: #1a3a99;
  --papir: #faf9f5;
  --omotnica: #f3efe2;
  --list: #fffefa;
  --naslov: "EB Garamond", Georgia, "Times New Roman", serif;
  --tekst: "Geologica", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: var(--tekst);
  font-weight: 300;
  font-size: 1.1875rem;
  line-height: 1.7;
  padding-bottom: 96px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gumb); }
small { font-size: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--nebo-tamno); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--naslov); font-weight: 500; color: var(--orah); line-height: 1.15; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); color: var(--tinta); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
h3 { font-size: 1.65rem; }
p { margin: 0 0 1em; }

/* Tlačítka */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--tekst); font-weight: 600; text-decoration: none; border-radius: 3px;
  transition: background-color .15s ease;
}
.btn-cta { background: var(--gumb); color: #fff; min-height: 60px; padding: 14px 28px; font-size: 1.15rem; border: 2px solid var(--gumb); }
.btn-cta:hover { background: var(--gumb-tamno); }
.btn-glavni { min-height: 84px; min-width: 330px; font-size: 1.45rem; padding: 18px 36px; box-shadow: 5px 5px 0 var(--med); }
.btn-zavrsni { min-height: 70px; font-size: 1.25rem; padding: 16px 32px; }
.btn-glava { min-height: 52px; font-size: 1.125rem; padding: 10px 22px; }
.sitno { font-size: .95rem; color: var(--orah); margin-top: 14px; }

/* Hlavička */
.glava {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 16px 24px;
}
.znak {
  font-family: var(--naslov); font-style: italic; font-weight: 500; font-size: 1.9rem;
  color: var(--orah); text-decoration: none; letter-spacing: .01em;
}

/* Hero – otvorená obálka a první list */
.omotnica { position: relative; background: var(--omotnica); padding: 0 24px 72px; border-top: 1px solid #e3dcc6; }
.klapna {
  position: absolute; inset: 0 0 auto 0; height: 190px;
  background: #e8e0c8; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.list-prvi {
  position: relative; max-width: 1040px; margin: 0 auto; padding: 30px 64px 44px 0;
  background: var(--list); box-shadow: 0 1px 0 #e3dcc6, 0 18px 40px -24px rgba(45, 40, 27, .35);
  display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: start;
  top: 28px;
}
.polaroid { background: #fff; padding: 12px 12px 14px; box-shadow: 0 10px 24px -10px rgba(45, 40, 27, .45); margin: 0; }
.polaroid figcaption { font-family: var(--naslov); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--tinta); padding: 12px 4px 0; text-align: center; }
.polaroid-hero { transform: rotate(-3deg); margin-left: -44px; margin-top: 18px; }
.polaroid-hero img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 92% 50%; }
.datum { text-align: right; font-family: var(--naslov); font-style: italic; font-size: 1.2rem; color: var(--orah); margin-bottom: 8px; }
.oslovljavanje { font-family: var(--naslov); font-style: italic; font-size: 1.7rem; color: var(--orah); margin-bottom: 6px; }
.perex { font-size: 1.2rem; max-width: 60ch; }

/* Přehyb dopisu */
.pregib { max-width: 1040px; margin: 0 auto; height: 22px; position: relative; }
.pregib::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(95, 78, 28, .28) 12%, rgba(95, 78, 28, .28) 88%, transparent);
  box-shadow: 0 3px 6px rgba(95, 78, 28, .12);
}

/* Listy dopisu */
.list:not(.list-prvi) { max-width: 1040px; margin: 0 auto; padding: 120px 64px; background: var(--list); }
.odlomci { padding-top: 104px !important; }
.odlomci > h2, .odlomci > .uvod { max-width: 760px; }
.uvod { font-size: 1.2rem; }
.odlomak {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 56px; align-items: center;
  padding: 72px 0; border-top: 1px solid #e6dfcb;
}
.odlomak:last-child { padding-bottom: 0; }
.odlomak-tekst p { font-size: 1.25rem; max-width: 62ch; }
.biljeska { position: relative; border: 5px double var(--med); padding: 22px 22px 16px; transform: rotate(1.2deg); }
.biljeska p { font-family: var(--naslov); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--orah); margin: 0; }

/* Rohové značky a dvojité rámy (tiskové boxy) */
.okvir, .biljeska { --roh: 18px; }
.okvir { position: relative; border: 7px double var(--orah); padding: 64px 64px 56px; }
.okvir::before, .okvir::after, .biljeska::before, .biljeska::after {
  content: ""; position: absolute; width: var(--roh); height: var(--roh); border-color: var(--med); border-style: solid;
}
.okvir::before, .biljeska::before { top: -16px; left: -16px; border-width: 3px 0 0 3px; }
.okvir::after, .biljeska::after { bottom: -16px; right: -16px; border-width: 0 3px 3px 0; }

.prilog-uvod { font-size: 1.25rem; max-width: 64ch; }
.graf { margin: 48px auto; }
.graf img { width: 100%; }
.graf-dob { max-width: 600px; }
.graf figcaption { font-size: 1.0625rem; line-height: 1.6; margin-top: 16px; border-top: 1px solid #e6dfcb; padding-top: 14px; }
.podnaslov { font-family: var(--naslov); font-style: italic; font-size: 1.45rem; color: var(--orah); margin-top: 24px; max-width: 46ch; }
.uzroci { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.uzrok { padding: 28px 0; border-top: 2px solid var(--orah); }
.uzrok h3 { font-size: 1.5rem; }
.uzrok p { margin: 0; }
.uzrok:last-child:nth-child(odd) { grid-column: 1 / -1; }
.uzrok:last-child:nth-child(odd) p { max-width: 66ch; }
.projavi { margin-top: 48px; padding-top: 36px; border-top: 6px double var(--med); }
.projavi p { max-width: 66ch; }

/* Evropa */
.europa { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 56px; align-items: center; }
.europa .graf { margin: 0; }
.europa-tekst p { font-size: 1.2rem; }

/* Nabídka */
.prilazem { padding-bottom: 72px !important; }
.okvir-ponuda { max-width: 820px; margin: 0 auto; text-align: center; background: var(--omotnica); }
.okvir-ponuda p { max-width: 58ch; margin-left: auto; margin-right: auto; font-size: 1.2rem; }

/* Závěr, podpis, P.S. */
.zavrsetak { padding-top: 72px !important; }
.zavrsetak > h2, .zavrsetak > p { max-width: 760px; }
.zavrsetak > p { font-size: 1.25rem; }
.potpis-blok { margin-top: 96px; }
.pozdrav { font-family: var(--naslov); font-style: italic; font-size: 1.7rem; color: var(--tinta); margin: 0; text-align: right; }
.potpis { text-align: right; margin: 0 0 48px; color: var(--gumb); }
.potpis-svg { display: inline-block; width: 260px; height: auto; transform: rotate(-4deg); }
.ps, .pps { max-width: 820px; padding-top: 48px; }
.ps h2, .pps h2 { font-style: italic; }
.ps-redak { margin: 0 0 36px; padding-left: 28px; border-left: 2px solid var(--med); }
.ps-redak blockquote { margin: 0; font-family: var(--naslov); font-style: italic; font-size: 1.75rem; line-height: 1.35; color: var(--tinta); }
.ps-redak cite { display: block; font-style: normal; font-size: 1rem; color: var(--orah); margin-top: 8px; }
.pps details { border-top: 1px solid #e0d8c1; padding: 20px 0; }
.pps details:last-of-type { border-bottom: 1px solid #e0d8c1; }
.pps summary { cursor: pointer; font-family: var(--naslov); font-size: 1.5rem; line-height: 1.3; color: var(--orah); list-style: none; padding-right: 36px; position: relative; }
.pps summary::-webkit-details-marker { display: none; }
.pps summary::after { content: "+"; position: absolute; right: 4px; top: 0; font-family: var(--tekst); color: var(--med); }
.pps details[open] summary::after { content: "–"; }
.pps details p { margin: 12px 0 0; max-width: 64ch; }

/* Patička */
.podnozje { width: 100%; max-width: 1040px; margin: 0 auto; padding: 36px 24px 28px; font-size: .95rem; color: var(--orah); text-align: center; }
.podnozje p { margin: 0 0 8px; }
.podnozje nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.podnozje a { color: var(--orah); }

/* Podstránky */
body.kratka { min-height: 100vh; display: flex; flex-direction: column; }
body.kratka main { flex: 1; }
.podstranica { max-width: 760px; margin: 24px auto 48px; padding: 56px 56px 48px; background: var(--list); border: 6px double var(--orah); position: relative; }
.podstranica h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.podstranica h2 { font-size: 1.6rem; margin-top: 1.4em; }
.obrazac label { display: block; font-weight: 400; margin: 16px 0 6px; }
.obrazac input, .obrazac textarea { width: 100%; font: inherit; font-size: 1.0625rem; padding: 12px 14px; border: 2px solid #cfc5a8; background: #fff; color: var(--tinta); border-radius: 2px; }
.obrazac textarea { min-height: 150px; resize: vertical; }
.obrazac button { margin-top: 22px; min-height: 60px; padding: 12px 32px; font: 600 1.125rem var(--tekst); background: var(--orah); color: #fff; border: 0; border-radius: 3px; cursor: pointer; }
#kontaktDakujeme { border: 5px double var(--med); padding: 22px; margin-top: 16px; font-family: var(--naslov); font-style: italic; font-size: 1.4rem; color: var(--orah); }

/* Popup (engine) */
.modal-overlay { position: fixed; inset: 0; background: rgba(30, 25, 12, .82); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-overlay.show { display: flex; }
.modal {
  position: relative; width: min(660px, 100%); background: var(--list); text-align: center;
  padding: 48px 44px 40px; border: 8px double var(--orah); max-height: 94vh; overflow-y: auto;
}
.modal .close {
  position: absolute; top: 8px; right: 10px; width: 48px; height: 48px; border: 0; background: transparent;
  font-size: 2.2rem; line-height: 1; color: var(--tinta); cursor: pointer;
}
.modal .badge { display: inline-block; background: var(--med); color: #fff; font-weight: 600; font-size: 1rem; padding: 6px 14px; border-radius: 2px; }
.modal h3 { font-family: var(--naslov); font-size: 3rem; color: var(--tinta); margin: 18px 0 6px; }
.modal > p { font-size: 1.35rem; margin-bottom: 14px; }
.modal .offer { border-top: 1px solid #e0d8c1; border-bottom: 1px solid #e0d8c1; padding: 14px 0 4px; margin-bottom: 22px; }
.modal .offer p { margin: 0 0 10px; font-size: 1.1rem; }
.modal .btn { white-space: normal; text-wrap: balance; }
.modal .btn-cta-xl { min-height: 84px; font-size: 1.4rem; padding: 16px 28px; width: 100%; }

/* Spodní lišta (engine) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  background: var(--orah); color: #fff; padding: 12px 20px; border-top: 4px double var(--med);
}
.sticky-cta > span { font-size: 1.0625rem; font-weight: 400; }
.sticky-cta .btn { flex: 0 0 auto; border-color: #fff; min-height: 60px; }

@media (max-width: 900px) {
  .list-prvi { grid-template-columns: 1fr; padding: 32px 26px 40px; gap: 28px; top: 24px; }
  .polaroid-hero { margin: 0 auto; max-width: 420px; order: 2; transform: rotate(-2deg); }
  .list-tekst { order: 1; }
  .list:not(.list-prvi) { padding: 72px 26px; }
  .odlomci { padding-top: 88px !important; }
  .odlomak { grid-template-columns: 1fr; gap: 26px; padding: 48px 0; }
  .biljeska { margin: 0 12px; }
  .okvir { padding: 40px 22px 36px; }
  .uzroci { grid-template-columns: 1fr; }
  .europa { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 600px) {
  body { padding-bottom: 136px; font-size: 1.0625rem; }
  .glava { padding: 12px 16px; }
  .znak { font-size: 1.45rem; }
  .btn-glava { font-size: 1.125rem; padding: 8px 14px; min-height: 48px; }
  .omotnica { padding: 0 12px 52px; }
  .klapna { height: 110px; }
  .datum { font-size: 1.05rem; }
  .perex, .uvod, .odlomak-tekst p, .prilog-uvod, .europa-tekst p, .zavrsetak > p, .okvir-ponuda p { font-size: 1.0625rem; }
  .btn-glavni { min-width: 0; width: 100%; font-size: 1.3rem; min-height: 80px; padding: 16px 20px; }
  .btn-zavrsni { width: 100%; }
  .list:not(.list-prvi) { padding: 60px 18px; }
  .okvir { padding: 34px 16px 30px; border-width: 6px; }
  .okvir::before, .biljeska::before { top: -12px; left: -10px; }
  .okvir::after, .biljeska::after { bottom: -12px; right: -10px; }
  .ps-redak blockquote { font-size: 1.45rem; }
  .graf-dob { margin-left: -8px; margin-right: -8px; }
  .pozdrav { font-size: 1.45rem; }
  .potpis-svg { width: 210px; }
  .podstranica { padding: 34px 20px 30px; margin: 12px 10px 32px; }
  .sticky-cta { flex-direction: column; gap: 8px; padding: 10px 14px; text-align: center; }
  .sticky-cta .btn { width: 100%; }
  .modal { padding: 44px 18px 26px; }
  .modal h3 { font-size: 2.1rem; white-space: nowrap; }
  .modal > p { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}