/* ==========================================================================
   Single location (locaties)
   Reuses .btn / .btn-* / .lcol / .litem / .lcontent / .llist / .licon from locations/style.css
   Brand tokens (--des-*) come from :root in site-header/style.css

   Type rules: Fredoka (--lp-head) only for headings, always 700, green or orange.
   Everything else Poppins (--lp-body). Text in --lp-ink, grey only for subtitles.
   ========================================================================== */

.lp {
    --lp-green: var(--des-green);
    --lp-green-h: var(--des-green-h);
    --lp-orange: var(--des-orange);
    --lp-orange-h: var(--des-orange-h);
    --lp-yellow: var(--des-yellow);
    --lp-purple: var(--des-purple);
    --lp-ink: var(--des-ink);
    --lp-muted: var(--des-muted);
    --lp-tint: var(--des-tint);
    --lp-line: var(--des-line);
    --lp-head: var(--des-head);
    --lp-body: var(--des-body);
    --lp-hand: 'Shadows Into Light Two', cursive;

    /* Page-only values */
    --lp-blue: #00a0df;     /* BSO, same as .btn-blue */
    --lp-type-purple: #9b26b6; /* Tiener BSO, same as .btn-purple */
    --lp-crumb: #a3a3a3;
    --lp-border: #e6e6e2;
    --lp-radius: 20px;
    --lp-shadow: 0 6px 20px rgba(26, 23, 28, .04);

    font-family: var(--lp-body);
    color: var(--lp-ink);
    background: #fff;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
}

.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}

/* Divi resets inside the page */
.lp :where(h1, h2, h3, h4, p) {
    margin: 0;
    padding: 0;
}

.lp :where(ul, ol, dl, dd) {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp :where(figure, blockquote) {
    margin: 0;
    padding: 0;
    border: 0;
}

.lp [hidden] {
    display: none !important;
}

.lp a:focus-visible,
.lp button:focus-visible {
    outline: 3px solid var(--lp-blue);
    outline-offset: 3px;
}

/* Containers */
.lp-wrap {
    width: min(1240px, 100% - 48px);
    margin-inline: auto;
}

.lp-wrap--narrow {
    width: min(1140px, 100% - 48px);
}

/* Shared type */
.lp-hand {
    font-family: var(--lp-hand);
    font-weight: 400;
}

.lp-kicker {
    font-size: 28px;
    line-height: 1.2;
    color: var(--lp-orange);
}

.lp-h2 {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
    color: var(--lp-green);
    margin-top: 2px !important;
}

.lp-h2-sm {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.2;
    color: var(--lp-green);
    margin-bottom: 16px !important;
}

.lp-h3 {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--lp-green);
}

.lp .btn {
    font-family: var(--lp-body);
    font-weight: 600;
}

/* Colour helpers */
.lp-bg-green  { background-color: var(--lp-green); }
.lp-bg-orange { background-color: var(--lp-orange); }
.lp-bg-blue   { background-color: var(--lp-blue); }
.lp-bg-purple { background-color: var(--lp-type-purple); }

