/**
 * Dienstenoverzicht.
 *
 * Bouwt voort op rix-home.css; alleen wat deze pagina extra nodig heeft staat
 * hier. De vier hoofddiensten krijgen bewust meer ruimte dan de kaartjes op de
 * homepage: daar zijn ze een opsomming, hier zijn ze het onderwerp.
 */

/* De intro is geen hero met foto. Een kop op rustige achtergrond leest hier
   beter dan een beeld waar we toch geen keuze voor hebben. */
.rix-diensten__intro h1 {
  max-width: 18ch;
}

.rix-diensten__lead {
  color: var(--rix-text);
  max-width: 62ch;
  margin-block-start: 16px;
}

.rix-diensten__list {
  display: grid;
  gap: 20px;
  padding: 0;
  list-style: none;
}

/* De kaart toont de foto en alleen de titel. Bij hover of toetsenbordfocus
   schuift een lichte laag van boven over het beeld, waarna de omschrijving en
   de vinkjes omhoog komen. De onderrand van de foto blijft zichtbaar, zodat
   duidelijk blijft dat er een beeld onder ligt. */
.rix-diensten__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(360px, 30vw, 440px);
  padding: 30px;
  border-radius: var(--rix-radius-card);
  background-color: var(--rix-surface);
  box-shadow: var(--rix-shadow-card);
  outline: none;
  transition: box-shadow 420ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.rix-diensten__item > * { position: relative; z-index: 2; }

.rix-diensten__item > .rix-diensten__item-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rix-dienst-focus, center);
}

.rix-diensten__item::before,
.rix-diensten__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
}

/* Vaste sluier: houdt de witte titel leesbaar, ook op een lichte foto. */
.rix-diensten__item::before {
  background: linear-gradient(
    180deg,
    rgba(4, 17, 24, .46) 0%,
    rgba(4, 17, 24, .18) 46%,
    rgba(4, 17, 24, .62) 100%
  );
}

/* De laag die bij hover van boven naar beneden uitdooft. */
.rix-diensten__item::after {
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(246, 252, 255, .99) 0%,
    rgba(246, 252, 255, .98) 66%,
    rgba(246, 252, 255, .88) 78%,
    rgba(246, 252, 255, .2) 92%,
    rgba(246, 252, 255, 0) 100%
  );
}

.rix-diensten__item h2 {
  position: relative;
  max-width: 16ch;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--rix-white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  transition: color 360ms ease, text-shadow 360ms ease;
}

.rix-diensten__item h2 a {
  color: inherit;
  text-decoration: none;
}

.rix-diensten__reveal {
  position: relative;
  max-height: 0;
  margin-block-start: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition:
    max-height 480ms cubic-bezier(.22, 1, .36, 1),
    margin 420ms ease,
    opacity 280ms ease,
    transform 460ms cubic-bezier(.22, 1, .36, 1);
}

.rix-diensten__reveal > p {
  margin: 0;
  font-size: var(--rix-size-small);
}

.rix-diensten__item:is(:hover, :focus-visible, :focus-within) {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(12, 167, 228, .22);
}

.rix-diensten__item:is(:hover, :focus-visible, :focus-within)::after {
  opacity: 1;
}

.rix-diensten__item:is(:hover, :focus-visible, :focus-within) h2 {
  color: var(--rix-heading);
  text-shadow: none;
}

.rix-diensten__item:is(:hover, :focus-visible, :focus-within) .rix-diensten__reveal {
  max-height: 22em;
  margin-block-start: 18px;
  opacity: 1;
  transform: translateY(0);
}

/* Zonder muis is er geen hover. Daar staat de kaart gewoon open, anders blijft
   de helft van de informatie onbereikbaar. */
