/* modules/hero/hero.css */
/* Hero – wariant C: 3 kafle, pastelowe tony, overlay per kafel, zero CLS. */

/* ===== Tokeny ===== */
:root{
  --accent:#2f6df6;
  --ink:#0f172a;
  --ink-muted:#5b6b85;
  --radius:16px;
  --radius-pill:999px;

  /* Pastelowe tony: róż / pomarańcz / zieleń */
  --tone-promo: 320 85% 62%; /* róż */
  --tone-sale:   24 92% 58%; /* pomarańcz */
  --tone-new:   150 68% 46%; /* zieleń */

  /* Gradienty akcentu (btn + ring) – łagodne */
  --grad-promo: linear-gradient(135deg, hsl(320 85% 62%), hsl(340 78% 58%));
  --grad-sale:  linear-gradient(135deg, hsl(24 92% 58%),  hsl(32 88% 55%));
  --grad-new:   linear-gradient(135deg, hsl(150 68% 46%), hsl(165 72% 46%));

  /* Domyślne ratio kafli, na wypadek braku inline’owych zmiennych */
  --ratio-w: 16;
  --ratio-h: 9;
}

/* ===== Wrapper ===== */
.hero{
  position:relative; isolation:isolate; margin-block:clamp(16px,3vw,32px); color:var(--ink);
  /* Stabilizacja wysokości sekcji zanim doładuje się reszta dekoracji */
  contain: layout paint;
}
.hero__container{ width:min(1200px,100% - 2rem); margin-inline:auto; }

/* ===== Super heading (PATCH: bez CLS) ===== */
.hero__super-title{
  position:relative;
  text-align:center; font-size:clamp(28px,4.2vw,44px); line-height:1.1; letter-spacing:-.01em;
  margin:0 0 .35em;
  /* Rezerwacja miejsca na pasek (4px) + margines, by nie pchał układu */
  padding-bottom: 10px;
}

/* Zamiast animować width (powodowało CLS) – stała szerokość + scaleX */
.hero__super-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:160px;              /* stała szerokość – brak wpływu na flow */
  max-width:28vw;           /* bezpieczny limit na wąskich ekranach */
  height:4px;
  transform: translateX(-50%) scaleX(.65);
  transform-origin:center;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 80%, #fff), transparent);
  border-radius:3px;
  will-change: transform, opacity;
  opacity: 1;
  animation: heroBarNoCLS 2400ms ease-in-out infinite alternate;
}

@keyframes heroBarNoCLS{
  from { transform: translateX(-50%) scaleX(.65); opacity: .95; }
  to   { transform: translateX(-50%) scaleX(1.00); opacity: 1; }
}

.hero__super-lead{
  text-align:center; color:var(--ink-muted); font-size:clamp(16px,1.6vw,18px);
  margin:0 0 clamp(16px,2.2vw,28px);
}

/* ===== Grid ===== */
.hero__tiles{ display:grid; gap:clamp(12px,2vw,20px); grid-template-columns:1fr; }
@media (min-width:640px){ .hero__tiles{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .hero__tiles{ grid-template-columns:1fr 1.2fr 1fr; } } /* środkowy większy */

/* ===== Kafel – baza ===== */
.hero__tile{
  position:relative; border-radius:var(--radius); overflow:clip; background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .25s ease, outline-color .2s ease, filter .25s ease;
  will-change:transform, box-shadow, filter;
  z-index:0;
  background-image: radial-gradient(rgba(0,0,0,.015) 1px, transparent 1px);
  background-size: 6px 6px;
  --overlay-tone: 0 0% 100%;
  --glass-tint: 0 0% 100%;
}
.hero__tile a.hero__tile-link{ display:grid; grid-template-rows:auto 1fr; color:inherit; text-decoration:none; outline:none; }
.hero__tile:focus-within{ box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 60%, transparent); }
.hero__tile:has(.hero__tile-link:focus-visible){ outline:3px solid var(--accent); outline-offset:4px; }

/* Boczne kafle – lekki tilt (desktop) – po klasach slot-*, nie nth-child */
@media (min-width:1024px){
  .hero__tile.slot-left:not(.is-primary){
    transform:perspective(900px) rotateY(2deg);
  }
  .hero__tile.slot-right:not(.is-primary){
    transform:perspective(900px) rotateY(-2deg);
  }
}

/* Hover – miękki podskok */
.hero__tile:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 10px 30px rgba(15,23,42,.14); }

