/* ==========================================================================
   Locatiepagina (contenttype Vestiging)

   Eén template voor alle franchisegebieden. Alle kleuren en lettertypen komen
   uit rix-tokens.css, zodat een merkwijziging op één plek gebeurt.
   ========================================================================== */

.rix-loc {
  font-family: var(--rix-font-body);
  font-weight: var(--rix-weight-body);
  font-size: var(--rix-size-body);
  line-height: var(--rix-leading-body);
  color: var(--rix-text);
}

.rix-loc *,
.rix-loc *::before,
.rix-loc *::after { box-sizing: border-box; }

/* De marge-reset staat bewust in :where(), zodat hij geen specificiteit heeft.
   Anders overstemt hij de marges van de componenten hieronder — precies wat
   eerder gebeurde bij de hero- en introtekst. */
.rix-loc :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }

.rix-loc :where(a):focus-visible,
.rix-loc :where(button):focus-visible {
  outline: var(--rix-focus);
  outline-offset: 3px;
}

.rix-loc__wrap {
  width: min(var(--rix-container), 100% - (var(--rix-gutter) * 2));
  margin-inline: auto;
}

.rix-loc__section { padding-block: var(--rix-section-y-sm); }

.rix-loc__section--surface { background: var(--rix-surface); }
.rix-loc__section--tint { background: var(--rix-blue-tint); }
.rix-loc__section--ink { background: var(--rix-ink); color: var(--rix-white); }

.rix-loc__kicker {
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: var(--rix-size-kicker);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rix-blue);
  margin-block-end: 14px;
}

.rix-loc__section--ink .rix-loc__kicker,
.rix-loc__hero .rix-loc__kicker { color: var(--rix-white); opacity: .8; margin-block-end: 22px; }

.rix-loc h1,
.rix-loc h2 {
  font-family: var(--rix-font-body);
  font-weight: var(--rix-weight-display);
  color: var(--rix-heading);
}

.rix-loc h2 {
  font-size: var(--rix-size-h2);
  line-height: var(--rix-leading-h2);
  max-width: 22ch;
}

.rix-loc__section--ink h2 { color: var(--rix-white); }

.rix-loc h3 {
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: var(--rix-size-h3);
  line-height: 1.3;
  color: var(--rix-heading);
}

/* --- Knoppen -------------------------------------------------------------- */

.rix-loc__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  font-size: var(--rix-size-body);
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--rix-radius-button);
  text-decoration: none;
  transition: background-color .15s ease;
}

.rix-loc__button--primary { background: var(--rix-blue); color: var(--rix-white); }
.rix-loc__button--primary:hover,
.rix-loc__button--primary:focus { background: var(--rix-blue-dark); color: var(--rix-white); }

.rix-loc__button--accent { background: var(--rix-orange); color: var(--rix-white); }
.rix-loc__button--accent:hover,
.rix-loc__button--accent:focus { background: var(--rix-orange-dark); color: var(--rix-white); }

.rix-loc__button--ghost {
  background: transparent;
  color: var(--rix-white);
  box-shadow: inset 0 0 0 1px var(--rix-line-light);
}
.rix-loc__button--ghost:hover,
.rix-loc__button--ghost:focus { background: rgba(255, 255, 255, .1); color: var(--rix-white); }

/* --- 1. Hero -------------------------------------------------------------- */

.rix-loc__hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 520px;
  background: var(--rix-ink);
  color: var(--rix-white);
  overflow: hidden;
}

.rix-loc__hero-media,
.rix-loc__hero-media img,
.rix-loc__hero-veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.rix-loc__hero-media { z-index: -2; }
.rix-loc__hero-media img {
  object-fit: cover;
  object-position: var(--rix-loc-hero-position, 50% 30%);
  transform: scale(var(--rix-loc-hero-zoom, 1));
  transform-origin: var(--rix-loc-hero-position, 50% 30%);
}

