/* 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: 1; object-fit: cover; border-radius: 8px; }
.block--gallery picture { display: contents; }
@media (max-width: 640px) {
  .block--gallery-3, .block--gallery-4, .block--gallery-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 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; }

/* ── 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); }
}