/* ======================
   Ponuka (page 3) CSS
   ====================== */

.sec3{ margin: 42px 0; }

/* ---------- Sekcia 1: Cenníkové vlny ---------- */
.sec-pricewaves{
  position:relative; padding:26px 16px 22px; border-radius:22px; background:#fff;
  box-shadow: var(--hh-shadow); overflow:hidden;
}
.waves{ position:relative; margin-top:6px; }
.wave-bg{
  position:absolute; left:-10%; right:-10%; top:60px; height:120px; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,122,26,.22), rgba(255,122,26,.10));
  clip-path: polygon(0% 60%, 10% 55%, 22% 58%, 34% 52%, 46% 56%, 58% 50%, 70% 54%, 84% 52%, 100% 56%, 100% 100%, 0 100%);
  filter: saturate(110%);
}
.badge{
  position:relative; display:inline-grid; place-items:center; padding:10px 12px;
  margin: 18px 12px 8px 0; border-radius:999px; z-index:1;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  min-width: 180px; text-align:center;
}
.badge .price{ display:block; font-weight:700; color:var(--hh-orange); }
.b1{ transform: rotate(-2deg); }
.b2{ transform: translateY(-8px); }
.b3{ transform: rotate(1.8deg); }

.price-tiles{
  margin-top: 14px;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px;
}
.ptile .media-img{ aspect-ratio: 7/5; object-fit: cover; border-radius:14px; }
.ptile .caption{ background: rgba(255,255,255,.92); }

@media (max-width: 980px){
  .price-tiles{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .price-tiles{ grid-template-columns: 1fr; }
  .badge{ min-width: 0; width: 100%; }
}

/* ---------- Sekcia 2: Balíky — stohované kapsy ---------- */
.sec-bundles{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.bundle-stack{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top:12px;
}
.bundle{
  position:relative; padding:14px; 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,.05));
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.ribbon{
  position:absolute; top:12px; left:-8px; padding:6px 12px 6px 16px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 0 12px 12px 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  font-weight:700; color:#1f2937;
}
.bundle .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; }
.bundle .caption{ margin-top:8px; background: rgba(255,255,255,.92); }

.bun-basic{ transform: translateY(10px) rotate(-0.6deg); }
.bun-plus { transform: translateY(0); }
.bun-grand{ transform: translateY(-8px) rotate(0.6deg); }

@media (max-width: 980px){
  .bundle-stack{ grid-template-columns: 1fr; }
  .bun-basic,.bun-plus,.bun-grand{ transform:none; }
}