@media (min-width: 1600px) {
  .rix-loc__hero-media img {
    object-position: var(--rix-loc-hero-wide-position, var(--rix-loc-hero-position, 50% 30%));
    transform: scale(var(--rix-loc-hero-wide-zoom, var(--rix-loc-hero-zoom, 1)));
    transform-origin: var(--rix-loc-hero-wide-position, var(--rix-loc-hero-position, 50% 30%));
  }
}
/* De bestaande site legt een zwarte laag van 57% over de herofoto. Die blijft,
   met daarbovenop een verloop naar onderen zodat de tekst ook leesbaar is waar
   de foto licht is — bijvoorbeeld tegen een witte bedrijfsbus of lucht. */
.rix-loc__hero-veil {
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 60%),
    var(--rix-hero-overlay);
}

.rix-loc__hero-body { padding-block: 120px 48px; }

.rix-loc__hero h1 {
  font-size: var(--rix-size-hero);
  line-height: var(--rix-leading-hero);
  color: var(--rix-white);
  max-width: 16ch;
}

.rix-loc__hero-owner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  margin-block-start: 38px;
  color: var(--rix-white);
}

/* Het streepje lijnt uit met de eerste tekstregel, ook als de naam op mobiel
   over twee regels loopt. */
.rix-loc__hero-owner::before {
  content: "";
  width: 22px;
  height: 3px;
  margin-block-start: .7em;
  background: var(--rix-blue);
  flex: none;
}

.rix-loc__hero-lead {
  /* Zelfde reden als op de homepage: dunne letters houden boven een foto
     onvoldoende contrast. */
  font-weight: 400;
  font-size: 1.0625rem;
  max-width: 48ch;
  margin-block-start: 22px;
  color: var(--rix-white);
}

.rix-loc__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 42px;
}

/* --- 2. Introductie met portret ------------------------------------------ */

.rix-loc__intro-grid {
  display: grid;
  gap: var(--rix-gap);
}

.rix-loc__portrait {
  border-radius: var(--rix-radius-card);
  overflow: hidden;
  background: var(--rix-blue-tint);
  align-self: start;
}

.rix-loc__portrait img { display: block; width: 100%; height: auto; }

.rix-loc__portrait--framed { aspect-ratio: var(--rix-owner-photo-aspect, 4 / 3); }
.rix-loc__portrait--framed img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
}

.rix-loc__intro-body > * + * { margin-block-start: 16px; }

.rix-loc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 24px;
  padding: 0;
  list-style: none;
}

.rix-loc__facts li {
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-kicker);
  font-weight: 500;
  letter-spacing: .04em;
  padding: 7px 14px;
  border-radius: var(--rix-radius-pill);
  background: var(--rix-blue-tint);
  color: var(--rix-heading);
}

/* --- 3. Diensten ---------------------------------------------------------- */

.rix-loc__cards {
  display: grid;
  gap: 20px;
  margin-block-start: 32px;
  padding: 0;
  list-style: none;
}

.rix-loc__card {
  background: var(--rix-white);
  border: 1px solid var(--rix-line);
  border-radius: var(--rix-radius-card);
  padding: 26px;
  box-shadow: var(--rix-shadow-card);
}

.rix-loc__card h3 { margin-block-end: 8px; }
.rix-loc__card p { font-size: var(--rix-size-small); }

.rix-loc__services-more {
  max-width: 68ch;
  margin-block-start: 28px;
  color: var(--rix-text);
}

.rix-loc__services-more a {
  color: var(--rix-blue-dark);
  font-family: var(--rix-font-ui);
  font-weight: var(--rix-weight-ui);
  text-underline-offset: .18em;
}

.rix-loc .rix-home__card--photo h3,
.rix-loc .rix-home__card--photo h3 a { color: var(--rix-white); }

.rix-loc .rix-home__card--photo:is(:hover, :focus-visible, :focus-within) h3,
.rix-loc .rix-home__card--photo:is(:hover, :focus-visible, :focus-within) h3 a { color: var(--rix-heading); }

@media (hover: none) {
  .rix-loc .rix-home__card--photo h3,
  .rix-loc .rix-home__card--photo h3 a { color: var(--rix-heading); }
}

@media (min-width: 600px) {
  .rix-loc__cards.rix-loc__cards--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .rix-loc__cards.rix-loc__cards--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- 4. Lokaal bewijs ----------------------------------------------------- */

.rix-loc__quote {
  background: var(--rix-white);
  border-radius: var(--rix-radius-card);
  border: 1px solid var(--rix-line);
  padding: 30px;
}

.rix-loc__quote p:not(.rix-loc__stars) {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--rix-heading);
}

