/* Reparatiepartner ThePhoneLab: partnerpagina (reparatie/thephonelab.php), homepagekaart en toestelverwijzing (includes/partners.php).
   BELREUS-blauw en -typografie; oranje knoppen; ThePhoneLab-rood alleen als subtiel accent. */
.rp { --rp-red: #e0262f; --rp-red-soft: #fdeceb; }
.rp-kicker { margin: 0 0 6px; color: var(--blue); font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rp-small { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-meta); }
.rp-ext { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.link-btn { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-weight: var(--fw-semibold); text-decoration: underline; cursor: pointer; }

/* Kop */
.rp-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--tint-blue) 0%, var(--white) 100%); border-bottom: 1px solid var(--line-blue); box-shadow: inset 0 3px 0 var(--rp-red); }
.rp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-6); align-items: center; padding: var(--sp-6) var(--sp-4); }
.rp-hero-text { min-width: 0; }
.rp-hero h1 { margin: 0 0 var(--sp-3); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); overflow-wrap: anywhere; }
.rp-lead { max-width: 60ch; margin: 0 0 var(--sp-4); color: var(--ink); font-size: 1.0625rem; }
.rp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.rp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.rp-chips li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-full); color: var(--navy); font-size: var(--fs-meta); font-weight: var(--fw-semibold); }
.rp-chips svg { flex: none; color: var(--rp-red); }
.rp-note { margin: var(--sp-2) 0 0; color: var(--muted); font-size: .75rem; }
.rp-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 340px; }
.rp-visual-bg { position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #dce8ff 0%, #eef4ff 55%, rgba(255, 255, 255, 0) 72%); }
.rp-hero-visual img { position: relative; width: auto; height: 330px; filter: drop-shadow(0 24px 30px rgba(11, 31, 66, .18)); }
.rp-float { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-full); box-shadow: 0 8px 20px rgba(11, 31, 66, .10); color: var(--navy); font-size: var(--fs-meta); font-weight: 700; }
.rp-float svg { color: var(--blue); }
.rp-float-a { top: 14%; left: 2%; }
.rp-float-b { top: 46%; right: 0; }
.rp-float-b svg { color: var(--rp-red); }
.rp-float-c { bottom: 10%; left: 8%; }

/* Advertentiezones (verborgen tot toestemming voor marketing) */
.rp-ad { display: grid; justify-items: center; gap: 6px; }
.rp-ad[hidden] { display: none; }
.rp-ad .ad-label { justify-self: start; color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rp-banner { display: block; max-width: 100%; }
.rp-banner img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.rp-ad-wide { margin: var(--sp-5) auto 0; max-width: 1100px; }
.rp-ad-cat { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.rp-ad-small { margin-top: var(--sp-4); }
.rp-ad-small img { width: 168px; }

/* Secties */
.rp-sec { padding: var(--sp-6) var(--sp-4) 0; scroll-margin-top: 20px; }
.rp-sec-head { max-width: 760px; margin-bottom: var(--sp-4); }
.rp-sec-head h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: var(--ls-heading); }
.rp-sec-head p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

.rp-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.rp-cat { display: flex; flex-direction: column; min-width: 0; padding: var(--sp-4); background: var(--white); border: 1px solid var(--line-blue); border-radius: 20px; box-shadow: 0 1px 2px rgba(11, 31, 66, .04), 0 6px 18px rgba(11, 31, 66, .05); scroll-margin-top: 20px; transition: box-shadow .2s, transform .2s; }
.rp-cat:hover { box-shadow: 0 2px 4px rgba(11, 31, 66, .05), 0 18px 40px rgba(11, 31, 66, .10); transform: translateY(-3px); }
.rp-cat-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: var(--sp-3); border-radius: 16px; background: linear-gradient(135deg, #1a62f2 0%, #12306e 100%); color: var(--white); box-shadow: inset 0 -3px 0 var(--rp-red); }
.rp-cat h3 { margin: 0 0 6px; font-size: 1.125rem; }
.rp-cat p { margin: 0 0 var(--sp-3); color: var(--ink); font-size: var(--fs-small); }
.rp-cat-links { list-style: none; display: grid; gap: 8px; margin: auto 0 0; padding: 0; }
.rp-cat-links .btn { width: 100%; min-height: 44px; justify-content: center; }
.rp-cat-links .rp-ext { justify-content: center; width: 100%; }

.rp-band { margin-top: var(--sp-6); padding: var(--sp-6) 0; background: var(--tint); border-top: 1px solid var(--line-blue); border-bottom: 1px solid var(--line-blue); scroll-margin-top: 20px; }
.rp-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.rp-fact { display: flex; flex-direction: column; padding: var(--sp-4); background: var(--white); border: 1px solid var(--line-blue); border-radius: var(--radius-lg); }
.rp-fact-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--sp-2); border-radius: 12px; background: var(--tint-blue); color: var(--blue); }
.rp-fact h3 { margin: 0 0 6px; font-size: 1rem; }
.rp-fact p { margin: 0 0 var(--sp-2); color: var(--ink); font-size: var(--fs-small); }
.rp-src { margin-top: auto; font-size: var(--fs-meta); font-weight: var(--fw-semibold); }

