/* =======================
   root.html — S E K C I E
   ======================= */

.sec{
  margin: 42px 0;
}
.sec-head{ max-width: 900px; }
.sec-title{
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--hh-orange-deep);
  margin: 0 0 8px;
}
.sec-lead{
  margin: 0 0 16px;
  color: #2a2a2a;
}

/* --- Sekcia 1: Oranžová ouvertúra --- */
.sec-ouvertura{
  position: relative;
  padding: 28px 16px 20px;
  border-radius: 22px;
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(255,122,26,.10), transparent 60%),
    radial-gradient(600px 220px at 90% 0%, rgba(168,85,247,.08), transparent 60%),
    #fff;
  box-shadow: var(--hh-shadow);
  overflow: hidden;
}

/* dekoratívna stuha s leskom */
.ouvertura-stage{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  margin-top: 14px;
}
.ribbon{
  position: absolute; inset: auto -40px -22px -40px; height: 120px; z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,122,26,.9), rgba(255,122,26,.7)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 8px, rgba(255,255,255,.02) 8px 16px);
  clip-path: path("M0,40 C140,0 260,80 400,40 S660,0 800,40 V120 H0 Z");
  filter: saturate(110%) contrast(105%);
  transform: translateY(16px);
}
.ribbon-sheen{
  position:absolute; inset: 8px; border-radius: 16px; background:
   linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 65%, rgba(255,255,255,0));
  mix-blend-mode: soft-light; opacity: .7; animation: sheen-move 6s ease-in-out infinite;
}
@keyframes sheen-move{
  0%,100%{ transform: translateX(-6%) }
  50%{ transform: translateX(6%) }
}

.stage-item{ position: relative; z-index: 1; }
.caption{
  font-size: .92rem; color: #333; margin-top: 8px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.06);
  padding: 8px 10px; border-radius: 12px;
}

/* „oblúk“ rozloženie obrázkov na desktop */
@media (min-width: 981px){
  .stage-item:nth-child(2){ transform: translateY(-16px) rotate(-1.2deg); }
  .stage-item:nth-child(3){ transform: translateY(8px) rotate(1.2deg); }
  .stage-item:nth-child(1):hover,
  .stage-item:nth-child(2):hover,
  .stage-item:nth-child(3):hover{
    transform: translateY(-6px) scale(1.02) !important;
  }
}

/* spodná poznámka */
.sec-foot{
  margin-top: 18px; color: #374151;
  border-top: 1px dashed rgba(0,0,0,.12);
  padding-top: 12px;
}

/* Mobile & tablet vylepšenia */
@media (max-width: 980px){
  .ouvertura-stage{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .ouvertura-stage{ grid-template-columns: 1fr; }
  .ribbon{ height: 90px; }
}
/* было: clip-path: path(...) — обрезало по 800px */
/* стало: резиновая волна по всей ширине контейнера */
.ribbon{
  position: absolute;
  left: -40px; right: -40px; bottom: -22px; height: 120px; z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,122,26,.9), rgba(255,122,26,.7)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 8px, rgba(255,255,255,.02) 8px 16px);
  /* резиновая волна */
  clip-path: polygon(
    0% 36%,
    12% 24%,
    25% 34%,
    38% 22%,
    52% 30%,
    66% 24%,
    80% 34%,
    92% 26%,
    100% 34%,
    100% 100%,
    0% 100%
  );
  transform: translateY(16px);
}

/* чуть ниже можно оставить как было */
.ribbon-sheen{
  position:absolute; inset: 8px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 65%, rgba(255,255,255,0));
  mix-blend-mode: soft-light; opacity: .7; animation: sheen-move 6s ease-in-out infinite;
}

/* Дополнительно: на очень узких экранах делаем волну мягче */
@media (max-width: 640px){
  .ribbon{ height: 90px;
    clip-path: polygon(
      0% 48%, 18% 36%, 36% 46%, 54% 34%, 72% 44%, 88% 38%, 100% 46%,
      100% 100%, 0% 100%
    );
  }
}
/* слоистость секции */
.sec-ouvertura{ position: relative; }
.ouvertura-stage{ position: relative; }   /* чтобы .ribbon якорилась к сцене */
.stage-item{ position: relative; z-index: 1; } /* фото над лентой */

