/* ==========================================================================
   Responsive fixes voor mobiel en tablet (< 992px).
   Desktop (>= 992px) blijft ongewijzigd, op de tegeltjes-teksten na.
   ========================================================================== */

/* Kerk-tegels: op touch-apparaten bestaat geen hover, dus naam + adres altijd tonen */
@media (hover: none), (max-width: 991.98px) {
  .su-trailer-box.su-trailer-box-style5 .su-trailer-box-desc {
    top: auto !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 14px 18px 16px !important;
    background: rgba(11, 15, 51, .82) !important;
    transform: none !important;
  }
  .su-trailer-box.su-trailer-box-style5 h2 {
    transform: none !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    text-align: left;
  }
  .su-trailer-box.su-trailer-box-style5 .su-trailer-box-content {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .su-trailer-box.su-trailer-box-style5 .su-trailer-box-content,
  .su-trailer-box.su-trailer-box-style5 .su-trailer-box-content * { text-align: left !important; }
  .su-trailer-box.su-trailer-box-style5 .su-trailer-box-content p,
  .su-trailer-box.su-trailer-box-style5 .trailerbox-adres { line-height: 1.4 !important; }
}

@media (max-width: 991.98px) {
  :root { --hero-h: min(62vw, 72vh); }

  html body { font-size: 16px !important; padding-bottom: 0 !important; }
  body p, body li { line-height: 1.55; }
  .astroid-component-section { overflow: hidden; }
  img { max-width: 100%; }

  /* ---------- Topbar "Komende dienst" ---------- */
  .absolute-top-right {
    position: relative !important;
    width: 100% !important;
    padding: 10px 64px 10px 16px !important;
    border-radius: 0;
    font-size: 14px !important;
    z-index: auto !important;
  }
  .absolute-top-right .container-fluid { padding-top: 0 !important; }
  .absolute-top-right .sppb-row { display: flex !important; flex-wrap: wrap; align-items: baseline; }
  .absolute-top-right .sppb-row > div { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
  .absolute-top-right .sppb-row > div + div { margin-left: 8px !important; }
  #topbar-section-551539321230222 .sppb-addon-content p,
  .title-komende-dienst div { font-size: 14px !important; }
  .dienstvariabele div.sppb-addon-content div.custom a { font-size: 16px !important; }

  /* ---------- Header / logo ---------- */
  .astroid-header-section { padding: 0 !important; }
  #astroid-header { padding: 10px 0 !important; }
  #astroid-header > .d-flex,
  #astroid-header .header-left-section {
    display: flex !important; width: 100% !important; top: 0 !important; position: relative;
  }
  .header-left-section { top: 0 !important; }
  .astroid-logo { top: 0 !important; margin: 0 !important; }
  .astroid-logo img { margin-left: 0 !important; max-height: 96px; width: auto; }

  /* ---------- Hero-slider met tekstkaart ---------- */
  /* Aparte "alleen mobiel"-slider weg: de hoofdslider toont de foto zelf */
  .sppb-addon-wrapper:has(> .sppb-hidden-sm.sppb-hidden-md.sppb-hidden-lg .n2-section-smartslider) { display: none !important; }
  .smartslider { margin: 0 !important; }

  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) { background: #533B8D; }
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) .n2-ss-slide-backgrounds,
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) .n2-ss-slider-4 {
    align-self: start !important;
    height: var(--hero-h) !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) .n2-ss-slider-controls {
    height: var(--hero-h) !important; bottom: auto !important;
  }
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) .n2-ss-static-slide {
    padding-top: calc(var(--hero-h) - 70px);
  }
  .n2-ss-static-slide .n2-ss-layer-row-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer:not(.tekstraam):not(.tekstraamdetail):not(:has(.tekstraam, .tekstraamdetail)) { display: none !important; }
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) [data-mode=blurfit] .n2-ss-slide-background-image + .n2-ss-slide-background-image img { object-fit: cover !important; }
  .n2-ss-static-slide .n2-ss-layer-col { padding: 0 !important; }
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) .n2-ss-static-slide .n2-ss-layer-col,
  .n2-ss-slider:has(.tekstraam, .tekstraamdetail) .n2-ss-static-slide .n2-ss-layer-row { background: transparent !important; min-height: 0 !important; }

  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer.tekstraam,
  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer.tekstraamdetail {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin: 0 auto 40px !important;
    align-self: center !important;
    padding: 110px 28px 34px !important;
    border-radius: 300px 300px 40px 40px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(11, 15, 51, .25);
  }
  .tekstraam *, .tekstraamdetail * { text-align: center !important; }
  .tekstraam h1, .tekstraamdetail h1 { font-size: 34px !important; line-height: 1.15 !important; margin-bottom: 4px; }
  .tekstraam h4, .tekstraamdetail h4 { font-size: 22px !important; line-height: 1.25 !important; padding: 8px 0 !important; }
  .tekstraam h3, .tekstraamdetail h3 { font-size: 22px !important; line-height: 1.25 !important; }
  .tekstraam p, .tekstraamdetail p { font-size: 16px !important; line-height: 1.5 !important; }
  .tekstraam img { max-width: 220px !important; height: auto !important; margin: 16px auto 0; display: block; }

  /* ---------- Paarse/donkere introsecties ---------- */
  .sectie-2 { padding: 48px 20px !important; margin: 0 !important; }
  .detailpagina.sectie-2,
  [class*="page-"] .detailpagina.sectie-2 { padding: 40px 20px !important; }
  .wit-text-header { margin: 0 !important; }
  .tekstkolom-900 { font-size: 17px !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; }
  .detailpagina .tekstkolom-900 { margin-left: 0 !important; font-size: 17px !important; }
  .donkerblauw h3, .detailpagina.donkerblauw h3 { font-size: 26px !important; line-height: 1.2 !important; }

  /* Lege secties (desktop-decoratie) */
  .sectie-2:not(:has(.sppb-addon)) { display: none !important; }
  .home #welkom:not(:has(.sppb-addon)),
  .home #section-id-1581514047167:not(:has(.sppb-addon)),
  .home #section-id-1581520816229:not(:has(.sppb-addon)) { display: none !important; }

  /* ---------- Content algemeen ---------- */
  .sp-page-builder .page-content .sppb-section { padding-left: 0; padding-right: 0; }
  .sppb-row-container { padding-left: 20px !important; padding-right: 20px !important; }
  .sectie-3, .sectie-4, .sectie-6 { margin: 0 !important; }
  .sppb-addon-content, .sppb-addon-content p, .sppb-addon-content li { text-align: left; }
  .sppb-addon-content[style*="justify"], .sppb-addon-content p[style*="justify"],
  .sppb-addon-text-block .sppb-addon-content { text-align: left !important; }
  .sppb-addon-title { line-height: 1.2 !important; overflow-wrap: break-word; hyphens: auto; }
  .sppb-addon-content a { overflow-wrap: anywhere; }
  .sppb-addon-content p, .sppb-addon-content li, .sppb-addon-content td,
  .sppb-addon-text-block .sppb-addon-content { font-size: 16px !important; line-height: 1.55 !important; }
  .sppb-addon-content h3, h3.sppb-addon-title { font-size: 26px !important; }
  .sppb-addon-content table { width: 100% !important; }
  .sppb-addon-content table td { padding: 2px 0; }
  .sppb-addon-single-image img { height: auto !important; }

  /* ---------- "Onze kerken" (home) ---------- */
  .home .sectie-5 .sppb-row-container { padding: 0 !important; }
  .home .sectie-5 .sppb-row { display: flex !important; flex-wrap: wrap; margin: 0 !important; }
  .home .sectie-5 .sppb-col-md-4 { padding: 0 !important; }
  #section-id-1582024534626 { margin: 0 0 0 !important; }
  #section-id-1582024534626 > div > div { background: transparent !important; }
  #column-wrap-id-1581521291897 { padding-top: 0 !important; position: relative; }
  #column-id-1581521291897 > div { margin-top: 0 !important; }
  #column-id-1581521291897 { min-height: 0 !important; padding: 36px 0 !important; }
  .onze-kerken {
    position: relative !important; top: auto !important; transform: none !important;
    width: 200px !important; height: 240px !important; padding: 0 !important;
    border-radius: 100px 100px 12px 12px !important;
    display: flex; align-items: center; justify-content: center;
  }
  .onze-kerken h3 {
    position: static !important; transform: none !important;
    font-size: 36px !important; line-height: 1.15 !important; margin: 40px 0 0 !important;
  }
  .onze-kerken .sppb-addon-content { display: none; }
  .su-trailer-box { margin: 0 !important; }
  .su-trailer-box img.su-trailer-box-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

  /* citaten naast/onder de kerken: gewoon in de flow */
  #sppb-addon-1582024534611 > div > div,
  #sppb-addon-1582024534614 > div > div {
    position: relative !important; top: auto !important; bottom: auto !important; right: auto !important;
    height: 100%;
  }
  #column-id-1582024534627, #column-id-1582024534631 { background: #fff !important; height: 100%; }
  #sppb-addon-wrapper-1582024534611, #sppb-addon-wrapper-1582024534614 { margin: 0 !important; height: 100%; }
  #sppb-addon-1582024534611, #sppb-addon-1582024534614 { height: 100%; }
  .sppb-addon-content > blockquote {
    position: static !important; transform: none !important;
    padding: 32px 24px !important; margin: 0 !important;
    font-size: 18px !important; line-height: 1.6 !important;
  }

  /* ---------- Voorgangers (contact) ---------- */
  .voorgangers .sppb-col-md-6 { width: 100% !important; padding: 24px 15px !important; }
  .voorgangers h2 { font-size: 32px !important; }
  .voorgangers h3 { font-size: 24px !important; }
  .sppb-section.voorgangers img.sppb-img-responsive { height: auto !important; max-height: 360px; object-fit: cover; }

  /* ---------- Footer ---------- */
  .sectie-footer, .sppb-section.sectie-footer {
    position: relative !important; height: auto !important; bottom: auto !important;
    margin-top: 0 !important; padding: 36px 16px !important;
  }
  .sectie-footer .sppb-container-inner, .sectie-footer .sppb-row-container { padding: 0 !important; }
  .sectie-footer .sppb-row { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 !important; }
  .sectie-footer .sppb-row > [class*="sppb-col-"],
  .sectie-footer .sppb-col-md-3, #column-wrap-id-1582018853373 {
    position: static !important; left: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    height: auto !important; padding: 0 !important;
  }
  .sectie-footer .sppb-addon-wrapper { margin: 0 0 20px !important; height: auto !important; padding: 0 !important; }
  .sectie-footer .sppb-addon-single-image { margin: 0 !important; display: block; text-align: center !important; }
  .sectie-footer .sppb-addon-single-image-container { top: 0 !important; position: static !important; }
  .sectie-footer img.sppb-img-responsive { max-width: 170px !important; margin: 0 auto !important; display: block; }
  .footer-info {
    position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 560px; height: auto !important;
    margin: 0 auto !important; padding: 24px 20px !important;
    border-radius: 8px; text-align: center; font-size: 17px !important;
  }
  .footer-info .sppb-addon-content { top: auto !important; position: static !important; }
  .footer-info div { position: static !important; top: auto !important; margin: 0 !important; width: auto !important; font-size: 17px !important; }
  .footer-info ul { padding: 0 0 12px !important; margin: 0 !important; }
  .footer-info ul li { float: none !important; padding: 2px 0 !important; }
  .footer-info p { text-align: center !important; font-size: 13px !important; }
}

