/* ==========================================================================
   The Fix Center — sections.css
   Reparaties · Werkwijze · Merken · Waarom · Vragen · CTA
   Light content sections (structure vibe: gefixt.nl — original implementation)
   with a dark "Waarom" band for depth rhythm.
   ========================================================================== */

/* ==========================================================================
   Reparaties — repair category grid
   ========================================================================== */
/* The hero's category picker overhangs its own bottom edge by --pick-overlap
   (hero.css) and lands on top of this section, so the same amount is added back
   as top padding — otherwise the cards sit over this heading. The fallback
   keeps the spacing sane if this section is ever used without the hero above
   it, where --pick-overlap is not in scope. */
.reparaties {
  background: var(--paper); color: var(--ink);
  padding-top: calc(var(--pick-overlap, 0px) + clamp(1.5rem, 3vw, 3rem));
}
.reparaties .section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-width: none; }
/* The intro copy moved below the grid, so the heading needs less room under it. */
.reparaties .section-head--tight { margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem); }
.reparaties__lead {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 62ch; color: var(--ink-dim); font-size: var(--text-lead);
}
.reparaties .section-head .head-copy { max-width: 46ch; }

.repair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
  gap: 1rem;
}
/* Elegant category tiles: crisp white surface, soft-tinted icon chip with a
   hairline, generous type, a ghost arrow that fills orange, and a light lift. */
.repair-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.85rem;
  padding: 1.7rem 1.6rem 1.5rem;
  background: color-mix(in oklch, white 80%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.repair-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px oklch(46% 0.02 60 / 0.13);
  border-color: color-mix(in oklch, var(--accent) 55%, var(--line));
}

.repair-card .icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: color-mix(in oklch, var(--accent) 10%, white);
  border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--line));
  color: var(--accent-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.repair-card .icon svg { width: 26px; height: 26px; }
.repair-card:hover .icon { background: color-mix(in oklch, var(--accent) 20%, white); border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }

.repair-card h3 { font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.repair-card p { color: var(--ink-dim); font-size: 0.92rem; line-height: 1.5; }
.repair-card .card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.95rem;
  border-top: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}
.repair-card .price {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-dim);
}
.repair-card .price b { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin-left: 0.2em; }
.repair-card .arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.repair-card:hover .arrow { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateX(2px); }

.repair-card.is-featured {
  grid-column: span 1;
  background: color-mix(in oklch, var(--accent) 10%, var(--paper));
  border-color: color-mix(in oklch, var(--accent) 34%, var(--line)); color: var(--fg);
}
.repair-card.is-featured p { color: var(--fg-dim); }
.repair-card.is-featured .icon { background: color-mix(in oklch, var(--accent) 16%, white); border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); color: var(--accent-strong); }
.repair-card.is-featured .arrow { border-color: transparent; }
.repair-card.is-featured .card-foot { border-top-color: color-mix(in oklch, var(--fg) 14%, transparent); }
.repair-card.is-featured .price, .repair-card.is-featured .price b { color: var(--fg); }
.repair-card.is-featured .arrow { background: var(--accent); color: var(--accent-ink); }
.repair-card.is-featured .tag {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-strong);
}

.reparaties__cta { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.reparaties .note {
  margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-dim);
}

/* ==========================================================================
   Werkwijze — how it works, 4 steps
   ========================================================================== */
.werkwijze { background: var(--paper-2); color: var(--ink); }
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  counter-reset: step;
  position: relative;
}
.step {
  position: relative;
  padding-top: 2.2rem;
  border-top: 2px solid var(--ink);
  transition: transform var(--dur) var(--ease);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: -0.35rem; left: 0;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-text);
  background: var(--paper-2); padding-right: 0.6rem;
  transition: color var(--dur) var(--ease);
}
.step .step-ico { color: var(--accent-strong); margin-bottom: 0.9rem; transition: transform var(--dur) var(--ease); }
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-dim); font-size: 0.95rem; }

