/* přechod hera, tři metriky, proč pozvánku takhle, závěrečná výzva (navazuje na d.css) */

/* ---------- přechod z hera: tři varianty, přepíná se parametrem ?edge= ---------- */
.edge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; pointer-events: none; display: none; }
.hero[data-edge="vlny"] .edge--vlny, .hero[data-edge="krajka"] .edge--krajka, .hero[data-edge="oblouk"] .edge--oblouk { display: block; }

.edge--vlny { height: clamp(80px, 12vw, 190px); overflow: hidden; }
.edge--vlny svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.edge--vlny .w1 { fill: #f2dcd2; opacity: .8; }
.edge--vlny .w2 { fill: #f8e9e1; opacity: .92; }
.edge--vlny .w3 { fill: var(--ivory); }
@media (prefers-reduced-motion: no-preference) {
  .edge--vlny .w1 { animation: sway 11s ease-in-out infinite alternate; }
  .edge--vlny .w2 { animation: sway 14s ease-in-out -4s infinite alternate-reverse; }
}
@keyframes sway { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.edge--vlny svg path { transform-origin: 50% 100%; transform-box: fill-box; }

.edge--krajka { height: 78px; }
.edge--krajka::before, .edge--krajka::after { content: ''; position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
.edge--krajka::before { bottom: 18px; height: 44px; background-image: radial-gradient(circle at 50% 100%, #f4e1d8 0 63%, transparent 64%); background-size: 64px 44px; background-position: 32px 0; opacity: .95; }
.edge--krajka::after { bottom: 0; height: 36px; background-image: radial-gradient(circle at 50% 100%, var(--ivory) 0 64%, transparent 65%); background-size: 64px 36px; }
.edge--krajka i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ivory); }

.edge--oblouk { height: clamp(60px, 9vw, 130px); overflow: hidden; }
.edge--oblouk::before, .edge--oblouk::after { content: ''; position: absolute; left: -12%; width: 124%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.edge--oblouk::before { bottom: 0; height: 100%; background: #f3dfd5; opacity: .85; }
.edge--oblouk::after { bottom: 0; height: 68%; background: var(--ivory); }

.edge-switch { position: fixed; z-index: 70; left: 12px; bottom: 12px; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(74, 63, 51, .88); color: #fff; font-size: 14px; }
.edge-switch a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: #f6e9e1; }
.edge-switch a.is-on { background: var(--rose); color: #2a1a14; }

/* ---------- tři metriky s obrázkem ---------- */
.metrics { position: relative; padding: 56px 0 0; background: var(--ivory); }
.metrics__grid { display: grid; gap: 40px; align-items: center; }
.collage { position: relative; height: clamp(300px, 86vw, 380px); margin: 0 auto; width: min(100%, 440px); }
.cl { position: absolute; height: auto; width: 38%; aspect-ratio: 390 / 844; object-fit: cover; border-radius: 16px; background: var(--blush); box-shadow: 0 30px 40px -22px rgba(110, 66, 46, .55), 0 0 0 5px var(--paper), 0 0 0 6px var(--line); }
.cl--1 { left: 4%; top: 9%; transform: rotate(-7deg); z-index: 1; }
.cl--2 { left: 27%; top: 0; transform: rotate(-1.5deg); z-index: 3; width: 42%; }
.cl--3 { right: 4%; top: 12%; transform: rotate(7deg); z-index: 2; }
.cl--4 { left: 36%; bottom: -4%; transform: rotate(4deg); z-index: 4; width: 34%; }
.mlist { display: grid; gap: 10px; }
.count { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.count:first-child { border-top: 0; }
.count b { font: 400 clamp(78px, 21vw, 124px)/.85 var(--script); color: var(--rose-deep); font-variant-numeric: tabular-nums; min-width: 2.1ch; }
.count h3 { font-weight: 500; font-size: 26px; line-height: 1.1; }
.count p { margin-top: 6px; color: var(--soft); font-size: 18px; line-height: 1.4; }
.count--main b { font-size: clamp(88px, 24vw, 150px); }

/* ---------- proč pozvánku takhle ---------- */
.why__grid { display: grid; gap: 36px; }
.why__head .orn { display: block; margin-bottom: 14px; }
.why__head .h2 { font-size: clamp(46px, 12vw, 80px); max-width: 8em; }
.why__head p { margin-top: 20px; max-width: 30em; color: var(--soft); }
.why__list { display: grid; gap: 0; }
.why__i { padding: 22px 0 22px 30px; position: relative; border-top: 1px solid var(--line); }
.why__i:last-child { border-bottom: 1px solid var(--line); }
.why__i::before { content: ''; position: absolute; left: 4px; top: 33px; width: 9px; height: 9px; border: 1px solid var(--gold); transform: rotate(45deg); }
.why__i h3 { font-weight: 500; font-size: 24px; line-height: 1.15; }
.why__i p { margin-top: 6px; color: var(--soft); font-size: 18px; line-height: 1.45; }

.finish__combo { margin: 18px auto 0; max-width: 28em; font-size: 22px; color: var(--ink); }
.finish__note { margin-top: 18px; font-size: 17px; color: var(--soft); }

@media (min-width: 900px) {
  .metrics { padding-top: 90px; }
  .metrics__grid { grid-template-columns: .9fr 1.1fr; gap: 100px; }
  .collage { height: 520px; width: 100%; max-width: 520px; }
  .count { gap: 6px 36px; padding: 28px 0; }
  .count h3 { font-size: 30px; }
  .count p { font-size: 20px; }
  .why { padding-top: 150px; }
  .why__grid { grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
  .why__head { position: sticky; top: 110px; }
  .why__i { padding: 28px 0 28px 36px; }
  .why__i::before { top: 40px; }
}