/* Day program colours: --tint-fg = icon + label, --tint-on = label text */
.lp-tint-green  { --tint-bg: #f4f8ed; --tint-fg: var(--lp-green);  --tint-on: #fff; }
.lp-tint-orange { --tint-bg: #fbf0eb; --tint-fg: var(--lp-orange); --tint-on: #fff; }
.lp-tint-blue   { --tint-bg: #eaf5fb; --tint-fg: var(--lp-blue);   --tint-on: #fff; }
.lp-tint-yellow { --tint-bg: #fef5e5; --tint-fg: var(--lp-yellow); --tint-on: #fff; }
.lp-tint-purple { --tint-bg: #f1eaf5; --tint-fg: var(--lp-purple); --tint-on: #fff; }

.lp-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--lp-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    padding: 9px 16px;
    border-radius: 999px;
    color: #fff;
}

.lp-pill--sm {
    font-size: 13px;
    padding: 5px 12px;
}

/* Round arrow buttons: green with a white arrow by default */
.lp-round-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--lp-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26, 23, 28, .18);
    transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.lp-round-btn:hover {
    background: var(--lp-green-h);
}

/* ==========================================================================
   Intro
   ========================================================================== */

.lp-intro {
    background: var(--lp-tint);
    padding: clamp(20px, 3vw, 40px) 0 28px;
}

/* The header bar overlaps the page (.des-barwrap has a negative margin of its own height).
   Single location pages only: start the content below it. 114px / 86px = .des-barwrap height. */
body.single-locaties .lp-intro {
    padding-top: 114px;
}

@media (max-width: 1023px) {
    body.single-locaties .lp-intro {
        padding-top: 86px;
    }
}

/* Same look as the sitewide Yoast breadcrumbs (Divi text module on e.g. /kinderdagopvang/):
   12px Poppins, 0.5px letter-spacing, grey text, links in the Divi link colour, hover in the secondary colour */
.lp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--lp-crumb);
}

.lp-crumbs li + li::before {
    content: "»";
    margin-right: 6px;
}

.lp-crumbs a {
    color: var(--gcid-link-color, var(--lp-green));
    text-decoration: none;
    transition: color .3s ease;
}

.lp-crumbs a:hover {
    color: var(--gcid-secondary-color, var(--lp-orange));
}

.lp-title {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: clamp(36px, 4.2vw, 46px);
    line-height: 1.08;
    color: var(--lp-green);
    margin-top: 14px !important;
    text-wrap: balance;
}

/* Subtitle: grey */
.lp-lead {
    max-width: 680px;
    margin-top: 14px !important;
    font-size: 19px;
    line-height: 1.6;
    color: var(--lp-muted);
    text-wrap: pretty;
}

.lp-intro-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
}

.lp-city {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.lp-city-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--lp-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Gallery: carousel. The hero green curves behind the top half of the photos.
   Photos line up with the page content on the left; the next one peeks in at
   the right page edge.
   ========================================================================== */

.lp-gallery {
    container-type: inline-size;
    position: relative;
    padding-bottom: clamp(28px, 4vw, 48px);

    --lp-edge: max(24px, (100cqw - 1240px) / 2); /* = left edge of .lp-wrap */
    --lp-peek: max(var(--lp-edge), 72px);        /* visible part of the next photo */
    --lp-gap: 14px;
    --lp-per: 3;
    --lp-ratio: 1 / 1;
    --lp-slide-w: calc((100cqw - var(--lp-edge) - var(--lp-peek)) / var(--lp-per) - var(--lp-gap));
}

.lp-gallery::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 58%;
    background: var(--lp-tint);
    clip-path: ellipse(80% 100% at 50% 0%);
    pointer-events: none;
}

/* 1 or 2 photos: fill the content width, no peek */
.lp-gallery--n1 {
    --lp-per: 1;
    --lp-peek: var(--lp-edge);
    --lp-ratio: 21 / 9;
}

.lp-gallery--n2 {
    --lp-per: 2;
    --lp-peek: var(--lp-edge);
    --lp-ratio: 4 / 3;
}

.lp-gallery-stage {
    position: relative;
    z-index: 1;
}

.lp-gallery-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lp-edge);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.lp-gallery-track::-webkit-scrollbar {
    display: none;
}

.lp .lp-gallery-track:focus-visible {
    outline: 3px solid var(--lp-blue);
    outline-offset: -3px;
}

.lp-gallery-list {
    display: flex;
    gap: var(--lp-gap);
    width: max-content;
    padding-inline: var(--lp-edge);
}

.lp-slide {
    position: relative;
    flex: 0 0 var(--lp-slide-w);
    width: var(--lp-slide-w);
    aspect-ratio: var(--lp-ratio);
    border-radius: var(--lp-radius);
    overflow: hidden;
    background: #e3edd0;
    scroll-snap-align: start;
    transition: opacity .35s ease;
}

/* Partly visible photos fade (set by JS, so without JS everything stays visible) */
.lp-gallery.is-ready .lp-slide:not(.is-in) {
    opacity: .45;
}

.lp-slide-btn {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    cursor: zoom-in;
}

.lp .lp-slide-btn:focus-visible {
    outline-offset: -4px;
    border-radius: var(--lp-radius);
}

.lp-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.lp-slide-btn:hover .lp-slide-img {
    transform: scale(1.03);
}

.lp-gallery-label {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 36px);
    background: #fff;
    color: var(--lp-ink);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    padding: 8px 14px 8px 11px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(26, 23, 28, .12);
    pointer-events: none;
}

.lp-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lp-green);
}

.lp-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

.lp-gallery-arrow--prev {
    left: calc(var(--lp-edge) + 16px);
}

.lp-gallery-arrow--next {
    right: calc(var(--lp-peek) + var(--lp-gap) + 16px);
}

.lp-gallery-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.lp-gallery.is-static .lp-gallery-arrow {
    display: none;
}

.lp-gallery-counter {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
    background: rgba(26, 23, 28, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Lightbox */
.lp-lightbox {
    width: min(1100px, 100vw - 32px);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: #fff;
}

.lp-lightbox::backdrop {
    background: rgba(26, 23, 28, .86);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lp-lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    margin: 0 auto;
    border-radius: var(--lp-radius);
    object-fit: contain;
}

.lp-lightbox-figure figcaption {
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    margin-top: 12px;
}

.lp-lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.lp-lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
}

html:has(.lp-lightbox[open]) {
    overflow: hidden;
}

/* ==========================================================================
   Main content + sidebar
   ========================================================================== */

.lp-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 72px;
    align-items: start;
    padding: 24px 0 72px;
}

/* Over */
.lp-prose {
    font-size: 16px;
    line-height: 1.8;
    text-wrap: pretty;
}

.lp-prose p,
.lp-prose ul,
.lp-prose ol {
    margin: 0 0 16px;
    padding-bottom: 0;
}

.lp-prose ul {
    list-style: disc;
    padding-left: 1.25em;
}

.lp-prose ol {
    list-style: decimal;
    padding-left: 1.25em;
}

.lp-prose > :last-child {
    margin-bottom: 0;
}

.lp-prose a {
    color: var(--lp-green);
    text-decoration: underline;
}

.lp-prose h2,
.lp-prose h3,
.lp-prose h4 {
    font-family: var(--lp-head);
    font-weight: 700;
    color: var(--lp-green);
    margin: 28px 0 8px;
    padding: 0;
}

/* USPs: checkmark list under the main text */
.lp-usps {
    margin-top: 28px !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px 24px;
}

.lp-main-content > .lp-usps:first-child {
    margin-top: 0 !important;
}

.lp-usps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
}

.lp-usp-icon {
    flex: 0 0 26px;
    height: 26px;
    margin-top: -1px;
    border-radius: 50%;
    background: var(--lp-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ook op deze locatie */
.lp-also {
    margin-top: 40px;
}

.lp-main-content > .lp-also:first-child {
    margin-top: 0;
}

.lp-also-title {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    color: var(--lp-orange);
}

.lp-also-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.lp-also .btn {
    min-width: 230px;
    font-size: 16px;
    padding: 11px 13px 11px 20px;
}

.lp-also .btn svg {
    width: 22px;
    height: 22px;
}

/* Blocks with a top line */
.lp-block {
    margin-top: 52px;
    border-top: 1px solid var(--lp-line);
    padding-top: 36px;
}

.lp-main-content > .lp-block:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

/* Opvangmogelijkheden */
.lp-options-grid {
    margin-top: 18px !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lp-option {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 66px;
    padding: 12px 14px 12px 12px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: var(--lp-ink);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

a.lp-option:hover {
    border-color: var(--lp-green);
    color: var(--lp-ink);
    transform: translateY(-2px);
}

.lp-option-icon {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--lp-tint);
    color: var(--lp-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-option-icon svg {
    transform: rotate(-14deg);
}

.lp-options-grid li:nth-child(3n+2) .lp-option-icon svg {
    transform: rotate(10deg);
}

.lp-option-arrow {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--lp-green);
    display: inline-flex;
}

/* Sidebar */
.lp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lp-card {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 28px;
    box-shadow: var(--lp-shadow);
}

.lp-card-title {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--lp-green);
}

.lp-card-title--orange {
    color: var(--lp-orange);
}

/* Subtitle: grey */
.lp-card-intro {
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0 18px !important;
    color: var(--lp-muted);
}

/* Tarieven / Rondleiding / Inschrijven (replaces the green CTA block) */
.lp-actions {
    display: grid;
    gap: 10px;
    padding: 20px 0;
}

.lp-actions .btn {
    font-size: 16px;
    padding: 12px 13px 12px 22px;
}

.lp-actions .btn svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* Plaatsing: works with and without a photo, the whole row calls */
.lp-team {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lp-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 -8px;
    padding: 8px;
    border-radius: 16px;
    color: var(--lp-ink);
    text-decoration: none;
    transition: background-color .2s ease;
}

a.lp-person-row:hover {
    background: var(--lp-tint);
    color: var(--lp-ink);
}

.lp-person-photo {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--lp-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-person-photo--icon {
    background: var(--lp-green);
    color: #fff;
}

.lp-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-person-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lp-person-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
}

.lp-person-phone {
    font-size: 15px;
    line-height: 1.4;
}

a.lp-person-row .lp-person-phone {
    color: var(--lp-green);
    font-weight: 500;
}

/* Praktische info */
.lp-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px !important;
}

.lp-info li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    line-height: 1.5;
}

.lp-info li > span:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 1px;
}

.lp-info a {
    color: var(--lp-ink);
    text-decoration: underline;
    text-decoration-color: var(--lp-green);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.lp-info a:hover {
    color: var(--lp-green);
}

.lp-info-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lp-tint);
    color: var(--lp-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-info-label {
    font-weight: 600;
    font-size: 14px;
}

/* Day column as wide as the longest day, times left-aligned right after it */
.lp-hours {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    margin-top: 2px !important;
}

.lp-hours div {
    display: contents;
}

.lp .lp-hours dt {
    font-weight: 400;
}

.lp-hours dd {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Subtitle: grey */
.lp-info-extra {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lp-muted);
}

.lp-map {
    position: relative;
    margin-top: 22px;
    height: 190px;
    border-radius: var(--lp-radius);
    overflow: hidden;
    background: #eef1e8;
    /* Keep Leaflet's panes below a sticky header */
    isolation: isolate;
    z-index: 0;
    font-family: inherit;
}

.lp-map .leaflet-tile-pane {
    filter: saturate(.55) brightness(1.04);
}

.lp-map .leaflet-bar.leaflet-control-zoom {
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(26, 23, 28, .15);
}

.lp-map .leaflet-bar.leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 30px;
    color: var(--lp-green);
    border-bottom-color: var(--lp-line);
}

.lp-map .leaflet-bar.leaflet-control-zoom a:hover {
    background: var(--lp-tint);
    color: var(--lp-green-h);
}

.lp-map .leaflet-control-attribution {
    font-size: 10px;
    border-top-left-radius: 8px;
}

.lp-map-marker {
    background: none;
    border: 0;
}

.lp-map-pin {
    width: 38px;
    height: 38px;
    background: var(--lp-green);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 12px rgba(26, 23, 28, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-map-pin span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}

.lp-route {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--lp-green) !important;
    text-decoration: none;
}

.lp-route:hover {
    color: var(--lp-green-h) !important;
}

/* ==========================================================================
   Day program: full width, no background. The dotted path runs in from the
   left page edge and out to the right one.
   ========================================================================== */

.lp-day-section {
    padding: 8px 0 clamp(64px, 8vw, 104px);
}

.lp-day-head {
    text-align: center;
}

/* Subtitle: grey */
.lp-day-note {
    margin-top: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    color: var(--lp-muted);
}

.lp-day-track {
    position: relative;
    margin-top: 48px;
}

.lp-day-wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 122px;
    overflow: visible;
}

.lp-day-wave path {
    fill: none;
    stroke: var(--lp-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1 10;
    opacity: .6;
}

/* Run-in / run-out to the page edges, same dots as the SVG path (.lp clips the overflow) */
.lp-day--wave .lp-day-track::before,
.lp-day--wave .lp-day-track::after {
    content: "";
    position: absolute;
    top: 34px;
    width: 50vw;
    height: 4px;
    background: radial-gradient(circle at 2px 2px, var(--lp-green) 1.5px, transparent 2px) 0 0 / 11px 4px repeat-x;
    opacity: .6;
    pointer-events: none;
}

.lp-day--wave .lp-day-track::before {
    right: 100%;
    background-position: right 0 top 0;
}

.lp-day--wave .lp-day-track::after {
    left: 100%;
}

.lp-day--end-low .lp-day-track::after {
    top: 84px;
}

.lp-day-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--lp-steps), minmax(0, 1fr));
}

.lp-day-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
}

.lp-day-step:nth-child(even) {
    margin-top: 50px;
}

.lp-day-icon {
    position: relative;
    z-index: 1; /* above the dotted line (positioned ::before / SVG) */
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 4px solid #fff;
    background: var(--tint-bg);
    color: var(--tint-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(26, 23, 28, .08);
    transition: transform .25s ease;
}

.lp-day-step:hover .lp-day-icon {
    transform: rotate(-8deg) scale(1.06);
}

.lp-day-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
}

.lp-day-time {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    background: var(--tint-fg);
    color: var(--tint-on);
    padding: 4px 11px;
    border-radius: 999px;
}

/* Step titles: orange for all steps (yellow titles would be too light to read) */
.lp-day-title {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
    color: var(--lp-orange);
    margin-top: 4px;
}

.lp-day-text {
    font-size: 13.5px;
    line-height: 1.5;
}

/* Vertical timeline (more than 8 steps, or narrow screens below) */
.lp-day--list .lp-day-wave {
    display: none;
}

.lp-day--list .lp-day-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 640px;
    margin-inline: auto;
}

.lp-day--list .lp-day-list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    border-left: 3px dotted var(--lp-green);
    opacity: .55;
}

.lp-day--list .lp-day-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    padding: 0;
    margin-top: 0;
}

.lp-day--list .lp-day-icon {
    width: 56px;
    height: 56px;
    border-width: 3px;
}

.lp-day--list .lp-day-icon svg {
    width: 26px;
    height: 26px;
}

.lp-day--list .lp-day-body {
    align-items: flex-start;
    margin-top: 2px;
}

.lp-day--list .lp-day-text {
    font-size: 14px;
}

/* ==========================================================================
   Team manager quote: the quote leads, only the name is handwritten.
   Sits in the main column, under Opvangmogelijkheden.
   ========================================================================== */

.lp-manager-section {
    margin-top: 44px;
}

.lp-main-content > .lp-manager-section:first-child {
    margin-top: 0;
}

.lp-manager {
    background: var(--lp-tint);
    border-radius: var(--lp-radius);
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.lp-manager--nophoto {
    grid-template-columns: minmax(0, 1fr);
}

.lp-manager-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid #fff;
    overflow: hidden;
    background: #e3edd0;
}

.lp-manager-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-manager-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-label-orange {
    font-weight: 600;
    font-size: 14px;
    color: var(--lp-orange);
}

.lp-manager-quote p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--lp-ink);
    text-wrap: pretty;
}

.lp-manager-name {
    font-size: 26px;
    line-height: 1.2;
    color: var(--lp-green);
}

/* ==========================================================================
   Parent review (under the day program): round quote icon, handwritten
   orange quote, "- First name" in Fredoka. No card.
   ========================================================================== */

.lp-review {
    padding-bottom: clamp(64px, 8vw, 104px);
}

.lp-review-card {
    max-width: 1140px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: var(--lp-orange);
}

.lp-review-mark {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--lp-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-review-text p {
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 1.45;
    color: var(--lp-orange);
    text-wrap: pretty;
}

.lp-review-name {
    font-family: var(--lp-head);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--lp-orange);
}

/* ==========================================================================
   Band: nearby
   ========================================================================== */

.lp-band {
    background: var(--lp-tint);
    padding-bottom: 170px;
}

.lp-band > section {
    padding-top: 72px;
}

/* Nearby */
.lp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.lp-section-intro {
    font-size: 17px;
    margin-top: 10px !important;
}

.lp-all-btn {
    flex: 0 0 auto;
    font-size: 17px;
    padding: 12px 14px 12px 22px;
    gap: 10px;
}

.lp-all-mobile {
    display: none;
}

.lp-nearby-track {
    width: min(1140px, 100% - 48px);
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.lp .litem {
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    box-shadow: 0 6px 24px rgba(26, 23, 28, .04);
}

.lp .lmedia {
    height: 230px;
}

.lp .ltype {
    top: 24px;
    left: 24px;
    font-family: var(--lp-body);
    font-weight: 600;
    margin: 0;
}

.lp .lcontent {
    padding: 30px 26px;
    gap: 16px;
}

.lp .ltitle {
    font-family: var(--lp-head);
    font-weight: 700;
    text-decoration: none;
    margin: 0;
}

.lp .llist {
    margin: 0;
}

/* Care type buttons sit right under the address, as on the overview page */

/* ==========================================================================
   "Nog invullen" hints: only rendered for logged-in editors, never for visitors
   ========================================================================== */

.lp .lp-todo {
    align-self: flex-start;
    display: inline-block;
    margin-top: 2px;
    padding: 2px 10px;
    border: 1.5px dashed var(--lp-orange);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--lp-orange);
    text-decoration: none;
}

.lp .lp-todo:hover {
    background: #fff2ea;
    color: var(--lp-orange-h);
}

.lp-todo-block .lp-todo {
    padding: 10px 14px;
    font-size: 14px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .lp-main {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 44px;
    }

    .lp-nearby-track {
        gap: 24px;
    }
}

/* Day program switches to the timeline before columns get too narrow */
@media (max-width: 1100px) {
    .lp-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-day--wave .lp-day-wave,
    .lp-day--wave .lp-day-track::before,
    .lp-day--wave .lp-day-track::after {
        display: none;
    }

    .lp-day--wave .lp-day-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        max-width: 640px;
        margin-inline: auto;
    }

    .lp-day--wave .lp-day-list::before {
        content: "";
        position: absolute;
        left: 27px;
        top: 28px;
        bottom: 28px;
        border-left: 3px dotted var(--lp-green);
        opacity: .55;
    }

    .lp-day--wave .lp-day-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 16px;
        padding: 0;
        margin-top: 0;
    }

    .lp-day--wave .lp-day-icon {
        width: 56px;
        height: 56px;
        border-width: 3px;
    }

    .lp-day--wave .lp-day-icon svg {
        width: 26px;
        height: 26px;
    }

    .lp-day--wave .lp-day-body {
        align-items: flex-start;
        margin-top: 2px;
    }

    .lp-day--wave .lp-day-text {
        font-size: 14px;
    }
}