/* ---------- Sekcia 3: Záruky — kruhové pečate ---------- */
.sec-seals{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.seal-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px; align-items:start;
}
.seal{
  position:relative; text-align:center;
}
.seal::before{ /* глянец */
  content:""; position:absolute; inset:-6px; border-radius:9999px;
  background: conic-gradient(from 0deg, rgba(255,255,255,.65), rgba(255,255,255,0) 40%);
  filter: blur(8px); z-index:0; opacity:.7;
  animation: spin 12s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.seal .media-img{ position:relative; z-index:1; width:100%; max-width:350px; aspect-ratio:1/1; object-fit:cover; border-radius:9999px; box-shadow:0 14px 32px rgba(0,0,0,.12); }
.seal .caption{ position:relative; z-index:1; background:rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

@media (max-width: 640px){
  .seal-row{ grid-template-columns: 1fr; }
}
.badge .price{ white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ---------- Sekcia 4: Doplnky — polmesiace ---------- */
.sec-addons{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.moon-rail{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; margin-top:12px; align-items:end;
}
.moon .media-img{
  aspect-ratio: 7/5; object-fit:cover;
  /* polmesiacová maska */
  -webkit-clip-path: ellipse(100% 100% at 50% 0%);
          clip-path: ellipse(100% 100% at 50% 0%);
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}
.m-a{ transform: translateY(10px); }
.m-b{ transform: translateY(-6px); }
.m-c{ transform: translateY(6px); }
.moon .caption{ background: rgba(255,255,255,.92); display:inline-block; margin-top:8px; }

@media (max-width: 980px){
  .moon-rail{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .moon-rail{ grid-template-columns: 1fr; }
  .m-a,.m-b,.m-c{ transform:none; }
}

/* ---------- Sekcia 5: Varianty priestoru — modulárne scénky ---------- */
.sec-layouts{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.mods-grid{
  display:grid;
  grid-template-areas:
    "tall wideA"
    "tall wideB";
  grid-template-columns: 1.1fr .9fr;
  gap:16px; margin-top:12px; align-items:start;
}
.mod{ position:relative; }
.mod.tall   { grid-area: tall; }
.mod.wide-a { grid-area: wideA; }
.mod.wide-b { grid-area: wideB; }

.mod.tall .media-img{ aspect-ratio: 5/7; object-fit:cover; border-radius:14px; }
.mod.wide-a .media-img,
.mod.wide-b .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:14px; }

.mod .caption{ background: rgba(255,255,255,.92); }

@media (max-width: 980px){
  .mods-grid{
    grid-template-areas:
      "tall"
      "wideA"
      "wideB";
    grid-template-columns: 1fr;
  }
}

/* ---------- Sekcia 6: Rezervácia & termín — dvojitá karta ---------- */
.sec-booking{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.book-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
}
.book-card{
  position:relative; padding:12px; border-radius:18px; background:#fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.book-card::after{ /* „odtrhnutý“ roh */
  content:""; position:absolute; top:18px; right:18px; width:22px; height:22px;
  background:#fff; transform: rotate(45deg);
  box-shadow: -4px -4px 0 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(0,0,0,.06);
  border-radius: 3px;
}
.book-card .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; }
.book-card .caption{ background: rgba(255,255,255,.92); margin-top:8px; }

@media (max-width: 980px){
  .book-row{ grid-template-columns: 1fr; }
}
/* ---------- Sekcia 7: Scény na mieru — štvorlístok ---------- */
.sec-customscenes{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; overflow:visible; position:relative;
}
.clover-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
}
.scene-card{
  position:relative; padding:12px; border-radius:18px; background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.scene-card .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; }
.scene-card .caption{ background: rgba(255,255,255,.92); margin-top:8px; }
.scene-card .chip{
  position:absolute; top:12px; left:12px; 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:700; color:#1f2937;
}
.sc-a{ transform: translateY(10px); }
.sc-b{ transform: translateY(-6px); }
.sc-c{ transform: translateY(6px); }
.sc-d{ transform: translateY(-10px); }

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

/* ---------- Sekcia 8: Doprava & regióny — pin panely ---------- */
.sec-regions{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; overflow:visible; position:relative;
}
.region-rail{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px; margin-top:12px; align-items:start;
}
.region-pin{
  position:relative; padding:12px; border-radius:18px; background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.region-pin .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; }
.region-pin .caption{ background: rgba(255,255,255,.92); margin-top:8px; text-align:center; }
.region-pin .pinhead{
  position:absolute; top:-8px; left:20px; width:18px; height:18px; border-radius:50%;
  background: var(--hh-orange); box-shadow: 0 0 0 6px rgba(255,122,26,.18);
}

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

/* ---------- Sekcia 9: Platba & zmluva — dvojitá kapsa ---------- */
.sec-contract{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; overflow:visible; position:relative;
}
.contract-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
}
.paper{
  position:relative; padding:12px; border-radius:18px; background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.paper .perfor{
  position:absolute; top:-7px; left:18px; right:18px; height:14px; border-radius:999px;
  background: radial-gradient(circle at 6px 50%, rgba(0,0,0,.12) 3px, transparent 4px) repeat-x;
}
.paper .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; }
.paper .caption{ background: rgba(255,255,255,.92); margin-top:8px; text-align:center; }

@media (max-width: 980px){
  .contract-row{ grid-template-columns: 1fr; }
}
/* ---------- Sekcia 10: Sklenené vitríny ---------- */
.sec-glasscases{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; overflow:visible; position:relative;
}
.glass-rail{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px; align-items:start;
}
.glass-case{
  position:relative; padding:14px; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  isolation:isolate;
}
.glass-case::before{ /* „sklenený“ okraj */
  content:""; position:absolute; inset:-1px; border-radius:22px; z-index:0;
  background:
    conic-gradient(from 0deg, rgba(255,122,26,.35), rgba(34,211,238,.20), rgba(168,85,247,.20), rgba(255,122,26,.35));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
  opacity: .75; filter: blur(.2px);
}
.glass-case .media-img{ position:relative; z-index:1; aspect-ratio: 7/5; object-fit:cover; border-radius:14px; }
.glass-case .caption{ position:relative; z-index:1; background: rgba(255,255,255,.92); margin-top:8px; text-align:center; }

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

/* ---------- Sekcia 11: Šípová dráha ---------- */
.sec-arrowflow{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; overflow:hidden; position:relative;
}
.arrowstage{ position:relative; min-height:260px; }
.arrowpath{ position:absolute; inset:0; width:100%; height:260px; filter: drop-shadow(0 8px 18px rgba(255,122,26,.25)); }
.af-node{
  position:absolute; width:min(340px, 80vw); text-align:center;
}
.af-node .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:12px; box-shadow: 0 14px 28px rgba(0,0,0,.10); }
.af-node .caption{ background: rgba(255,255,255,.92); display:inline-block; margin-top:8px; }
.af-left{ left: 4%;  top: 24%; }
.af-right{ right: 4%; top: 50%; }

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

/* ---------- Sekcia 12: Komunikácia — bubliny ---------- */
.sec-bubbles{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; overflow:visible; position:relative;
}
.bubble-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px; align-items:start;
}
.bubble-card{
  position:relative; padding:14px; border-radius:16px; background:#fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.bubble-card::after{ /* хвостик бублины */
  content:""; position:absolute; bottom:-10px; width:18px; height:18px; transform: rotate(45deg);
  background:#fff; box-shadow: -3px -3px 0 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(0,0,0,.06);
  border-radius:3px;
}
.bl-left::after{ left:24px; }
.bl-right::after{ right:24px; }
.bubble-card .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:10px; }
.bubble-card .caption{ background: rgba(255,255,255,.92); margin-top:8px; text-align:center; }