/* лента по ширине, не перекрывает клики */
.ribbon{
  position: absolute;
  left: -40px; right: -40px; bottom: -22px; height: 120px;
  z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,122,26,.9), rgba(255,122,26,.7)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 8px, rgba(255,255,255,.02) 8px 16px);
  clip-path: polygon(
    0% 36%, 12% 24%, 25% 34%, 38% 22%, 52% 30%, 66% 24%, 80% 34%, 92% 26%, 100% 34%,
    100% 100%, 0% 100%
  );
  transform: translateY(16px);
}

/* текстовая подложка всегда поверх ленты */
.sec-foot{
  position: relative;
  z-index: 2;
  background: #fff; /* чтобы оранжевый не просвечивал */
}

/* МОБИЛКА — лента внутри сцены и ниже текста */
@media (max-width: 640px){
  .ouvertura-stage{ padding-bottom: 72px; } /* место под волну */
  .ribbon{
    bottom: 0;                 /* больше не вылезает в .sec-foot */
    height: 80px;
    transform: none;           /* без вертикального сдвига */
    clip-path: polygon(        /* мягче волна в узком экране */
      0% 60%, 18% 50%, 36% 62%, 54% 48%, 72% 60%, 88% 52%, 100% 60%,
      100% 100%, 0% 100%
    );
  }
}
/* ---------------- Sekcia 2: Zvukové ostrovy ---------------- */
.sec-ostrovy{
  background:
    radial-gradient(220px 120px at 12% 12%, rgba(255,122,26,.08), transparent 60%),
    radial-gradient(260px 160px at 88% 0%, rgba(168,85,247,.06), transparent 60%),
    #fff;
  border-radius: 22px; box-shadow: var(--hh-shadow); padding: 24px 16px 18px;
}
.islands{
  margin-top: 14px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.island{ position: relative; }
.island::before{
  content:""; position:absolute; inset: -10px -12px -14px -12px; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,122,26,.22), rgba(255,122,26,.08));
  clip-path: polygon(8% 12%, 92% 6%, 96% 40%, 92% 88%, 10% 94%, 4% 56%);
  filter: blur(1px) saturate(110%);
  transition: transform .4s ease;
}
.island:hover::before{ transform: translateY(-4px); }
.island img, .island .caption{ position: relative; z-index:1; }
.pan-zoom{ transition: transform .6s ease; transform-origin: 60% 60%; }
.pan-zoom:hover{ transform: scale(1.06) translateY(-2px); }

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

/* ---------------- Sekcia 3: Program v rytme ---------------- */
.sec-program{
  padding: 26px 16px 18px;
  border-radius: 22px; background:#fff; box-shadow: var(--hh-shadow);
  position: relative; overflow: hidden;
}
.sec-program::after{
  content:""; position:absolute; inset:-40px -20px auto -20px; height: 120px;
  background: linear-gradient(90deg, rgba(255,122,26,.18), rgba(163,230,53,.14), rgba(168,85,247,.14));
  transform: rotate(-2.5deg);
  pointer-events:none;
}
.timeline{
  position: relative; display:grid; grid-template-columns: 1fr 1fr;
  gap: 14px 22px; margin-top: 10px;
}
.tl-step{
  position: relative; padding-left: 18px;
}
.tl-step::before{
  content:""; position:absolute; left: 2px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hh-orange);
  box-shadow: 0 0 0 6px rgba(255,122,26,.15);
}
.timeline::before{
  content:""; position:absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12));
}

/* „Pečiatky“ — malé prekrývajúce foto */
.tl-stamp{ position:absolute; width:min(320px, 42vw); z-index:2; }
.tl-left{ left: 54%; top: -10px; transform: rotate(-2deg); }
.tl-right{ right: 2%; bottom: -8px; transform: rotate(1.8deg); }