/* Tablet (600–991px): meer naast elkaar */
@media (min-width: 600px) and (max-width: 991.98px) {
  :root { --hero-h: min(52vw, 62vh); }
  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer.tekstraam,
  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer.tekstraamdetail { padding: 130px 48px 40px !important; }
  .tekstraam h1, .tekstraamdetail h1 { font-size: 40px !important; }

  .home .sectie-5 .sppb-col-md-4,
  .sectie-5.wit .sppb-col-md-4 {
    width: 33.3333% !important; max-width: 33.3333% !important; flex: 0 0 33.3333% !important;
  }
  .home .sectie-5 .sppb-col-md-4 > .sppb-column { height: 100%; }
  #column-id-1581521291897 { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 !important; background: #fff; }
  .onze-kerken { width: 170px !important; height: 210px !important; }
  .onze-kerken h3 { font-size: 30px !important; margin-top: 30px !important; }
  .sppb-addon-content > blockquote { padding: 22px 20px !important; font-size: 15px !important; line-height: 1.55 !important; }
  .su-trailer-box.su-trailer-box-style5 h2 { font-size: 20px !important; }
  .su-trailer-box.su-trailer-box-style5 .su-trailer-box-content { font-size: 13px !important; }

  .voorgangers .sppb-col-md-6 { width: 50% !important; padding: 24px 16px !important; }

  .sectie-footer .sppb-row { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
  .sectie-footer .sppb-row > [class*="sppb-col-"] { flex: 0 0 auto !important; width: auto !important; }
  .sectie-footer .sppb-row > .sppb-col-md-7 { flex: 1 1 auto !important; }
  .sectie-footer .sppb-addon-wrapper { margin: 0 !important; }
  .sectie-footer img.sppb-img-responsive { max-width: 140px !important; }
  .footer-info { text-align: left; }
  .footer-info p { text-align: left !important; }
}

/* Tablet (768–991px): kolommen naast elkaar zoals op desktop */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sp-page-builder .sppb-row { display: flex; flex-wrap: wrap; }
  .sp-page-builder .sppb-row > .sppb-col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .sp-page-builder .sppb-row > .sppb-col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .sp-page-builder .sppb-row > .sppb-col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .sp-page-builder .sppb-row > .sppb-col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .sp-page-builder .sppb-row > .sppb-col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .sp-page-builder .sppb-row > .sppb-col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .sp-page-builder .sppb-row > [class*="sppb-col-md-"] { padding-left: 12px; padding-right: 12px; }
  .absolute-top-right .sppb-row > [class*="sppb-col-md-"] { padding: 0 !important; }
  .contact .sp-page-builder .sppb-row > .sppb-col-md-4 { flex: 0 0 50%; max-width: 50%; }
}

