/* ═══════════════════════════════════════
   PROMĚNNÉ
═══════════════════════════════════════ */

.mknik_wrap{
  --mknik-bg:#fffaf6;
  --mknik-ink:#13100d;
  --mknik-copper:#9B5E2A;
  --mknik-mist:#b0968a;
  --mknik-line:rgba(255,250,246,.58);
  --mknik-overlay-dark:rgba(16,12,9,.38);
  --mknik-overlay-soft:rgba(16,12,9,.12);
  --mknik-shadow:0 18px 50px rgba(19,16,13,.08);
  position:relative;
  overflow:hidden;
}

/* ═══════════════════════════════════════
   LOADING – editorial soft reveal
═══════════════════════════════════════ */

.mknik_wrap.is-loading{
  background:linear-gradient(180deg, #fdf8f4 0%, #f7f1eb 100%);
}

/* obrázky schované, po načtení se odhalí */
.mknik_wrap.is-loading img{
  opacity:0 !important;
  transform:scale(1.04);
}

/* texty schované, ale drží layout */
.mknik_wrap.is-loading [data-field]{
  color:transparent !important;
  position:relative;
}

/* jemné textové placeholder linky */
.mknik_wrap.is-loading [data-field]::after{
  content:'';
  display:block;
  height:0.85em;
  margin-top:0.1em;
  background-color:rgba(176,150,138,.08);
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.36) 45%,
    rgba(255,255,255,0) 100%
  );
  background-size:200% 100%;
  animation:mknikVeil 3.8s ease-in-out infinite;
}

/* různé šířky linek pro přirozenější layout */
.mknik_wrap.is-loading .mknik_pc-eyebrow::after{ width:90px; height:8px; }
.mknik_wrap.is-loading [data-field="title"]::after{ width:220px; height:0.9em; }
.mknik_wrap.is-loading .mknik_pc-title-italic::after,
.mknik_wrap.is-loading .mknik_mob-title em::after{ width:150px; height:1em; }
.mknik_wrap.is-loading .mknik_pc-desc::after,
.mknik_wrap.is-loading .mknik_mob-desc::after{ width:180px; height:2.2em; }
.mknik_wrap.is-loading .mknik_pc-price::after,
.mknik_wrap.is-loading .mknik_mob-price::after{ width:110px; height:0.95em; }
.mknik_wrap.is-loading [data-field="colors"]::after{ width:140px; height:8px; }
.mknik_wrap.is-loading [data-field="cta_text"]::after{ width:130px; height:10px; }

/* foto sloty jako jemné módní plochy */
.mknik_wrap.is-loading .mknik_pc-photo,
.mknik_wrap.is-loading .mknik_mob-slot{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
    linear-gradient(135deg, #eadfd6 0%, #e3d5cb 45%, #efe6df 100%);
}

/* pomalý světelný přejezd přes foto sloty */
.mknik_wrap.is-loading .mknik_pc-photo::before,
.mknik_wrap.is-loading .mknik_mob-slot::before{
  content:'';
  position:absolute;
  inset:-20%;
  background:linear-gradient(
    100deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.06) 38%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.06) 62%,
    rgba(255,255,255,0) 80%
  );
  transform:translateX(-60%) skewX(-14deg);
  animation:mknikSweep 6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
  z-index:4;
}

/* jemný mlžný overlay přes celý banner */
.mknik_wrap.is-loading::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
  animation:mknikAtmosphere 7s ease-in-out infinite alternate;
  z-index:5;
}

/* tvrdé prvky schované během loadingu */
.mknik_wrap.is-loading .mknik_pc-cta-arrow,
.mknik_wrap.is-loading .mknik_mob-cta-arrow,
.mknik_wrap.is-loading .mknik_pc-rule,
.mknik_wrap.is-loading .mknik_mob-rule,
.mknik_wrap.is-loading .mknik_pc-copy::before{
  opacity:0;
}

/* ═══════════════════════════════════════
   READY – plynulé odhalení po načtení
═══════════════════════════════════════ */