@media (max-width: 980px){
  .timeline{ grid-template-columns: 1fr; }
  .tl-left{ left: auto; right: 3%; top: -6px; }
}
@media (max-width: 640px){
  .tl-stamp{ position: relative; width: 100%; transform: none; }
  .tl-left, .tl-right{ left:auto; right:auto; top:auto; bottom:auto; margin-top:8px; }
}

/* ---------------- Sekcia 4: Svetlá & farby — pohyblivá galéria ---------------- */
.sec-svetla{
  border-radius: 22px; background:#fff; box-shadow: var(--hh-shadow);
  padding: 24px 16px 20px; overflow:hidden;
}
.rail{ overflow: hidden; position: relative; }
.track{
  display: grid; grid-auto-flow: column; gap: 16px; align-items: start;
  will-change: transform;
}
.sway{ animation: sway 8s ease-in-out infinite; }
@keyframes sway{
  0%{ transform: translateX(-6%); }
  50%{ transform: translateX(6%); }
  100%{ transform: translateX(-6%); }
}
.chip{ width: min(300px, 80vw); }
.chip .caption{ text-align: center; }

@media (max-width: 640px){
  .chip{ width: 100%; }
}
/* ===== Sekcia 5: Diamantová scéna ===== */
.sec-diamanty{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; overflow:hidden; position:relative;
}
.diamonds{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px; align-items:start; margin-top: 12px;
}
.diamond{
  --size: 230px;
  width: var(--size); height: var(--size);
  margin: 0 auto; position: relative;
  transform: rotate(45deg);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.10));
}
.diamond .media-img{
  width: 100%; height: 100%; max-width: 350px; object-fit: cover;
  border-radius: 18px;
  transform: rotate(-45deg) scale(1.05);
}
.diamond .caption{
  position:absolute; left:50%; bottom:-10px; transform: translate(-50%, 100%) rotate(-45deg);
  background: rgba(255,255,255,.9);
}
.diamond.d2{ margin-top: 34px; }
.diamond.d3{ margin-top: -6px; }
.diamond.d4{ margin-top: 26px; }

@media (max-width: 1100px){ .diamond{ --size: 200px; } }
@media (max-width: 980px){
  .diamonds{ grid-template-columns: 1fr 1fr; }
  .diamond{ --size: 190px; }
}
@media (max-width: 640px){
  .diamonds{ grid-template-columns: 1fr; }
  .diamond{ --size: min(260px, 80vw); transform: none; }
  .diamond .media-img{ transform: none; }
  .diamond .caption{ position: static; transform:none; margin-top:8px; }
}

/* ===== Sekcia 6: Backstage — filmstrip ===== */
.sec-filmstrip{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.strip-rail{
  position:relative; padding: 18px 12px; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,122,26,.10), rgba(255,122,26,.04));
}
.strip-rail::before, .strip-rail::after{
  content:""; position:absolute; left: 8px; right: 8px; height: 10px;
  background:
    radial-gradient(circle at 6px 50%, #fff 4px, rgba(0,0,0,.12) 4px, transparent 5px) repeat-x;
}
.strip-rail::before{ top: 6px; }
.strip-rail::after{ bottom: 6px; }

.filmstrip{
  display:flex; gap:16px; align-items:flex-start; justify-content:center; flex-wrap:wrap;
}
.frame{ width: min(340px, 88vw); }
.frame .media-img{ aspect-ratio: 7/5; object-fit: cover; }
.frame .caption{ text-align:center; }
.frame:hover .media-img{ filter: contrast(1.05) saturate(1.08); }

@media (max-width: 640px){
  .filmstrip{ gap:12px; }
}

/* ===== Sekcia 7: Mapa nálad ===== */
.sec-moodmap{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.moodstage{ position: relative; min-height: 260px; }
.moodpath{
  position:absolute; inset: 0 0 0 0; width: 100%; height: 260px;
  filter: drop-shadow(0 8px 18px rgba(255,122,26,.25));
}
.pin{ position:absolute; z-index:2; width: min(350px, 80vw); }
.pin .caption{ background: rgba(255,255,255,.9); }

.pin-a{ left: 6%; top: 28%; transform: rotate(-2deg); }
.pin-b{ right: 4%; top: 6%; transform: rotate(1.8deg); }

@media (max-width: 980px){
  .pin-a{ left: 2%; top: 36%; }
  .pin-b{ right: 2%; top: 10%; }
}
@media (max-width: 640px){
  .moodstage{ min-height: 0; }
  .moodpath{ display:none; }
  .pin{ position: relative; left:auto; right:auto; top:auto; transform:none; margin-top: 12px; }
}
/* --- Sekcia 3: Program v rytme — FIX --- */
.timeline{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  margin-top: 10px;
  /* резерв под верхний/нижний штамп, чтобы не ехали на текст */
  padding-top: 72px;
  padding-bottom: 90px;
}
.tl-step{
  position: relative;
  z-index: 3;            /* текст всегда над картинками */
  padding-left: 18px;
}
.tl-step::before{
  content:""; position:absolute; left: 2px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hh-orange);
  box-shadow: 0 0 0 6px rgba(255,122,26,.15);
}
.timeline::before{
  content:""; position:absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12));
}

