/* Galaxy Gadgetz: product in de spotlight. Maten en opbouw van de oude live site
   (gg_product_spotlight, .gg-ps-*); roze uit de nieuwe tokens, zoals de hero. */

.gg-spot { padding: var(--gg-section-y) 0; background: var(--gg-paper); }

/* Kop */
.gg-spot__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.gg-spot__head-left { display: flex; flex-direction: column; gap: 4px; }
.gg-spot__eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(0, 0, 0, .45); }
.gg-spot__heading { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--gg-ink); }
.gg-spot__more {
  display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: rgba(0, 0, 0, .55);
  text-decoration: none; border-bottom: 1.5px solid rgba(0, 0, 0, .15); padding-bottom: 1px; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.gg-spot__more:hover { color: var(--gg-pink); border-color: var(--gg-pink); }

/* Kaart */
.gg-spot__card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: #fff; border-radius: 24px; box-shadow: 0 4px 32px rgba(0, 0, 0, .07);
}

/* Beeldkant */
.gg-spot__media { position: relative; min-height: 560px; overflow: hidden; background: #0b0b10; }
.gg-spot__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center; transition: transform .7s ease;
}
.gg-spot__card:hover .gg-spot__img { transform: scale(1.04); }

.gg-spot__ribbon {
  position: absolute; top: 28px; left: -8px; z-index: 2;
  background: linear-gradient(135deg, #C42F7A, #A82668); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 20px 7px 16px; border-radius: 0 99px 99px 0;
  box-shadow: 0 4px 14px rgba(196, 47, 122, .4);
}

/* uitverkocht: tweede lint, direct onder 'Product van de maand' */
.gg-spot__soldout {
  position: absolute; top: 66px; left: -8px; z-index: 2;
  background: #111114; color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 20px 7px 16px; border-radius: 0 99px 99px 0;
  box-shadow: 0 4px 14px rgba(17, 17, 20, .3);
}
.gg-spot__soldout--top { top: 28px; }

.gg-spot__rating {
  position: absolute; bottom: 24px; left: 24px; z-index: 2; display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: .72rem; font-weight: 600; padding: 6px 14px; border-radius: 99px;
}
.gg-spot__star { color: #FBBF24; flex-shrink: 0; }

/* Tekstkant */
.gg-spot__content { display: flex; flex-direction: column; justify-content: center; padding: 52px 56px; background: #fff; }

.gg-spot__pill {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 20px;
  background: rgba(196, 47, 122, .07); border: 1px solid rgba(196, 47, 122, .2); color: var(--gg-pink-strong);
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 6px 16px; border-radius: 99px;
}
.gg-spot__pill::before { content: '✦'; }

.gg-spot__title { margin: 0 0 16px; font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: #000; }
.gg-spot__desc { margin: 0 0 28px; font-size: .9rem; color: rgba(0, 0, 0, .6); line-height: 1.75; max-width: 380px; }

.gg-spot__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.gg-spot__chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--gg-surface); border: 1px solid rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .7); font-size: .68rem; font-weight: 600; padding: 7px 14px; border-radius: 99px;
}
.gg-spot__chip svg { color: var(--gg-pink); flex-shrink: 0; }

.gg-spot__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gg-spot__price { display: flex; flex-direction: column; }
.gg-spot__price-label { font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .5); }
.gg-spot__price-val { font-size: 1.8rem; font-weight: 800; color: #000; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Knop: zelfde roze verloopknop als de hero */
.gg-spot__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 15px 32px; border-radius: 12px;
  font-size: .78rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #C42F7A, #A82668);
  box-shadow: 0 4px 16px rgba(196, 47, 122, .4);
  transition: opacity .2s, transform .2s;
}
.gg-spot__cta:hover { opacity: .92; transform: translateY(-1px); color: #fff; }
.gg-spot__cta:focus-visible, .gg-spot__more:focus-visible { outline: 2px solid var(--gg-ink); outline-offset: 3px; }

/* Tablet: gestapeld */
@media (max-width: 989px) {
  .gg-spot__card { grid-template-columns: 1fr; }
  .gg-spot__media { min-height: 380px; }
}

/* Mobiel */
@media (max-width: 749px) {
  .gg-spot__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .gg-spot__media { min-height: 280px; }
  .gg-spot__content { padding: 28px 20px 32px; }
  .gg-spot__title { font-size: 1.75rem; margin-bottom: 12px; }
  .gg-spot__desc { font-size: .85rem; margin-bottom: 20px; max-width: 100%; }
  .gg-spot__chips { margin-bottom: 24px; }
  .gg-spot__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gg-spot__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-spot__img, .gg-spot__cta { transition: none; }
  .gg-spot__card:hover .gg-spot__img { transform: none; }
}

/* Paars accent (zie assets/css/gg.css): pil en chip-iconen */
.gg-spot__pill { background: var(--gg-purple-tint); border-color: var(--gg-purple-tint-2); color: var(--gg-purple); }
.gg-spot__chip svg { color: var(--gg-purple); }

/* Video over het beeld (zelfde uitsnede); pas zichtbaar als hij speelt */
.gg-spot__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.gg-spot__video.is-playing { opacity: 1; }
.gg-spot__media .gg-spot__vlabel { position: absolute; bottom: 20px; right: 20px; z-index: 3; }   /* specifieker dan .gg-vibe { position: relative } */