/* Telefoon (< 600px) */
@media (max-width: 599.98px) {
  .home .sectie-5 .sppb-col-md-4 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  #column-id-1581521291897 { display: flex; justify-content: center; background: #fff; }
}

/* Rooster kerkdiensten */
@media (max-width: 991.98px) {
  table.rooster-tabel { width: 100% !important; height: auto !important; }
  table.rooster-tabel td { padding: 6px 8px; }
}
@media (max-width: 599.98px) {
  table.rooster-tabel, table.rooster-tabel tbody, table.rooster-tabel tr, table.rooster-tabel td { display: block; width: 100% !important; }
  table.rooster-tabel tr.rooster-kop { display: none; }
  table.rooster-tabel tr { padding: 12px 0; border-bottom: 1px solid #f0d9c8; }
  table.rooster-tabel td { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; padding: 2px 0; }
  table.rooster-tabel td::before { content: attr(data-label); font-weight: 700; color: #fa6900; font-size: 15px; }
  table.rooster-tabel td.leeg { display: none; }
  table.rooster-tabel td span { font-size: 16px !important; }
}

/* Tablet liggend / kleine laptop (992–1199px): desktop-opmaak, maar ruimer */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .n2-ss-static-slide .n2-ss-layer-row-inner > .n2-ss-layer:has(.tekstraam, .tekstraamdetail) {
    width: 34% !important;
  }
  .tekstraam p, .tekstraamdetail p { font-size: 15px !important; line-height: 1.45 !important; }

  /* citaten bij "Onze kerken" niet over de foto's heen laten lopen */
  #sppb-addon-1582024534611 > div > div,
  #sppb-addon-1582024534614 > div > div {
    position: relative !important; top: auto !important; bottom: auto !important; right: auto !important;
  }
  .sppb-addon-content > blockquote {
    position: static !important; transform: none !important;
    padding: 28px 24px !important; font-size: 16px !important; line-height: 1.55 !important;
  }
  #column-id-1582024534627, #column-id-1582024534631 { background: #fff !important; }
}

