/* LieMo Producten: new-product spotlight, homepage promo and regular product blocks.
   Builds on the liemo theme's variables (colors, gradients, radii, fonts). */

/* -------- spotlight (products page) and promo (homepage) -------- */
.lp-spotlight {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(28px, 4.5vw, 64px);
  margin-bottom: 36px; padding: clamp(28px, 5vw, 60px);
  border-radius: var(--radius-xl); background: var(--grad-hero); color: #fff;
  box-shadow: var(--shadow-lg);
}
.lp-spotlight::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;
  background: var(--grad-accent);
}
.lp-spotlight::after {
  content: ''; position: absolute; inset: 0; z-index: -2; opacity: .3;
  background-image:
    radial-gradient(circle at 78% 50%, rgba(45,166,255,.35), transparent 45%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.lp-spotlight__copy { position: relative; z-index: 1; }
.lp-spotlight__media {
  position: relative; z-index: 1; display: block; aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg); overflow: hidden; background: #04122a;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform .6s var(--ease);
}
.lp-spotlight__media:hover { transform: perspective(1400px) rotateY(-1deg) rotateX(1deg) scale(1.01); }
.lp-spotlight__media video,
.lp-spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Radar-style rings behind the media. */
.lp-rings {
  position: absolute; z-index: -1; top: 50%; left: 75%;
  width: min(62%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none;
}
.lp-rings i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(45,166,255,.55);
  animation: lp-ring 4.8s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0;
}
.lp-rings i:nth-child(2) { animation-delay: 1.6s; }
.lp-rings i:nth-child(3) { animation-delay: 3.2s; }
@keyframes lp-ring {
  0%   { transform: scale(.35); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.lp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.lp-badge-new {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px; border-radius: 999px;
  background: var(--grad-accent); color: #fff;
  font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 10px 28px -10px rgba(45,166,255,.85);
}
.lp-badge-new__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: lp-ping 1.8s ease-out infinite;
}
@keyframes lp-ping {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.8); }
  100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
}
.lp-badge-soft {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: rgba(241,246,255,.85); font-size: .82rem;
}

.lp-spotlight .product-kicker { margin-bottom: 6px; }
.lp-spotlight h2 {
  margin: 0 0 12px; font-size: clamp(2.8rem, 6.4vw, 4.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  background: linear-gradient(120deg, #fff 35%, #9fd8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-lead { font-size: 1.2rem; line-height: 1.5; color: rgba(255,255,255,.88); margin: 0 0 18px; max-width: 36ch; }
.lp-text { color: rgba(255,255,255,.72); margin: 0 0 4px; max-width: 52ch; }
.lp-spotlight .check-list li { color: rgba(255,255,255,.82); }

/* Columns follow the number of figures: all in one row when there is room, otherwise an even split. */
.lp-spotlight__copy { container-type: inline-size; }
.lp-specs {
  display: grid; grid-template-columns: repeat(var(--lp-n-narrow, 2), minmax(0, 1fr)); gap: 10px;
  margin: 26px 0 0;
}
@container (min-width: 520px) {
  .lp-specs { grid-template-columns: repeat(var(--lp-n, 4), minmax(0, 1fr)); }
}
.lp-specs div {
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lp-specs dt { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.2; white-space: nowrap; }
.lp-specs dd { margin: 3px 0 0; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.62); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lp-chips span {
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-family: var(--font-head);
  color: #cfe9ff; background: rgba(45,166,255,.12); border: 1px solid rgba(45,166,255,.28);
}

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Homepage variant: media left, copy right, as its own section above the products. */
.lp-promo { padding-bottom: 0; }
.lp-promo .lp-spotlight { margin-bottom: 0; }
.lp-spotlight--home { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.lp-spotlight--home .lp-spotlight__media { order: -1; transform: perspective(1400px) rotateY(5deg) rotateX(2deg); }
.lp-spotlight--home .lp-spotlight__media:hover { transform: perspective(1400px) rotateY(1deg) rotateX(1deg) scale(1.01); }
.lp-spotlight--home .lp-rings { left: 27%; }
.lp-spotlight--home::after {
  background-image:
    radial-gradient(circle at 22% 50%, rgba(45,166,255,.35), transparent 45%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* Products page: new products first in the jump menu, with a badge. */
.product-jumpnav .lp-jumpnav-new { gap: 8px; background: var(--c-primary); color: #fff; }
.product-jumpnav .lp-jumpnav-new:hover { background: var(--c-primary-2); color: #fff; }
.lp-jumpnav-new span {
  padding: 2px 8px; border-radius: 999px; background: var(--grad-accent);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
}

/* -------- regular product (no longer new) -------- */
.product-category__media.lp-media-cover img { object-fit: cover; padding: 0; background: none; }
.spec-strip.lp-spec-strip { grid-template-columns: repeat(var(--lp-cols, 4), 1fr); }
.lp-category .product-panel--dark .lp-actions { margin-top: 20px; }
.lp-availability { margin-top: 10px !important; font-family: var(--font-head); color: #9fd8ff !important; }

/* Four cards: one row on wide screens, two by two in between (the theme stacks them on phones). */
.products-grid:has(> .lp-card):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-card--cover .product-media { background: var(--grad-hero); }
.lp-card--cover .product-media img { object-fit: cover; padding: 0; }

/* -------- responsive -------- */
@media (max-width: 980px) {
  .lp-spotlight,
  .lp-spotlight--home { grid-template-columns: minmax(0, 1fr); }
  .lp-spotlight__media,
  .lp-spotlight--home .lp-spotlight__media { order: -1; transform: none; }
  .lp-spotlight__media:hover,
  .lp-spotlight--home .lp-spotlight__media:hover { transform: none; }
  .lp-rings,
  .lp-spotlight--home .lp-rings { top: 28%; left: 50%; width: 90%; }
}
@media (max-width: 1100px) {
  .products-grid:has(> .lp-card):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lp-spotlight { padding: 22px 20px 28px; border-radius: var(--radius-lg); }
  .lp-spotlight h2 { font-size: clamp(2.4rem, 13vw, 3.2rem); }
  .lp-lead { font-size: 1.05rem; }
  .lp-actions .btn { flex: 1 1 auto; justify-content: center; }
  .lp-specs div { padding: 12px 13px; }
  .spec-strip.lp-spec-strip { grid-template-columns: repeat(2, 1fr); }
  .products-grid:has(> .lp-card):has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-rings i, .lp-badge-new__dot { animation: none; }
  .lp-rings { display: none; }
}