/* „Pečiatky“ — уже не лезут на текст */
.tl-stamp{
  position: absolute;
  width: min(280px, 32vw);    /* компактнее на широких экранах */
  z-index: 1;                 /* ниже текста */
  pointer-events: none;       /* клики не перехватывают */
}
.tl-left{  left: 55%; top: 64px; transform: rotate(-2deg); }
.tl-right{ right: 2%;  bottom: 24px; transform: rotate(1.8deg); }

/* адаптивные корректировки */
@media (max-width: 1200px){
  .tl-left{ left: 52%; }
  .tl-right{ right: 1%; }
}
@media (max-width: 980px){
  .timeline{ padding-top: 60px; padding-bottom: 60px; }
  .tl-left{ left: 48%; top: 72px; }
  .tl-right{ right: 2%; bottom: 16px; }
}
@media (max-width: 640px){
  .timeline{ padding: 0; grid-template-columns: 1fr; }
  .tl-stamp{
    position: relative; width: 100%; pointer-events: auto;
    transform: none; margin-top: 10px;
  }
  .tl-left, .tl-right{ left:auto; right:auto; top:auto; bottom:auto; }
}
/* ---------- Sekcia 8: Terasové momenty — schody ---------- */
.sec-stairs{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.sec-stairs::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-30px; height:120px;
  background: linear-gradient(180deg, rgba(255,122,26,.15), rgba(255,122,26,0));
  transform: rotate(-2deg);
}
.stairs-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-top:12px;
  align-items:end;
}
.step{ position:relative; }
.step .media-img{ border-radius: 22px 22px 14px 14px / 18px 18px 14px 14px; }
.step .caption{ background: rgba(255,255,255,.9); }

.s1{ transform: translateY(36px); }
.s2{ transform: translateY(18px); }
.s3{ transform: translateY(0); }
.s4{ transform: translateY(-12px); }

@media (max-width: 1100px){
  .stairs-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .s1{ transform: translateY(28px); }
  .s4{ transform: translateY(6px); }
}
@media (max-width: 820px){
  .stairs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s1{ transform: translateY(18px); }
  .s2{ transform: translateY(0); }
  .s3{ transform: translateY(12px); }
  .s4{ transform: translateY(-6px); }
}
@media (max-width: 640px){
  .stairs-grid{ grid-template-columns: 1fr; }
  .s1,.s2,.s3,.s4{ transform:none; }
}