/* ---------- Mobiel menu ----------
   Het "vertical menu"-paneel (paarse knop) is leeg; daarom op mobiel/tablet
   het ingebouwde Astroid-menu gebruiken (Home, Naar de kerk, Wat te doen bij, Contact). */
@media (max-width: 991.98px) {
  .menu-icon-cont.sm-btn-106, .sm-btn-106, nav.off-menu_106 { display: none !important; }

  #astroid-header .header-mobilemenu-trigger {
    display: block !important;
    position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important;
    width: 52px !important; height: 52px !important; margin: 0 !important;
    z-index: 2100;
    background: #533B8D;
    border-left: 1px solid #412c73; border-bottom: 1px solid #412c73;
    border-bottom-left-radius: 8px;
    text-align: center !important; line-height: 0 !important;
  }
  #astroid-header .header-mobilemenu-trigger .button,
  #astroid-header > div > div.d-flex.d-lg-none.justify-content-start > div > button {
    position: static !important; right: auto !important;
    width: 52px; height: 52px; padding: 11px !important; display: block;
  }
  #astroid-header .header-mobilemenu-trigger .inner,
  #astroid-header .header-mobilemenu-trigger .inner::before,
  #astroid-header .header-mobilemenu-trigger .inner::after { background-color: #fff !important; }
  #astroid-header > .d-flex > .d-flex.d-lg-none { width: auto !important; position: static !important; }

  .astroid-mobilemenu { width: 280px !important; box-shadow: 0 0 30px rgba(11, 15, 51, .35); }
  .astroid-mobilemenu .burger-menu-button { position: sticky !important; top: 0; right: auto; text-align: right !important; padding: 14px 16px !important; background: #0b0f33 !important; }
  .astroid-mobilemenu .burger-menu-button .inner,
  .astroid-mobilemenu .burger-menu-button .inner::before,
  .astroid-mobilemenu .burger-menu-button .inner::after { background-color: #fff !important; }
  .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item a {
    font-family: vidaloka-regular, Georgia, serif !important;
    font-size: 20px !important; color: #0b0f33 !important; padding: 16px 20px !important;
  }
  .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > a,
  .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a,
  .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item a.active { color: #FA6900 !important; }
}

/* Telefoon: ruimte tussen het laatste witte tekstblok en het footer-logo */
@media (max-width: 767.98px) {
  .sp-page-builder .page-content .sppb-section.sectie-footer { padding-top: 28px !important; }
}