/* ============================================================
   DesignLab — patterns.css
   Štýly pre 20 banner variantov registrovaných ako Gutenberg patterns.
   Trieda .dl-tmpl je base; .dl-tmpl--NN je variant.
   ============================================================ */

/* Common: WP Cover bloky pre patterns */
.dl-tmpl { position: relative; overflow: hidden; isolation: isolate; }
.dl-tmpl.wp-block-cover { padding: 64px 24px; align-items: center; min-height: 640px; }
.dl-tmpl .wp-block-cover__inner-container { max-width: 1320px; width: 100%; }

/* Common typography slots — používateľ ich mení v Gutenbergu, my len štýlujeme */
.dl-tmpl .dl-tmpl-eyebrow {
  font-family: 'Space Grotesk', monospace;
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  opacity: .85; margin: 0 0 16px;
}
.dl-tmpl .dl-tmpl-h {
  font-size: clamp(40px, 6vw, 84px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.05; margin: 0 0 18px;
}
.dl-tmpl .dl-tmpl-lead {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  max-width: 56ch; margin: 0 0 28px; opacity: .9;
}
.dl-tmpl .dl-tmpl-cta .wp-element-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  background: #0f1115; color: #fff;
  text-decoration: none; font-weight: 700; font-size: 15px;
  border: 0; transition: transform .2s, background .2s, box-shadow .25s;
  box-shadow: 0 10px 24px rgba(15,17,21,.18);
}
.dl-tmpl .dl-tmpl-cta .wp-element-button:hover {
  background: #ff5a3c; transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255,90,60,.35);
}