/* De reviews staan in een rij onder de fotostrook. Kaarten zijn even hoog,
   met de bron onderaan uitgelijnd, ook als het ene citaat langer is. */
.rix-loc__reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-block-start: 24px;
  padding: 0;
  list-style: none;
}

.rix-loc__reviews li { display: flex; }

.rix-loc__quote {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rix-loc__stars {
  color: var(--rix-orange);
  font-size: 1.0625rem;
  letter-spacing: .18em;
  margin-block-end: 12px;
}

.rix-loc__quote cite span {
  display: block;
  margin-block-start: 2px;
  font-family: var(--rix-font-body);
  font-size: var(--rix-size-kicker);
  letter-spacing: normal;
  text-transform: none;
}

.rix-loc__quote cite {
  display: block;
  margin-block-start: auto;
  padding-block-start: 20px;
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-kicker);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rix-ink-soft);
}

.rix-loc__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-block-start: 20px;
  font-family: var(--rix-font-ui);
}

.rix-loc__score strong {
  font-size: 2rem;
  font-weight: var(--rix-weight-ui);
  color: var(--rix-blue);
}

.rix-loc__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0;
  list-style: none;
}

.rix-loc__gallery li {
  overflow: hidden;
  border-radius: var(--rix-radius-card);
}

.rix-loc__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transform-origin: center;
}

/* --- 5. Werkgebied -------------------------------------------------------- */

.rix-loc__areas-grid { display: grid; gap: var(--rix-gap); }

.rix-loc__area-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  padding: 0;
  list-style: none;
}

.rix-loc__area-list li {
  padding-block: 10px;
  border-block-end: 1px solid var(--rix-line);
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-small);
}

.rix-loc__contact-card {
  align-self: start;
  background: var(--rix-white);
  border: 1px solid var(--rix-line);
  border-radius: var(--rix-radius-card);
  padding: 28px;
  box-shadow: var(--rix-shadow-card);
}

.rix-loc__contact-list {
  display: grid;
  gap: 14px;
  margin-block-start: 20px;
  padding: 0;
  list-style: none;
}

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

.rix-loc__contact-list a:hover,
.rix-loc__contact-list a:focus { text-decoration: underline; }

.rix-loc__contact-label {
  display: block;
  font-size: var(--rix-size-kicker);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rix-ink-soft);
  margin-block-end: 2px;
}

/* --- 6. Veelgestelde vragen ----------------------------------------------- */

.rix-loc__faq { margin-block-start: 32px; max-width: 46rem; }

.rix-loc__faq details {
  border-block-end: 1px solid var(--rix-line);
  padding-block: 18px;
}

.rix-loc__faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--rix-font-ui);
  font-weight: 500;
  color: var(--rix-heading);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.rix-loc__faq summary::-webkit-details-marker { display: none; }

.rix-loc__faq summary::after {
  content: "+";
  font-weight: var(--rix-weight-ui);
  color: var(--rix-blue);
  flex: none;
}

.rix-loc__faq details[open] summary::after { content: "–"; }
.rix-loc__faq details p { margin-block-start: 12px; font-size: var(--rix-size-small); }

/* --- 7. Afsluitende oproep ------------------------------------------------ */

.rix-loc__cta { text-align: center; }
.rix-loc__cta h2 { margin-inline: auto; }
.rix-loc__cta p { margin-block-start: 14px; margin-inline: auto; max-width: 46ch; color: rgba(255, 255, 255, .88); }
.rix-loc__cta .rix-loc__hero-actions { justify-content: center; }

/* --- Terugnavigatie ------------------------------------------------------- */

.rix-loc__backlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-block: 28px;
  border-block-start: 1px solid var(--rix-line);
}

.rix-loc__backlinks a {
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-small);
  color: var(--rix-heading);
  text-decoration: none;
}

.rix-loc__backlinks a:hover,
.rix-loc__backlinks a:focus { color: var(--rix-blue); text-decoration: underline; }

/* --- Redactionele melding, alleen voor beheerders -------------------------- */

