/* DesignLab Blocks — Banner frontend (classic, rigid layouts) */

/* === Base === */
.dl-banner {
  --dl-min-h: 640px; --dl-dim: .5; --dl-text: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--dl-text);
  background: var(--dl-banner-bg, transparent);
}
.dl-banner * { box-sizing: border-box; }
.dl-banner__slide { position: relative; min-height: var(--dl-min-h); color: var(--dl-text); }
.dl-banner--carousel .dl-banner__viewport { position: relative; min-height: var(--dl-min-h); }
.dl-banner--carousel .dl-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.dl-banner--carousel .dl-banner__slide.is-active { opacity: 1; pointer-events: auto; }

/* === Cover (full-*, diagonal, stripe) === */
.dl-banner__cover {
  position: relative; min-height: var(--dl-min-h);
  grid-template-columns: minmax(0, 1fr);
  display: grid; align-items: center; padding: 64px 24px;
}
.dl-banner__bg, .dl-banner__bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.dl-banner__dim { position: absolute; inset: 0; background: #0f1115; pointer-events: none; }
.dl-banner__inner { position: relative; z-index: 2; max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 4px; }
.dl-banner__mesh {
  position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255,90,60,.45), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(91,141,239,.5), transparent 60%),
    radial-gradient(ellipse 90% 70% at 60% 85%, rgba(139,92,246,.5), transparent 60%);
}

/* === Split === */
.dl-banner__split {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; max-width: 1320px; margin: 0 auto;
  padding: 80px 24px; min-height: var(--dl-min-h);
}
.dl-banner__split .dl-banner__photo img,
.dl-banner__split .dl-banner__photo video { width: 100%; border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.15); }
@media (max-width: 900px) { .dl-banner__split { grid-template-columns: 1fr; padding: 56px 20px; } }

/* === Bento === */
.dl-banner__bento {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 64px 24px;
}
.dl-banner__bento-text { background: #0f1115; color: #fff; border-radius: 24px; padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.dl-banner__bento-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.15); }
@media (max-width: 900px) { .dl-banner__bento { grid-template-columns: 1fr; } .dl-banner__bento-photo img { aspect-ratio: 4/3; } }

/* === Bento 4 (2×2 karty) === */
.dl-banner__cover--bento4 { padding: 80px 24px 96px; min-height: auto; }
.dl-banner__cover--bento4 .dl-banner__inner { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.dl-banner__bento4 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2;
}
@media (max-width: 700px) { .dl-banner__bento4 { grid-template-columns: 1fr; } }

/* === Tiles 3 === */
.dl-banner__cover--tiles3 { padding: 72px 24px 96px; min-height: auto; }
.dl-banner__cover--tiles3 .dl-banner__inner { text-align: center; max-width: 900px; margin: 0 auto 36px; }
.dl-banner__tiles3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 1320px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2;
}
.dl-banner--lay-tiles-3 .dl-tile { background: #fff; color: #0f1115; box-shadow: 0 12px 32px rgba(0,0,0,.08); transition: transform .25s, box-shadow .25s; }
.dl-banner--lay-tiles-3 .dl-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.12); }
.dl-banner--lay-bento-4 .dl-tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
@media (max-width: 900px) { .dl-banner__tiles3 { grid-template-columns: 1fr; } }

