/* ======================
   Program (page 2) CSS
   ====================== */

/* базовый отступ секций страницы 2 */
.sec2{ margin: 42px 0; }

/* ---------- Sekcia 1: Trojuholníková mozaika ---------- */
.sec-triangles{
  position: relative; padding: 26px 16px 18px; border-radius: 22px;
  background:
    radial-gradient(600px 220px at 12% 0%, rgba(255,122,26,.10), transparent 60%),
    radial-gradient(600px 220px at 88% 0%, rgba(34,211,238,.08), transparent 60%),
    #fff;
  box-shadow: var(--hh-shadow);
}
.tri-wrap{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top:12px;
}
.tri{
  position: relative; isolation:isolate;
}
.tri .media-img{
  /* треугольная маска */
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
          clip-path: polygon(50% 0, 0 100%, 100% 100%);
  border-radius: 12px;
  aspect-ratio: 7 / 5; object-fit: cover;
}
.t-a{ transform: translateY(10px) rotate(-1.2deg); }
.t-b{ transform: translateY(-6px); }
.t-c{ transform: translateY(6px) rotate(1deg); }

@media (max-width: 980px){
  .tri-wrap{ grid-template-columns: 1fr 1fr; }
  .t-c{ grid-column: 1 / -1; justify-self:center; width:min(350px, 80vw); }
}
@media (max-width: 640px){
  .tri-wrap{ grid-template-columns: 1fr; }
  .t-a, .t-b, .t-c{ transform:none; }
}

