/* Alleen voor de nieuwe, afzonderlijke SEO-tuinpagina's. De bestaande homepage en kaart gebruiken uitsluitend style.css. */
.seo-detail-page { background: var(--paper); }
.seo-detail-main { min-height: 80vh; padding: 132px 0 96px; }
.seo-detail-nav { color: var(--white); font-size: .82rem; font-weight: 600; }
.seo-detail-nav a { opacity: .8; }
.seo-detail-nav a:hover { opacity: 1; }
.seo-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; color: var(--muted); font-size: .75rem; }
.seo-breadcrumb a { color: var(--forest); font-weight: 700; }
.seo-detail-card { overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.seo-detail-photo { max-height: 620px; overflow: hidden; background: var(--cream); }
.seo-detail-photo img { width: 100%; max-height: 620px; object-fit: cover; }
.seo-detail-content { max-width: 900px; padding: clamp(32px, 6vw, 78px); }
.seo-detail-content h1 { margin: 14px 0 12px; font: 400 clamp(3.2rem, 7vw, 6.4rem)/.92 "Newsreader", serif; letter-spacing: -.045em; }
.seo-detail-address { margin: 0 0 18px; color: var(--muted); }
.seo-detail-summary { max-width: 760px; margin: 0 0 34px; color: var(--forest); font-size: 1rem; font-weight: 600; line-height: 1.7; }
.seo-detail-content .detail-facts { margin: 0 0 42px; }
.seo-detail-content .detail-description { font-size: 1rem; line-height: 1.8; }
.seo-detail-content .detail-description h2 { margin: 34px 0 10px; font: 400 2rem/1.05 "Newsreader", serif; }
.seo-detail-content .detail-description p { margin: 0 0 18px; }
.seo-detail-faq { margin-top: 44px; padding-top: 38px; border-top: 1px solid var(--line); }
.seo-detail-faq h2 { margin: 0 0 22px; font: 400 clamp(2rem, 4vw, 3rem)/1 "Newsreader", serif; letter-spacing: -.025em; }
.seo-detail-faq dl { display: grid; gap: 12px; margin: 0; }
.seo-detail-faq dl > div { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.seo-detail-faq dt { color: var(--forest); font-weight: 700; }
.seo-detail-faq dd { margin: 7px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.seo-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.seo-detail-note { margin: 26px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.seo-related { margin-top: 36px; padding: clamp(30px, 5vw, 58px); border-radius: var(--radius); background: var(--forest); color: var(--white); }
.seo-related-heading { max-width: 720px; }
.seo-related-heading .eyebrow { color: var(--leaf); }
.seo-related-heading h2 { margin: 12px 0 10px; font: 400 clamp(2.5rem, 5vw, 4.4rem)/.95 "Newsreader", serif; letter-spacing: -.035em; }
.seo-related-heading > p:last-child { margin: 0; color: rgba(255,255,255,.7); line-height: 1.7; }
.seo-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.seo-related-grid a { min-height: 150px; display: flex; flex-direction: column; justify-content: end; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.07); transition: background .2s, transform .2s; }
.seo-related-grid a:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.seo-related-grid span { margin-bottom: 7px; color: var(--leaf); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.seo-related-grid strong { font: 400 1.55rem/1.08 "Newsreader", serif; }
.seo-related-grid small { margin-top: 8px; color: rgba(255,255,255,.6); font-size: .68rem; line-height: 1.45; }
@media (max-width: 720px) {
  .seo-detail-main { padding-top: 110px; }
  .seo-detail-nav { gap: 14px; }
  .seo-detail-content { padding: 30px 22px 40px; }
  .seo-detail-content h1 { font-size: 3rem; }
  .seo-related { padding: 30px 20px; }
  .seo-related-grid { grid-template-columns: 1fr; }
}