/* ==========================================================================
   Cadeaugidsen: /cadeaus (hub) and /cadeaus/{slug} (guide)
   Server-rendered by lib/pages/cadeaus.js; shared components (page header,
   product cards, category tiles, toc, card, chips) come from style.css.
   ========================================================================== */

/* Intro: text + "In deze gids" side by side on wide screens. */
.gift-intro__inner {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

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

  .gift-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.gift-toc a {
  vertical-align: top; /* keeps the bullet next to the first line of a long title */
  color: var(--inkt);
  text-decoration-color: var(--lijn-sterk);
}

.gift-toc a:hover {
  color: var(--rood-actie);
}

/* A section per kind of gift: title + text, then the picks. */
.gift-section {
  scroll-margin-top: var(--header-h);
}

.gift-section__head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.gift-section__text {
  max-width: 68ch;
}

/* Picks: a product card with the "why" underneath. */
.gift-picks > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

.gift-picks > li > .product-card {
  flex: 1;
}

.gift-pick__why {
  position: relative;
  padding-inline-start: 0.9rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--inkt);
}

.gift-pick__why::before {
  content: "";
  position: absolute;
  inset: 0.2em auto 0.2em 0;
  inline-size: 4px;
  border-radius: 2px;
  background: var(--bont-gradient) 0 0 / 4px 4px;
}

/* Order in time. */
#op-tijd-bestellen {
  scroll-margin-top: var(--header-h);
}

.gift-order {
  display: grid;
  gap: var(--space-4);
}

.gift-order__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 850;
}

.gift-order__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--rood-zacht);
  color: var(--rood-actie);
}

.gift-order__links {
  margin: 0;
}

/* Words from this guide → the woordenboek. */
.gift-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.gift-term {
  display: grid;
  gap: 0.15rem;
  block-size: 100%;
  min-block-size: var(--tap);
  padding: 0.8rem 1rem;
  border: 2px solid var(--lijn);
  border-radius: var(--radius-md);
  background: var(--wit);
  color: var(--inkt);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gift-term:hover {
  border-color: var(--rood-actie);
  transform: translateY(-2px);
}

.gift-term__word {
  font-weight: 850;
  color: var(--rood-actie);
  overflow-wrap: anywhere;
}

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

/* Hub */
.gift-hub__intro {
  margin-bottom: var(--space-7);
}

.gift-hub__title {
  margin-bottom: var(--space-5);
}

/* Three guides: three tiles in a row on wide screens (not the four of the categories). */
@media (min-width: 960px) {
  .gift-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* One column of tiles on narrow phones, so the guide titles stay readable. */
@media (max-width: 479.98px) {
  .gift-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .gift-tiles .category-tile__media {
    aspect-ratio: 16 / 9;
    min-block-size: 0; /* let the ratio win over the square image inside */
    overflow: hidden;
  }

  .gift-tiles .category-tile__media > .product-image {
    aspect-ratio: auto;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-term,
  .gift-term:hover {
    transition: none;
    transform: none;
  }
}