/* desktop: one continuous process line with a node per step (a real sequence,
   not four disconnected cards) + a lift-on-hover micro-interaction that keeps
   the node pinned to the line. */
@media (min-width: 821px) {
  .step-grid::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--line);
  }
  .step { border-top: none; padding-top: 2.7rem; }
  .step::after {
    content: ""; position: absolute; top: -6px; left: 0;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--paper-2); border: 2px solid var(--ink-dim);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .step::before { left: 1.6rem; top: -0.55rem; }
  .step:hover { transform: translateY(-4px); }
  .step:hover::after { background: var(--accent); border-color: var(--accent); transform: translateY(4px) scale(1.15); }
  .step:hover::before { color: var(--accent); }
  .step:hover .step-ico { transform: translateY(-2px); }
}
@media (max-width: 820px) { .step-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .step-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .step, .step::after, .step::before, .step .step-ico { transition: none; }
  .step:hover { transform: none; }
  .step:hover::after { transform: scale(1.15); }
}

/* ==========================================================================
   Merken — brand wordmarks marquee (text, not copied logos)
   ========================================================================== */
.merken { background: var(--paper); color: var(--ink); padding-block: clamp(3rem, 5vw, 5rem); }
.merken .lead {
  text-align: center; max-width: 52ch; margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--ink-dim); font-size: var(--text-lead);
}
.merken .lead .kicker { justify-content: center; display: inline-flex; margin-bottom: 0.9rem; }
.brand-row {
  overflow: hidden;
  /* Same grab-and-scrub as the hero strip; see .hero__marquee for why pan-y
     and user-select are needed. */
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brand-row.is-dragging { cursor: grabbing; }
.brand-track {
  display: flex; width: max-content; align-items: center; gap: 0;
  /* The no-JS fallback only — with JS the loop is hero.js's Web Animations
     object, at the strip's width over 60 px/s, and that is what pauses on
     hover and follows a drag. Both strips behave the same. */
  animation: marquee 40s linear infinite;
}
/* .brand-link is an <a> for brands we carry; .brand-track span is the plain
   fallback for brands not in the catalog. Both render identically — making a
   wordmark clickable must not change how it looks. */
.brand-track span,
.brand-track .brand-link {
  padding-inline: clamp(1.4rem, 3vw, 2.8rem);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem);
  letter-spacing: -0.03em;
  color: color-mix(in oklch, var(--ink) 42%, var(--paper));
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.brand-track span:hover,
.brand-track .brand-link:hover { color: var(--ink); }

/* Client-supplied logos. Muted at rest so the strip reads as one calm band
   next to the wordmark brands we have no logo for, full colour on hover/focus.
   (The client's "original brand colours" instruction is for the repair brand
   picker — .bk-brand__logo in booking.css — where they are always in colour.) */
/* Logos ship on a uniform 320x80 canvas already balanced by ink area, so one
   height renders them all at equal weight. The canvas carries padding around
   the mark, hence the height is larger than the mark should appear. */
.brand-track .brand-logo {
  display: block; height: clamp(2rem, 1.3rem + 1.9vw, 3rem); width: auto;
  filter: grayscale(1); opacity: 0.5;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.brand-track .brand-link--logo { display: flex; align-items: center; }
.brand-track .brand-link--logo:hover .brand-logo,
.brand-track .brand-link--logo:focus-visible .brand-logo { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .brand-track .brand-logo { transition: none; } }
/* real keyboard affordance (the marquee is now interactive) */
.brand-track .brand-link:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .brand-track, .hero__track { animation: none !important; } }

/* ==========================================================================
   Search — device/model hits (tfc/search-devices, above the post results)
   ========================================================================== */
.search-devices { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.search-devices__title { font-size: var(--text-h3); letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.search-devices__lead { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 1.4rem; }
.search-devices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.7rem;
  list-style: none;
  margin: 0; padding: 0;
}
.search-device__link {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in oklch, white 80%, var(--paper));
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.search-device__link:hover {
  transform: translateX(3px);
  border-color: color-mix(in oklch, var(--accent) 55%, var(--line));
  box-shadow: 0 14px 32px oklch(46% 0.02 60 / 0.12);
}
.search-device__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.search-device__thumb {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--paper-2);
  overflow: hidden;
}
.search-device__thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-device__thumb--icon {
  background: color-mix(in oklch, var(--accent) 10%, white);
  border: 1px solid color-mix(in oklch, var(--accent) 16%, var(--line));
}
.search-device__text { display: grid; gap: 0.15rem; min-width: 0; }
.search-device__model {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-device__meta {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-dim);
}

/* ==========================================================================
   Waarom — dark trust band with photo
   ========================================================================== */
.waarom { background: var(--ink-900); color: var(--fg); position: relative; overflow: clip; }
.waarom__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.waarom__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent);
  box-shadow: var(--shadow-lg);
}
.waarom__media img { width: 100%; height: 100%; object-fit: cover; }
.waarom__media .quote {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  padding: 0.9rem 1.1rem; border-radius: var(--radius);
  background: color-mix(in oklch, var(--ink-950) 66%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklch, var(--fg) 12%, transparent);
  font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.35;
}
.waarom__copy h2 { font-size: var(--text-h2); margin: 0.8rem 0 1.2rem; }
.waarom__copy > p { color: var(--fg-dim); font-size: var(--text-lead); max-width: 46ch; margin-bottom: 1.8rem; }
.usp-list { display: grid; gap: 0.2rem; }
.usp {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1rem;
  padding: 1rem 0; align-items: start;
  border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent);
}
.usp:last-child { border-bottom: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); }
.usp .usp-ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent);
}
.usp h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.2rem; }
.usp p { color: var(--fg-mute); font-size: 0.92rem; }
@media (max-width: 860px) {
  .waarom__inner { grid-template-columns: 1fr; }
  .waarom__media { order: -1; max-width: 560px; }
}

