/* ================================================================
   Reparatiepagina's van GSM Waalwijk
   Gedeeld door alle pagina's in /reparaties/. Zelfde beeldtaal als de
   hoofdpagina: Poppins, merkblauw alleen als accent, lichte blauwe
   verlopen op de achtergrond, witte kaarten met een zachte schaduw.
   Leesbaarheid gaat voor decoratie; op telefoon ligt niets over elkaar.
   ================================================================ */

:root {
    --primary: #0e50f0;
    --primary-dark: #0b3fc0;
    --ink: #0b1020;
    --text: #3f4a63;
    --muted: #5b6580;
    --line: #e6ecf8;
    --soft: #e4edfd;
    --bg: #fbfcff;
    --red: #e0262d;
    --wa: #1faa55;
    --radius: 22px;
    --shadow: 0 10px 30px rgba(23, 43, 96, 0.08);
    --shadow-hover: 0 18px 38px rgba(23, 43, 96, 0.13);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --header: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text); background: #fff; line-height: 1.65; font-size: 1rem;
    overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

.rp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ---------- Header ---------- */
.rp-header {
    position: sticky; top: 0; z-index: 50; height: var(--header);
    background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.rp-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 26px rgba(11, 26, 63, 0.07); }
.rp-header .rp-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-logo img { height: 46px; width: auto; }
.rp-nav { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 18px); }
.rp-nav-link {
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem;
    padding: 10px 6px; position: relative; white-space: nowrap;
}
.rp-nav-link::after {
    content: ''; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px;
    background: var(--primary); border-radius: 2px; transform: scaleX(0);
    transition: transform 0.35s var(--ease);
}
.rp-nav-link:hover::after { transform: scaleX(1); }
.rp-icon-btn {
    width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); color: var(--ink); background: #fff; text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.rp-icon-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

/* ---------- Knoppen ---------- */
.rp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
    font-family: inherit; font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer;
    white-space: nowrap;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.rp-btn:hover { transform: translateY(-2px); }
.rp-btn:active { transform: translateY(0) scale(0.98); }
.rp-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 22px rgba(14, 80, 240, 0.28); }
.rp-btn-primary:hover { background: var(--primary-dark); box-shadow: 0 14px 28px rgba(14, 80, 240, 0.34); }
.rp-btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.rp-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.rp-btn-wa { background: var(--wa); color: #fff; }
.rp-btn-wa:hover { background: #178e46; }
.rp-btn-small { min-height: 44px; padding: 9px 18px; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.rp-hero {
    position: relative; overflow: hidden;
    padding: clamp(26px, 5vh, 56px) 0 clamp(44px, 8vh, 90px);
    background: radial-gradient(120% 95% at 88% 0%, #e7eeff 0%, #f2f6ff 40%, #fbfcff 75%, #ffffff 100%);
}
.rp-hero::before, .rp-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.rp-hero::before {
    top: -22%; right: -10%; width: min(52vw, 640px); aspect-ratio: 1;
    background: radial-gradient(circle at 35% 35%, #dde8fd 0%, #e9f0fe 50%, rgba(233, 240, 254, 0) 72%);
}
.rp-hero::after {
    bottom: -30%; left: -14%; width: min(38vw, 460px); aspect-ratio: 1;
    border: 1px solid rgba(14, 80, 240, 0.08);
}
.rp-hero .rp-wrap { position: relative; z-index: 1; }

/* Terugknop + kruimelpad bovenaan. Zelfde pilletje als de terugknoppen
   op de hoofdpagina, zodat hij direct herkenbaar is. */
.rp-topbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
    margin-bottom: clamp(18px, 3vh, 30px);
}
.rp-back {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    min-height: 44px; padding: 10px 20px 10px 16px; border-radius: 999px;
    background: #fff; border: 1px solid #dbe4fb; color: var(--primary);
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    box-shadow: 0 6px 16px rgba(11, 26, 63, 0.07);
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.25s ease;
}
.rp-back::before { content: '\2190'; font-size: 1.1em; line-height: 1; transition: transform 0.3s var(--ease); }
.rp-back:hover { transform: translateX(-4px); border-color: var(--primary); box-shadow: 0 12px 24px rgba(14, 80, 240, 0.16); }
.rp-back:hover::before { transform: translateX(-3px); }
.rp-back:active { transform: translateX(-4px) scale(0.97); }
.rp-crumbs { font-size: 0.85rem; color: var(--muted); min-width: 0; }
.rp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rp-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.rp-crumbs li + li::before { content: '›'; color: #9aa6c0; }
.rp-crumbs a { color: var(--muted); text-decoration: none; }
.rp-crumbs a:hover { color: var(--primary); text-decoration: underline; }

.rp-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 5vw, 70px); align-items: center;
}
.rp-title { font-size: clamp(2.2rem, 5.2vw, 4.1rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.rp-title span { color: var(--primary); }
.rp-lead { margin-top: clamp(14px, 2.2vh, 22px); font-size: clamp(1rem, 1.15vw, 1.13rem); color: var(--text); max-width: 56ch; text-wrap: pretty; }
.rp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 32px); }

.rp-facts { list-style: none; padding: 0; margin: clamp(22px, 3.6vh, 34px) 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.rp-facts li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.rp-facts i { color: var(--primary); font-size: 1rem; width: 18px; text-align: center; }

/* Kaart rechts in de hero */
.rp-hero-card {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: 28px;
    box-shadow: 0 24px 60px rgba(23, 43, 96, 0.12); padding: clamp(22px, 3vw, 34px);
}
.rp-hero-visual {
    height: clamp(150px, 20vw, 230px); border-radius: 20px; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #eaf1ff 0%, #f5f8ff 55%, #fbfcff 100%);
}
.rp-hero-visual img { max-height: 88%; width: auto; filter: drop-shadow(0 18px 26px rgba(18, 38, 84, 0.2)); animation: rpZweef 7s ease-in-out infinite; }
.rp-hero-visual i { font-size: clamp(4rem, 8vw, 6rem); color: var(--primary); filter: drop-shadow(0 14px 22px rgba(14, 80, 240, 0.22)); animation: rpZweef 7s ease-in-out infinite; }
@keyframes rpZweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.rp-hero-card h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }
.rp-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-mini-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); font-size: 0.95rem; }
.rp-mini-list i {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--soft); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
}

