/* public_html/assets/css/lp.css -- aanvulling op local.css voor de landingspagina's (stad, staat, pijlers) */

.lp-prose p { font-size: 1.0625rem; line-height: 1.75; color: var(--oc-ink); margin-bottom: 1rem; }
.lp-prose p:last-child { margin-bottom: 0; }

.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem; }
.lp-fact { background: var(--oc-white, #fff); border: 1px solid var(--oc-border); border-radius: 12px; padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.lp-fact strong { font-family: var(--oc-font-display); font-size: 1.5rem; font-weight: 700; color: #d97706; line-height: 1.1; }
.lp-fact strong small { font-family: var(--oc-font-body, inherit); font-size: .75rem; font-weight: 500; color: var(--oc-muted); }
.lp-fact span { font-size: .8125rem; color: var(--oc-muted); }

.lp-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; margin: 1.25rem 0 0; }
.lp-dl div { border-left: 3px solid var(--oc-gold); padding-left: .875rem; }
.lp-dl dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--oc-muted); }
.lp-dl dd { margin: .125rem 0 0; font-weight: 600; color: var(--oc-ink); }
.lp-source { font-size: .75rem; color: var(--oc-muted); margin-top: 1rem; }

.lp-more { margin-top: 1.25rem; font-size: .9375rem; font-weight: 600; }
.lp-more a { color: var(--oc-gold-dark); text-decoration: none; }
.lp-more a:hover { color: var(--oc-gold); }

a.lp-card-link { text-decoration: none; color: inherit; }

.lp-faq__item { background: var(--oc-white, #fff); border: 1px solid var(--oc-border); border-radius: 12px; padding: 0 1.25rem; margin-top: .75rem; }
.lp-faq__item summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--oc-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after { content: '+'; color: var(--oc-gold-dark); font-size: 1.25rem; line-height: 1; }
.lp-faq__item[open] summary::after { content: '\2212'; }
.lp-faq__item p { padding: 0 0 1.125rem; margin: 0; color: var(--oc-muted); line-height: 1.7; }

.lp-az { display: flex; flex-wrap: wrap; gap: .375rem; margin: 1rem 0 0; }
.lp-az a { display: inline-block; min-width: 2rem; text-align: center; padding: .25rem .5rem; border: 1px solid var(--oc-border); border-radius: 8px; background: var(--oc-white, #fff); color: var(--oc-ink); font-weight: 600; font-size: .875rem; text-decoration: none; }
.lp-az a:hover { border-color: var(--oc-gold); color: var(--oc-gold-dark); }
.lp-letter { font-family: var(--oc-font-display); font-size: 1.25rem; color: #d97706; margin: 1.75rem 0 0; scroll-margin-top: 5rem; }

.lp-list, .lp-checks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .625rem; }
.lp-list li { position: relative; padding-left: 1.5rem; line-height: 1.65; color: var(--oc-ink); }
.lp-list li::before { content: ''; position: absolute; left: .25rem; top: .65em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--oc-gold); }
.lp-checks { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-checks li { background: var(--oc-white, #fff); border: 1px solid var(--oc-border); border-radius: 10px; padding: .75rem 1rem .75rem 2.5rem; position: relative; font-weight: 500; color: var(--oc-ink); }
.lp-checks li::before { content: '\2713'; position: absolute; left: 1rem; color: #16a34a; font-weight: 700; }

.lp-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.lp-pillar { background: var(--oc-white, #fff); border: 1px solid var(--oc-border); border-top: 3px solid var(--oc-gold); border-radius: 14px; padding: 1.5rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .5rem; transition: transform .2s, box-shadow .2s; }
.lp-pillar:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(201,168,76,.18); color: inherit; }
.lp-pillar__icon { font-size: 2rem; line-height: 1; }
.lp-pillar strong { font-family: var(--oc-font-display); font-size: 1.25rem; color: var(--oc-ink); }
.lp-pillar span:not(.lp-pillar__icon) { font-size: .875rem; color: var(--oc-muted); line-height: 1.55; }

.lp-hero-icon { display: block; font-size: 2.5rem; line-height: 1; margin-bottom: .875rem; }
.lp-stat-text { font-size: 1.375rem; }
.lp-mini-text { font-size: 1rem !important; }

@media (max-width: 640px) {
    .lp-facts { grid-template-columns: 1fr 1fr; }
    .lp-fact strong { font-size: 1.25rem; }
}