@media (max-width: 980px){
  .bubble-row{ grid-template-columns: 1fr; }
}
/* ---------- Sekcia 13: Case study — pasparty ---------- */
.sec-casestudy{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 22px; position:relative; overflow:visible;
}
.case-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:12px;
}
.case{
  position:relative; padding:14px; border-radius:18px; background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.08), 12px 12px 0 -8px rgba(255,122,26,.08);
}
.case .media-img{ aspect-ratio: 7/5; object-fit:cover; border-radius:10px; }
.case .caption{ background: rgba(255,255,255,.92); margin-top:8px; text-align:center; }

/* маленькие «липкие» кусочки ленты */
.case .tape{
  position:absolute; width:56px; height:14px; background:rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.08); border-radius:4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.06);
}
.c-left  .tape.t1{ left:18px;  top:-10px; transform: rotate(-8deg); }
.c-left  .tape.t2{ right:22px; top:-12px; transform: rotate(6deg); }
.c-right .tape.t1{ left:18px;  top:-12px; transform: rotate(-6deg); }
.c-right .tape.t2{ right:22px; top:-10px; transform: rotate(8deg); }

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

/* ---------- Sekcia 14: Panoramatická výzva — scallop banner ---------- */
.sec-panorama{
  background:#fff; border-radius:22px; box-shadow:var(--hh-shadow);
  padding:24px 16px 24px; position:relative; overflow:hidden;
}
.scallop-banner{
  position:relative; margin-top:12px; padding-bottom:14px;
  border-radius:18px; background:#fff; box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.scallop-banner::after{ /* волнистый «scallop» низ */
  content:""; position:absolute; left:-5%; right:-5%; bottom:-12px; height:24px;
  background:
    radial-gradient(12px 12px at 12px 12px, #fff 98%, transparent 100%) repeat-x;
  background-size:24px 24px;
}
.scallop-banner .media-img{
  width:100%; max-width:350px; aspect-ratio: 7/5; object-fit:cover; border-radius:14px;
  display:block; margin-inline:auto;
}
.scallop-banner .caption{ text-align:center; background: rgba(255,255,255,.92); margin-top:8px; }