/* ---------- Secties ---------- */
.rp-section { padding: clamp(54px, 9vh, 96px) 0; position: relative; }
.rp-section-soft { background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%); }
.rp-h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; }
.rp-h2 span { color: var(--primary); }
.rp-intro { margin-top: 12px; max-width: 62ch; color: var(--muted); font-size: 1.02rem; text-wrap: pretty; }
.rp-head { margin-bottom: clamp(26px, 4vh, 40px); }

/* Reparatiekaarten */
.rp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.rp-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: clamp(20px, 2.4vw, 28px);
    transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.3s ease;
}
.rp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: #cddcfb; }
.rp-card-icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--soft); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease);
}
.rp-card:hover .rp-card-icon { background: var(--primary); color: #fff; transform: scale(1.06); }
.rp-card h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 8px; }
.rp-card p { font-size: 0.95rem; color: var(--muted); }

/* Modellen */
.rp-model-group + .rp-model-group { margin-top: 30px; }
.rp-model-group h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.rp-model-group h3 small { font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.rp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip {
    display: inline-flex; align-items: center; min-height: 40px; padding: 7px 15px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.3s var(--ease);
}
.rp-chip:hover { border-color: var(--primary); color: var(--primary); background: #f5f8ff; transform: translateY(-2px); }
.rp-more { margin-top: 10px; }
.rp-more > summary {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-weight: 600; font-size: 0.92rem; color: var(--primary); padding: 8px 2px; min-height: 40px;
}
.rp-more > summary::-webkit-details-marker { display: none; }
.rp-more > summary::after { content: '\25BE'; transition: transform 0.3s var(--ease); }
.rp-more[open] > summary::after { transform: rotate(180deg); }
.rp-more[open] > summary { margin-bottom: 8px; }

/* Stappen */
.rp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: stap; }
.rp-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow); position: relative; }
.rp-step::before {
    counter-increment: stap; content: counter(stap);
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(14, 80, 240, 0.28);
}
.rp-step h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.rp-step p { font-size: 0.95rem; color: var(--muted); }

/* Twee kolommen (bezoek, garantie) */
.rp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.rp-panel { background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); }
.rp-panel h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.rp-panel h3 i { color: var(--primary); }
.rp-panel p + p { margin-top: 10px; }
.rp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rp-check li { display: flex; gap: 12px; align-items: flex-start; }
.rp-check i { color: var(--primary); margin-top: 5px; }
.rp-address { font-style: normal; font-size: 1.02rem; color: var(--ink); font-weight: 500; line-height: 1.6; }

