/* WPNest — Bento / Modern SaaS utility layer.
   Layout primitives + glass / decoration / animation helpers. */

/* ───── Layout: 12-col bento grid ───── */
.wpnest-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: var(--sp-4);
}
.wpnest-bento-grid--tight {
  gap: var(--sp-3);
}
.wpnest-bento-grid--loose {
  gap: var(--sp-5);
}

/* Column spans */
.wpnest-bento-card--span-2 { grid-column: span 2; }
.wpnest-bento-card--span-3 { grid-column: span 3; }
.wpnest-bento-card--span-4 { grid-column: span 4; }
.wpnest-bento-card--span-5 { grid-column: span 5; }
.wpnest-bento-card--span-6 { grid-column: span 6; }
.wpnest-bento-card--span-7 { grid-column: span 7; }
.wpnest-bento-card--span-8 { grid-column: span 8; }
.wpnest-bento-card--span-12 { grid-column: span 12; }

/* Row spans */
.wpnest-bento-card--row-1 { grid-row: span 1; }
.wpnest-bento-card--row-2 { grid-row: span 2; }
.wpnest-bento-card--row-3 { grid-row: span 3; }

/* ───── Bento card surface ───── */
.wpnest-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-med) var(--ease-bento),
    box-shadow var(--dur-med) var(--ease-bento),
    border-color var(--dur-med) var(--ease-bento);
}
.wpnest-bento-card > * {
  position: relative;
  z-index: 1;
}

/* Card variants */
.wpnest-bento-card--accent {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
}
.wpnest-bento-card--accent h1,
.wpnest-bento-card--accent h2,
.wpnest-bento-card--accent h3,
.wpnest-bento-card--accent h4,
.wpnest-bento-card--accent p {
  color: #fff;
}
.wpnest-bento-card--accent .eyebrow {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Dark variant = always-dark promotional surface (same pattern as .ftr / .lm).
   Literal hex keeps tło ciemne i biały tekst czytelny w obu motywach. */
.wpnest-bento-card--dark {
  background: #1a1410;
  border-color: transparent;
  color: #fbf7f1;
}
[data-theme="dark"] .wpnest-bento-card--dark {
  background: #0c0a08;
}
.wpnest-bento-card--dark h1,
.wpnest-bento-card--dark h2,
.wpnest-bento-card--dark h3,
.wpnest-bento-card--dark h4 {
  color: #fbf7f1;
}
.wpnest-bento-card--dark p {
  color: rgba(251,247,241,.78);
}
.wpnest-bento-card--dark .eyebrow {
  background: rgba(255,255,255,.08);
  color: var(--accent-2);
}

.wpnest-bento-card--soft {
  background: var(--accent-soft);
  border-color: transparent;
}

.wpnest-bento-card--bordered {
  background: transparent;
  border: 1px dashed var(--line);
}

/* Card sizing helpers */
.wpnest-bento-card--padded-lg { padding: var(--sp-6); }
.wpnest-bento-card--padded-sm { padding: var(--sp-4); }
.wpnest-bento-card--flush { padding: 0; overflow: hidden; }

/* ───── Glass surface ───── */
.wpnest-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(140%);
  backdrop-filter: blur(var(--blur-md)) saturate(140%);
}
.wpnest-glass--strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--blur-lg)) saturate(160%);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wpnest-glass {
    background: color-mix(in srgb, var(--card) 92%, transparent);
  }
  .wpnest-glass--strong {
    background: color-mix(in srgb, var(--card) 96%, transparent);
  }
}

