/* Paginabouwer block styles — inherits from template theme variables */

/* ── Hero / Banner ── */
.block--hero { position: relative; overflow: hidden; border-radius: 12px; margin: 1.5rem 0; min-height: 280px; display: flex; align-items: center; }
.block--hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.block--hero__overlay { position: relative; z-index: 1; padding: 2.5rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); max-width: 640px; }
.block--hero__overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, transparent 100%); z-index: -1; border-radius: 12px; }
.block--hero__overlay h1 { margin: 0 0 .5rem; font-size: 2rem; color: #fff; }
.block--hero__overlay p { margin: 0 0 1rem; font-size: 1.1rem; opacity: .9; }

/* ── Gallery ── */
.block--gallery { display: grid; gap: .75rem; margin: 1.5rem 0; }
.block--gallery-2 { grid-template-columns: repeat(2, 1fr); }
.block--gallery-3 { grid-template-columns: repeat(3, 1fr); }
.block--gallery-4 { grid-template-columns: repeat(4, 1fr); }
.block--gallery-5 { grid-template-columns: repeat(5, 1fr); }
.block--gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; cursor: zoom-in; transition: transform .2s, box-shadow .2s; }
.block--gallery img:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.block--gallery picture { display: contents; }
.block--gallery[data-ratio="1"] img { aspect-ratio: 1; }
.block--gallery[data-ratio="16/9"] img { aspect-ratio: 16/9; }
.block--gallery[data-ratio="4/3"] img { aspect-ratio: 4/3; }
.block--gallery[data-ratio="auto"] img { aspect-ratio: auto; }
@media (max-width: 640px) {
  .block--gallery-2, .block--gallery-3, .block--gallery-4, .block--gallery-5 { grid-template-columns: repeat(2, 1fr); }
  .block--gallery img { aspect-ratio: 4/3; }
}

/* ── Embed ── */
.block--embed { margin: 1.5rem 0; }
.block--embed iframe { width: 100%; border: 0; border-radius: 8px; }