/* Środkowy – spotlight */
.hero__tile.is-primary{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(15,23,42,.12); z-index:1; }
.hero__tile.is-primary:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 16px 42px rgba(15,23,42,.18); }
.hero__tile.is-primary::after{
  content:""; position:absolute; inset:auto 10% -20% 10%; height:35%;
  background: radial-gradient(60% 60% at 50% 0%, rgba(47,109,246,.18), transparent 70%);
  pointer-events:none; z-index:0;
}

/* ===== Media (zero CLS) + OVERLAY TONE ===== */
.hero__tile-media{
  position:relative; width:100%;
  /* Domyślne ratio (nadpisuj przez inline vars, jeśli chcesz inne) */
  aspect-ratio: var(--ratio-w) / var(--ratio-h);
  background:#f6f8fc; overflow:hidden;
}
.hero__tile-img{
  display:block; width:105%; height:105%;
  object-fit:cover; transform:translateZ(0) scale(1.02);
  transition:transform .5s ease; will-change:transform;
}
.hero__tile:hover .hero__tile-img{ transform:translateY(-1.5%) scale(1.04); }

/* Overlay – lżejszy, na mobile ciut mocniejszy dla czytelności */
.hero__tile-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, hsl(var(--overlay-tone) / .18) 0%, transparent 60%),
    linear-gradient(to top, rgba(15,23,42,.26) 0%, rgba(15,23,42,.10) 46%, rgba(15,23,42,0) 100%);
  opacity:.78;
}
.hero__tile:hover .hero__tile-overlay{ opacity:.55; }
.hero__tile.theme--promo{ --overlay-tone: var(--tone-promo); --glass-tint: var(--tone-promo); }
.hero__tile.theme--sale { --overlay-tone: var(--tone-sale);  --glass-tint: var(--tone-sale);  }
.hero__tile.theme--new  { --overlay-tone: var(--tone-new);   --glass-tint: var(--tone-new);   }

/* ===== RING – tylko obwódka 2px (maskuje środek) ===== */
.hero__ring{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px; opacity:0; transition:opacity .25s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: transparent;
}
.hero__tile.theme--promo .hero__ring{ background: var(--grad-promo); }
.hero__tile.theme--sale  .hero__ring{ background: var(--grad-sale);  }
.hero__tile.theme--new   .hero__ring{ background: var(--grad-new);   }
.hero__tile:hover .hero__ring,
.hero__tile:has(.hero__tile-link:focus-visible) .hero__ring{ opacity:1; }

/* ===== Badge – KOLOROWY GLASS + animowane paski + pastelowy glow ===== */
.hero__badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:6px 12px; border-radius:var(--radius-pill);
  font-weight:800; font-size:12px; letter-spacing:.03em; color:#fff;

  /* Unikamy kosztów na słabym GPU – użyj blur tylko, gdy wspierany */
  background: hsl(var(--glass-tint) / .22);
  border:1px solid color-mix(in oklab, hsl(var(--glass-tint)) 40%, transparent);
  box-shadow: 0 2px 8px rgba(15,23,42,.16);
  overflow:hidden; isolation:isolate;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
@supports (backdrop-filter: blur(1px)) {
  .hero__badge{ backdrop-filter: blur(6px) saturate(120%); }
}
/* cienka ramka (jasny połysk) */
.hero__badge::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,255,255,.35), rgba(255,255,255,0), rgba(255,255,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.45;
}
/* animowane paski – bardzo subtelne */
.hero__badge::after{
  content:""; position:absolute; inset:-40% -40% -40% -40%; z-index:-1;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.16) 0px,
      rgba(255,255,255,.16) 6px,
      rgba(255,255,255,0)    6px,
      rgba(255,255,255,0)   14px);
  animation: badgeStripes 3s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes badgeStripes{ from{ transform: translateX(0); } to{ transform: translateX(28px); } }

/* pastelowy glow w kolorze kafla */
.hero__tile.theme--promo{ --tone-clr: hsl(var(--tone-promo)); }
.hero__tile.theme--sale { --tone-clr: hsl(var(--tone-sale));  }
.hero__tile.theme--new  { --tone-clr: hsl(var(--tone-new));   }
.hero__tile.theme--promo .hero__badge,
.hero__tile.theme--sale  .hero__badge,
.hero__tile.theme--new   .hero__badge{
  box-shadow:
    0 2px 8px rgba(15,23,42,.16),
    0 0 10px -6px color-mix(in oklab, var(--tone-clr) 35%, transparent),
    0 0 18px -10px color-mix(in oklab, var(--tone-clr) 24%, transparent);
}
.hero__tile:hover .hero__badge,
.hero__tile:has(.hero__tile-link:focus-visible) .hero__badge{
  box-shadow:
    0 3px 10px rgba(15,23,42,.18),
    0 0 12px -5px color-mix(in oklab, var(--tone-clr) 45%, transparent),
    0 0 22px -8px  color-mix(in oklab, var(--tone-clr) 32%, transparent);
}