.rp-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.rp-tips h2 { margin: 0 0 var(--sp-3); font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }
.rp-tips ol { display: grid; gap: var(--sp-3); margin: 0; padding-left: 1.25rem; }
.rp-tips li { color: var(--ink); font-size: var(--fs-small); }
.rp-tips li strong { color: var(--navy); }
.rp-cta-box { padding: var(--sp-5); background: var(--white); border: 1px solid var(--line-blue); border-radius: 24px; box-shadow: 0 12px 32px rgba(11, 31, 66, .06); }
.rp-cta-box h2 { margin: 0 0 6px; }
.rp-cta-box p { margin: 0 0 var(--sp-3); }
.rp-cta-box .btn-deal { min-height: 48px; box-shadow: 0 4px 12px rgba(245, 90, 13, .24); }

.rp-faq { max-width: 860px; }
.rp-faq h2 { margin: 0 0 var(--sp-3); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.rp-faq-item { border-bottom: 1px solid var(--line-blue); }
.rp-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 14px 0; color: var(--navy); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.rp-faq-item summary::-webkit-details-marker { display: none; }
.rp-faq-item summary svg { flex: none; color: var(--blue); transition: transform .15s; }
.rp-faq-item[open] summary svg { transform: rotate(180deg); }
.rp-faq-item p { margin: 0 0 14px; color: var(--ink); font-size: var(--fs-small); max-width: 75ch; }

.rp-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); padding-bottom: var(--sp-7); }
.rp-bottom .side-box { margin: 0; }
.rp-sources { margin: 0; padding-left: 1.1rem; font-size: var(--fs-small); }

/* Homepagekaart (compact, max. ± 260 px hoog) en toestelverwijzing */
.rp-promo, .rp-teaser { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
.rp-promo-card { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: linear-gradient(110deg, #f3f7ff 0%, var(--white) 65%); border: 1px solid var(--line-blue); border-radius: 20px; box-shadow: inset 4px 0 0 #e0262f, 0 6px 18px rgba(11, 31, 66, .05); }
.rp-promo-text h2 { margin: 0 0 4px; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); }
.rp-promo-text > p { margin: 0 0 var(--sp-2); color: var(--ink); font-size: var(--fs-small); }
.rp-promo-text .rp-kicker { margin-bottom: 2px; }
.rp-promo-usps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 var(--sp-3); padding: 0; font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--navy); }
.rp-promo-usps li { display: inline-flex; align-items: center; gap: 6px; }
.rp-promo-usps svg { color: #e0262f; flex: none; }
.rp-promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); }
.rp-promo-actions .btn { white-space: nowrap; }
.rp-promo-actions span { color: var(--muted); font-size: .72rem; }
.rp-promo-media { display: flex; justify-content: center; align-items: center; min-width: 0; }
.rp-promo-visual { display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; height: 150px; border-radius: 16px; background: radial-gradient(circle at 50% 60%, #dce8ff 0%, #eef4ff 60%, #f7faff 100%); color: var(--blue); }
.rp-promo-visual svg { margin-bottom: 30px; }
.rp-promo-media:has([data-ad-zone]:not([hidden])) .rp-promo-visual { display: none; }
.rp-ad-promo { width: 100%; }
.rp-ad-promo img { width: 100%; max-width: 250px; max-height: 210px; object-fit: contain; }
.rp-teaser-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: linear-gradient(110deg, var(--tint-blue) 0%, var(--white) 70%); border: 1px solid var(--line-blue); border-radius: 20px; box-shadow: inset 4px 0 0 #e0262f; }
.rp-promo-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #1a62f2 0%, #12306e 100%); color: var(--white); }
.rp-teaser-text h2 { margin: 0 0 4px; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.rp-teaser-text p { margin: 0; color: var(--ink); font-size: var(--fs-small); }
.rp-teaser-card .btn { white-space: nowrap; }
.rp-teaser-actions { display: grid; justify-items: center; gap: 8px; }
@media (max-width: 1099px) {
    .rp-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .rp-hero-grid { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-4); }
    .rp-hero-visual { display: none; }
    .rp-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-two, .rp-bottom { grid-template-columns: minmax(0, 1fr); }
    .rp-teaser-card { grid-template-columns: auto minmax(0, 1fr); }
    .rp-teaser-actions { grid-column: 1 / -1; justify-self: start; justify-items: start; }
    .rp-promo-card { grid-template-columns: minmax(0, 1fr) 190px; gap: var(--sp-4); }
}
@media (max-width: 599px) {
    .rp-sec, .rp-band { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .rp-hero-grid { padding: var(--sp-4) var(--sp-3); }
    .rp-actions .btn { width: 100%; justify-content: center; }
    .rp-cat-grid, .rp-fact-grid { grid-template-columns: minmax(0, 1fr); }
    .rp-promo-card, .rp-teaser-card { padding: var(--sp-4); gap: var(--sp-3); }
    .rp-promo-ico { width: 44px; height: 44px; }
    .rp-promo-card { grid-template-columns: minmax(0, 1fr); }
    .rp-promo-media { order: -1; }
    .rp-promo-visual { height: 96px; }
    .rp-promo-visual svg { margin-bottom: 14px; }
    .rp-ad-promo img { max-width: 200px; max-height: 170px; }
    .rp-promo-actions .btn, .rp-teaser-actions, .rp-teaser-actions .btn { width: 100%; justify-content: center; }
    .rp-teaser-card .btn { white-space: normal; }
}