.dl-tile { padding: 28px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; }
.dl-tile__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.dl-tile__icon svg { width: 32px; height: 32px; }
.dl-tile__title { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.dl-tile__text  { font-size: 14px; line-height: 1.55; opacity: .85; margin: 0; }

/* === Layout positions === */
.dl-banner--lay-full-left-bottom .dl-banner__cover { align-items: end; }
.dl-banner--lay-full-left-bottom .dl-banner__inner { padding-bottom: 32px; text-align: left; }
.dl-banner--lay-full-center .dl-banner__inner { text-align: center; max-width: 900px; }
.dl-banner--lay-full-center .dl-banner__lead,
.dl-banner--lay-stripe .dl-banner__lead,
.dl-banner__cover--bento4 .dl-banner__lead,
.dl-banner__cover--tiles3 .dl-banner__lead { margin-left: auto; margin-right: auto; }
.dl-banner--lay-diagonal .dl-banner__cover { background: #0f1115; }
.dl-banner--lay-diagonal .dl-banner__bg { clip-path: polygon(50% 0, 100% 0, 100% 100%, 35% 100%); }
.dl-banner--lay-diagonal .dl-banner__dim { display: none; }
.dl-banner--lay-diagonal .dl-banner__inner { max-width: 50%; margin-right: auto; }
@media (max-width: 900px) {
  .dl-banner--lay-diagonal .dl-banner__bg { clip-path: polygon(0 70%, 100% 50%, 100% 100%, 0 100%); }
  .dl-banner--lay-diagonal .dl-banner__inner { max-width: 100%; padding-bottom: 80px; }
}
.dl-banner--lay-stripe { --dl-min-h: 420px; }
.dl-banner--lay-stripe .dl-banner__cover { text-align: center; padding: 80px 24px; min-height: 420px; }
.dl-banner--lay-stripe .dl-banner__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.dl-banner--lay-stripe .dl-banner__heading { font-size: clamp(56px, 11vw, 140px); }
.dl-banner--lay-stripe .dl-banner__ctas { justify-content: center; }

/* Centrované layouty — CTA v strede */
.dl-banner--lay-full-center .dl-banner__ctas,
.dl-banner--lay-bento-4 .dl-banner__ctas,
.dl-banner--lay-tiles-3 .dl-banner__ctas { justify-content: center; }

/* === Typography === */
.dl-banner__eyebrow {
  font-family: 'Space Grotesk', monospace; font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase;
  opacity: .85; margin: 0 0 16px;
}
.dl-banner__heading {
  font-family: var(--dl-heading-font, 'Inter', sans-serif);
  font-size: clamp(40px, 6vw, 84px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.05; margin: 0 0 18px;
  color: var(--dl-heading-color, inherit);
}
.dl-banner__lead {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  max-width: 56ch; margin: 0 0 28px; opacity: .92;
}

/* === CTAs === */
.dl-banner__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dl-banner__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--dl-cta-radius, 999px);
  background: var(--dl-cta-bg, #0f1115); color: var(--dl-cta-fg, #fff) !important;
  text-decoration: none !important; font-weight: 700; font-size: 15px;
  transition: transform .2s, background .2s, box-shadow .25s;
  box-shadow: 0 10px 24px rgba(15,17,21,.18); border: 0; cursor: pointer; font-family: inherit;
}
.dl-banner__cta:hover { background: #ff5a3c; transform: translateY(-2px); }
.dl-banner__cta svg { width: 16px; height: 16px; color: var(--dl-arrow-color, currentColor); }
.dl-banner__cta--secondary {
  background: rgba(255,255,255,.1) !important;
  color: currentColor !important;
  border: 2px solid currentColor !important;
  box-shadow: none !important;
}
.dl-banner__cta--disabled { opacity: .5; cursor: not-allowed; }

/* === Designs === */
/* Fallback dark bg pre image-based designs keď nie je obrázok ani user-set bgColor/bgGradient */
.dl-banner--des-photo .dl-banner__cover,
.dl-banner--des-glassmorphism .dl-banner__cover,
.dl-banner--des-product .dl-banner__cover,
.dl-banner--des-video-bg .dl-banner__cover { background: #1f2937; }
.dl-banner--des-mesh .dl-banner__cover { background: linear-gradient(135deg, #1a0e2e 0%, #2a1240 100%); }
.dl-banner--des-mesh .dl-banner__bg, .dl-banner--des-mesh .dl-banner__dim { display: none; }
.dl-banner--des-solid-dark .dl-banner__cover { background: #0f1115; }
.dl-banner--des-solid-dark .dl-banner__bg, .dl-banner--des-solid-dark .dl-banner__dim { display: none; }
.dl-banner--des-solid-dark .dl-banner__cta:not(.dl-banner__cta--secondary) { background: var(--dl-cta-bg, #fff) !important; color: var(--dl-cta-fg, #0f1115) !important; }
.dl-banner--des-solid-yellow .dl-banner__cover { background: #0f1115; }
.dl-banner--des-solid-yellow .dl-banner__bg, .dl-banner--des-solid-yellow .dl-banner__dim { display: none; }
.dl-banner--des-solid-yellow .dl-banner__heading { color: #f7d046; background: linear-gradient(180deg, #f7d046 0%, #fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dl-banner--des-solid-yellow .dl-banner__eyebrow { color: #f7d046; }
.dl-banner--des-solid-yellow .dl-banner__cta:not(.dl-banner__cta--secondary) { background: var(--dl-cta-bg, #f7d046) !important; color: var(--dl-cta-fg, #0f1115) !important; }
.dl-banner--des-solid-yellow .dl-banner__bento-text { background: #f7d046; color: #0f1115; }
.dl-banner--des-solid-yellow .dl-banner__bento-text .dl-banner__heading { color: #0f1115 !important; background: none !important; -webkit-text-fill-color: #0f1115 !important; }
.dl-banner--des-glassmorphism .dl-banner__inner {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px; backdrop-filter: blur(20px) saturate(140%);
  max-width: 800px; padding: 56px;
}
.dl-banner--des-floating .dl-banner__cover { background: radial-gradient(ellipse at center, #fef9e6 0%, #fde8e8 100%); }
.dl-banner--des-floating { --dl-text: #0f1115; }
.dl-banner--des-floating .dl-banner__bg, .dl-banner--des-floating .dl-banner__dim { display: none; }

/* Product PNG (corner overlay) */
.dl-banner__product { position: absolute; right: 6%; bottom: 6%; max-width: 40%; max-height: 80%; z-index: 3; }
.dl-banner__product img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.4)); }
/* Product design — heading nesmie prekryť floating PNG */
.dl-banner--des-product .dl-banner__inner { max-width: 56%; }
@media (max-width: 700px) {
  .dl-banner__product { position: static; max-width: 60%; max-height: 220px; margin: 16px auto 0; right: auto; bottom: auto; }
  .dl-banner--des-product .dl-banner__inner { max-width: 100%; }
}

/* Bento layout — design pravidlá pre __bento-text aby mesh/glassmorphism fungovali */
.dl-banner--des-mesh .dl-banner__bento-text {
  background: linear-gradient(135deg, #1a0e2e 0%, #2a1240 100%);
  position: relative; overflow: hidden;
}
.dl-banner--des-glassmorphism .dl-banner__bento-text {
  background: rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.2);
}
/* Bento-4 + glassmorphism — aj tiles */
.dl-banner--des-glassmorphism .dl-tile {
  background: rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.2);
}

/* Product grid */
.dl-banner--des-product-grid .dl-banner__cover { background: #fafafa; }
.dl-banner--des-product-grid { --dl-text: #0f1115; }
.dl-banner--des-product-grid .dl-banner__bg, .dl-banner--des-product-grid .dl-banner__dim { display: none; }
.dl-banner__product-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 22px; max-width: 1100px; margin: 32px auto 0; padding: 0 24px; }
.dl-banner__product-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dl-banner__product-cell img { max-width: 100%; max-height: 220px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.dl-banner__product-label { font-size: 14px; font-weight: 600; }
.dl-banner__product-price { font-size: 16px; font-weight: 800; color: #ff5a3c; }

/* Testimonial */
.dl-banner--des-testimonial .dl-banner__cover,
.dl-banner--des-testimonial .dl-banner__split { background: #faf8f3; }
.dl-banner--des-testimonial { --dl-text: #0f1115; }
.dl-banner--des-testimonial .dl-banner__bg, .dl-banner--des-testimonial .dl-banner__dim { display: none; }
.dl-banner__stars { display: inline-flex; gap: 4px; margin-bottom: 14px; }
.dl-banner__stars svg { width: 22px; height: 22px; color: #d4d4d4; }
.dl-banner__stars svg.is-on { color: #f7c948; }
.dl-banner__quote { font-family: Georgia, serif; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.4; font-style: italic; margin: 0 0 28px; max-width: 56ch; quotes: '„' '"'; }
.dl-banner__quote::before { content: open-quote; }
.dl-banner__quote::after { content: close-quote; }
.dl-banner__author { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dl-banner__author-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.dl-banner__author-name { font-size: 15px; font-weight: 700; display: block; }
.dl-banner__author-role { font-size: 13px; opacity: .65; }

/* Split layouts — svetlé default */
.dl-banner--lay-split-lr .dl-banner__split,
.dl-banner--lay-split-rl .dl-banner__split { background: #fff; }
.dl-banner--lay-split-lr:not(.dl-banner--des-solid-dark) .dl-banner__slide,
.dl-banner--lay-split-rl:not(.dl-banner--des-solid-dark) .dl-banner__slide { --dl-text: #0f1115; }

/* User-set bg override */
.dl-banner--has-bg .dl-banner__cover { background: var(--dl-banner-bg) !important; }
.dl-banner--has-bg .dl-banner__bg, .dl-banner--has-bg .dl-banner__dim, .dl-banner--has-bg .dl-banner__mesh { display: none !important; }

/* === Animations === */
.dl-banner--ani-fade-in .dl-banner__heading { animation: dl-fade 1.4s ease-out .1s both; }
.dl-banner--ani-fade-in .dl-banner__lead    { animation: dl-fade 1.4s ease-out .25s both; }
.dl-banner--ani-fade-in .dl-banner__ctas    { animation: dl-fade 1.4s ease-out .4s both; }
@keyframes dl-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.dl-banner--ani-ken-burns .dl-banner__bg,
.dl-banner--ani-ken-burns .dl-banner__photo img,
.dl-banner--ani-ken-burns .dl-banner__bento-photo img { animation: dl-kb 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes dl-kb { from { transform: scale(1.0); } to { transform: scale(1.15) translate(-2%,1%); } }
.dl-banner--ani-parallax { overflow: hidden; }
.dl-banner--ani-parallax .dl-banner__bg,
.dl-banner--ani-parallax .dl-banner__photo img { transform: scale(1.15); will-change: transform; }
.dl-banner--ani-mesh-drift .dl-banner__mesh { animation: dl-mesh 18s ease-in-out infinite alternate; }
@keyframes dl-mesh { 0% { transform: translate3d(0,0,0) scale(1.05); } 100% { transform: translate3d(-4%,2%,0) scale(1.12); } }
.dl-banner--ani-float .dl-banner__product img,
.dl-banner--ani-float .dl-banner__photo img,
.dl-banner--ani-float .dl-banner__bento-photo img { animation: dl-float 6s ease-in-out infinite; }
@keyframes dl-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
.dl-banner--ani-spin-badge .dl-banner__badge {
  position: absolute; top: 56px; right: 56px; z-index: 5;
  width: 140px; height: 140px; border-radius: 50%;
  background: #ff5a3c; color: #fff; display: grid; place-items: center;
  font-family: 'Space Grotesk', monospace; font-weight: 800; font-size: 15px; letter-spacing: .2em;
  box-shadow: 0 16px 40px rgba(255,90,60,.4); animation: dl-spin 18s linear infinite;
}
@keyframes dl-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .dl-banner--ani-spin-badge .dl-banner__badge { width: 88px; height: 88px; font-size: 11px; top: 16px; right: 16px; } }

/* === Carousel controls === */
.dl-banner__prev, .dl-banner__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #0f1115;
  font-size: 22px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.dl-banner__prev { left: 24px; } .dl-banner__next { right: 24px; }
.dl-banner__dots {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 8px;
}
.dl-banner__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s; }
.dl-banner__dots button.is-active { background: #fff; }

/* === Addons === */
.dl-addon { position: absolute; z-index: 4; font-family: 'Inter', sans-serif; }
.dl-addon--discount { top: 24px; right: 24px; width: 76px; height: 76px; border-radius: 50%; background: #ff5a3c; color: #fff; display: grid; place-items: center; font-family: 'Space Grotesk', monospace; font-weight: 800; animation: dl-addon-spin 12s linear infinite; }
@keyframes dl-addon-spin { to { transform: rotate(360deg); } }
.dl-addon--new { top: 24px; left: 24px; background: #f7d046; color: #0f1115; padding: 6px 14px; border-radius: 4px; font-weight: 800; font-size: 12px; letter-spacing: .14em; }
.dl-addon--ship { top: 24px; right: 120px; background: rgba(15,17,21,.78); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 13px; }
.dl-addon--rating { bottom: 24px; left: 24px; background: rgba(255,255,255,.95); color: #0f1115; padding: 8px 14px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dl-addon__stars { color: #f7c948; letter-spacing: -.5px; }
.dl-addon--countdown { bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(15,17,21,.85); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; }
.dl-addon--trust { bottom: 24px; right: 24px; background: rgba(255,255,255,.95); color: #0f1115; padding: 8px 14px; border-radius: 8px; font-size: 13px; }
.dl-addon--stock { bottom: 80px; right: 24px; background: #ff5a3c; color: #fff; padding: 8px 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.dl-addon__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: dl-pulse 1.4s infinite; }
@keyframes dl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }