/* Voorbeeldsite Jouwpark (resources/views/voorbeeld-jouwpark). Een verzonnen
   park, met dezelfde kleuren als de nepsite rond de portalen op /demo. */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c2b23; background: #f7f5ef; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.jp-kop { display: flex; align-items: center; gap: 28px; padding: 18px 48px; background: #1f4d3a; color: #fff; }
.jp-logo { margin-right: auto; font-family: Georgia, serif; font-size: 26px; }
.jp-logo b { color: #ffd166; }
.jp-menu { display: flex; gap: 28px; font-size: 15px; }
.jp-menu a { opacity: 0.85; }
.jp-menu a.is-aan { opacity: 1; font-weight: 700; box-shadow: 0 3px 0 #ffd166; }
.jp-knop { display: inline-block; padding: 11px 22px; border-radius: 999px; background: #ffd166; color: #1f4d3a; font-size: 15px; font-weight: 700; }
.jp-knop--rand { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.8); }
.jp-hamburger { display: none; flex-direction: column; gap: 5px; }
.jp-hamburger i { width: 22px; height: 2px; border-radius: 2px; background: #fff; }

.jp-held { position: relative; height: 460px; overflow: hidden; background: #1f4d3a; }
.jp-held img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.jp-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 30 20 / 0.75), transparent 75%); }
.jp-held__tekst { position: absolute; z-index: 1; left: 48px; right: 48px; bottom: 44px; color: #fff; }
.jp-held__boven { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd166; }
.jp-held h1 { margin: 0; max-width: 15ch; font-family: Georgia, serif; font-size: 54px; font-weight: 400; line-height: 1.05; }
.jp-held__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.jp-strook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 22px 48px; background: #16382a; color: #fff; font-size: 15px; }
.jp-strook p { margin: 0; }
.jp-strook b { color: #ffd166; }

.jp-beleven { padding: 56px 48px; }
.jp-beleven h2, .jp-groepen h2 { margin: 0 0 24px; font-family: Georgia, serif; font-size: 36px; font-weight: 400; color: #1f4d3a; }
.jp-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jp-tegel img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 14px; }
.jp-tegel h3 { margin: 16px 0 6px; font-size: 19px; }
.jp-tegel p { margin: 0; font-size: 15px; line-height: 1.5; }

.jp-groepen { margin: 0 48px 56px; padding: 40px; border-radius: 18px; background: #1f4d3a; color: #fff; }
.jp-groepen h2 { color: #fff; margin-bottom: 10px; }
.jp-groepen p { margin: 0 0 22px; font-size: 16px; }
.jp-groepen__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

.jp-voet { padding: 26px 48px; background: #16382a; color: rgb(255 255 255 / 0.8); font-size: 13px; }

@media (max-width: 760px) {
    .jp-kop { padding: 14px 20px; }
    .jp-menu, .jp-kop > .jp-knop { display: none; }
    .jp-hamburger { display: flex; }
    .jp-held { height: 420px; }
    .jp-held__tekst { left: 20px; right: 20px; bottom: 26px; }
    .jp-held h1 { font-size: 34px; }
    .jp-strook { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
    .jp-beleven { padding: 36px 20px; }
    .jp-beleven h2, .jp-groepen h2 { font-size: 28px; }
    .jp-tegels { grid-template-columns: 1fr; gap: 28px; }
    .jp-groepen { margin: 0 20px 36px; padding: 28px 22px; }
    .jp-voet { padding: 20px; }
}