/*
  Stepp dashboard — gedeelde CSS.
  Gebruikt door:
    - page-media-overzicht.php   (.dashboard .hero ... + .card-grid/.media-card)
    - taxonomy-categorie.php     (.dashboard .hero ... + .breadcrumb/.detail-item)
  Hero/header-look (.dashboard, .hero, .version-badge, .brand-logo,
  .hero-decoration, .content-panel) hoort bij ELKE pagina in dit dashboard —
  wijzig die basisstijl op deze ene plek, niet per pagina.
*/

:root {
  --stepp-navy: #0a1955;
  --stepp-navy-light: #293b73;
  --page-background: #f0f3ff;
  --panel-background: #ffffff;
  --card-gap: 24px;
  --page-width: 1440px;
  --card-fallback-bg: #e7eaf5;
}

.dashboard * {
  box-sizing: border-box;
}

.dashboard {
  width: min(100%, var(--page-width));
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--page-background);
  color: var(--stepp-navy);
  font-family: "Outfit", Arial, sans-serif;
}

.dashboard img,
.dashboard svg {
  display: block;
}

/* ─── Hero ──────────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 467px;
  overflow: hidden;
  background: var(--stepp-navy);
  border-radius: 0 0 48px 48px;
}

.version-badge {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50px;
  display: flex;
  width: 207px;
  height: 72px;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: #ffffff;
  border-radius: 0 0 14px 14px;
}

.version-badge img {
  width: 34px;
  height: auto;
  object-fit: contain;
}

.version-badge span {
  color: #c8c8cb;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand-logo {
  position: absolute;
  z-index: 2;
  top: 195px;
  left: 155px;
  width: 380px;
  height: auto;
  object-fit: contain;
}

.hero-decoration {
  position: absolute;
  z-index: 1;
  top: -100px;
  right: -90px;
  width: 790px;
  height: auto;
  opacity: 0.1;
  pointer-events: none;
}

.hero-decoration path {
  fill: white;
}

/* ─── Content panel (wit vlak onder de hero) ───────────────────── */

.content-panel {
  position: relative;
  z-index: 4;
  min-height: calc(100vh - 394px);
  margin: -73px 50px 0;
  padding: 129px clamp(32px, 9vw, 130px) 80px;
  background: var(--panel-background);
  border-radius: 44px 44px 0 0;
}

/* Categorie-detailpagina heeft een breadcrumb bovenin het paneel — iets
   minder top-padding dan de kaartenoverzicht-variant. */
.content-panel--detail {
  padding-top: 56px;
}

/* ─── Kaartenoverzicht (page-media-overzicht.php) ──────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
}

.media-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 253 / 247;
  border-radius: 24px;
  background: var(--card-fallback-bg);
  outline: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card img.is-missing {
  display: none;
}

.media-card-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(160deg, var(--stepp-navy-light), var(--stepp-navy));
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.media-card.is-missing .media-card-fallback {
  display: flex;
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(10, 25, 85, 0.16);
}

.media-card:focus-visible {
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #00a0d2;
}

/* ─── Breadcrumb (categorie-detailpagina) ──────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 500;
}

.breadcrumb__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-fallback-bg);
  color: var(--stepp-navy);
  text-decoration: none;
  font-size: 16px;
  transition: background 150ms ease;
}

.breadcrumb__back:hover {
  background: #d7dcf5;
}

.breadcrumb__current {
  color: #6b7399;
}

/* ─── Detail-item (poster binnen een categorie) ────────────────── */

.detail-item {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px 0;
}

/* Halve-cirkel-vlak i.p.v. een blok: vierkante hoeken links, volledig
   afgeronde (semicirkelvormige) hoeken rechts. "999px" wordt door de browser
   automatisch geclampt tot de helft van de vakhoogte, dus dit blijft een
   nette halve cirkel ongeacht de containergrootte. De foto zelf vult het vak
   niet (geen object-fit: cover) — hij "zweeft" er iets overheen met een
   slagschaduw, zoals in het aangeleverde ontwerp. */
.detail-media {
  position: relative;
  flex: 0 0 440px;
  border-radius: 24px 24px 24px 24px;
  overflow: hidden;
  background: var(--card-fallback-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-media img {
  width: 108%;
  height: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 32px rgba(10, 25, 85, 0.22));
}

.detail-media-placeholder {
  color: #9aa3c4;
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
  text-align: center;
}

.detail-copy {
  flex: 1;
  min-width: 0;
  max-width: 560px;
}

.detail-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.2;
}

.detail-description {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #3a4270;
  margin: 0 0 24px;
}

.template-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--stepp-navy);
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 150ms ease, transform 150ms ease;
}

.template-button:hover {
  background: var(--stepp-navy-light);
  transform: translateY(-2px);
}

.template-button__arrow {
  transition: transform 150ms ease;
}

.template-button:hover .template-button__arrow {
  transform: translateX(3px);
}

.detail-divider {
  border: none;
  border-top: 1px solid #e7eaf5;
  margin: 0;
}

.detail-empty {
  text-align: center;
  padding: 48px 0;
  color: #6b7399;
  font-size: 15px;
}

/* ─── Responsive ────────────────────────────────────────────────── */

@media (max-width: 1050px) {
  .hero { height: 410px; }
  .brand-logo { top: 180px; left: 9vw; width: min(340px, 48vw); }
  .hero-decoration { top: -125px; right: -260px; width: 720px; }
  .content-panel { min-height: calc(100vh - 345px); margin: -65px 32px 0; padding: 90px 8vw 72px; }
  .content-panel--detail { padding-top: 48px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-item { gap: 32px; }
  .detail-media { flex-basis: 320px; }
}

@media (max-width: 620px) {
  .hero { height: 330px; border-radius: 0 0 32px 32px; }
  .version-badge { left: 20px; width: 174px; height: 60px; gap: 10px; padding: 0 15px; }
  .version-badge img { width: 28px; }
  .version-badge span { font-size: 16px; }
  .brand-logo { top: 155px; left: 28px; width: min(290px, 72vw); height: auto; }
  .hero-decoration { top: -55px; right: -330px; width: 650px; opacity: 0.7; }
  .hero-decoration path { stroke-width: 78px; }
  .content-panel { min-height: calc(100vh - 278px); margin: -52px 16px 0; padding: 64px 24px 56px; border-radius: 30px 30px 0 0; }
  .card-grid { gap: 18px; }
  .media-card { border-radius: 20px; }
  .detail-item { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 0; }
  .detail-media { flex-basis: auto; width: 100%; max-width: 320px; }
  .detail-title { font-size: 22px; }
}

@media (max-width: 430px) {
  .card-grid { grid-template-columns: 1fr; }
  .media-card { width: min(100%, 300px); justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .media-card,
  .template-button,
  .template-button__arrow {
    transition: none;
  }
}