/* ---------- Sekcia 2: Oblúkový triptych ---------- */
.sec-arches{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 20px; position:relative; overflow:hidden;
}
.sec-arches::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-24px; height:120px;
  background: linear-gradient(90deg, rgba(255,122,26,.12), rgba(168,85,247,.10), rgba(34,211,238,.10));
  transform: rotate(-2deg);
}
.arch-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; align-items:end; margin-top:12px;
}
.arch{
  position:relative; text-align:center; padding:10px;
}
.arch .media-img{
  width:100%; max-width:350px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 9999px 9999px 14px 14px / 75% 75% 14px 14px; /* «oblúk» */
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.arch .caption{ background: rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

@media (max-width: 980px){
  .arch-grid{ grid-template-columns: 1fr 1fr; }
  .a-3{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .arch-grid{ grid-template-columns: 1fr; }
}

/* ---------- Sekcia 3: Kruhové okná po krivke ---------- */
.sec-portholes{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.portstage{ position: relative; min-height: 220px; }
.portpath{
  position:absolute; inset: 0; width: 100%; height: 220px;
  filter: drop-shadow(0 8px 18px rgba(255,122,26,.25));
}
.port{
  position:absolute; z-index: 1; width:min(350px, 80vw); text-align:center;
}
.port .media-img{
  width:100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9999px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.port .caption{ background: rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

.p-left{ left: 4%; top: 22%; transform: rotate(-2deg); }
.p-right{ right: 4%; top: 6%; transform: rotate(2deg); }

@media (max-width: 980px){
  .p-left{ left: 2%; top: 30%; }
  .p-right{ right: 2%; top: 10%; }
}
@media (max-width: 640px){
  .portpath{ display:none; }
  .portstage{ min-height: 0; }
  .port{ position: relative; left:auto; right:auto; top:auto; transform:none; margin-top: 10px; }
}
/* ---------- Sekcia 4: Kvarteto scén — diagonála ---------- */
.sec-diagonal{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.diag-grid{
  position:relative;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px; margin-top:12px; align-items:end;
}
.diag .media-img{ border-radius:16px; aspect-ratio: 7/5; object-fit:cover; }

.item-a{ transform: translateY(12px); }
.item-b{ transform: translateY(-6px); }
.item-c{ transform: translateY(6px); }
.item-d{ transform: translateY(-12px); }

.diag-line{
  position:absolute; left: -2%; right: -2%; top: 54%;
  height: 6px; border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(255,122,26,.9) 0 14px, rgba(255,122,26,.4) 14px 28px);
  filter: drop-shadow(0 10px 18px rgba(255,122,26,.18));
  transform: rotate(-6deg);
  pointer-events:none;
}

@media (max-width: 980px){
  .diag-grid{ grid-template-columns: 1fr; }
  .item-a,.item-b,.item-c,.item-d{ transform:none; }
  .diag-line{ display:none; }
}

/* ---------- Sekcia 5: Šikmé pásy — diagonálne karty ---------- */
.sec-slants{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.slants-wrap{ display:grid; gap:16px; margin-top:12px; }
.slant{ position:relative; }
.slant .media-img{
  aspect-ratio: 7/5; object-fit: cover;
  /* trapezová maska */
  -webkit-clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
          clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  border-radius: 14px;
  transition: clip-path .25s ease, transform .2s ease;
}
.s-1 .media-img{ transform: rotate(-0.8deg); }
.s-2 .media-img{ transform: rotate(0.6deg); }
.s-3 .media-img{ transform: rotate(-0.4deg); }

@media (hover:hover){
  .slant:hover .media-img{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: none;
  }
}

/* ---------- Sekcia 6: Fotokniha — otvorená dvojstrana ---------- */
.sec-book{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.book-open{
  position:relative; display:grid; grid-template-columns: 1fr 1fr;
  gap:18px; margin-top:12px; align-items:start;
  background:
    radial-gradient(600px 200px at 50% 120%, rgba(0,0,0,.06), transparent 60%);
  border-radius:18px;
}
.page .media-img{
  aspect-ratio: 7/5; object-fit: cover; border-radius: 12px;
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}
.page.left  { transform: rotate(-0.6deg); }
.page.right { transform: rotate(0.6deg); }

.spine{
  position:absolute; top: 10px; bottom: 10px; left: calc(50% - 1px); width: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.06));
  box-shadow: 0 0 0 6px rgba(255,255,255,.8);
  border-radius: 2px;
  pointer-events:none;
}

@media (max-width: 980px){
  .book-open{ grid-template-columns: 1fr; }
  .page.left, .page.right{ transform:none; }
  .spine{ display:none; }
}
/* ---------- Sekcia 7: Akordeónová galéria ---------- */
.sec-accordion{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative;
}
.accord{
  display:flex; gap:16px; margin-top:12px;
}
.panel{
  flex:1; display:grid; gap:8px; place-items:center;
  background: linear-gradient(180deg, rgba(255,122,26,.10), rgba(255,122,26,.04));
  padding:10px; border-radius:16px; transition: flex .25s ease;
}
.panel .media-img{ aspect-ratio: 7/5; object-fit: cover; border-radius:12px; }
.accord:hover .panel{ flex:.7; }
.accord .panel:hover{ flex:1.6; }

@media (max-width: 980px){
  .accord{ flex-direction: column; }
  .panel{ flex:auto; }
}

/* ---------- Sekcia 8: Kolorimetr — paleta ---------- */
.sec-palette{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.palette-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
}
.swatch{
  position:relative; padding:12px; border-radius:18px; background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06); isolation:isolate;
}
.swatch::before{
  content:""; position:absolute; inset:6px; border-radius:14px; z-index:0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 10px, transparent 10px 20px);
}
.swatch-orange::before{
  background:
    repeating-linear-gradient(90deg, rgba(255,122,26,.15) 0 10px, rgba(255,122,26,.04) 10px 20px);
}
.swatch-teal::before{
  background:
    repeating-linear-gradient(90deg, rgba(34,211,238,.18) 0 10px, rgba(34,211,238,.06) 10px 20px);
}
.swatch .media-img{ position:relative; z-index:1; border-radius:12px; aspect-ratio: 7/5; object-fit:cover; }
.swatch .caption{ position:relative; z-index:1; background: rgba(255,255,255,.92); }

@media (max-width: 640px){
  .palette-grid{ grid-template-columns: 1fr; }
}

/* ---------- Sekcia 9: Závesné bannery ---------- */
.sec-banners{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.banner-rail{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px; align-items:start;
}
.banner{
  position:relative; padding:12px 12px 10px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transform-origin: top center;
  animation: banner-sway 6s ease-in-out infinite;
}
@keyframes banner-sway{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(0.6deg); }
}
.banner::before{ /* „záves“ s výsekom rohu */
  content:""; position:absolute; top:8px; left:12px; right:12px; height:14px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.04), rgba(0,0,0,.08));
  border-radius: 999px;
}
.banner::after{
  content:""; position:absolute; top:22px; right:22px; width:20px; height:20px;
  background:#fff; transform: rotate(45deg);
  box-shadow: -3px -3px 0 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(0,0,0,.06);
  border-radius: 3px;
}
.banner .media-img{
  width:100%; max-width:350px; aspect-ratio: 5 / 7; object-fit: cover; border-radius:12px;
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}
.banner .caption{ text-align:center; background: rgba(255,255,255,.92); margin-top:8px; }

@media (max-width: 980px){
  .banner-rail{ grid-template-columns: 1fr; }
  .banner{ animation: none; }
}
/* ---------- Sekcia 7: Most svetiel ---------- */
.sec-bridge{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:28px 16px 24px; position:relative; overflow:visible;
}
.bridge-stage{ position:relative; min-height: 280px; }
.bridge-dots{
  position:absolute; left:-5%; right:-5%; top: 54%; height: 8px;
  background:
    radial-gradient(circle at 0 50%, rgba(255,122,26,.9) 3px, transparent 4px) repeat-x;
  background-size: 26px 8px;
  filter: drop-shadow(0 8px 18px rgba(255,122,26,.25));
  transform: rotate(-8deg);
  animation: dots-breathe 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes dots-breathe{
  0%,100%{ opacity: .9; }
  50%{ opacity: .6; }
}
.bridge-pill{
  position:absolute; width:min(320px, 80vw); text-align:center;
}
.bridge-pill .media-img{
  aspect-ratio: 7/5; object-fit: cover; border-radius: 999px/24px; /* «таблетка» */
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.bridge-pill .caption{ background: rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

.b-left  { left: 2%;  top: 36%; transform: rotate(-4deg); }
.b-mid   { left: 36%; top: 18%; transform: rotate(0deg); }
.b-right { right: 2%; top: 38%; transform: rotate(4deg); }

@media (max-width: 980px){
  .bridge-stage{ min-height: 0; }
  .bridge-dots{ display:none; }
  .bridge-pill{ position: relative; left:auto; right:auto; top:auto; transform:none; margin-top: 10px; }
}

/* ---------- Sekcia 8: Rozdelená panoráma ---------- */
.sec-splitpan{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.splitpan{
  position:relative; display:grid; grid-template-columns: 1fr auto 1fr;
  gap:12px; align-items:start; margin-top:12px;
}
.half .media-img{ aspect-ratio: 7/5; object-fit: cover; border-radius: 14px; transition: transform .25s ease; }
.split-spine{
  width: 4px; align-self: stretch; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,122,26,.3), rgba(255,122,26,.14));
  box-shadow: 0 0 0 6px rgba(255,255,255,.8);
}
@media (hover:hover){
  .half.left  .media-img{ transform: translateX(0); }
  .half.right .media-img{ transform: translateX(0); }
  .splitpan:hover .half.left  .media-img{ transform: translateX(-4px); }
  .splitpan:hover .half.right .media-img{ transform: translateX(4px); }
}
@media (max-width: 640px){
  .splitpan{ grid-template-columns: 1fr; }
  .split-spine{ display:none; }
}

/* ---------- Sekcia 9: Lístky radosti ---------- */
.sec-leaves{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.leaves-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px; align-items:center;
}
.leaf{
  position:relative; text-align:center; animation: leaf-sway 5.5s ease-in-out infinite;
}
@keyframes leaf-sway{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(1.2deg); }
}
.leaf .media-img{
  aspect-ratio: 7/5; object-fit: cover;
  /* listová maska */
  -webkit-clip-path: path("M0.50,0 C0.70,0.05 0.95,0.28 1,0.50 C0.95,0.72 0.70,0.95 0.50,1 C0.30,0.95 0.05,0.72 0,0.50 C0.05,0.28 0.30,0.05 0.50,0 Z");
          clip-path: path("M0.50,0 C0.70,0.05 0.95,0.28 1,0.50 C0.95,0.72 0.70,0.95 0.50,1 C0.30,0.95 0.05,0.72 0,0.50 C0.05,0.28 0.30,0.05 0.50,0 Z");
  border-radius: 12px;
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}
.l-left  { justify-self: end;  }
.l-right { justify-self: start; }

@media (max-width: 980px){
  .leaves-grid{ grid-template-columns: 1fr; }
  .l-left, .l-right{ justify-self: center; }
}
/* --- FIX: bannery не накладываются на текст под секцией --- */
.sec-banners{ overflow: visible; }                 /* тени можно, но не мешают */
.banner-rail{
  position: relative;
  z-index: 1;                                      /* сами баннеры ниже текста */
  margin-bottom: 24px;                             /* зазор перед подписью секции */
}
.banner{ z-index: 1; }
.sec-banners .sec-foot{
  position: relative;
  z-index: 2;                                      /* текст поверх любых теней */
  padding-top: 14px;
  background: #fff;                                /* белая подложка перекрывает тени */
  border-top: 1px dashed rgba(0,0,0,.08);          /* визуальная граница (по желанию) */
}

@media (max-width: 640px){
  .banner-rail{ margin-bottom: 28px; }             /* на мобилке чуть больше */
}
/* --- FIX: Most svetiel не выходит за границы секции --- */
.sec-bridge{
  overflow: hidden;                 /* обрезаем по скруглению секции */
  padding-inline: 18px;             /* чуть больше поля по бокам */
}

.bridge-stage{
  padding-block: 14px 16px;         /* запас сверху/снизу для теней */
  overflow: visible;
}

/* точки моста строго внутри контейнера */
.bridge-dots{
  left: 0; right: 0;                /* было -5% / -5% */
  transform: rotate(-6deg);
}

/* таблетки гарантированно вписываются по ширине */
.bridge-pill{
  width: min(300px, calc(100% - 24px));
  text-align: center;
}
.bridge-pill .caption{
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* аккуратные координаты без выезда за край */
.b-left  { left: 4%;  top: 34%; transform: none; }
.b-mid   { left: 50%; top: 16%; transform: translateX(-50%); }
.b-right { right: 4%; top: 34%; transform: none; }

/* мобильная колонка как и раньше — всё внутри секции */
@media (max-width: 980px){
  .bridge-dots{ display: none; }
  .bridge-pill{
    position: relative; left: auto; right: auto; top: auto;
    transform: none; margin-top: 10px; width: 100%;
  }
}
/* ---------- Sekcia 10: Medová stopa — hex trail ---------- */
.sec-hextrail{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.hextrail-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
  align-items:end; position:relative;
}
.hexstep .media-img{
  aspect-ratio: 7/5; object-fit:cover; border-radius:12px;
  /* šesťuholníková maska */
  -webkit-clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
          clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  transition: transform .25s ease;
}
.hx-a{ transform: translateY(10px); }
.hx-b{ transform: translateY(-6px); }
.hexstep:hover .media-img{ transform: scale(1.03); }

@media (max-width: 640px){
  .hextrail-grid{ grid-template-columns: 1fr; }
  .hx-a, .hx-b{ transform:none; }
}

/* ---------- Sekcia 11: Stôl ako partitúra — pás s výrezmi ---------- */
.sec-tablescore{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.score-band{
  position:relative; margin-top:12px; padding:18px 12px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,122,26,.10), rgba(255,122,26,.04));
}
.score-band::before,
.score-band::after{
  content:""; position:absolute; left:-8%; right:-8%; height:28px;
  background:#fff; border-radius: 999px;
}
.score-band::before{ top:-14px; }
.score-band::after{ bottom:-14px; }
.note-card{ text-align:center; }
.note-card .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; box-shadow: 0 14px 28px rgba(0,0,0,.10); }
.note-card .caption{ background: rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

@media (min-width: 981px){
  .score-band{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
}
@media (max-width: 980px){
  .score-band{ display:grid; grid-template-columns: 1fr; gap:16px; }
}

/* ---------- Sekcia 12: Pohľadnice večera — polaroidy ---------- */
.sec-postcards{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; position:relative; overflow:visible;
}
.cards-overlap{
  position:relative; margin-top:12px; min-height: 260px;
}
.card-polaroid{
  position:absolute; width:min(300px, 80vw);
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  box-shadow: 0 18px 30px rgba(0,0,0,.10);
  padding:10px 10px 12px; text-align:center;
}
.card-polaroid .media-img{
  width:100%; aspect-ratio:7/5; object-fit:cover; border-radius:8px;
}
.card-polaroid .caption{
  margin-top:8px; background:rgba(255,255,255,.92);
  font-family: Merriweather, Georgia, serif;
}
.p-one{ left: 6%; top: 16%; transform: rotate(-2.2deg); }
.p-two{ right: 6%; top: 24%; transform: rotate(1.6deg); }

@media (max-width: 980px){
  .cards-overlap{ min-height: 0; }
  .card-polaroid{
    position:relative; left:auto; right:auto; top:auto; transform:none;
    width:100%; margin-top:10px;
  }
}
/* ---------- Sekcia 13: Kruhový index ---------- */
.sec-circleindex{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; position:relative; overflow:visible;
}
.ring-stage{ position:relative; min-height: 320px; }
.circle-ring{ position:absolute; inset:0; width:100%; height:320px; }
.cnode{
  position:absolute; width:min(300px, 80vw); text-align:center;
}
.cnode .media-img{ aspect-ratio:1/1; object-fit:cover; border-radius:9999px; box-shadow:0 14px 32px rgba(0,0,0,.12); }
.cnode .caption{ background:rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

.cn-left{ left: 8%;  top: 22%; }
.cn-right{ right: 8%; top: 38%; }

@media (max-width: 980px){
  .ring-stage{ min-height: 0; }
  .circle-ring{ display:none; }
  .cnode{ position:relative; left:auto; right:auto; top:auto; margin-top:10px; width:100%; }
}

/* ---------- Sekcia 14: Meandrová reťaz ---------- */
.sec-meanderchain{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; position:relative; overflow:hidden;
}
.chain{ position:relative; min-height:220px; }
.chain-path{ position:absolute; inset:0; width:100%; height:220px; filter:drop-shadow(0 8px 18px rgba(255,122,26,.25)); }
.chain-chip{ position:absolute; width:min(320px, 80vw); text-align:center; }
.chain-chip .media-img{ aspect-ratio:7/5; object-fit:cover; border-radius:12px; box-shadow:0 14px 28px rgba(0,0,0,.10); }
.chain-chip .caption{ background:rgba(255,255,255,.92); display:inline-block; margin-top:8px; }
.ch-left{ left:4%;  top: 8%; }
.ch-right{ right:4%; top: 46%; }

@media (max-width: 980px){
  .chain{ min-height:0; }
  .chain-path{ display:none; }
  .chain-chip{ position:relative; left:auto; right:auto; top:auto; width:100%; margin-top:10px; }
}

/* ---------- Sekcia 15: Mini backstage — letenka ---------- */
.sec-miniback{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; position:relative; overflow:visible;
}
.ticket-wrap{
  display:grid; grid-template-columns: minmax(0, 360px) 1fr; gap:18px; align-items:start; margin-top:12px;
}
.ticket{
  position:relative; padding:12px; border-radius:18px; background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.ticket::before,
.ticket::after{ /* perforácie */
  content:""; position:absolute; left:16px; right:16px; height:14px;
  background: radial-gradient(circle at 6px 50%, rgba(0,0,0,.10) 3px, transparent 4px) repeat-x;
}
.ticket::before{ top:-7px; }
.ticket::after{ bottom:-7px; }
.ticket .media-img{ width:100%; max-width:350px; aspect-ratio:5/7; object-fit:cover; border-radius:12px; }
.ticket .caption{ text-align:center; background:rgba(255,255,255,.92); margin-top:8px; }

.track{
  list-style: none; margin:0; padding:6px 0 0 0; position:relative;
}
.track li{
  position:relative; padding-left:18px; margin: 8px 0;
}
.track li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%;
  background:var(--hh-orange); box-shadow:0 0 0 6px rgba(255,122,26,.15);
}

@media (max-width: 980px){
  .ticket-wrap{ grid-template-columns: 1fr; }
}

/* ---------- Sekcia 16: Zvukomer nálady ---------- */
.sec-soundmeter{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; position:relative; overflow:hidden;
}
.meter{ position:relative; }
.bars{
  position:absolute; inset: 12px 12px auto 12px; height: 66px; border-radius:10px;
  background:
    linear-gradient(90deg, rgba(255,122,26,.18) 0 6%, transparent 6% 10%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 10px);
  animation: bars-pulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bars-pulse{
  0%,100%{ transform: translateX(-2%); opacity:.9; }
  50%{ transform: translateX(2%); opacity:.7; }
}
.wavecard{ position:relative; z-index:1; text-align:center; margin-top: 88px; }
.wavecard .media-img{
  aspect-ratio:7/5; object-fit:cover;
  -webkit-clip-path: polygon(0 8%, 12% 12%, 24% 6%, 36% 14%, 48% 8%, 60% 12%, 72% 6%, 84% 14%, 100% 8%, 100% 92%, 84% 88%, 72% 94%, 60% 86%, 48% 92%, 36% 86%, 24% 94%, 12% 88%, 0 92%);
          clip-path: polygon(0 8%, 12% 12%, 24% 6%, 36% 14%, 48% 8%, 60% 12%, 72% 6%, 84% 14%, 100% 8%, 100% 92%, 84% 88%, 72% 94%, 60% 86%, 48% 92%, 36% 86%, 24% 94%, 12% 88%, 0 92%);
  border-radius:12px; box-shadow:0 14px 28px rgba(0,0,0,.10);
}
.wavecard .caption{ background:rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

@media (max-width: 640px){
  .bars{ height: 54px; }
  .wavecard{ margin-top: 76px; }
}
/* FIX: Lístky radosti — кроссбраузерная маска */
.leaf .media-img{
  display:block;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  /* Фолбэк (работает везде): эллипс-лист */
  clip-path: ellipse(60% 50% at 50% 50%);
  -webkit-clip-path: ellipse(60% 50% at 50% 50%);
  border-radius: 12px;
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}

/* Если браузер умеет path() — включаем фигурный лист */
@supports (clip-path: path("M 0 0 L 1 0 L 1 1 L 0 1 Z")) {
  .leaf .media-img{
    /* проценты — надёжнее, чем 0..1 в некоторых движках */
    clip-path: path("M 50% 0% C 72% 5% 95% 28% 100% 50% C 95% 72% 72% 95% 50% 100% C 28% 95% 5% 72% 0% 50% C 5% 28% 28% 5% 50% 0% Z");
    -webkit-clip-path: path("M 50% 0% C 72% 5% 95% 28% 100% 50% C 95% 72% 72% 95% 50% 100% C 28% 95% 5% 72% 0% 50% C 5% 28% 28% 5% 50% 0% Z");
  }
}