/* LocalX — casepagina's: hero met cijfers, stadsresultaten en kaartvergelijking. */

/* ---------- Case-hero met achtergrondfoto ---------- */

.case-hero {
  position: relative;
  isolation: isolate;
  background-image: url("/assets/images/HL-04-Breda-Ginniken_1214-8688_ADW-2048x1365-1.webp");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
}
/* Donkere gradient over de foto, zodat de tekst leesbaar blijft. */
.case-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(270deg, rgba(0,5,22,.58) 0%, var(--bg-navy) 100%);
}

/* De tweede case heeft een eigen achtergrondfoto. */
.case-hero--assink {
  background-image: url("/assets/images/MIREILLE-DROSTE-FOTOGRAFIE-17-2-qtnlt7ljgaanadqzc8wwtl6yslwlqqapso9vqjiua4.jpg");
}

.case-hero__inner { gap: 100px; }

.case-hero__top { display: flex; align-items: center; gap: var(--gutter); }
.case-hero__text { flex: 1 1 546px; max-width: 546px; align-items: flex-start; }

.case-hero__title {
  margin: 0;
  color: var(--bg-surface);
  font-size: var(--fs-h1);
  line-height: 1em;
  letter-spacing: normal;
}
.case-hero__title em { color: var(--accent); font-style: italic; }

.case-hero__lead {
  margin: 0 0 var(--empty-p);
  color: var(--bg-surface);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.case-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gutter); }

.case-hero__media { flex: 0 0 624px; max-width: 624px; display: flex; flex-direction: column; gap: var(--gutter); }
.case-hero__media img.case-hero__photo {
  width: 624px;
  max-width: 100%;
  height: 428px;
  object-fit: cover;
  border-radius: 25px;
}
.case-hero__media img.case-hero__brand {
  align-self: flex-end;
  width: 225px;
  height: 49px;
  object-fit: contain;
  border-radius: 0;
}
.case-hero__media img.case-hero__brand--assink { height: 60px; }

.case-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); }

.case-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }

.case-stat__num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: var(--fs-section-h);
  font-weight: 900;
  line-height: 1.1em;
}
/* Elk label sluit in het origineel af met een lege regel van 28px. */
.case-stat__txt {
  margin: 0 0 28px;
  color: var(--bg-surface);
  font-size: var(--fs-label);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* ---------- De situatie ---------- */

.case-situation .split__text { flex: 1 1 474px; max-width: 474px; }
.case-situation--assink .split__text  { flex: 1 1 516px; max-width: 516px; }
.case-situation--assink .case-situation__cards { flex: 0 0 654px; max-width: 654px; }
/* Het origineel sluit dit tekstblok af met een lege alinea. */
.case-situation__text p:last-child { margin-bottom: var(--empty-p); }
.case-situation__text p {
  margin: 0 0 14.4px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}
.case-situation__cards {
  flex: 0 0 696px;
  max-width: 696px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.case-card { gap: var(--gutter); }
.case-card--warm { background-color: var(--bg-warm); }
.case-card--mint { background-color: var(--bg-mint); }

/* ---------- Resultaat in kaart: voor/na-schuifbalk ---------- */

.case-map .split__text   { flex: 1 1 698px; max-width: 698px; }
.case-map__visual        { flex: 0 0 473px; max-width: 473px; display: flex; flex-direction: column; gap: 15px; }
.case-map__intro {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.case-map__legend { display: flex; justify-content: space-between; gap: var(--gutter); }

.map-pill {
  padding: 5px 15px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
}
.map-pill--before { background-color: var(--bg-warm); color: var(--map-before); }
.map-pill--after  { background-color: var(--bg-mint); color: var(--map-after); }

.ba {
  position: relative;
  width: 100%;
  aspect-ratio: 473 / 456;
  overflow: hidden;
  border-radius: 25px;
  background-color: var(--bg-shade);
  cursor: ew-resize;
  user-select: none;
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  border-radius: var(--radius-sm);
}
.ba__img--after { clip-path: inset(0 50% 0 0); }

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 2px;
  background-color: var(--bg-page);
  box-shadow: 0 0 16px rgba(0,0,0,.3);
  transform: translateX(-50%);
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-page);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  cursor: ew-resize;
  transform: translate(-50%, -50%);
}
.ba__arrow { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ba__arrow--left  { border-right: 8px solid var(--text-main); }
.ba__arrow--right { border-left:  8px solid var(--text-main); }

/* ---------- Stadsresultaten ---------- */

.cities__title { margin: 0; font-size: var(--fs-section-h); line-height: 1.1em; letter-spacing: normal; }
.cities__intro {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.cities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

.city {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
  transition: transform .3s ease, border-color .3s ease;
}
.city:hover { transform: translateY(-6px); border-color: var(--accent); }

.city__name {
  margin: 0;
  color: var(--text-mute);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: uppercase;
}
.city__pct {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: var(--fs-section-h);
  font-weight: 900;
  line-height: 1.1em;
}
.city__desc {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.city__stats {
  display: flex;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.city__lbls,
.city__vals { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
.city__lbls span { color: var(--text-sub); font-weight: 500; }
.city__vals span { color: var(--bg-dark); font-weight: 700; text-align: right; }

/* ---------- ReviewChicken-overzicht ---------- */

.case-rc .split__text { flex: 1 1 585px; max-width: 585px; }
.case-rc__intro {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.rc { flex: 0 0 585px; max-width: 585px; display: flex; flex-direction: column; gap: 10px; }

.rc__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.rc__lbl {
  margin: 0 0 6px;
  color: var(--text-sub);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rc__score {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}
.rc__score span { color: var(--text-light); font-size: 1.2rem; }
.rc__stars { margin: 4px 0 0; font-size: 1rem; }

.rc__main-right { text-align: right; }
.rc__main-right .rc__lbl { margin-bottom: 4px; }
.rc__num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 900;
}
.rc__tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background-color: var(--bg-pos);
  border-radius: 99px;
  color: var(--text-pos);
  font-size: 0.68rem;
  font-weight: 700;
}

.rc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rc__stat,
.rc__gbp {
  padding: 18px 16px;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.rc__stat-lbl {
  margin: 0 0 8px;
  color: var(--text-sub);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rc__stat-num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.rc__stat-num span { color: var(--text-light); font-size: 0.9rem; }
.rc__stat-sub { margin: 3px 0 0; color: var(--text-light); font-size: 0.7rem; }

.rc__gbp .rc__stat-lbl { margin-bottom: 14px; }
.rc__gbp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rc__gbp-lbl { margin: 0 0 4px; color: var(--text-light); font-size: 0.68rem; }
.rc__gbp-num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 900;
}

@media (max-width: 1024px) {
  .case-hero__top { flex-direction: column; align-items: stretch; }
  .case-hero__text, .case-hero__media { flex: 1 1 auto; max-width: 100%; }
  .case-hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
  .case-situation__cards { flex: 1 1 auto; max-width: 100%; }
  .cities__grid { grid-template-columns: repeat(2, 1fr); }
  .case-map__visual, .rc { flex: 1 1 auto; max-width: 100%; }
  .case-map .split__text,
  .case-rc .split__text,
  .case-situation .split__text,
  .case-situation--assink .split__text,
  .case-situation--assink .case-situation__cards { flex: 1 1 auto; max-width: 100%; }
}
@media (max-width: 767px) {
  .case-hero { background-size: cover; }
  .case-hero__inner { gap: 40px; }

  /* Het klantlogo staat op een telefoon gecentreerd onder de foto; rechts
     uitgelijnd hing het los in de hoek. */
  .case-hero__media { gap: 20px; }
  .case-hero__media img.case-hero__brand { align-self: center; }

  /* De score en het totaal passen naast elkaar niet meer: het groene
     label brak dan midden in de zin af. */
  .rc__main { flex-direction: column; align-items: stretch; gap: 15px; }
  .rc__main-right { text-align: left; }

  .case-hero__stats { grid-template-columns: 1fr; }
  .case-situation__cards { grid-template-columns: 1fr; }
  .cities__grid { grid-template-columns: 1fr; }
  .case-hero__media img { height: auto; }
  .rc__gbp-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Assink-case: website-screenshot, locaties, zoekwoordtabel ---------- */

.split--site .split__text { flex: 1 1 585px; max-width: 585px; }

.site-shot {
  flex: 0 0 532px;
  max-width: 532px;
  align-self: flex-start;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
  overflow: hidden;
}
.site-shot__url {
  margin: 0;
  padding: 12px 20px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-sub);
  font-size: 13px;
}
/* De screenshot is een lange paginaopname; het origineel toont alleen
   de bovenkant op 365px hoogte. */
.site-shot img { width: 100%; height: 365px; object-fit: cover; object-position: top; border-radius: 0; }

.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

.loc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
  transition: transform .3s ease, border-color .3s ease;
}
.loc-card:hover { transform: translateY(-6px); border-color: var(--accent); }

.loc-card__url  { margin: 0; color: var(--text-light); font-size: 13px; }
.loc-card__name { margin: 0; color: var(--text-main); font-family: var(--ff-display); font-size: var(--fs-card-s); font-weight: 900; }
.loc-card__kw   { margin: 0; color: var(--text-sub); font-size: var(--fs-label); }
.loc-card__badge {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 12px;
  background-color: var(--accent);
  border-radius: 99px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Zoekwoordtabel */
.kw-table__wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 25px; background-color: var(--bg-page); }
.kw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.kw-table th, .kw-table td { padding: 16px 20px; text-align: left; }
.kw-table thead th {
  background-color: var(--bg-surface);
  color: var(--text-sub);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.kw-table tbody tr { border-top: 1px solid var(--border); }
.kw-table .kw  { color: var(--text-main); font-weight: 700; }
.kw-table .was { color: var(--text-light); }
.kw-table .nu  { color: var(--accent); font-weight: 700; }

.rstats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.rstat__since { color: var(--text-light); font-size: 13px; }

@media (max-width: 1024px) {
  .site-shot { max-width: 100%; flex: 1 1 auto; }
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
  .rstats__grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) { .loc-grid { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */

.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }

.post {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.post:hover { transform: translateY(-6px); border-color: var(--accent); }

.post__media { display: block; line-height: 0; }
.post__media img { width: 100%; height: 240px; object-fit: cover; border-radius: 0; }

.post__body { display: flex; flex-direction: column; gap: 15px; padding: var(--gutter); }

.post__cat {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
}
.post__title { margin: 0; font-size: var(--fs-card-h); line-height: 1.2em; letter-spacing: normal; }
.post__title a { color: var(--text-main); }
.post__title a:hover { color: var(--accent); }
.post .service__link { margin-top: auto; }

@media (max-width: 1024px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .blog__grid { grid-template-columns: 1fr; } }

/* ---------- Blogartikel ---------- */

.post-body { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }

.post-body__head {
  margin: 20px 0 0;
  font-size: var(--fs-card-h);
  line-height: 1.2em;
  letter-spacing: normal;
}

.post-body p {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.post-body__list { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; }
.post-body__list li {
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* De regels voor de website-schermafbeelding staan hier onderaan, want de
   basisregels van .site-shot komen verderop in dit bestand dan het mediablok
   hierboven en zouden er anders overheen gaan. */
@media (max-width: 767px) {
  /* Gestapeld moet de kaart de volle breedte pakken: met align-self:
     flex-start kromp hij in een kolom-flex tot de breedte van zijn inhoud. */
  .site-shot { align-self: stretch; }
  .site-shot img { height: 240px; }
}

/* ============ UITLEGBEELD (SVG-infographic) ============ */

.uitleg { margin: 2rem 0; }

.uitleg__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.uitleg__cap {
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--muted, #6B6259);
  font-style: italic;
}

/* Bewijsbeelden in artikelen: screenshots en blauwdrukken */

.uitleg__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #E2DCD2;
}

/* Lange screenshots (zoals een volledige paginablauwdruk) tonen we ingekort,
   zodat ze het artikel niet overnemen. */
.uitleg__crop {
  position: relative;
  max-height: 460px;
  overflow: hidden;
  border-radius: 8px;
}

.uitleg__crop .uitleg__img { border-radius: 8px 8px 0 0; }

.uitleg__crop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* ============ FAQ-ACCORDEON ============ */

.faq {
  display: grid;
  gap: 12px;
  margin: 1.5rem 0 2rem;
}

.faq__item {
  background: #fff;
  border: 1px solid var(--border, #E2DCD2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.faq__item[open] {
  border-color: var(--primary, #E87820);
  box-shadow: 0 4px 18px rgba(0, 5, 22, .07);
}

.faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

/* Het standaard driehoekje van <details> weghalen */
.faq__vraag::-webkit-details-marker { display: none; }
.faq__vraag::marker { content: ""; }

.faq__vraag:hover { color: var(--primary, #E87820); }
.faq__vraag:focus-visible {
  outline: 2px solid var(--primary, #E87820);
  outline-offset: -2px;
}

.faq__tekst { flex: 1; }

.faq__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--primary, #E87820);
  transition: transform .2s ease;
}

.faq__item[open] .faq__icon { transform: rotate(180deg); }

.faq__antwoord {
  padding: 0 24px 22px;
  color: var(--text-sub, #6B6259);
}

.faq__antwoord > :first-child { margin-top: 0; }
.faq__antwoord > :last-child { margin-bottom: 0; }

/* ============ CTA TUSSEN DE ALINEA'S ============ */

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 2rem 0;
  padding: 22px 26px;
  background: var(--bg-surface, #F5F4EF);
  border-left: 4px solid var(--primary, #E87820);
  border-radius: 0 14px 14px 0;
}

.inline-cta__tekst {
  margin: 0;
  font-weight: 700;
  flex: 1 1 260px;
}

.inline-cta__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.inline-cta__knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--primary, #E87820);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-label, .93rem);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease;
}

.inline-cta__knop:hover { background: var(--primary-hover, #CA5F0A); }
.inline-cta__knop .icon svg { width: 15px; height: 15px; display: block; }

.inline-cta__link {
  font-weight: 700;
  font-size: var(--fs-label, .93rem);
  color: var(--text-main, #0C0C0A);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.inline-cta__link:hover { color: var(--primary, #E87820); }

@media (max-width: 600px) {
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .faq__vraag { padding: 16px 18px; }
  .faq__antwoord { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__icon, .inline-cta__knop { transition: none; }
}

/* Openingsbeeld van een artikel: iets ruimer dan de inline uitlegbeelden */
.uitleg--opener { margin: 1.75rem 0 2.25rem; }
.uitleg--opener .uitleg__img { border: none; }

/* ============ VIDEO ============ */

.video { margin: 2rem 0; }

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark, #000516);
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}