.mknik_wrap.is-ready img{
  opacity:1 !important;
  transform:scale(1.035);
  transition:opacity .9s ease, transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.mknik_wrap.is-ready .mknik_pc-cta-arrow,
.mknik_wrap.is-ready .mknik_mob-cta-arrow,
.mknik_wrap.is-ready .mknik_pc-rule,
.mknik_wrap.is-ready .mknik_mob-rule,
.mknik_wrap.is-ready .mknik_pc-copy::before{
  transition:opacity .6s ease .3s;
  opacity:1;
}

.mknik_wrap.is-ready .mknik_pc-rule{
  opacity:0.6;
}

.mknik_wrap.is-ready .mknik_mob-rule{
  opacity:0.5;
}

/* loading animace */
@keyframes mknikSweep{
  0%{
    transform:translateX(-70%) skewX(-14deg);
    opacity:0;
  }
  18%{
    opacity:1;
  }
  55%{
    opacity:1;
  }
  100%{
    transform:translateX(70%) skewX(-14deg);
    opacity:0;
  }
}

@keyframes mknikVeil{
  0%,100%{
    opacity:.6;
    background-position:200% 0;
  }
  50%{
    opacity:.9;
    background-position:-200% 0;
  }
}

@keyframes mknikAtmosphere{
  0%{
    opacity:.5;
    transform:scale(1) translateY(0);
  }
  100%{
    opacity:.75;
    transform:scale(1.01) translateY(-3px);
  }
}

/* ═══════════════════════════════════════
   PC – LAYOUT
═══════════════════════════════════════ */

.mknik_pc{
  display:grid;
  grid-template-columns:minmax(320px, 0.95fr) minmax(320px, 1.05fr);
  width:100%;
  max-width:1920px;
  min-height:500px;
  height:min(36vw,700px);
  max-height:700px;
  background:var(--mknik-bg);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  box-shadow:var(--mknik-shadow);
}

.mknik_pc-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,4vw,60px);
  position:relative;
  z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)),
    var(--mknik-bg);
}

.mknik_pc-copy-inner{
  width:100%;
  max-width:520px;
  max-height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.mknik_pc-copy::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--mknik-ink);
}

/* ═══════════════════════════════════════
   PC – TYPOGRAFIE
═══════════════════════════════════════ */

.mknik_pc-eyebrow{
  font-size:9px;
  font-weight:300;
  letter-spacing:0.38em;
  text-transform:uppercase;
  color:var(--mknik-mist);
  margin:0 0 clamp(18px,2vw,34px);
  animation:mknik_up .9s ease .05s both;
}

.mknik_pc-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(42px,5vw,92px);
  font-weight:400;
  line-height:0.92;
  color:var(--mknik-ink);
  letter-spacing:-0.025em;
  margin:0;
  animation:mknik_up .9s ease .18s both;
}

.mknik_pc-title-italic{
  font-style:italic;
  display:block;
  font-size:1.12em;
  letter-spacing:-0.03em;
}

.mknik_pc-rule{
  width:clamp(36px,3.5vw,56px);
  height:1px;
  background:var(--mknik-copper);
  margin:clamp(18px,2vw,32px) 0;
  opacity:0.6;
  border:none;
  flex-shrink:0;
  animation:mknik_up .9s ease .3s both;
}

.mknik_pc-desc{
  font-size:clamp(9px,0.7vw,11px);
  font-weight:300;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mknik-mist);
  line-height:2.1;
  margin:0 0 clamp(20px,2vw,36px);
  animation:mknik_up .9s ease .4s both;
}

.mknik_pc-bottom{
  display:flex;
  align-items:flex-end;
  gap:clamp(16px,1.8vw,28px);
  margin-bottom:clamp(24px,2.4vw,40px);
  flex-wrap:wrap;
  animation:mknik_up .9s ease .5s both;
}

.mknik_pc-price{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,3vw,52px);
  font-weight:400;
  color:var(--mknik-ink);
  line-height:1;
  letter-spacing:-0.01em;
}

.mknik_pc-price-label{
  font-size:clamp(9px,0.7vw,11px);
  font-weight:300;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mknik-copper);
  border-bottom:1px solid var(--mknik-copper);
  padding-bottom:2px;
  margin-bottom:6px;
  opacity:0.85;
  white-space:nowrap;
}

/* ═══════════════════════════════════════
   PC – CTA
═══════════════════════════════════════ */

.mknik_pc-cta{
  display:inline-flex;
  align-items:stretch;
  text-decoration:none;
  align-self:flex-start;
  animation:mknik_up .9s ease .6s both;
}

