/* ==========================================================================
   Da’s Brabants — woordenboek (hub /woordenboek + term pages /woordenboek/…)
   --------------------------------------------------------------------------
   Loaded after /css/style.css and /css/pages/content.css (which holds the
   hub's base look: toolbar, A–Z, letter tiles, entries). Only additions for
   the server-rendered woordenboek live here.

    1. Hub additions ("Uitgebreid uitgelegd", "Lees meer over …")
    2. Term page: header and layout
    3. Term page: article (examples, sections, sources, call)
    4. Term page: aside (related words, back link)
    5. Term page: product block
    6. Print
   ========================================================================== */


/* 1. Hub additions
   ========================================================================== */

.wb-featured {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.wb-featured__title {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* One scrollable row on small screens (.chips--scroll), wrapped from 960px.
   ul[role="list"] resets padding, so the gutter padding of .chips--scroll is restored here. */
.wb-featured .chips--scroll {
  padding: 0.25rem var(--gutter);
  scroll-padding-inline: var(--gutter); /* snap the first chip to the gutter, not the screen edge */
}

@media (min-width: 960px) {
  .wb-featured .chips--scroll { padding-inline: 0; }
}

.wb-featured__list .chip {
  padding-inline: 0.9rem;
  font-size: 0.9063rem;
}

.wb-entry__more {
  margin-top: calc(var(--space-1) * -1);
}

.wb-entry__more .link-arrow {
  font-size: 0.9688rem;
}


/* 2. Term page: header and layout
   ========================================================================== */

.wb-term__title {
  max-width: 20ch;
  color: var(--rood-actie);
  overflow-wrap: anywhere;
}

.wb-term__definition {
  max-width: 56ch;
  color: var(--inkt);
  font-weight: 650;
}

.wb-term {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 960px) {
  .wb-term {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-8);
  }

  .wb-term__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}


/* 3. Term page: article
   ========================================================================== */

.wb-term__article {
  min-inline-size: 0;
}

.wb-term__section > * + * {
  margin-top: 1em;
}

.wb-term__article > .wb-term__section:first-child > h2 {
  margin-top: 0;
}

/* The example cards reuse .wb-entry__example (content.css). */
.prose .wb-examples {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: 0;
  list-style: none;
}

.prose .wb-examples > li + li {
  margin-top: 0;
}

.wb-examples .wb-entry__quote {
  font-size: 1.125rem;
}

.wb-term__sources {
  padding-top: var(--space-3);
  border-top: 1px dashed var(--lijn);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--grijs);
}

.prose .wb-term__sources ul {
  display: grid;
  gap: 0.15rem;
  margin-top: var(--space-1);
  padding-inline-start: 0;
  list-style: none;
}

.prose .wb-term__sources li + li {
  margin-top: 0;
}

.prose .wb-term__call {
  margin-top: 1.25em;
  font-size: 1rem;
}

.wb-term__call .notice__body {
  gap: var(--space-2);
}


/* 4. Term page: aside
   ========================================================================== */

.wb-term__aside {
  display: grid;
  gap: var(--space-5);
  min-inline-size: 0;
}

.wb-related__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h4);
  font-weight: 850;
}

.wb-related__list {
  display: grid;
  list-style: none;
  padding: 0;
}

.wb-related__list > li + li {
  border-top: 1px solid var(--lijn);
}

.wb-related__link {
  display: grid;
  gap: 0.1rem;
  min-block-size: var(--tap);
  padding-block: var(--space-3);
  color: var(--inkt);
  text-decoration: none;
}

.wb-related__word {
  font-weight: 850;
  color: var(--rood-actie);
}

.wb-related__meaning {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--grijs);
}

.wb-related__link:hover .wb-related__word {
  text-decoration: underline;
}

.wb-term__back {
  display: grid;
  gap: var(--space-2);
}

.wb-term__back-title {
  font-size: var(--fs-h4);
  font-weight: 850;
}


/* 5. Term page: product block
   ========================================================================== */

/* Cards inside <li> keep their full height in the grid (same as shop.css). */
.wb-shop .product-grid > li {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.wb-shop .product-grid > li > .product-card {
  flex: 1;
}


/* 6. Print
   ========================================================================== */

@media print {
  .wb-featured,
  .wb-term__aside,
  .wb-term__call,
  .wb-shop {
    display: none !important;
  }

  .wb-term {
    display: block;
  }
}