@media (hover: none) {
  .rix-diensten__item::after { opacity: 1; }
  .rix-diensten__item h2 { color: var(--rix-heading); text-shadow: none; }

  .rix-diensten__reveal {
    max-height: 22em;
    margin-block-start: 18px;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rix-diensten__item,
  .rix-diensten__item::before,
  .rix-diensten__item::after,
  .rix-diensten__item h2,
  .rix-diensten__reveal {
    transition-duration: 1ms;
  }
}

.rix-diensten__includes {
  margin-block-start: 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.rix-diensten__includes li {
  position: relative;
  padding-inline-start: 24px;
  font-size: var(--rix-size-small);
  color: var(--rix-ink-soft);
}

/* Een vinkje in plaats van een bolletje: dit is wat er ingebrepen zit, geen
   willekeurige opsomming. */
.rix-diensten__includes li::before {
  content: "";
  position: absolute;
  inset-block-start: .45em;
  inset-inline-start: 2px;
  width: 10px;
  height: 6px;
  border-inline-start: 2px solid var(--rix-blue);
  border-block-end: 2px solid var(--rix-blue);
  transform: rotate(-45deg);
}

.rix-diensten__link {
  margin-block-start: 20px;
}

.rix-diensten__link a {
  font-family: var(--rix-font-ui);
  font-weight: 500;
  color: var(--rix-blue);
  text-decoration: underline;
}

.rix-diensten__methods {
  display: grid;
  gap: 26px;
  margin-block-start: 32px;
}

.rix-diensten__methods h3 {
  margin-block-end: 8px;
}

.rix-diensten__methods p {
  font-size: var(--rix-size-small);
  max-width: 56ch;
}

@media (min-width: 768px) {
  .rix-diensten__list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .rix-diensten__methods { grid-template-columns: repeat(2, 1fr); gap: 48px; }
  .rix-diensten__extras { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .rix-diensten__extras { grid-template-columns: repeat(4, 1fr); }
}

/* --- De pagina van een losse dienst --------------------------------------- */

/* Leesbare regellengte voor lopende tekst. De blokken staan onder elkaar, dus
   zonder maximum zou een alinea de volle 1140 pixels vullen. */
.rix-dienst__blok h2 { max-width: 22ch; }
.rix-dienst__blok p { max-width: 62ch; margin-block-start: 14px; }

.rix-dienst__punten { margin-block-start: 22px; max-width: 62ch; }

/* De weg terug naar het overzicht staat in de kicker boven de titel, waar een
   bezoeker een kruimelpad verwacht. */
.rix-dienst__terug {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
}

.rix-dienst__terug:hover { color: var(--rix-white); }

/* Vijf tekstblokken onder elkaar in dezelfde vorm lezen als een muur. Twee
   blokken krijgen daarom een andere opbouw: één met een foto ernaast, één als
   tweeluik. De afwisseling zit zo in de vorm en niet alleen in de kleur. */
.rix-dienst__blok--media { display: grid; gap: 28px; }

.rix-dienst__figuur {
  margin: 0;
  border-radius: var(--rix-radius-card);
  overflow: hidden;
  box-shadow: var(--rix-shadow-card);
}

.rix-dienst__figuur img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--rix-figuur-ratio, 4 / 5);
  object-fit: cover;
}

.rix-dienst__kolommen {
  display: grid;
  gap: 20px;
  margin-block-start: 26px;
}

.rix-dienst__kolommen > div {
  background: var(--rix-white);
  border: 1px solid var(--rix-line);
  border-radius: var(--rix-radius-card);
  padding: 24px;
}

/* Het tweeluik staat op een lichte band, dus de kaarten mogen wit zijn. Op een
   witte band zouden ze wegvallen; daar krijgen ze de zachte tint. */
.rix-home__section:not(.rix-home__section--surface) .rix-dienst__kolommen > div {
  background: var(--rix-surface-soft);
}

.rix-dienst__kolommen h3 { margin-block-end: 8px; }
.rix-dienst__kolommen p { font-size: var(--rix-size-small); margin: 0; max-width: none; }

@media (min-width: 768px) {
  .rix-dienst__blok--media { grid-template-columns: 1fr 380px; gap: 48px; align-items: center; }
  .rix-dienst__kolommen { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Het citaat staat middenin het betoog, niet als losse reviewstrook onderaan.
   Een streep links in plaats van een kaart: het hoort bij de tekst eromheen en
   moet die niet onderbreken. */
.rix-dienst__citaat {
  margin: 26px 0 0;
  padding-inline-start: 22px;
  border-inline-start: 3px solid var(--rix-blue);
  max-width: 62ch;
}

.rix-dienst__citaat blockquote { margin: 0; }

.rix-dienst__citaat blockquote p {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--rix-heading);
  margin: 0;
}

.rix-dienst__citaat figcaption {
  margin-block-start: 12px;
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-small);
  font-weight: 500;
  color: var(--rix-heading);
}

.rix-dienst__citaat figcaption span {
  display: block;
  margin-block-start: 2px;
  font-weight: 400;
  font-size: var(--rix-size-kicker);
  color: var(--rix-ink-soft);
}