.mknik_pc-cta-text{
  font-size:clamp(8px,0.62vw,10px);
  font-weight:300;
  letter-spacing:0.38em;
  text-transform:uppercase;
  color:var(--mknik-bg);
  background:var(--mknik-ink);
  padding:clamp(12px,1.2vw,16px) clamp(20px,2vw,30px);
  transition:background .35s ease;
  white-space:nowrap;
}

.mknik_pc-cta-arrow{
  background:var(--mknik-copper);
  padding:0 clamp(14px,1.4vw,20px);
  display:flex;
  align-items:center;
  transition:padding .35s ease, background .35s ease;
}

.mknik_pc-cta-arrow svg{
  width:13px;
  height:13px;
  stroke:var(--mknik-bg);
  stroke-width:1.4;
  fill:none;
  transition:transform .35s ease;
}

.mknik_pc-cta:hover .mknik_pc-cta-text{
  background:#2a1f15;
}

.mknik_pc-cta:hover .mknik_pc-cta-arrow{
  padding:0 clamp(20px,2vw,28px);
  background:#7a4220;
}

.mknik_pc-cta:hover .mknik_pc-cta-arrow svg{
  transform:translateX(5px);
}

/* ═══════════════════════════════════════
   PC – VISUAL / FOTKY
═══════════════════════════════════════ */

.mknik_pc-visual{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.34), transparent 36%),
    linear-gradient(135deg, #e9e0d8 0%, #e4d8cf 100%);
  animation:mknik_in 1.3s cubic-bezier(.77,0,.18,1) both;
}

.mknik_pc-visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to left, rgba(255,255,255,.08), rgba(255,255,255,0) 30%),
    linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 28%);
  z-index:1;
  pointer-events:none;
}

.mknik_pc-photos{
  position:absolute;
  inset:0;
  display:flex;
  z-index:2;
  overflow:hidden;
}

.mknik_pc-photo{
  flex:1 1 0;
  min-width:0;
  position:relative;
  overflow:hidden;
  transition:
    flex-grow .7s cubic-bezier(.22,.61,.36,1),
    filter .45s ease;
  will-change:flex-grow;
  cursor:pointer;
}

.mknik_pc-photo + .mknik_pc-photo{
  border-left:1px solid var(--mknik-line);
}

.mknik_pc-photo::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.22));
  opacity:1;
  transition:
    opacity .45s ease,
    background .45s ease;
  z-index:2;
  pointer-events:none;
}

.mknik_pc-photo::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.14), transparent 42%),
    linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,.02) 55%);
  opacity:0;
  transition:opacity .45s ease;
  z-index:3;
  pointer-events:none;
}

.mknik_pc-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transform:scale(1.035);
  transition:
    opacity .9s ease,
    transform .8s cubic-bezier(.22,.61,.36,1),
    filter .45s ease;
  will-change:transform, opacity;
}

/* ═══════════════════════════════════════
   PC – ACCORDION HOVER
═══════════════════════════════════════ */

.mknik_pc-photos.is-hovering .mknik_pc-photo{
  flex-grow:1;
}

.mknik_pc-photos.is-hovering .mknik_pc-photo.is-active{
  flex-grow:2.9;
}

.mknik_pc-photos.is-hovering .mknik_pc-photo:not(.is-active)::before{
  opacity:1;
  background:var(--mknik-overlay-dark);
}

.mknik_pc-photos.is-hovering .mknik_pc-photo:not(.is-active)::after{
  opacity:.12;
}

.mknik_pc-photos.is-hovering .mknik_pc-photo:not(.is-active) img{
  transform:scale(1.01);
  filter:saturate(.8) brightness(.76) contrast(.96);
}

.mknik_pc-photos.is-hovering .mknik_pc-photo.is-active::before{
  opacity:.18;
  background:linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.14));
}

.mknik_pc-photos.is-hovering .mknik_pc-photo.is-active::after{
  opacity:1;
}

.mknik_pc-photos.is-hovering .mknik_pc-photo.is-active img{
  transform:scale(1.09);
  filter:saturate(1.04) brightness(1.03) contrast(1.02);
}

/* ═══════════════════════════════════════
   PC – ACCORDION IDLE
═══════════════════════════════════════ */

.mknik_pc-photos.is-idle .mknik_pc-photo{
  flex-grow:1;
}

.mknik_pc-photos.is-idle .mknik_pc-photo.is-default{
  flex-grow:1.55;
}

