/* ==========================================================================
   Da's Brabants — category landing pages (/mokken, /hoodies),
   server-rendered by lib/pages/category.js.
   --------------------------------------------------------------------------
   Loaded after /css/style.css and /css/pages/shop.css (the product list,
   chips, search and sort are shared with /winkel). Only the text block below
   the list lives here:

    1. "Over deze collectie" (body text + woordenboek block side by side)
    2. "Woorden uit deze collectie" (links to /woordenboek/{slug})
   ========================================================================== */


/* 1. Over deze collectie
   ========================================================================== */

.collection-info {
  border-top: 1px solid var(--lijn);
}

.collection-info__inner {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: start;
}

@media (min-width: 960px) {
  .collection-info__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.collection-about {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  min-inline-size: 0;
}

.collection-about .section-title {
  max-inline-size: 24ch;
}

.collection-about__text {
  margin-top: var(--space-2);
  color: var(--inkt);
}

.collection-about__text a {
  color: var(--rood-actie);
  font-weight: 650;
  text-underline-offset: 0.16em;
}

.collection-about__text a:hover {
  color: var(--rood-hover);
}


/* 2. Woorden uit deze collectie
   ========================================================================== */

.collection-terms {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--rood-zacht);
}

/* The sticky header stays clear of the block while you read the text next to it. */
@media (min-width: 960px) {
  .collection-terms {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.collection-terms__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-h4);
  font-weight: 850;
  line-height: 1.25;
}

.collection-terms__title .icon {
  flex: none;
  color: var(--rood-actie);
}

.collection-terms__intro {
  color: var(--grijs);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.collection-terms__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One word: the dialect in bold red, the meaning below it, an arrow on the right. */
.term-link {
  position: relative;
  display: grid;
  gap: 0.1rem;
  min-block-size: var(--tap);
  padding: 0.7rem 2.75rem 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--wit);
  color: var(--inkt);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.term-link::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  inline-size: 1.1em;
  block-size: 1.1em;
  background: var(--rood-actie);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transform: translateY(-50%);
  transition: transform var(--dur) var(--ease);
}

.term-link:hover {
  border-color: var(--rood-actie);
  color: var(--inkt);
  box-shadow: var(--shadow);
}

.term-link:hover::after {
  transform: translate(3px, -50%);
}

.term-link__word {
  color: var(--rood-actie);
  font-size: 1.0625rem;
  font-weight: 850;
  line-height: 1.3;
}

.term-link__meaning {
  color: var(--grijs);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.collection-terms__all {
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .term-link,
  .term-link::after {
    transition: none;
  }

  .term-link:hover::after {
    transform: translateY(-50%);
  }
}

@media print {
  .collection-terms {
    position: static;
    background: none;
    border: 1px solid var(--lijn);
  }
}