/* ---------- Sekcia 9: Duet scéna — kruhy ---------- */
.sec-duet{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.duet-wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:center; margin-top: 12px;
  position: relative;
}
.circle{
  position: relative; width: min(320px, 80vw); margin: 0 auto;
}
.circle .media-img{
  width: 100%; height: auto; max-width: 350px;
  border-radius: 9999px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.circle::before{
  content:""; position:absolute; inset: -8px; border-radius: 9999px;
  background: conic-gradient(from 0deg, rgba(255,122,26,.55), rgba(34,211,238,.35), rgba(163,230,53,.35), rgba(168,85,247,.35), rgba(255,122,26,.55));
  filter: blur(6px); opacity: .7; z-index:0;
  animation: orbit-ring 10s linear infinite;
}
@keyframes orbit-ring{ to{ transform: rotate(360deg); } }

.c-mini{ width: min(220px, 70vw); }
.duet-wrap .caption{ text-align:center; position: relative; z-index: 1; }

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

/* ---------- Sekcia 10: Rekvizity — tkaná páska ---------- */
.sec-weave{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:hidden;
}
.weave-band{
  position:relative; margin-top:12px; padding:16px 10px; border-radius:16px;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 8px, rgba(0,0,0,0) 8px 18px),
    linear-gradient(180deg, rgba(255,122,26,.12), rgba(255,122,26,.06));
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px;
}
.tile{
  position:relative; filter: drop-shadow(0 10px 24px rgba(0,0,0,.10));
  transform: translateY(var(--jitter, 0px));
  transition: transform .25s ease;
}
.tile:hover{ transform: translateY(calc(var(--jitter, 0px) - 6px)); }
.tile .media-img{
  /* šesťuholníková maska */
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  border-radius: 12px;
}
.t1{ --jitter: 8px; }
.t2{ --jitter: -4px; }
.t3{ --jitter: 10px; }
.weave-band .caption{ text-align:center; background: rgba(255,255,255,.9); }

@media (max-width: 980px){
  .weave-band{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .weave-band{ grid-template-columns: 1fr; }
  .t1,.t2,.t3{ --jitter: 0px; }
}
/* ---------- Sekcia 11: Živá réžia — svetelné schémy ---------- */
.sec-lights{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 20px; position:relative; overflow:hidden;
}
.mode-toggles{ display:flex; gap:8px; flex-wrap:wrap; }
.mode-btn{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  background: linear-gradient(180deg, rgba(168,85,247,.08), rgba(168,85,247,.03));
  cursor:pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.mode-btn.is-active{ background: rgba(255,122,26,.18); border-color: rgba(255,122,26,.35); }
.mode-btn:hover{ transform: translateY(-2px); }

.light-stage{
  position:relative; margin-top:12px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:16px;
  grid-template-areas:
    "A B"
    "A C";
}
.light-a{ grid-area: A; }
.light-b{ grid-area: B; }
.light-c{ grid-area: C; }
.light-item .caption{ background: rgba(255,255,255,.9); }

/* цветной „overlay“ по режимам */
.light-stage::before{
  content:""; position:absolute; inset:-6px; z-index:0; border-radius:20px;
  background: linear-gradient(135deg, var(--g1, rgba(255,122,26,.18)), var(--g2, rgba(34,211,238,.10)));
  mix-blend-mode: soft-light; pointer-events:none; opacity:.85; transition: background .25s ease;
}
.sec-lights[data-mode="orange"] .light-stage{ --g1: rgba(255,122,26,.22); --g2: rgba(255,200,160,.14); }
.sec-lights[data-mode="party"]  .light-stage{ --g1: rgba(168,85,247,.22);  --g2: rgba(34,211,238,.16); }
.sec-lights[data-mode="calm"]   .light-stage{ --g1: rgba(255,255,255,.18);  --g2: rgba(34,211,238,.12); }

@media (max-width: 980px){
  .light-stage{ grid-template-columns: 1fr; grid-template-areas: "A" "B" "C"; }
}

/* ---------- Sekcia 12: Meandre galérie ---------- */
.sec-meander{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 20px; position:relative; overflow:hidden;
}
.sec-meander::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-20px; height:120px;
  background:
    linear-gradient(90deg, rgba(255,122,26,.16), rgba(163,230,53,.12), rgba(168,85,247,.12), rgba(34,211,238,.12));
  transform: rotate(2deg);
}
.meander-grid{
  position:relative; display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; align-items:end; margin-top:12px;
}
.m1{ transform: translateY(18px); }
.m2{ transform: translateY(-8px); }
.m3{ transform: translateY(10px); }
.meander-grid .caption{ background: rgba(255,255,255,.9); }

@media (max-width: 980px){
  .meander-grid{ grid-template-columns: 1fr 1fr; }
  .m3{ grid-column: 1 / -1; transform:none; }
}
@media (max-width: 640px){
  .meander-grid{ grid-template-columns: 1fr; }
  .m1,.m2,.m3{ transform:none; }
}

/* ---------- Sekcia 13: Tím — L-rámiky ---------- */
.sec-teammini{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 20px; position:relative; overflow:hidden;
}
.team-mini{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
}
.lframe{ position:relative; padding:12px 12px 0; }
.lframe::before, .lframe::after{
  content:""; position:absolute; background: currentColor; opacity:.15;
}
.lframe::before{ left:10px; top:10px; width:48px; height:3px; border-radius:3px; }
.lframe::after{ left:10px; top:10px; width:3px; height:48px; border-radius:3px; }
.lf-a{ color: var(--hh-orange); }
.lf-b{ color: var(--hh-accent-3); }
.lframe .caption{ background: rgba(255,255,255,.92); }

@media (max-width: 980px){
  .team-mini{ grid-template-columns: 1fr; }
}
/* Видимая разница режимов: фильтры + оверлей */
.light-item { position: relative; }
.light-item img{
  will-change: filter;
  transition: filter .25s ease;
}
.light-item::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  pointer-events:none; opacity:0; transition: opacity .25s ease;
  mix-blend-mode: soft-light;
}