/* ─── 01 — Full-bleed, left-bottom ──────────────────────────── */
.dl-tmpl--01.is-left-bottom { align-items: flex-end; justify-content: flex-start; padding-bottom: 64px; }
.dl-tmpl--01.is-left-bottom .wp-block-cover__inner-container { text-align: left; }
.dl-tmpl--01 .dl-tmpl-h { color: #fff; }
.dl-tmpl--01 .dl-tmpl-lead, .dl-tmpl--01 .dl-tmpl-eyebrow { color: rgba(255,255,255,.92); }

/* ─── 02 — Full-bleed, centered ─────────────────────────────── */
.dl-tmpl--02.is-center .wp-block-cover__inner-container { text-align: center; max-width: 900px; margin: 0 auto; }
.dl-tmpl--02.is-center .dl-tmpl-lead { margin-left: auto; margin-right: auto; }
.dl-tmpl--02 .dl-tmpl-h, .dl-tmpl--02 .dl-tmpl-lead, .dl-tmpl--02 .dl-tmpl-eyebrow { color: #fff; }

/* ─── 03 — Ken-Burns slow zoom ──────────────────────────────── */
.dl-tmpl--03 .wp-block-cover__image-background {
  animation: dl-kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes dl-kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.15) translate(-2%, 1%); }
}
.dl-tmpl--03 .dl-tmpl-h, .dl-tmpl--03 .dl-tmpl-lead, .dl-tmpl--03 .dl-tmpl-eyebrow { color: #fff; }

/* ─── 04 — Split 50/50 (text vľavo) ─────────────────────────── */
.dl-tmpl--04 { background: #fafafa; padding: 80px 24px; }
.dl-tmpl--04 .dl-tmpl-split { gap: 56px; align-items: center; }
.dl-tmpl--04 .dl-tmpl-photo img {
  width: 100%; border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.15);
}
.dl-tmpl--04 .dl-tmpl-h { color: #0f1115; }
.dl-tmpl--04 .dl-tmpl-eyebrow { color: #ff5a3c; }

/* ─── 05 — Split 50/50 (photo vľavo) ────────────────────────── */
.dl-tmpl--05 { background: #fafafa; padding: 80px 24px; }
.dl-tmpl--05 .dl-tmpl-split { gap: 56px; align-items: center; }
.dl-tmpl--05 .dl-tmpl-photo img {
  width: 100%; border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.15);
  transform: rotate(-1deg);
}
.dl-tmpl--05 .dl-tmpl-eyebrow { color: #ff5a3c; }

/* ─── 06 — Diagonal clip-split ──────────────────────────────── */
.dl-tmpl--06.is-diagonal { background: #0f1115; }
.dl-tmpl--06.is-diagonal .wp-block-cover__image-background {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 35% 100%);
}
.dl-tmpl--06.is-diagonal .wp-block-cover__background-dim { opacity: 0; }
.dl-tmpl--06 .wp-block-cover__inner-container { max-width: 50%; margin-right: auto; }
.dl-tmpl--06 .dl-tmpl-h, .dl-tmpl--06 .dl-tmpl-lead, .dl-tmpl--06 .dl-tmpl-eyebrow { color: #fff; }
@media (max-width: 900px) {
  .dl-tmpl--06.is-diagonal .wp-block-cover__image-background { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
  .dl-tmpl--06 .wp-block-cover__inner-container { max-width: 100%; }
}

/* ─── 07 — Mesh gradient + huge typo ────────────────────────── */
.dl-tmpl--07 { color: #fff; }
.dl-tmpl--07 .dl-tmpl-h { font-size: clamp(52px, 9vw, 132px); }
.dl-tmpl--07::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  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%);
  animation: dl-mesh 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dl-mesh {
  0% { transform: translate3d(0,0,0) scale(1.05); }
  100% { transform: translate3d(-4%,2%,0) scale(1.12); }
}
.dl-tmpl--07 .wp-block-cover__inner-container { position: relative; z-index: 1; }

/* ─── 08 — Solid black + huge typo ──────────────────────────── */
.dl-tmpl--08 { color: #fff; }
.dl-tmpl--08 .dl-tmpl-h { font-size: clamp(52px, 9vw, 132px); }
.dl-tmpl--08 .dl-tmpl-cta .wp-element-button { background: #fff; color: #0f1115; }
.dl-tmpl--08 .dl-tmpl-cta .wp-element-button:hover { background: #ff5a3c; color: #fff; }

/* ─── 09 — Black + yellow accent ────────────────────────────── */
.dl-tmpl--09 { color: #fff; }
.dl-tmpl--09 .dl-tmpl-h {
  font-size: clamp(52px, 9vw, 132px);
  background: linear-gradient(180deg, #f7d046 0%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-tmpl--09 .dl-tmpl-eyebrow { color: #f7d046; }
.dl-tmpl--09 .dl-tmpl-cta .wp-element-button { background: #f7d046; color: #0f1115; }
.dl-tmpl--09 .dl-tmpl-cta .wp-element-button:hover { background: #fff; }

/* ─── 10 — Parallax ─────────────────────────────────────────── */
.dl-tmpl--10.is-parallax { background-attachment: fixed; }
.dl-tmpl--10.is-parallax .wp-block-cover__image-background {
  background-attachment: fixed; transform: scale(1.05);
}
.dl-tmpl--10 .dl-tmpl-h, .dl-tmpl--10 .dl-tmpl-lead, .dl-tmpl--10 .dl-tmpl-eyebrow { color: #fff; }
@media (max-width: 900px) { .dl-tmpl--10.is-parallax { background-attachment: scroll; } }

/* ─── 11 — Mask reveal (text vyplnený fotkou) ───────────────── */
.dl-tmpl--11 { background: #fafafa; }
.dl-tmpl--11 .dl-tmpl-h {
  font-size: clamp(72px, 14vw, 220px); line-height: .9;
  letter-spacing: -.04em;
  background-image: url('https://picsum.photos/seed/feast-banner/1600/1100');
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: dl-mask 18s ease-in-out infinite alternate;
}
@keyframes dl-mask {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.dl-tmpl--11 .dl-tmpl-eyebrow { color: #71747a; }
.dl-tmpl--11 .dl-tmpl-lead { color: #0f1115; opacity: .8; }

/* ─── 12 — Outline text na photo ────────────────────────────── */
.dl-tmpl--12 .dl-tmpl-h {
  font-size: clamp(72px, 12vw, 180px); line-height: .9;
  color: transparent; -webkit-text-stroke: 2px #fff;
  letter-spacing: -.03em;
}
.dl-tmpl--12 .dl-tmpl-lead, .dl-tmpl--12 .dl-tmpl-eyebrow { color: #fff; }
.dl-tmpl--12 .dl-tmpl-cta .wp-element-button { background: #ff5a3c; }

/* ─── 13 — Bento (text card + photo card) ───────────────────── */
.dl-tmpl--13 { background: #fafafa; padding: 80px 24px; }
.dl-tmpl--13 .dl-tmpl-bento { gap: 16px; }
.dl-tmpl--13 .dl-tmpl-bento-text {
  border-radius: 24px; padding: 48px !important;
  display: flex; flex-direction: column; justify-content: center;
}
.dl-tmpl--13 .dl-tmpl-bento-photo img {
  border-radius: 24px; width: 100%; height: 100%; object-fit: cover;
  box-shadow: 0 24px 60px rgba(0,0,0,.15);
}
.dl-tmpl--13 .dl-tmpl-bento-photo .wp-block-image,
.dl-tmpl--13 .dl-tmpl-bento-photo figure { height: 100%; margin: 0; }
.dl-tmpl--13 .dl-tmpl-eyebrow { color: #f7d046; }
.dl-tmpl--13 .dl-tmpl-cta .wp-element-button { background: #f7d046; color: #0f1115; }

/* ─── 14 — Glassmorphism card ───────────────────────────────── */
.dl-tmpl--14 { color: #fff; }
.dl-tmpl--14 .wp-block-cover__inner-container {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-radius: 28px;
  padding: 56px !important;
  max-width: 620px !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
}

/* ─── 15 — Reverse contrast (yellow on black) ───────────────── */
.dl-tmpl--15 { background: #0f1115 !important; color: #f7d046; }
.dl-tmpl--15 .wp-block-cover__image-background {
  width: 30%; height: 60%; right: 0; top: 20%; left: auto !important;
  border-radius: 22px 0 0 22px; opacity: .9;
}
.dl-tmpl--15 .wp-block-cover__background-dim { display: none; }
.dl-tmpl--15 .wp-block-cover__inner-container { max-width: 60%; margin-right: auto; }
.dl-tmpl--15 .dl-tmpl-h { color: #f7d046; font-size: clamp(48px, 8vw, 110px); }
.dl-tmpl--15 .dl-tmpl-lead { color: #fff; opacity: .85; }
.dl-tmpl--15 .dl-tmpl-eyebrow { color: #f7d046; opacity: .8; }
.dl-tmpl--15 .dl-tmpl-cta .wp-element-button { background: #f7d046; color: #0f1115; }
@media (max-width: 900px) { .dl-tmpl--15 .wp-block-cover__inner-container { max-width: 100%; } }

/* ─── 16 — Floating product ─────────────────────────────────── */
.dl-tmpl--16 {
  background: radial-gradient(ellipse at center, #fef9e6 0%, #fde8e8 100%);
  padding: 80px 24px;
}
.dl-tmpl--16 .dl-tmpl-split { gap: 56px; align-items: center; }
.dl-tmpl--16 .dl-tmpl-photo {
  position: relative;
}
.dl-tmpl--16 .dl-tmpl-photo::before {
  content: ''; position: absolute; inset: 20% 10% 0; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,90,60,.35) 0%, transparent 60%);
  filter: blur(24px); z-index: 0;
}
.dl-tmpl--16 .dl-tmpl-photo img {
  position: relative; z-index: 1; border-radius: 22px;
  animation: dl-float 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.18));
}
@keyframes dl-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
.dl-tmpl--16 .dl-tmpl-eyebrow { color: #ff5a3c; }

/* ─── 17 — Sticker style ────────────────────────────────────── */
.dl-tmpl--17 { background: #faf4e6; padding: 80px 24px; }
.dl-tmpl--17 .dl-tmpl-split { gap: 56px; align-items: center; }
.dl-tmpl--17 .dl-tmpl-photo img {
  width: 100%; border-radius: 22px;
  box-shadow: 0 26px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.06);
  transform: rotate(2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.dl-tmpl--17 .dl-tmpl-photo img:hover {
  transform: rotate(0) scale(1.02);
}
.dl-tmpl--17 .dl-tmpl-eyebrow { color: #ff5a3c; }

/* ─── 18 — NOVINKA badge ────────────────────────────────────── */
.dl-tmpl--18 { color: #fff; }
.dl-tmpl--18::after {
  content: 'NOVINKA';
  position: absolute; top: 56px; right: 56px; z-index: 3;
  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); } }
.dl-tmpl--18 .dl-tmpl-h, .dl-tmpl--18 .dl-tmpl-lead, .dl-tmpl--18 .dl-tmpl-eyebrow { color: #fff; }
@media (max-width: 720px) {
  .dl-tmpl--18::after { width: 88px; height: 88px; font-size: 11px; top: 16px; right: 16px; }
}

/* ─── 19 — Discount stripe ──────────────────────────────────── */
.dl-tmpl--19 { color: #fff; text-align: center; }
.dl-tmpl--19 .wp-block-cover__inner-container { text-align: center; max-width: 900px; margin: 0 auto; }
.dl-tmpl--19 .dl-tmpl-eyebrow { color: #f7d046; }
.dl-tmpl--19 .dl-tmpl-eyebrow::before, .dl-tmpl--19 .dl-tmpl-eyebrow::after { content: '—'; margin: 0 14px; opacity: .5; }
.dl-tmpl--19 .dl-tmpl-h { font-size: clamp(56px, 11vw, 140px); }
.dl-tmpl--19 .dl-tmpl-cta { display: block; }
.dl-tmpl--19 .dl-tmpl-cta .wp-element-button { background: #ff5a3c; padding: 18px 36px; font-size: 17px; }

/* ─── 20 — Quote-style banner ───────────────────────────────── */
.dl-tmpl--20 { color: #fff; }
.dl-tmpl--20 .wp-block-cover__inner-container { max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.dl-tmpl--20 .wp-block-cover__inner-container::before {
  content: '"'; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  font-family: 'Space Grotesk', serif; font-size: 240px; line-height: 1;
  color: rgba(255,255,255,.15); font-weight: 700;
}
.dl-tmpl--20 .dl-tmpl-h {
  font-family: 'Space Grotesk', serif; font-style: italic; font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1.25;
}
.dl-tmpl--20 .dl-tmpl-eyebrow { letter-spacing: .25em; }
.dl-tmpl--20 .dl-tmpl-lead { font-size: 14px; opacity: .8; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dl-tmpl *, .dl-tmpl *::before, .dl-tmpl *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* Showcase stránka /sablony/ */
.dl-tmpl-showcase { padding: 56px 0 0; background: #fafafa; }
.dl-tmpl-showcase .dl-tmpl-num {
  position: absolute; top: 24px; left: 24px; z-index: 5;
  font-family: 'Space Grotesk', monospace; font-weight: 700; font-size: 14px;
  background: #fff; color: #0f1115; padding: 6px 12px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.dl-tmpl-showcase .dl-tmpl + .dl-tmpl { margin-top: 8px; }