/* Galaxy Gadgetz: Ontdek-pagina. Donkere galaxy-sfeer met roze-paarse gloed,
   grote poster, themategels en een bento-raster met verhaalkaarten. */

.gg-disc { --dark: #0B0A10; --dark-2: #15121F; --line: rgba(255, 255, 255, .1); --muted: rgba(255, 255, 255, .68);
  background: var(--dark); color: #fff; }
.gg-disc a { color: inherit; text-decoration: none; }
.gg-disc__h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -0.025em; line-height: 1.1; color: #fff; }

/* ---------- header ---------- */
.gg-disc__hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); }
.gg-disc__hero::before, .gg-disc__hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.gg-disc__hero::before { width: 640px; height: 640px; left: -220px; top: -160px; background: rgba(196, 47, 122, .32); }
.gg-disc__hero::after { width: 720px; height: 720px; right: -240px; bottom: -320px; background: rgba(123, 44, 191, .38); }
.gg-disc__stars { position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 68%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 52%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 28%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 76%, #fff 50%, transparent 51%);
  animation: gg-disc-twinkle 6s ease-in-out infinite alternate; }
@keyframes gg-disc-twinkle { to { opacity: .25; } }
.gg-disc__hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1000px) { .gg-disc__hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.gg-disc__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--gg-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.gg-disc__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #F27AB4, #9B6BFF); }
.gg-disc__title { margin: 14px 0 16px; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); line-height: .98; letter-spacing: -0.045em; color: #fff; }
.gg-disc__title span { background: linear-gradient(100deg, #F27AB4 0%, #C9A2FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gg-disc__lead { margin: 0; max-width: 40ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.55; color: var(--muted); }
.gg-disc__stats { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--gg-fs-sm); color: var(--muted); }
.gg-disc__stats b { color: #fff; font-weight: 700; }

.gg-disc__pill { display: inline-flex; align-items: center; width: fit-content; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: #fff;
  background: linear-gradient(120deg, var(--gg-pink) 0%, var(--gg-purple, #7B2CBF) 100%); }
.gg-disc__pill--ghost { background: rgba(255, 255, 255, .1); border: 1px solid var(--line); }

.gg-disc__poster { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); }
.gg-disc__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--gg-ease); }
.gg-disc__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 16, 0) 35%, rgba(11, 10, 16, .6) 65%, rgba(11, 10, 16, .95) 100%); }
.gg-disc__poster-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 10px; padding: clamp(20px, 3vw, 36px); }
.gg-disc__kicker { font-size: var(--gg-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.gg-disc__poster-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; }
.gg-disc__poster-meta { font-size: var(--gg-fs-sm); color: rgba(255, 255, 255, .78); }
.gg-disc__poster-cta { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 4px; padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: var(--gg-fs-sm);
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s ease; }
.gg-disc__poster:hover img { transform: scale(1.04); }
.gg-disc__poster:hover .gg-disc__poster-cta { background: var(--gg-pink); border-color: transparent; }
.gg-disc__poster:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- themategels ---------- */
.gg-disc__themes { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%); }
.gg-disc__tiles { margin-top: 20px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .gg-disc__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gg-disc__tile { position: relative; isolation: isolate; display: grid; align-content: end; gap: 2px; min-height: 150px; padding: 16px; border: 0; border-radius: 20px; overflow: hidden;
  text-align: left; color: #fff; cursor: pointer; background: var(--dark-2); box-shadow: 0 0 0 1px var(--line);
  transition: transform .25s ease, box-shadow .25s ease; }
.gg-disc__tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .3s ease; filter: saturate(.85) brightness(.8); }
.gg-disc__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 16, .05) 20%, rgba(11, 10, 16, .85) 100%); }
.gg-disc__tile--all { background: radial-gradient(120% 120% at 20% 0%, rgba(196, 47, 122, .55) 0%, transparent 60%), radial-gradient(120% 120% at 100% 100%, rgba(123, 44, 191, .6) 0%, transparent 60%), var(--dark-2); }
.gg-disc__tile-orbit { position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .45); animation: gg-disc-spin 14s linear infinite; }
.gg-disc__tile-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #F27AB4; box-shadow: 0 0 10px #F27AB4; }
@keyframes gg-disc-spin { to { rotate: 360deg; } }
.gg-disc__tile-name { font-size: var(--gg-fs-lg, 1.15rem); font-weight: 700; letter-spacing: -0.01em; }
.gg-disc__tile-n { font-size: var(--gg-fs-xs); color: rgba(255, 255, 255, .72); }
.gg-disc__tile:hover { transform: translateY(-3px); }
.gg-disc__tile:hover img { transform: scale(1.06); filter: saturate(1) brightness(.9); }
.gg-disc__tile[aria-pressed="true"] { box-shadow: 0 0 0 2px #F27AB4, 0 14px 34px rgba(196, 47, 122, .35); }
.gg-disc__tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- bento ---------- */
.gg-disc__stories { padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 96px); background: var(--dark-2); }
.gg-disc__count { font-size: .55em; font-weight: 500; color: rgba(255, 255, 255, .5); letter-spacing: 0; }
.gg-disc__bento { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; }
@media (min-width: 1000px) { .gg-disc__bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 18px; } }
.gg-disc__card { position: relative; opacity: 0; transform: translateY(16px); transition: opacity .5s ease var(--d), transform .5s ease var(--d); }
.gg-disc__bento.is-in .gg-disc__card { opacity: 1; transform: none; }
.gg-disc__card--big { grid-column: span 2; grid-row: span 2; }
.gg-disc__card--wide { grid-column: span 2; }
.gg-disc__card > a { position: absolute; inset: 0; display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s ease, transform .3s ease; }
.gg-disc__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--gg-ease); }
.gg-disc__card > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 16, 0) 30%, rgba(11, 10, 16, .55) 60%, rgba(11, 10, 16, .92) 100%); }
.gg-disc__card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 8px; padding: 18px 64px 18px 18px; }
.gg-disc__card-title { font-size: var(--gg-fs-md, 1.05rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.gg-disc__card--big .gg-disc__card-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
.gg-disc__card--wide .gg-disc__card-title { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }
.gg-disc__card-ex { font-size: var(--gg-fs-sm); color: rgba(255, 255, 255, .78); max-width: 46ch; }
.gg-disc__card-meta { font-size: var(--gg-fs-xs); color: rgba(255, 255, 255, .7); }
.gg-disc__go { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.gg-disc__card > a:hover { box-shadow: 0 0 0 1.5px rgba(242, 122, 180, .7), 0 18px 40px rgba(123, 44, 191, .35); transform: translateY(-4px); }
.gg-disc__card > a:hover img { transform: scale(1.05); }
.gg-disc__card > a:hover .gg-disc__go { background: linear-gradient(120deg, var(--gg-pink), var(--gg-purple, #7B2CBF)); border-color: transparent; transform: translateX(2px); }
.gg-disc__card > a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gg-disc__empty { grid-column: 1 / -1; padding: 40px; border-radius: 22px; text-align: center; color: var(--muted); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 599.98px) {
  .gg-disc__bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gg-disc__card--big, .gg-disc__card--wide { grid-column: auto; grid-row: auto; }
  .gg-disc__card--big { grid-row: span 1; }
  .gg-disc__card-ex { display: none; }
}

/* ---------- in de maak ---------- */
.gg-disc__soon { padding: clamp(40px, 5vw, 72px) 0; background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%); border-top: 1px solid var(--line); }
.gg-disc__soon-inner { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .gg-disc__soon-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; } }
.gg-disc__soon-text { margin: 10px 0 0; color: var(--muted); max-width: 40ch; }
.gg-disc__soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gg-disc__soon-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
.gg-disc__soon-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #F27AB4; box-shadow: 0 0 0 0 rgba(242, 122, 180, .6); animation: gg-disc-pulse 2s infinite; }
@keyframes gg-disc-pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 122, 180, .55); } 70% { box-shadow: 0 0 0 10px rgba(242, 122, 180, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 122, 180, 0); } }

/* ---------- slot ---------- */
.gg-disc__cta { padding: 0 0 clamp(48px, 6vw, 96px); background: var(--dark); }
.gg-disc__cta-box { position: relative; isolation: isolate; overflow: hidden; padding: clamp(32px, 5vw, 64px); border-radius: 28px; text-align: center;
  background: radial-gradient(80% 140% at 0% 0%, rgba(196, 47, 122, .55) 0%, transparent 60%), radial-gradient(80% 140% at 100% 100%, rgba(123, 44, 191, .65) 0%, transparent 60%), var(--dark-2);
  box-shadow: 0 0 0 1px var(--line); }
.gg-disc__cta-title { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.03em; color: #fff; }
.gg-disc__cta-text { margin: 12px auto 24px; max-width: 46ch; color: rgba(255, 255, 255, .8); }
.gg-disc__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .gg-disc *, .gg-disc *::before, .gg-disc *::after { animation: none !important; transition: none !important; }
  .gg-disc__card { opacity: 1; transform: none; }
}
@media (max-width: 599.98px) {
  /* poster op mobiel hoger, zodat titel en knop niet over elkaar vallen */
  .gg-disc__poster { aspect-ratio: 4 / 5; border-radius: 22px; }
  .gg-disc__poster-body { gap: 8px; padding: 18px; }
  .gg-disc__title { font-size: clamp(2.3rem, 9vw, 2.8rem); }
  .gg-disc__tile { min-height: 120px; padding: 14px; }
}
@media (max-width: 759.98px) {
  /* 'Alles' over de volle breedte, de vier thema's daaronder in 2x2 */
  .gg-disc__tile--all { grid-column: 1 / -1; min-height: 88px; }
}

/* ---------- licht midden (13 okt 2026): alleen de header en het slotblok donker ----------
   Themategels, verhalen en 'in de maak' op een lichte achtergrond; de beeldkaarten
   zelf houden hun donkere overlay, zodat de tekst op de foto leesbaar blijft. */
.gg-disc { background: var(--gg-paper); }
.gg-disc__themes, .gg-disc__stories, .gg-disc__soon, .gg-disc__cta { color: var(--gg-ink); }
.gg-disc__themes .gg-disc__h2, .gg-disc__stories .gg-disc__h2, .gg-disc__soon .gg-disc__h2 { color: var(--gg-ink); }
.gg-disc__themes { background:
  radial-gradient(50% 80% at 100% 0%, rgba(123, 44, 191, .08) 0%, transparent 60%),
  linear-gradient(180deg, #F7F2FB 0%, var(--gg-paper) 100%); }
.gg-disc__stories { background: var(--gg-paper); }
.gg-disc__count { color: var(--gg-muted); }
.gg-disc__tile { box-shadow: 0 10px 26px rgba(17, 17, 20, .10); }
.gg-disc__card > a { box-shadow: 0 10px 26px rgba(17, 17, 20, .10); }
.gg-disc__card > a:hover { box-shadow: 0 0 0 1.5px rgba(196, 47, 122, .55), 0 18px 40px rgba(123, 44, 191, .22); }
.gg-disc__empty { color: var(--gg-muted); box-shadow: 0 0 0 1px var(--gg-line); }

.gg-disc__soon { background: linear-gradient(180deg, var(--gg-paper) 0%, #F7F2FB 100%); border-top: 1px solid var(--gg-line); }
.gg-disc__soon-text { color: var(--gg-muted); }
.gg-disc__soon-item { background: #fff; box-shadow: 0 0 0 1px var(--gg-line), 0 6px 18px rgba(90, 40, 120, .06); color: var(--gg-ink); }
.gg-disc__soon .gg-disc__pill--ghost { background: var(--gg-surface); border-color: var(--gg-line); color: var(--gg-ink); }

.gg-disc__cta { background: #F7F2FB; }   /* donkere kaart op een licht vlak */
/* donkere delen houden expliciet hun donkere achtergrond en witte tekst */
.gg-disc__hero { background: var(--dark); color: #fff; }
.gg-disc__tile, .gg-disc__card > a, .gg-disc__cta-box { color: #fff; }
.gg-disc__cta-box .gg-btn--on-dark { --_bg: transparent; --_fg: #fff; --_bd: rgba(255, 255, 255, .55); color: #fff; }
.gg-disc__cta-box .gg-btn--on-dark:hover { --_bg: #fff; --_fg: var(--gg-ink); --_bd: #fff; color: var(--gg-ink); }