@media (max-width: 980px) {
    /* Gallery: 2 photos + peek */
    .lp-gallery {
        --lp-per: 2;
        --lp-gap: 10px;
    }

    .lp-gallery--n1 {
        --lp-per: 1;
        --lp-ratio: 16 / 9;
    }

    /* Main: stack */
    .lp-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 12px 0 56px;
    }

    .lp-sidebar {
        gap: 20px;
    }

    /* Nearby: swipe */
    .lp-nearby-track {
        width: 100%;
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 24px 8px;
        scroll-padding: 0 24px;
        scrollbar-width: thin;
    }

    .lp-nearby-track .lcol {
        flex: 0 0 290px;
        scroll-snap-align: start;
    }

    .lp .lmedia {
        height: 170px;
    }

    .lp .lcontent {
        padding: 22px 18px;
        gap: 12px;
    }

    .lp-section-head .lp-all-btn {
        display: none;
    }

    .lp-all-mobile {
        display: block;
        margin-top: 16px;
    }

    .lp-all-mobile .btn {
        justify-content: center;
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .lp-wrap,
    .lp-wrap--narrow {
        width: calc(100% - 40px);
    }

    .lp-intro {
        padding-bottom: 22px;
    }

    .lp-crumbs ol {
        font-size: 12px;
        gap: 5px;
    }

    .lp-title {
        margin-top: 10px !important;
    }

    .lp-lead {
        font-size: 16px;
        margin-top: 10px !important;
    }

    .lp-intro-meta {
        gap: 12px;
        margin-top: 14px;
    }

    .lp-pill {
        font-size: 15px;
        padding: 8px 14px;
    }

    .lp-pill--sm {
        font-size: 12px;
        padding: 4px 11px;
    }

    .lp-city {
        font-size: 15px;
        gap: 8px;
    }

    .lp-city-icon {
        width: 34px;
        height: 34px;
    }

    /* Gallery: 1 photo + peek, swipe (no arrows) */
    .lp-gallery {
        --lp-edge: 20px;
        --lp-peek: 56px;
        --lp-per: 1;
        --lp-gap: 8px;
        --lp-ratio: 4 / 3;
    }

    .lp-gallery--n1,
    .lp-gallery--n2 {
        --lp-peek: 20px;
    }

    .lp-gallery--n2 {
        --lp-per: 2;
        --lp-ratio: 3 / 4;
    }

    .lp-gallery-arrow {
        display: none;
    }

    .lp-gallery-label {
        left: 12px;
        bottom: 12px;
        font-size: 13px;
        padding: 6px 12px 6px 9px;
    }

    .lp-gallery-counter {
        font-size: 13px;
        padding: 6px 11px;
    }

    .lp-prose {
        font-size: 15px;
        line-height: 1.75;
    }

    .lp-usps li {
        font-size: 15px;
    }

    .lp-also {
        margin-top: 28px;
    }

    .lp-also-title {
        font-size: 22px;
    }

    .lp-also-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .lp-also .btn {
        min-width: 0;
        font-size: 14px;
        padding: 11px 10px 11px 16px;
        gap: 6px;
    }

    .lp-also .btn svg {
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
    }

    .lp-block {
        margin-top: 36px;
        padding-top: 28px;
    }

    .lp-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .lp-option {
        font-size: 14px;
        gap: 10px;
        padding: 10px 10px 10px 10px;
        min-height: 60px;
    }

    .lp-option-icon {
        flex-basis: 36px;
        height: 36px;
    }

    /* Sidebar cards */
    .lp-card {
        padding: 22px;
    }

    .lp-actions {
        padding: 16px;
    }

    .lp-card-title {
        font-size: 20px;
    }

    .lp-map {
        height: 170px;
        margin-top: 18px;
    }

    /* Day program */
    .lp-day-track {
        margin-top: 32px;
    }

    /* Teammanager */
    .lp-manager-section {
        margin-top: 36px;
    }

    .lp-manager {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 26px 22px;
        gap: 14px;
    }

    .lp-manager-photo {
        width: 112px;
        height: 112px;
        border-width: 5px;
    }

    .lp-manager-quote p {
        font-size: 16px;
    }

    .lp-manager-name {
        font-size: 23px;
    }

    /* Band */
    .lp-band {
        padding-bottom: 120px;
    }

    .lp-band > section {
        padding-top: 48px;
    }

    .lp-kicker {
        font-size: 23px;
    }

    .lp-review-mark {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }

    .lp-review-name {
        font-size: 17px;
    }

    .lp-nearby-track {
        padding: 0 20px 8px;
        scroll-padding: 0 20px;
    }

    .lp-section-intro {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp *,
    .lp *::before,
    .lp *::after {
        transition: none !important;
    }
}

/* [dayschedule] shortcode: no heading or background, spacing comes from the Divi section */
.lp.lp--embed {
    background: transparent;
}

.lp--embed .lp-day-section {
    padding: 0;
}

.lp--embed .lp-day-track {
    margin-top: 0;
}