/* ── Alert / Notification ── */
.block--alert { padding: 1rem 1.25rem; border-radius: 8px; margin: 1rem 0; font-size: .95rem; line-height: 1.5; border-left: 4px solid; }
.block--alert strong { display: inline; }
.block--alert-info { background: rgba(59,130,246,.08); border-color: var(--w-primary, #3b82f6); color: var(--w-text, #1e293b); }
.block--alert-success { background: rgba(34,197,94,.08); border-color: #22c55e; color: var(--w-text, #1e293b); }
.block--alert-warning { background: rgba(245,158,11,.08); border-color: #f59e0b; color: var(--w-text, #1e293b); }
.block--alert-danger { background: rgba(239,68,68,.08); border-color: #ef4444; color: var(--w-text, #1e293b); }

/* ── Card ── */
.block--card { border: 1px solid var(--w-border, #e2e8f0); border-radius: 12px; overflow: hidden; max-width: 400px; margin: 1.5rem 0; background: var(--w-surface, var(--w-bg, #fff)); }
.block--card > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.block--card__body { padding: 1.25rem; }
.block--card__body h3 { margin: 0 0 .5rem; color: var(--w-heading, var(--w-text, #1e293b)); }
.block--card__body p { margin: 0 0 1rem; color: var(--w-muted, #64748b); }

/* ── Icon Row ── */
.block--icons { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0; text-align: center; }
.block--icon { flex: 1; min-width: 160px; padding: 1.25rem; }
.block--icon__ico { font-size: 2rem; display: block; margin-bottom: .5rem; }
.block--icon h4 { margin: 0 0 .35rem; color: var(--w-heading, var(--w-text, #1e293b)); }
.block--icon p { margin: 0; color: var(--w-muted, #64748b); font-size: .9rem; }
@media (max-width: 640px) { .block--icons { flex-direction: column; } }

/* ── Pricing ── */
.block--pricing { display: flex; gap: 1.25rem; margin: 1.5rem 0; flex-wrap: wrap; }
.block--pricing__col { border: 1px solid var(--w-border, #e2e8f0); border-radius: 12px; padding: 1.5rem; text-align: center; flex: 1; background: var(--w-surface, var(--w-bg, #fff)); color: var(--w-text, #1e293b); }
.block--pricing__col--featured { border-color: var(--w-primary, #2563eb); box-shadow: 0 0 0 2px var(--w-primary, #2563eb); position: relative; }
.block--pricing__col h3 { margin: 0 0 .5rem; color: var(--w-heading, var(--w-text, #1e293b)); }
.block--pricing__price { font-size: 2rem; font-weight: 700; margin: .5rem 0 1rem; color: var(--w-primary, #2563eb); }
.block--pricing__price span { font-size: .9rem; font-weight: 400; color: var(--w-muted, #64748b); }
.block--pricing__col ul { text-align: left; padding-left: 1.25rem; margin: 1rem 0; }
.block--pricing__col li { margin-bottom: .35rem; }
@media (max-width: 640px) { .block--pricing { flex-direction: column; } }

/* ── Code ── */
.block--code { background: var(--w-code-bg, #1e293b); color: #e2e8f0; padding: 1.25rem; border-radius: 8px; overflow-x: auto; margin: 1rem 0; font-size: .875rem; line-height: 1.6; }
.block--code code { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; white-space: pre; }

/* ── Spacer ── */
.block--spacer { margin: 0; padding: 0; }
.block--spacer-sm { height: 1rem; }
.block--spacer-md { height: 2rem; }
.block--spacer-lg { height: 4rem; }
.block--spacer-xl { height: 6rem; }

/* ── Tabs ── */
.block--tabs { margin: 1.5rem 0; }
.block--tabs__nav { display: flex; gap: 0; border-bottom: 2px solid var(--w-border, #e2e8f0); margin-bottom: 1rem; }
.block--tabs__btn { background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem 1.25rem; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--w-muted, #64748b); margin-bottom: -2px; font-family: inherit; }
.block--tabs__btn:hover { color: var(--w-text, #1e293b); }
.block--tabs__btn.active { color: var(--w-primary, #2563eb); border-bottom-color: var(--w-primary, #2563eb); }
.block--tabs__panel { padding: .5rem 0; color: var(--w-text, #1e293b); }

/* ── Statistics / Counters ── */
.block--stats { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0; text-align: center; justify-content: center; }
.block--stat { flex: 1; min-width: 100px; }
.block--stat__num { display: block; font-size: 2.25rem; font-weight: 700; color: var(--w-primary, #2563eb); line-height: 1.2; }
.block--stat__label { display: block; font-size: .9rem; color: var(--w-muted, #64748b); margin-top: .25rem; }

/* ── Testimonial ── */
.block--testimonial { display: flex; gap: 1rem; align-items: start; margin: 1.5rem 0; padding: 1.25rem; border-radius: 12px; background: var(--w-surface, var(--w-bg, #fff)); border: 1px solid var(--w-border, #e2e8f0); }
.block--testimonial__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.block--testimonial__body { flex: 1; }
.block--testimonial__body p { color: var(--w-text, #1e293b); margin: 0 0 .5rem; }
.block--testimonial__stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: .25rem; }
.block--testimonial cite { display: block; font-style: normal; font-size: .85rem; color: var(--w-muted, #64748b); margin-top: .5rem; }

/* ── Form embed ── */
.block--form { margin: 1.5rem 0; }
.block--form iframe { width: 100%; border: 0; border-radius: 8px; min-height: 400px; }

/* ── Calendar ── */
.block--calendar { margin: 1.5rem 0; }
.block--cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.block--cal-month { border: 1px solid var(--w-border, #e2e8f0); border-radius: 8px; overflow: hidden; }
.block--cal-month-header { background: var(--w-primary, #2563eb); color: #fff; padding: .5rem .75rem; font-weight: 700; font-size: .9rem; text-align: center; }
.block--cal-days { display: grid; grid-template-columns: repeat(7, 1fr); font-size: .78rem; text-align: center; }
.block--cal-days span { padding: .3rem; }
.block--cal-days .cal-head { font-weight: 700; color: var(--w-muted, #64748b); font-size: .7rem; }
.block--cal-days .cal-booked { background: #fecaca; color: #991b1b; border-radius: 3px; }
.block--cal-days .cal-free { background: #dcfce7; color: #166534; border-radius: 3px; }
.block--cal-days .cal-empty { }
.block--cal-legend { display: flex; gap: 1rem; justify-content: center; margin-top: .75rem; font-size: .78rem; }
.block--cal-legend span { display: flex; align-items: center; gap: .3rem; }
.block--cal-legend .cal-swatch { width: 12px; height: 12px; border-radius: 2px; }

/* ── Subpages ── */
.block--subpages { margin: 1.5rem 0; }
.block--subpages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.block--subpages-card { border: 1px solid var(--w-border, #e2e8f0); border-radius: 12px; overflow: hidden; background: var(--w-surface, var(--w-bg, #fff)); }
.block--subpages-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.block--subpages-card h3 { margin: .75rem 1rem .25rem; color: var(--w-heading, var(--w-text, #1e293b)); }
.block--subpages-card p { margin: 0 1rem .75rem; color: var(--w-muted, #64748b); font-size: .9rem; }
.block--subpages-card .btn { margin: 0 1rem 1rem; display: inline-block; }
.block--subpages-list { margin: 1rem 0; padding-left: 1.25rem; }
.block--subpages-list li { margin-bottom: .4rem; }
.block--subpages-list a { color: var(--w-primary, #2563eb); text-decoration: none; }
.block--subpages-list a:hover { text-decoration: underline; }

/* ── Slideshow (universal, works on all templates) ── */
.block--slideshow { margin: 1.5rem 0; position: relative; min-height: 300px; overflow: hidden; border-radius: 12px; }
.block--slideshow .ch-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.block--slideshow .ch-slide.is-active { opacity: 1; position: relative; }
.block--slideshow .ch-slide__overlay { position: relative; z-index: 1; padding: 3rem 2rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.block--slideshow .ch-slide__overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 100%); z-index: -1; }
.block--slideshow .ch-slide__overlay h1 { margin: 0 0 .5rem; font-size: 1.8rem; }
.block--slideshow .ch-slide__lead { font-size: 1.05rem; opacity: .9; margin: 0 0 1rem; }
.block--slideshow .ch-slide__btn { display: inline-block; padding: .6rem 1.5rem; background: var(--w-primary, #2563eb); color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600; }

/* ── Rental booking page ── */
.block--rental-hero { text-align: center; padding: 2rem 1rem 1rem; }
.block--rental-hero h1 { margin: 0 0 .5rem; }
.block--rental-hero p { color: var(--w-muted, #64748b); max-width: 600px; margin: 0 auto; }
.block--rental-grid { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; display: grid; grid-template-columns: 1fr 340px; gap: 2rem; }
.block--rental-calendar { }
.block--rental-calendar h3 { margin: 0 0 1rem; }
.block--rental-info { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 1.25rem 0 0; font-size: .88rem; }
.block--rental-info dt { font-weight: 600; color: var(--w-text, #1e293b); }
.block--rental-info dd { margin: 0; color: var(--w-muted, #64748b); }
.block--rental-form { border: 1px solid var(--w-border, #e2e8f0); border-radius: 12px; padding: 1.5rem; background: var(--w-surface, var(--w-bg, #fff)); }
.block--rental-form h3 { margin: 0 0 .75rem; }
.block--rental-form label { display: block; font-size: .82rem; font-weight: 600; margin: .75rem 0 .2rem; color: var(--w-text, #1e293b); }
.block--rental-form input, .block--rental-form select, .block--rental-form textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--w-border, #e2e8f0); border-radius: 6px; font-size: .9rem; font-family: inherit; background: var(--w-bg, #fff); color: var(--w-text, #1e293b); }
.block--rental-form input:focus, .block--rental-form select:focus, .block--rental-form textarea:focus { outline: none; border-color: var(--w-primary, #2563eb); }
.block--rental-form .btn { margin-top: 1rem; width: 100%; padding: .75rem; font-size: 1rem; }
.block--rental-price { font-size: 1.6rem; font-weight: 700; color: var(--w-primary, #2563eb); margin: .5rem 0; }
.block--rental-price span { font-size: .9rem; font-weight: 400; color: var(--w-muted, #64748b); }
.block--rental-fee { font-size: .82rem; color: var(--w-muted, #64748b); margin: 0 0 1rem; }
.block--rental-rules { font-size: .82rem; color: var(--w-muted, #64748b); margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--w-border, #e2e8f0); }
.block--rental-rules strong { color: var(--w-text, #1e293b); }
@media (max-width: 768px) { .block--rental-grid { grid-template-columns: 1fr; } }

/* Dark mode rental */
[data-theme="dark"] .block--rental-form { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
[data-theme="dark"] .block--rental-form input, [data-theme="dark"] .block--rental-form select, [data-theme="dark"] .block--rental-form textarea { background: var(--w-bg, #111827); border-color: var(--w-border, #374151); color: var(--w-text, #e5e7eb); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .block--rental-form { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
  html:not([data-theme="light"]) .block--rental-form input, html:not([data-theme="light"]) .block--rental-form select, html:not([data-theme="light"]) .block--rental-form textarea { background: var(--w-bg, #111827); border-color: var(--w-border, #374151); color: var(--w-text, #e5e7eb); }
}

/* ── Module embeds ── */
.block--mod { margin: 1.5rem 0; }
.block--mod iframe { width: 100%; border: 0; border-radius: 8px; min-height: 300px; }

/* ── Gallery lightbox ── */
.ws-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; }
.ws-lightbox[hidden] { display: none; }
.ws-lb-img { max-width: 90vw; max-height: 85vh; border-radius: 8px; object-fit: contain; }
.ws-lb-close, .ws-lb-prev, .ws-lb-next { position: fixed; background: none; border: none; color: #fff; font-size: 2.5rem; cursor: pointer; padding: .5rem; opacity: .7; }
.ws-lb-close:hover, .ws-lb-prev:hover, .ws-lb-next:hover { opacity: 1; }
.ws-lb-close { top: 1rem; right: 1.5rem; }
.ws-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.ws-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ── Divider variants ── */
hr { border-color: var(--w-border, #e2e8f0); }
.hr-dashed { border-style: dashed; }
.hr-dotted { border-style: dotted; }
.hr-thick { border-width: 3px; }

/* ── Image width helpers ── */
.be-w-75 { width: 75%; }
.be-w-50 { width: 50%; }
.be-w-33 { width: 33%; }

/* ── Text alignment ── */
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ── Dark mode: data-theme="dark" (toggle) ── */
[data-theme="dark"] .block--alert-info { background: rgba(59,130,246,.12); }
[data-theme="dark"] .block--alert-success { background: rgba(34,197,94,.12); }
[data-theme="dark"] .block--alert-warning { background: rgba(245,158,11,.12); }
[data-theme="dark"] .block--alert-danger { background: rgba(239,68,68,.12); }
[data-theme="dark"] .block--testimonial { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
[data-theme="dark"] .block--card { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
[data-theme="dark"] .block--pricing__col { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
[data-theme="dark"] .block--code { background: var(--w-code-bg, #0f172a); }
[data-theme="dark"] .block--hero__overlay::before { background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, transparent 100%); }
[data-theme="dark"] .block--tabs__btn { color: var(--w-muted, #9ca3af); }
[data-theme="dark"] .block--tabs__btn:hover { color: var(--w-text, #e5e7eb); }

/* ── Dark mode: prefers-color-scheme fallback (no toggle used) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .block--alert-info { background: rgba(59,130,246,.12); }
  html:not([data-theme="light"]) .block--alert-success { background: rgba(34,197,94,.12); }
  html:not([data-theme="light"]) .block--alert-warning { background: rgba(245,158,11,.12); }
  html:not([data-theme="light"]) .block--alert-danger { background: rgba(239,68,68,.12); }
  html:not([data-theme="light"]) .block--testimonial { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
  html:not([data-theme="light"]) .block--card { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
  html:not([data-theme="light"]) .block--pricing__col { background: var(--w-surface, var(--w-card-bg, #1f2937)); border-color: var(--w-border, #374151); }
  html:not([data-theme="light"]) .block--code { background: var(--w-code-bg, #0f172a); }
  html:not([data-theme="light"]) .block--hero__overlay::before { background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, transparent 100%); }
  html:not([data-theme="light"]) .block--tabs__btn { color: var(--w-muted, #9ca3af); }
  html:not([data-theme="light"]) .block--tabs__btn:hover { color: var(--w-text, #e5e7eb); }
}