/* ===== Treść ===== */
.hero__tile-content{
  position:relative; z-index:1; display:grid; gap:10px; padding:clamp(12px,2vw,18px);
  place-items:center; text-align:center;
}
.hero__tile-title{ font-size:clamp(18px,2.2vw,22px); margin:0; line-height:1.2; }
.hero__tile-lead{ margin:0; color:var(--ink-muted); font-size:clamp(14px,1.6vw,16px); max-width:42ch; }

/* Treść NA OBRAZIE (opcjonalnie) */
.hero.has-overlay-content .hero__tile-link{ grid-template-rows: 1fr; }
.hero.has-overlay-content .hero__tile-content{
  position:absolute; inset:auto 0 0 0; padding: clamp(14px, 3vw, 22px); z-index:2;
}
.hero.has-overlay-content .hero__tile-title,
.hero.has-overlay-content .hero__tile-lead{ color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.2); }

/* ===== CTA – gradienty + shine + glow ===== */
.hero__btn{
  --_pad-y:10px; --_pad-x:14px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--_pad-y) var(--_pad-x); border-radius:12px; font-weight:700;
  text-decoration:none; border:2px solid transparent;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, filter .25s ease;
  will-change:transform, filter; width:auto; justify-self:center;
  position:relative; overflow:hidden; z-index:1;
  /* Fallback dla starszych przeglądarek bez color-mix/gradientów */
  background:#2f6df6;
  box-shadow:0 10px 18px -12px color-mix(in oklab, var(--accent) 55%, transparent);
  color:#fff;
}
.hero__tile.theme--promo .hero__btn--primary{ background: var(--grad-promo); }
.hero__tile.theme--sale  .hero__btn--primary{ background: var(--grad-sale);  }
.hero__tile.theme--new   .hero__btn--primary{ background: var(--grad-new);   }
.hero__btn--primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 25%, transparent 50%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.hero__btn--primary:hover::after{ transform:translateX(120%); }
.hero__btn--primary:hover{ filter:brightness(1.05); }
.hero__btn:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.hero__btn::before{
  content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:12px; pointer-events:none; border-radius:999px;
  filter:blur(10px); opacity:.32;
  background:radial-gradient(60% 100% at 50% 50%, color-mix(in oklab, #ffffff 0%, transparent) 0%, transparent 70%);
  transition:opacity .2s ease, transform .2s ease, filter .2s ease;
}
.hero__tile:hover .hero__btn::before, .hero__btn:focus-visible::before{ opacity:.5; transform:scaleX(1.05); filter:blur(12px); }
.hero__tile.is-primary .hero__btn::before{ opacity:.38; }
.hero__tile.is-primary:hover .hero__btn::before,
.hero__tile.is-primary:has(.hero__btn:focus-visible) .hero__btn::before{ opacity:.56; }

/* ===== STYLE MODYFIKATORY ===== */
.hero__tile.style--glass{
  background: hsl(var(--glass-tint) / .10);
  border:1px solid color-mix(in oklab, hsl(var(--glass-tint)) 30%, transparent);
}
@supports (backdrop-filter: saturate(140%) blur(8px)) {
  .hero__tile.style--glass{ backdrop-filter: saturate(140%) blur(8px); }
}
.hero__tile.style--outline{ background:#fff; position:relative; }
.hero__tile.style--outline::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(47,109,246,.25), rgba(47,109,246,0), rgba(47,109,246,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.6;
}
.hero__tile.style--angled{ clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.hero__tile.style--angled .hero__badge{ top:14px; left:14px; }

/* ===== Preferencje ruchu ===== */
@media (prefers-reduced-motion: reduce){
  .hero__tile, .hero__tile:hover, .hero__tile.is-primary, .hero__tile.is-primary:hover,
  .hero__tile-img, .hero__btn--primary::after, .hero__btn::before, .hero__super-title::after,
  .hero__badge::after{
    transform:none !important; transition:none !important; animation:none !important;
  }
}

/* ===== RWD dopieszczanie ===== */
@media (max-width:639.98px){
  .hero__tile-overlay{ opacity:.82; }
  .hero__tile:hover .hero__tile-overlay{ opacity:.62; }

  .hero__btn{ --_pad-y:12px; }
}

/* ===== Newsletter – busy state ===== */
.hero__newsletter-opt.is-busy{
  opacity:.7;
  pointer-events:none;
}