/* ───── Decoration: gradient mesh, noise, blobs ───── */
.wpnest-gradient-mesh {
  position: absolute;
  inset: 0;
  background-image: var(--gradient-mesh-1);
  pointer-events: none;
  z-index: 0;
}
.wpnest-gradient-mesh--alt {
  background-image: var(--gradient-mesh-2);
}
.wpnest-noise {
  position: absolute;
  inset: 0;
  background-image: var(--noise-svg);
  background-size: 160px 160px;
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.wpnest-blob {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.wpnest-blob--orange {
  background: radial-gradient(circle at center, #ff8a47 0%, rgba(255,138,71,0) 70%);
}
.wpnest-blob--warm {
  background: radial-gradient(circle at center, #ffe1cc 0%, rgba(255,225,204,0) 70%);
}
.wpnest-blob--lg {
  width: 420px;
  height: 420px;
  filter: blur(80px);
}

/* ───── Hover lift ───── */
.has-hover-lift {
  transition:
    transform var(--dur-med) var(--ease-bento),
    box-shadow var(--dur-med) var(--ease-bento);
  will-change: transform;
}
.has-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-bento-hover);
}
.wpnest-bento-card.has-hover-lift:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* ───── Animations: scroll-triggered reveal ───── */
.wpnest-anim-in,
.wpnest-anim-scale-in,
.wpnest-anim-fade {
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.wpnest-anim-in {
  transform: translateY(16px);
}
.wpnest-anim-scale-in {
  transform: scale(0.96);
}
.wpnest-anim-fade {
  transform: none;
}
.wpnest-anim-in.is-revealed,
.wpnest-anim-scale-in.is-revealed,
.wpnest-anim-fade.is-revealed {
  opacity: 1;
  transform: none;
}

/* Staggered children — set delay via :nth-child within a bento-grid container.
   Cap at 480ms so late children don't feel laggy. */
.wpnest-bento-grid > .wpnest-anim-in:nth-child(1) { --anim-delay: 0ms; }
.wpnest-bento-grid > .wpnest-anim-in:nth-child(2) { --anim-delay: 80ms; }
.wpnest-bento-grid > .wpnest-anim-in:nth-child(3) { --anim-delay: 160ms; }
.wpnest-bento-grid > .wpnest-anim-in:nth-child(4) { --anim-delay: 240ms; }
.wpnest-bento-grid > .wpnest-anim-in:nth-child(5) { --anim-delay: 320ms; }
.wpnest-bento-grid > .wpnest-anim-in:nth-child(6) { --anim-delay: 400ms; }
.wpnest-bento-grid > .wpnest-anim-in:nth-child(n+7) { --anim-delay: 480ms; }

/* ───── Display typography helpers ───── */
.h-hero {
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
.h-bento-display {
  font-size: var(--text-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.h-bento-section {
  font-size: var(--text-section-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.text-stat {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* ───── Reduced motion guard ───── */
@media (prefers-reduced-motion: reduce) {
  .wpnest-anim-in,
  .wpnest-anim-scale-in,
  .wpnest-anim-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wpnest-bento-card,
  .has-hover-lift,
  .has-hover-lift:hover {
    transition: none !important;
    transform: none !important;
  }
  .wpnest-blob {
    display: none;
  }
}

/* ───── Responsive collapse ───── */
@media (max-width: 1080px) {
  .wpnest-bento-card--span-7 { grid-column: span 6; }
  .wpnest-bento-card--span-5,
  .wpnest-bento-card--span-4 { grid-column: span 6; }
  .wpnest-bento-card--span-8 { grid-column: span 12; }
  .wpnest-bento-card--span-3 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .wpnest-bento-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .wpnest-bento-card,
  .wpnest-bento-card--span-2,
  .wpnest-bento-card--span-3,
  .wpnest-bento-card--span-4,
  .wpnest-bento-card--span-5,
  .wpnest-bento-card--span-6,
  .wpnest-bento-card--span-7,
  .wpnest-bento-card--span-8,
  .wpnest-bento-card--span-12 {
    grid-column: 1 / -1;
  }
  .wpnest-bento-card--row-2,
  .wpnest-bento-card--row-3 {
    grid-row: span 1;
  }
  .wpnest-bento-card {
    padding: var(--sp-4);
  }
  .wpnest-bento-card--padded-lg {
    padding: var(--sp-5);
  }
}