.mknik_pc-photos.is-idle .mknik_pc-photo:not(.is-default)::before{
  opacity:.9;
  background:rgba(16,12,9,.22);
}

.mknik_pc-photos.is-idle .mknik_pc-photo:not(.is-default) img{
  transform:scale(1.02);
  filter:saturate(.9) brightness(.9);
}

.mknik_pc-photos.is-idle .mknik_pc-photo.is-default::after{
  opacity:.45;
}

/* ═══════════════════════════════════════
   PC – KEYFRAMES
═══════════════════════════════════════ */

@keyframes mknik_up{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes mknik_in{
  from{
    clip-path:inset(0 100% 0 0);
  }
  to{
    clip-path:inset(0 0 0 0);
  }
}

/* ═══════════════════════════════════════
   MOBILE
═══════════════════════════════════════ */

.mknik_mob{
  display:none;
  width:100%;
  aspect-ratio:4/5;
  max-width:480px;
  max-height:700px;
  margin:0 auto;
  background:var(--mknik-bg);
  position:relative;
  overflow:hidden;
  box-shadow:var(--mknik-shadow);
}

.mknik_mob-stage{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:60%;
  display:flex;
  gap:2px;
  background:#ebe3dc;
}

.mknik_mob-slot{
  flex:1;
  overflow:hidden;
  position:relative;
}

.mknik_mob-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  transform:scale(1.03);
  transition:opacity .9s ease, transform 1.4s cubic-bezier(.22,.61,.36,1);
}

.mknik_mob-slot::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.02) 15%, transparent 35%, var(--mknik-bg) 95%);
  pointer-events:none;
}

.mknik_mob-body{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:0 24px 24px;
  text-align:center;
  display:flex;
  justify-content:center;
}

.mknik_mob-body-inner{
  width:100%;
  max-height:90%;
  overflow:hidden;
}

.mknik_mob-rule{
  width:36px;
  height:1px;
  background:var(--mknik-copper);
  opacity:0.5;
  margin:0 auto 16px;
  border:none;
}

.mknik_mob-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,8.5vw,42px);
  font-weight:400;
  line-height:0.95;
  color:var(--mknik-ink);
  margin:0 0 10px;
}

.mknik_mob-title em{
  font-style:italic;
  display:block;
  font-size:1.06em;
}

.mknik_mob-desc{
  font-size:9px;
  font-weight:300;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--mknik-mist);
  line-height:2.1;
  margin:0 0 12px;
}

.mknik_mob-meta{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.mknik_mob-price{
  font-family:'Playfair Display',serif;
  font-size:clamp(24px,6.5vw,34px);
  font-weight:400;
  color:var(--mknik-ink);
  line-height:1;
}

.mknik_mob-colors{
  font-size:8px;
  font-weight:300;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--mknik-copper);
  border-bottom:1px solid var(--mknik-copper);
  padding-bottom:2px;
  margin-bottom:4px;
  opacity:0.85;
}

.mknik_mob-cta{
  display:inline-flex;
  align-items:stretch;
  text-decoration:none;
}

.mknik_mob-cta-text{
  font-size:9px;
  font-weight:300;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--mknik-bg);
  background:var(--mknik-ink);
  padding:12px 20px;
  white-space:nowrap;
}

.mknik_mob-cta-arrow{
  background:var(--mknik-copper);
  padding:0 14px;
  display:flex;
  align-items:center;
}

.mknik_mob-cta-arrow svg{
  width:12px;
  height:12px;
  stroke:var(--mknik-bg);
  stroke-width:1.4;
  fill:none;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

@media(max-width:767px){
  .mknik_pc{
    display:none;
  }

  .mknik_mob{
    display:block;
  }
}

/* ═══════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  .mknik_pc-photo,
  .mknik_pc-photo::before,
  .mknik_pc-photo::after,
  .mknik_pc-photo img,
  .mknik_pc-cta-text,
  .mknik_pc-cta-arrow,
  .mknik_pc-cta-arrow svg,
  .mknik_mob-slot img{
    transition:none !important;
    animation:none !important;
  }

  .mknik_wrap.is-loading::after,
  .mknik_wrap.is-loading .mknik_pc-photo::before,
  .mknik_wrap.is-loading .mknik_mob-slot::before,
  .mknik_wrap.is-loading [data-field]::after{
    animation:none !important;
  }
}