/* ==========================================================================
   Vragen — FAQ accordion (native <details>)
   ========================================================================== */
.vragen { background: var(--paper); color: var(--ink); }
.vragen__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.vragen__aside { position: sticky; top: 100px; }
.vragen__aside h2 { font-size: var(--text-h2); margin: 0.7rem 0 1rem; }
.vragen__aside p { color: var(--ink-dim); margin-bottom: 1.6rem; }

.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0.2rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  list-style: none; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary .plus {
  flex: none; position: relative; width: 22px; height: 22px;
}
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 2px;
}
.faq summary .plus::before { width: 100%; height: 2px; }
.faq summary .plus::after { width: 2px; height: 100%; transition: transform var(--dur) var(--ease); }
.faq details[open] summary { color: var(--accent-text); }
.faq details[open] summary .plus::after { transform: rotate(90deg); opacity: 0; }
.faq .faq-body {
  overflow: hidden;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq details[open] .faq-body { grid-template-rows: 1fr; }
.faq .faq-body > div { min-height: 0; }
.faq .faq-body p { color: var(--ink-dim); padding: 0 0.2rem 1.4rem; max-width: 62ch; }
@media (max-width: 820px) {
  .vragen__inner { grid-template-columns: 1fr; }
  .vragen__aside { position: static; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { background: var(--ink-950); color: var(--fg); position: relative; overflow: clip; }
.cta-band__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 2.5rem; align-items: center;
}
.cta-band h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); letter-spacing: -0.035em; line-height: 1; }
.cta-band h2 .accent { color: var(--accent); }
.cta-band p { color: var(--fg-dim); font-size: var(--text-lead); margin: 1.1rem 0 0; max-width: 44ch; }
.cta-band__actions { display: grid; gap: 1rem; justify-items: start; }
.cta-band__actions .btn { width: fit-content; }
.cta-phone {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--fg);
}
.cta-phone svg { color: var(--accent); }
.cta-phone small { display: block; font-size: 0.7rem; color: var(--fg-mute); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 760px) { .cta-band__inner { grid-template-columns: 1fr; } }