.rp-status {
    display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 16px;
    padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 0.88rem;
    background: #f1f4fb; color: var(--ink);
}
.rp-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9aa6c0; }
.rp-status.is-open { background: #e8f7ee; color: #146c3a; }
.rp-status.is-open::before { background: var(--wa); box-shadow: 0 0 0 4px rgba(31, 170, 85, 0.18); }
.rp-status.is-dicht { background: #fdecec; color: #9b1c21; }
.rp-status.is-dicht::before { background: var(--red); }

.rp-hours { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.rp-hours th, .rp-hours td { padding: 10px 0; border-bottom: 1px solid #f0f3fa; text-align: left; }
.rp-hours th { font-weight: 500; color: var(--ink); }
.rp-hours td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-hours tr:last-child th, .rp-hours tr:last-child td { border-bottom: 0; }
.rp-hours .is-dicht { color: var(--red); font-weight: 700; }
.rp-hours tr.is-vandaag th, .rp-hours tr.is-vandaag td { color: var(--primary); font-weight: 700; }

.rp-towns { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-towns li { padding: 7px 15px; border-radius: 999px; background: var(--soft); color: var(--primary-dark); font-weight: 600; font-size: 0.9rem; }

/* FAQ */
.rp-faq { display: grid; gap: 12px; max-width: 860px; }
.rp-faq details {
    background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 6px 18px rgba(17, 38, 84, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.rp-faq details[open] { border-color: #cddcfb; box-shadow: var(--shadow); }
.rp-faq summary {
    list-style: none; cursor: pointer; padding: 18px 22px; min-height: 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-weight: 600; color: var(--ink); font-size: 1rem;
}
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::after {
    content: '+'; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 500;
    transition: transform 0.35s var(--ease), background 0.25s ease, color 0.25s ease;
}
.rp-faq details[open] summary::after { transform: rotate(45deg); background: var(--primary); color: #fff; }
.rp-faq .rp-faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 0.97rem; }

/* Andere apparaten */
.rp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.rp-tile {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink);
    font-weight: 600; font-size: 0.95rem;
    transition: border-color 0.25s ease, transform 0.3s var(--ease), box-shadow 0.3s ease, color 0.25s ease;
}
.rp-tile i { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.rp-tile:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }

/* Overzichtspagina */
.rp-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.rp-hub-card { display: flex; flex-direction: column; gap: 14px; }
.rp-hub-card h2 { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.rp-hub-card h2 i { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.rp-hub-links { display: grid; gap: 8px; margin-top: auto; }
.rp-hub-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 14px;
    border-radius: 14px; background: #f5f8ff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.93rem;
    transition: background 0.25s ease, color 0.25s ease;
}
.rp-hub-links a::after { content: '\2192'; color: var(--primary); transition: transform 0.3s var(--ease); }
.rp-hub-links a:hover { background: var(--soft); color: var(--primary); }
.rp-hub-links a:hover::after { transform: translateX(4px); }

/* Doorverwijzing naar de andere pagina van hetzelfde apparaat */
.rp-crosslink {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
    box-shadow: var(--shadow);
}
.rp-crosslink p { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.rp-crosslink p span { display: block; font-weight: 400; color: var(--muted); font-size: 0.95rem; margin-top: 2px; }

/* Blauwe afsluiter */
.rp-band {
    position: relative; overflow: hidden; border-radius: 30px; color: #fff;
    padding: clamp(30px, 5vw, 58px) clamp(22px, 5vw, 60px);
    background: linear-gradient(120deg, #0b3fc0 0%, #0e50f0 55%, #3b7bff 100%);
    box-shadow: 0 24px 50px rgba(14, 80, 240, 0.25);
}
.rp-band::before {
    content: ''; position: absolute; right: -8%; top: -40%; width: 420px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.rp-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; position: relative; }
.rp-band p { margin-top: 10px; color: rgba(255, 255, 255, 0.9); max-width: 56ch; position: relative; }
.rp-band .rp-cta-row { position: relative; }
.rp-band .rp-btn-primary { background: #fff; color: var(--primary); box-shadow: 0 10px 22px rgba(4, 22, 66, 0.25); }
.rp-band .rp-btn-primary:hover { background: #f1f5ff; }
.rp-band .rp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.rp-band .rp-btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- Footer ---------- */
.rp-footer { background: #f6f8fd; border-top: 1px solid var(--line); padding: clamp(40px, 7vh, 64px) 0 28px; margin-top: clamp(40px, 7vh, 80px); }
.rp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 48px); }
.rp-footer h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.rp-footer img { height: 44px; width: auto; margin-bottom: 14px; }
.rp-footer p, .rp-footer li { font-size: 0.93rem; color: var(--muted); }
.rp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rp-footer a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.rp-footer a:hover { color: var(--primary); }
.rp-copy { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); text-align: center; }

/* ---------- Onthulling bij scrollen ----------
   Alleen verborgen als JavaScript draait, zodat de tekst zonder script
   (en voor zoekmachines) altijd zichtbaar is. */
.js [data-fx] { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.js [data-fx="zoom"] { transform: scale(0.95); }
.js [data-fx].fx-in { opacity: 1; transform: none; }
[data-fx-delay="1"] { transition-delay: 0.08s; }
[data-fx-delay="2"] { transition-delay: 0.16s; }
[data-fx-delay="3"] { transition-delay: 0.24s; }
[data-fx-delay="4"] { transition-delay: 0.32s; }
[data-fx-delay="5"] { transition-delay: 0.4s; }

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
    .rp-hero-grid { grid-template-columns: 1fr; }
    .rp-hero-card { max-width: 560px; }
    .rp-split { grid-template-columns: 1fr; }
    .rp-steps { grid-template-columns: 1fr; }
    .rp-footer-grid { grid-template-columns: 1fr 1fr; }
    .rp-footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 640px) {
    :root { --header: 64px; }
    .rp-logo img { height: 38px; }
    .rp-nav-link { display: none; }
    .rp-header .rp-btn-small { padding: 8px 14px; font-size: 0.85rem; }
    .rp-cta-row .rp-btn { flex: 1 1 100%; }
    .rp-facts { flex-direction: column; gap: 10px; }
    .rp-hero-visual { height: 150px; }
    .rp-crosslink .rp-btn { width: 100%; }
    .rp-footer-grid { grid-template-columns: 1fr; }
    .rp-faq summary { padding: 16px 18px; font-size: 0.97rem; }
    .rp-faq .rp-faq-a { padding: 0 18px 18px; }
    .rp-band { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-fx] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .rp-hero-visual img, .rp-hero-visual i { animation: none !important; }
    .rp-btn, .rp-card, .rp-chip, .rp-tile { transition: none !important; }
}

/* ---------- Bijgesteld na de test op telefoon en tablet ---------- */

/* Tikdoelen minstens 44px hoog, ook het logo en de footerlinks. */
.rp-logo { display: inline-flex; align-items: center; min-height: 44px; }
.rp-footer a { min-height: 44px; }

/* Tekstblok naast het plaatje in de hero-kaart (zie tablet hieronder). */
.rp-hero-card-body { min-width: 0; }

/* Tablet: de hero-kaart gebruikt de volle breedte, met het plaatje links en
   de reparaties rechts. Anders stond er een smal blok met lege ruimte ernaast. */
@media (min-width: 641px) and (max-width: 960px) {
    .rp-hero-card {
        max-width: none;
        display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(20px, 3vw, 32px); align-items: center;
    }
    .rp-hero-visual { margin-bottom: 0; height: 100%; min-height: 220px; }
}

/* Telefoon: de laatste stap van het kruimelpad herhaalt de titel eronder en
   liet het kruimelpad over twee regels breken. */
@media (max-width: 640px) {
    .rp-crumbs li:last-child { display: none; }
}

/* Een lange knoptekst ("Plan je Nintendo Switch-reparatie") mocht niet
   afbreken en duwde op een smalle telefoon de hele tekstkolom breder dan het
   scherm. De kolom mag nu altijd smaller worden dan zijn inhoud, en op
   telefoon breekt een knoptekst gewoon af over twee regels. */
@media (max-width: 960px) {
    .rp-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .rp-btn { white-space: normal; text-align: center; line-height: 1.3; }
}

/* ---------- Footer: vier kolommen links, gelijk aan de homepage ---------- */
.rp-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 30px; }
@media (max-width: 1100px) {
    .rp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rp-footer h2 { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.86rem; font-weight: 800; }
.rp-footer ul { gap: 0; }
.rp-footer a { min-height: 40px; color: #4a5570; font-weight: 500; line-height: 1.35; }
.rp-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rp-footer a.is-alle { color: var(--primary); font-weight: 700; }
.rp-footer a i { width: 18px; margin-right: 8px; color: var(--primary); text-align: center; }
@media (max-width: 960px) {
    .rp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
    .rp-footer-grid > :first-child { grid-column: auto; }
}
@media (max-width: 340px) {
    .rp-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Productfoto in de hero: geen CSS-filter ----------
   Safari op iOS tekende doorzichtige foto's met een drop-shadow-filter (in een
   kaart die bij het verschijnen schaalt) als wit vlak. Daarom geen filter op
   de foto; de schaduw is een zachte ellips eronder en het icoon krijgt een
   gewone text-shadow. Gezien op een iPhone, 10-09-2026. */
.rp-hero-visual { position: relative; }
.rp-hero-visual img { filter: none; position: relative; z-index: 1; }
.rp-hero-visual i { filter: none; position: relative; z-index: 1; text-shadow: 0 14px 24px rgba(14, 80, 240, 0.24); }
.rp-hero-visual::after {
    content: ''; position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
    width: 62%; height: 22px; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at center, rgba(18, 38, 84, 0.24) 0%, rgba(18, 38, 84, 0.09) 45%, rgba(18, 38, 84, 0) 72%);
}