.rix-loc__notice {
  background: var(--rix-alert);
  color: var(--rix-white);
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-small);
  padding: 12px 0;
}

/* --- Vanaf tablet --------------------------------------------------------- */

@media (min-width: 768px) {
  .rix-loc__section { padding-block: var(--rix-section-y); }
  .rix-loc__hero { min-height: 600px; }
  .rix-loc__hero-body { padding-block: 160px 64px; }
  .rix-loc__intro-grid { grid-template-columns: 320px 1fr; gap: 48px; }
  .rix-loc__cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .rix-loc__areas-grid { grid-template-columns: 1fr 360px; gap: 48px; }
  .rix-loc__gallery { grid-template-columns: repeat(4, 1fr); }
  .rix-loc__reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .rix-loc__area-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rix-loc__button { transition: none; }
}

/* Zolang er nog geen portretfoto is aangeleverd, loopt de introductie over de
   volle breedte in plaats van naast een lege kolom. */
@media (min-width: 768px) {
  .rix-loc__intro-grid--solo { grid-template-columns: minmax(0, 46rem); }
}


/* --------------------------------------------------------------------------
   Tijdelijk — oude regiokeuze

   De balk met Barneveld, Putten en Utrechtse Heuvelrug staat in de globale
   Elementor-header (template 33) en geldt voor de hele site. Volgens besluit
   D-012 vervangt de postcodezoeker die keuze. Zolang de gedeelde header nog
   niet is gebouwd, staat de balk hier alleen op locatiepagina's uit: twee
   verschillende gebiedskeuzes naast elkaar is verwarrend.

   Deze regel verdwijnt zodra de gedeelde header er is. Zij hangt aan een
   Elementor-element-ID en is daarmee bewust tijdelijk van aard.
   -------------------------------------------------------------------------- */

.single-rix_vestiging .elementor-location-header .elementor-element-e487094 {
  display: none;
}

/* --- Verwijzing naar de zakelijke pagina ---------------------------------- */

.rix-loc__business { padding-block: 30px; border-block-start: 1px solid var(--rix-line); }

.rix-loc__business-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
}

.rix-loc__business-inner p { font-size: var(--rix-size-small); max-width: 62ch; }
.rix-loc__business-inner strong { font-family: var(--rix-font-ui); font-weight: var(--rix-weight-ui); color: var(--rix-heading); }

.rix-loc__business-inner a {
  flex: none;
  font-family: var(--rix-font-ui);
  font-weight: 500;
  font-size: var(--rix-size-small);
  color: var(--rix-blue);
  text-decoration: underline;
}

/* --- Werken bij RIX ------------------------------------------------------- */

.rix-loc__vacancy { border-block: 1px solid var(--rix-line); }

.rix-loc__vacancy-inner {
  display: grid;
  gap: 30px;
}

.rix-loc__vacancy-copy {
  max-width: 62ch;
}

.rix-loc__vacancy-copy h3 { margin-block-end: 10px; }
.rix-loc__vacancy-copy p { margin-block-end: 22px; }

@media (min-width: 768px) {
  .rix-loc__vacancy-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; }
}

.rix-loc__review-scope {
  margin-block-start: 12px;
  font-family: var(--rix-font-ui);
  font-size: var(--rix-size-kicker);
  letter-spacing: .04em;
  color: var(--rix-ink-soft);
}

/* Op een smal scherm ligt de tekst over de volle breedte, dus is er geen
   rustige kant waar de compositie omheen kan werken. De foto stapt daar een
   niveau terug en wordt sfeer in plaats van onderwerp; anders snijdt de kop
   door het gezicht heen. */
@media (max-width: 767px) {
  .rix-loc__hero-media img {
    object-position: var(--rix-loc-hero-mobile-position, var(--rix-loc-hero-position, 50% 30%));
    transform: scale(var(--rix-loc-hero-mobile-zoom, var(--rix-loc-hero-zoom, 1)));
    transform-origin: var(--rix-loc-hero-mobile-position, var(--rix-loc-hero-position, 50% 30%));
  }

  .rix-loc__hero-veil {
    background:
      linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 70%),
      rgba(0, 0, 0, .68);
  }
}