/* ORANGE — теплое ядро */
.sec-lights[data-mode="orange"] .light-item img{
  filter: saturate(1.08) brightness(1.03) hue-rotate(-6deg);
}
.sec-lights[data-mode="orange"] .light-item::after{
  background: radial-gradient(60% 60% at 40% 40%, rgba(255,122,26,.28), rgba(255,122,26,0));
  opacity:.55;
}

/* PARTY — контраст/насыщенность */
.sec-lights[data-mode="party"] .light-item img{
  filter: saturate(1.25) contrast(1.08) hue-rotate(14deg);
}
.sec-lights[data-mode="party"] .light-item::after{
  background: radial-gradient(65% 65% at 60% 50%, rgba(168,85,247,.32), rgba(34,211,238,.22), rgba(0,0,0,0));
  opacity:.6;
}

/* CALM — спокойный, мягкий */
.sec-lights[data-mode="calm"] .light-item img{
  filter: saturate(.9) brightness(1.04) contrast(.96);
}
.sec-lights[data-mode="calm"] .light-item::after{
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.25), rgba(34,211,238,.14), rgba(0,0,0,0));
  opacity:.5;
}

/* чуть заметнее активная кнопка */
.mode-btn.is-active{
  background: rgba(255,122,26,.18);
  border-color: rgba(255,122,26,.35);
  box-shadow: 0 6px 18px rgba(255,122,26,.18);
}
/* ---------- Sekcia 14: Scéna bez stresu — manuál ---------- */
.sec-manual{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 20px; position:relative; overflow:hidden;
}
.sec-manual::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-24px; height:130px;
  background: linear-gradient(90deg, rgba(255,122,26,.12), rgba(34,211,238,.10), rgba(168,85,247,.10));
  transform: rotate(-2.2deg);
}
.notes-wrap{
  margin-top:12px;
  display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:16px;
}
.note{
  position:relative; padding:14px 14px 12px; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.note h3{ margin: 4px 0 8px; font-size: 1.05rem; color:#0f0f0f; }
.note::before, .note::after{
  content:""; position:absolute; width:64px; height:18px; top:-10px;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.5));
  border:1px solid rgba(0,0,0,.08); border-radius:4px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.note::before{ left: 14%; transform: rotate(-8deg); }
.note::after{ right: 14%; transform: rotate(7deg); }

.n-a{ border-color: rgba(255,122,26,.28); }
.n-b{ border-color: rgba(34,211,238,.28); }
.n-c{ border-color: rgba(168,85,247,.28); }

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

/* ---------- Sekcia 15: Priestor ako melódia — text po krivke ---------- */
.sec-textcurve{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 20px; position:relative; overflow:hidden;
}
.curve-wrap{ position:relative; }
.curve-svg{ width:100%; height:auto; display:block; }
.draw-path{ transition: stroke-dashoffset 1500ms ease; }
.flowtext{
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  fill: #1a1a1a;
}

/* slovné „piny“ pozdĺž krivky (без obrázkov) */
.curve-tags{
  list-style:none; margin:0; padding:0;
}
.tag{
  position:absolute; z-index:2; padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  font-size: .9rem;
}
.t1{ left: 2%;  bottom: 18%; }
.t2{ left: 34%; bottom: 38%; }
.t3{ left: 54%; bottom: 26%; }
.t4{ left: 74%; bottom: 52%; }
.t5{ right: 2%; bottom: 66%; }

@media (max-width: 980px){
  .t2{ left: 30%; }
  .t3{ left: 52%; }
  .t4{ left: 72%; }
}
@media (max-width: 640px){
  .tag{ position:static; display:inline-block; margin:6px 6px 0 0; }
}
/* --- Универсально для карточек с изображениями --- */
.media-img{ max-width:100%; width:100%; height:auto; display:block; }

/* СЕКЦИЯ 10: Weave — устойчивость и без горизонтального скролла */
.sec-weave .media-img{ aspect-ratio: 7 / 5; object-fit: cover; }
.weave-band, .tile{ overflow: clip; } /* обрезаем тени/выступы внутри контейнера */
.tile .media-img{
  /* дублируем для WebKit */
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path:        polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.weave-band .caption{ max-width: 100%; word-break: break-word; }

/* Плейсхолдер, если картинки нет (используем :has) */
figure:has(img.is-broken)::before{
  content:""; display:block; width:100%; aspect-ratio:7/5; border-radius:12px;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 8px, rgba(0,0,0,0) 8px 18px),
    linear-gradient(180deg, rgba(255,122,26,.12), rgba(255,122,26,.06));
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* СЕКЦИЯ 11: усиление видимости переключений, даже если фото не грузятся */
.sec-lights[data-mode="orange"] .light-stage{ --g1: rgba(255,122,26,.26); --g2: rgba(255,200,160,.18); }
.sec-lights[data-mode="party"]  .light-stage{ --g1: rgba(168,85,247,.30);  --g2: rgba(34,211,238,.22); }
.sec-lights[data-mode="calm"]   .light-stage{ --g1: rgba(255,255,255,.24);  --g2: rgba(34,211,238,.18); }

/* На очень узких экранах подписи не выходят за край */
.caption{ max-width: 100%; }
/* ---------- Sekcia 10 (nová): Rekvizity — kapsové panely ---------- */
.sec-props{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative;
}

.pockets{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; margin-top:12px; align-items:start;
}

.pocket{
  position:relative; border-radius:18px;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 10px, rgba(0,0,0,0) 10px 22px),
    linear-gradient(180deg, rgba(255,122,26,.10), rgba(255,122,26,.06));
  padding:14px 14px 12px; /* внутри достаточно места для подписи */
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: visible;       /* ничего не режем */
  display: grid;
  grid-template-rows: auto auto auto; /* tab, img, caption */
  row-gap: 10px;
  contain: content;
}
.pocket::after{ /* маленький «загиб» в правом верхнем углу */
  content:""; position:absolute; top:10px; right:10px; width:18px; height:18px;
  background: #fff; border-radius: 3px;
  box-shadow: -3px -3px 0 0 rgba(255,255,255,.85) inset, 0 1px 3px rgba(0,0,0,.06);
  transform: rotate(45deg);
}

.pocket-tab{
  align-self:start; justify-self:start;
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  font-weight:600; color:#333;
}

.pocket .media-img{
  width:100%; max-width:350px; aspect-ratio: 7 / 5;
  object-fit: cover; border-radius:12px;
  justify-self:center;
}

.pocket .caption{
  width:100%; max-width:350px; justify-self:center;
  margin:0; padding:8px 10px; border-radius:12px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  overflow-wrap:anywhere; word-break: break-word; text-wrap: pretty;
}

/* Hover лёгкий — без сильных трансформов, чтобы не появлялся горизонтальный скролл */
.pocket:hover{ filter: saturate(1.02); }

@media (max-width: 980px){
  .pockets{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .pockets{ grid-template-columns: 1fr; }
  .sec-props{ padding-inline: 18px; }
}