/* =========================================================
   RESPONSIVE FINAL OVERRIDES - desktop / tablet / mobiel
   Toegevoegd als laatste stylesheet zodat bestaande templates
   intact blijven en responsive fixes overal consistent werken.
   ========================================================= */

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

html,
body{
  max-width: 100%;
  overflow-x: hidden;
}

body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
iframe,
video,
embed,
object{
  max-width: 100%;
}

iframe{
  border: 0;
}

input,
select,
textarea,
button,
.bootstrap-select,
.bootstrap-select > .dropdown-toggle{
  max-width: 100%;
}

.table_form input,
.table_form textarea,
.reservation-form input,
.reservation-form textarea{
  width: 100%;
}

/* Desktop en kleine laptops: voorkom dat het hoofdmenu te breed wordt. */
@media (min-width: 992px) and (max-width: 1199px){
  .rock_logo img{
    max-height: 58px;
  }

  .rock_menu ul li > a{
    padding: 28px 9px 26px !important;
    font-size: 12px !important;
    letter-spacing: .72px !important;
  }

  .rock_menu ul li.has-submenu > a,
  .rock_menu ul li.menu-item-has-children > a{
    padding-right: 24px !important;
  }

  .rock_menu ul li.has-submenu > a:after,
  .rock_menu ul li.menu-item-has-children > a:after{
    right: 8px;
  }

  .rock_menu ul li.menu-cta{
    margin-left: 6px;
  }

  .rock_menu ul li.menu-cta > a{
    padding: 11px 14px !important;
    font-size: 12px !important;
  }
}

/* Tablet: gebruik hetzelfde compacte menu als mobiel. Dit voorkomt overlappende
   of afbrekende navigatie rond 768-991px. */
@media (min-width: 768px) and (max-width: 991px){
  #rock_header,
  #rock_header_single_page,
  #rock_header_otherpage,
  .home-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
  }

  #rock_header .rock_logo,
  #rock_header_single_page .rock_logo,
  #rock_header_otherpage .rock_logo,
  .home-header .rock_logo{
    text-align: center !important;
    padding: 10px 0 8px !important;
  }

  #rock_header .rock_logo img,
  #rock_header_single_page .rock_logo img,
  #rock_header_otherpage .rock_logo img,
  .home-header .rock_logo img{
    max-height: 58px !important;
    width: auto !important;
  }

  .rock_menu_toggle.navbar-toggle,
  .rock_menu_toggle{
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(14,14,16,.96), rgba(8,8,8,.96)) !important;
    border: 1px solid rgba(200,169,106,0.28) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
    color: var(--gold2) !important;
    text-align: left !important;
  }

  .rock_menu_toggle i{
    float: right;
  }

  .rock_menu{
    position: relative !important;
    z-index: 999999 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .rock_menu .navbar-collapse,
  .rock_menu ul.collapse,
  .rock_menu ul.navbar-collapse{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    z-index: 1000000 !important;
    background: linear-gradient(180deg, rgba(16,16,18,.985), rgba(8,8,8,.985)) !important;
    border: 1px solid rgba(200,169,106,0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45) !important;
    overflow: hidden !important;
    max-height: calc(100vh - 142px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .rock_menu .navbar-collapse.in,
  .rock_menu ul.collapse.in,
  .rock_menu ul.navbar-collapse.in{
    display: block !important;
    height: auto !important;
  }

  .rock_menu ul{
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  .rock_menu ul li{
    display: block !important;
    width: 100% !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .rock_menu ul li:last-child{
    border-bottom: none !important;
  }

  .rock_menu ul li > a{
    display: block !important;
    width: 100% !important;
    padding: 17px 56px 17px 22px !important;
    border-bottom: none !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .rock_menu ul li > a:before{
    display: none !important;
  }

  .rock_menu ul li:hover > ul{
    display: none !important;
  }

  .rock_menu ul li > .sub-menu,
  .rock_menu ul li > ul{
    display: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.035) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .rock_menu ul li.submenu-open > .sub-menu,
  .rock_menu ul li.submenu-open > ul{
    display: block !important;
  }

  .rock_menu ul li .sub-menu li > a,
  .rock_menu ul li ul li > a{
    padding: 13px 20px 13px 42px !important;
    font-size: 13px !important;
  }

  .rock_menu ul li .sub-menu li .sub-menu li > a,
  .rock_menu ul li ul li ul li > a{
    padding-left: 58px !important;
  }

  .rock_menu ul li.has-submenu > a,
  .rock_menu ul li.menu-item-has-children > a{
    padding-right: 56px !important;
  }

  .rock_menu ul li.has-submenu > a:after,
  .rock_menu ul li.menu-item-has-children > a:after{
    content: "+" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--gold2) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: block !important;
  }

  .rock_menu ul li.has-submenu.submenu-open > a:after,
  .rock_menu ul li.menu-item-has-children.submenu-open > a:after,
  .rock_menu ul li.submenu-open > a:after{
    content: "−" !important;
    font-size: 28px !important;
  }

  .rock_menu .menu-cta{
    padding: 12px 20px 16px !important;
    margin: 0 !important;
  }

  .rock_menu .menu-cta > a,
  .rock_menu ul li.menu-cta > a{
    width: 100% !important;
    padding: 14px 18px !important;
    text-align: center !important;
  }

  #rock_header_otherpage + .rock_page_title_main,
  #rock_header_single_page + .rock_page_title_main{
    margin-top: 146px !important;
  }

  #rock_header_otherpage + .rock_page_title_main.page-title-luxe,
  #rock_header_single_page + .rock_page_title_main.page-title-luxe{
    margin-top: 146px !important;
  }

  .home-hero-intro{
    padding-top: 172px !important;
  }
}

/* Algemeen tablet: content rustiger laten schalen. */
@media (min-width: 768px) and (max-width: 991px){
  .container{
    width: 100% !important;
    max-width: 760px !important;
  }

  .rock_page_title_main.page-title-luxe .rock_page_title{
    padding-top: 30px !important;
    padding-bottom: 32px !important;
  }

  .rock_page_title_main.page-title-luxe .rock_heading h1{
    font-size: clamp(32px, 5vw, 48px) !important;
  }

  .rock_comment.arrangement-card,
  .table_form form,
  .reservation-form,
  .footer-brand,
  .footer-col,
  .home-hero-card,
  .home-intro-card{
    max-width: 100%;
  }
}

/* Mobiel: voorkom horizontale scroll en maak oude componenten echt stapelbaar. */
@media (max-width: 767px){
  .container{
    width: 100% !important;
    max-width: 100% !important;
  }

  .row{
    margin-left: -10px;
    margin-right: -10px;
  }

  [class*="col-"]{
    padding-left: 10px;
    padding-right: 10px;
  }

  .rock_page_title .rock_heading h1,
  .rock_page_title_main.page-title-luxe .rock_heading h1{
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  .rock_page_title .rock_heading h1{
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.1 !important;
  }

  .home-hero-card h1,
  .hp-section-head h2,
  .home-gallery-head h2,
  .form-title,
  .rock_comment.arrangement-card h1{
    overflow-wrap: break-word;
  }

  .home-hero-card h1{
    font-size: clamp(31px, 9vw, 36px) !important;
  }

  .home-hero-card,
  .home-intro-card,
  .home-service-card,
  .hp-date-card,
  .hp-program__card,
  .home-gallery-card,
  .rock_comment,
  .rockon_service,
  .pricing,
  .footer-brand,
  .footer-col{
    border-radius: 16px !important;
  }

  .rock_event,
  .rock_event .rock_event_tab,
  .rock_event .rock_event_tab_content_main{
    width: 100% !important;
    float: none !important;
  }

  .rock_event .rock_event_tab{
    border-right: 0 !important;
    margin-bottom: 14px !important;
  }

  .rock_event .rock_event_tab ul{
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .rock_event .rock_event_tab ul li{
    flex: 0 0 86px;
    margin-bottom: 0 !important;
  }

  .rock_event .rock_event_tab ul li a:before{
    display: none !important;
  }

  .rock_event .rock_event_tab_content_main .rock_event_tab_content .rock_event_detail{
    padding: 18px !important;
  }

  .rock_event .rock_event_tab_content_main .rock_event_tab_content .rock_event_detail h1{
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .rock_event_time{
    min-height: 0 !important;
  }

  .rock_event_time ul li a{
    font-size: 26px !important;
    padding: 18px 12px !important;
  }

  .rock_contact_detail div{
    padding-left: 0 !important;
  }

  .rock_comment_auther h4,
  .rock_comment_auther h5{
    float: none !important;
    display: block !important;
    margin-bottom: 10px !important;
  }

  .bootstrap-select.btn-group .dropdown-menu{
    max-width: calc(100vw - 32px) !important;
  }

  .btn,
  a.btn,
  .btn-arrow,
  .btn-default,
  .lx-btn,
  .hp-link,
  .footer-reserveer{
    white-space: normal !important;
  }
}

@media (max-width: 420px){
  .rock_menu ul li > a{
    font-size: 14px !important;
    padding-left: 18px !important;
  }

  .home-hero-card,
  .home-intro-card,
  .home-service-card,
  .hp-date-card,
  .hp-program__card,
  .table_form form,
  .reservation-form{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .arrangement-price{
    padding-left: 18px !important;
    padding-right: 18px !important;
    letter-spacing: 1.2px !important;
  }

  .site-footer h3{
    font-size: 22px !important;
  }
}

/* =========================================================
   CONTENT SPACING RHYTHM - gelijke ruimte onder paginatitels
   Zorgt dat de eerste blokken op alle subpagina's dezelfde
   ademruimte hebben na de rode page-title balk.
   ========================================================= */
:root{
  --content-gap-after-title: 74px;
  --content-gap-after-title-tablet: 58px;
  --content-gap-after-title-mobile: 34px;
}

/* Reset losse marges zodat de afstand centraal wordt geregeld. */
.rock_page_title_main.page-title-luxe + .clearfix + .rockon_service_main,
.rock_page_title_main.page-title-luxe + .clearfix + .menu-page,
.rock_page_title_main.page-title-luxe + .clearfix + .rock_price,
.rock_page_title_main.page-title-luxe + .clearfix + .container,
.rock_page_title_main.page-title-luxe + .lx-agenda{
  margin-top: 0 !important;
  padding-top: var(--content-gap-after-title) !important;
}

/* De menu/programmapagina's hadden eerst geen bovenruimte; dit trekt ze gelijk
   met de arrangement- en servicepagina's. */
.menu-page{
  width: 100%;
  float: left;
  background: #080808;
  padding-bottom: 70px;
}

.menu-page > .container > .arrangement-card:first-child,
.rock_page_title_main.page-title-luxe + .clearfix + .container > .arrangement-card:first-child{
  margin-top: 0 !important;
}

.menu-page .arrangement-card + .arrangement-card{
  margin-top: 42px !important;
}

/* Serviceblokken kregen eerder visueel extra offset door translateY; daardoor
   leek de afstand per pagina anders. De ruimte komt nu uit de vaste gap. */
.rockon_service_main > .container > .row:first-child .rockon_service{
  transform: none !important;
}

.rockon_service_main > .container > .row:first-child .rockon_service:hover{
  transform: translateY(-3px) !important;
}

/* Zorg dat de eerste rij blokken geen verborgen negatieve/extra ruimte maakt. */
.rock_page_title_main.page-title-luxe + .clearfix + .rockon_service_main > .container > .row:first-child,
.rock_page_title_main.page-title-luxe + .clearfix + .menu-page > .container > .arrangement-card:first-child,
.rock_page_title_main.page-title-luxe + .clearfix + .rock_price > .container > .row:first-child{
  margin-top: 0 !important;
}

@media (min-width: 768px) and (max-width: 991px){
  .rock_page_title_main.page-title-luxe + .clearfix + .rockon_service_main,
  .rock_page_title_main.page-title-luxe + .clearfix + .menu-page,
  .rock_page_title_main.page-title-luxe + .clearfix + .rock_price,
  .rock_page_title_main.page-title-luxe + .clearfix + .container,
  .rock_page_title_main.page-title-luxe + .lx-agenda{
    padding-top: var(--content-gap-after-title-tablet) !important;
  }

  .menu-page{
    padding-bottom: 58px;
  }

  .menu-page .arrangement-card + .arrangement-card{
    margin-top: 34px !important;
  }
}

@media (max-width: 767px){
  .rock_page_title_main.page-title-luxe + .clearfix + .rockon_service_main,
  .rock_page_title_main.page-title-luxe + .clearfix + .menu-page,
  .rock_page_title_main.page-title-luxe + .clearfix + .rock_price,
  .rock_page_title_main.page-title-luxe + .clearfix + .container,
  .rock_page_title_main.page-title-luxe + .lx-agenda{
    padding-top: var(--content-gap-after-title-mobile) !important;
  }

  .menu-page{
    padding-bottom: 44px;
  }

  .menu-page .arrangement-card + .arrangement-card{
    margin-top: 24px !important;
  }
}

/* =========================================================
   MOBILE FIX - ruimte tussen bovenste serviceblokken
   Op mobiel vielen de drie info/service cards direct tegen
   elkaar aan. Desktop en tablet blijven gelijk; alleen de
   eerste service-rij wordt onder 768px als verticale stack
   met vaste tussenruimte gezet.
   ========================================================= */
@media (max-width: 767px){
  .rockon_service_main > .container > .row:first-child{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rockon_service_main > .container > .row:first-child > [class*="col-"]{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .rockon_service_main > .container > .row:first-child .rockon_service{
    width: 100% !important;
    margin: 0 !important;
    min-height: auto !important;
  }
}


/* =========================================================
   UNIFIED THEME VARIABLES - consistent kleuren/layout
   ========================================================= */
:root{
  --ds-bg: #080808;
  --ds-bg-soft: #0d0d0d;
  --ds-panel: #111114;
  --ds-panel-2: #17171b;
  --ds-panel-glass: rgba(14,14,16,.92);
  --ds-panel-soft: rgba(255,255,255,.035);

  --ds-text: rgba(255,255,255,.92);
  --ds-text-soft: rgba(255,255,255,.82);
  --ds-muted: rgba(255,255,255,.72);

  --ds-gold: #c8a96a;
  --ds-gold-light: #e3d3a3;
  --ds-gold-rich: #f1d8a0;
  --ds-gold-mid: #d6b36a;
  --ds-gold-dark: #b98c3f;

  --ds-bordeaux: rgba(76,12,24,.16);
  --ds-bordeaux-strong: rgba(38,12,18,.28);
  --ds-bordeaux-solid: #8f1f2f;

  --ds-line: rgba(200,169,106,.24);
  --ds-line-soft: rgba(200,169,106,.14);
  --ds-line-strong: rgba(200,169,106,.46);

  --ds-radius-xl: 22px;
  --ds-radius-lg: 18px;
  --ds-radius-md: 14px;
  --ds-radius-sm: 10px;

  --ds-shadow-lg: 0 18px 50px rgba(0,0,0,.42);
  --ds-shadow-md: 0 14px 34px rgba(0,0,0,.32);
  --ds-shadow-sm: 0 10px 24px rgba(0,0,0,.24);
  --ds-transition: all .25s ease;

  --ds-font-body: "Inter", Arial, sans-serif;
  --ds-font-heading: "Playfair Display", Georgia, serif;

  /* Bestaande aliases blijven behouden, maar wijzen nu naar hetzelfde palet. */
  --bg: var(--ds-bg);
  --panel: var(--ds-panel-glass);
  --panel-2: var(--ds-bg-soft);
  --text: var(--ds-text);
  --muted: var(--ds-muted);
  --gold: var(--ds-gold);
  --gold2: var(--ds-gold-light);
  --gold3: var(--ds-gold-rich);
  --line: var(--ds-line);
  --line-2: var(--ds-line-soft);
  --radius: var(--ds-radius-lg);
  --radius2: var(--ds-radius-md);
  --shadow: var(--ds-shadow-lg);
  --shadow2: var(--ds-shadow-md);
  --shadow3: 0 10px 28px rgba(200,169,106,.25);

  --home-bg: var(--ds-bg);
  --home-bg-soft: var(--ds-bg-soft);
  --home-panel: var(--ds-panel);
  --home-panel-2: var(--ds-panel-2);
  --home-text: var(--ds-text);
  --home-muted: var(--ds-muted);
  --home-gold: var(--ds-gold);
  --home-gold-light: var(--ds-gold-light);
  --home-gold-soft: var(--ds-line-soft);
  --home-bordeaux: var(--ds-bordeaux);
  --home-bordeaux-strong: var(--ds-bordeaux-strong);
  --home-line: var(--ds-line-soft);
  --home-line-strong: rgba(200,169,106,.34);
  --home-shadow: var(--ds-shadow-lg);
  --home-shadow-soft: var(--ds-shadow-md);
  --home-shadow-hero: 0 24px 70px rgba(0,0,0,.34);
  --home-radius: var(--ds-radius-xl);
  --home-radius-sm: var(--ds-radius-md);
  --home-radius-lg: 28px;
  --home-transition: var(--ds-transition);

  --photo-bg: var(--ds-bg);
  --photo-panel: var(--ds-panel-glass);
  --photo-panel-soft: var(--ds-panel-soft);
  --photo-text: var(--ds-text);
  --photo-muted: var(--ds-muted);
  --photo-gold: var(--ds-gold);
  --photo-gold-2: var(--ds-gold-light);
  --photo-line: var(--ds-line);
  --photo-line-strong: var(--ds-line-strong);
  --photo-radius: var(--ds-radius-xl);
  --photo-radius-card: var(--ds-radius-lg);
  --photo-shadow: var(--ds-shadow-lg);
  --photo-shadow-card: var(--ds-shadow-md);

  --artist-bg: var(--ds-bg);
  --artist-panel: var(--ds-panel-glass);
  --artist-text: var(--ds-text);
  --artist-muted: var(--ds-muted);
  --artist-gold: var(--ds-gold);
  --artist-gold-2: var(--ds-gold-light);
  --artist-line: var(--ds-line);
  --artist-line-strong: var(--ds-line-strong);
  --artist-radius: var(--ds-radius-xl);
  --artist-radius-card: var(--ds-radius-lg);
  --artist-shadow: var(--ds-shadow-lg);
  --artist-shadow-card: var(--ds-shadow-md);

  --lx-bg: transparent;
  --lx-card: var(--ds-bg-soft);
  --lx-card-2: var(--ds-bg);
  --lx-border: var(--ds-line);
  --lx-border-strong: var(--ds-line-strong);
  --lx-text: var(--ds-text);
  --lx-text-soft: var(--ds-text-soft);
  --lx-muted: var(--ds-muted);
  --lx-gold-1: var(--ds-gold-light);
  --lx-gold-2: var(--ds-gold);
  --lx-shadow: var(--ds-shadow-md);
  --lx-shadow-hover: var(--ds-shadow-lg);
  --lx-radius: var(--ds-radius-xl);
  --lx-radius-inner: var(--ds-radius-lg);
  --lx-transition: var(--ds-transition);

  --black: var(--ds-bg);
  --black-soft: var(--ds-bg-soft);
  --black-card: var(--ds-bg-soft);
  --black-panel: var(--ds-bg-soft);
  --black-field: var(--ds-bg);
  --black-field-focus: var(--ds-panel);
  --gold-deep: var(--ds-gold);
  --gold-soft: var(--ds-gold-light);
  --gold-light: var(--ds-gold-light);
  --line-strong: var(--ds-line-strong);
  --line-soft: var(--ds-line-soft);
  --text-soft: var(--ds-text-soft);
  --text-muted: var(--ds-muted);
  --shadow-lg: var(--ds-shadow-lg);
  --shadow-md: var(--ds-shadow-md);
  --shadow-sm: var(--ds-shadow-sm);
  --radius-xl: var(--ds-radius-xl);
  --radius-lg: var(--ds-radius-lg);
  --radius-md: var(--ds-radius-lg);
  --radius-sm: var(--ds-radius-md);
  --transition: var(--ds-transition);
}


/* =========================================================
   UNIFIED THEME OVERRIDES - gedeelde basiscomponenten
   ========================================================= */
html,
body{
  background-color: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
}

body{
  background:
    radial-gradient(circle at top center, var(--ds-bordeaux), transparent 28%),
    linear-gradient(180deg, #070707 0%, var(--ds-bg) 100%);
}

h1,h2,h3,h4,h5,h6,
.rock_heading h1,
.rock_heading h2,
.rock_comment_auther h1{
  color: #fff;
  font-family: var(--ds-font-heading) !important;
}

p, li, label,
.rock_feed,
.rock_post_detail a,
.rock_vip_book p{
  color: var(--ds-muted);
  font-family: var(--ds-font-body);
}

a{
  color: var(--ds-gold);
}

a:hover,
a:focus{
  color: var(--ds-gold-light);
  text-decoration: none;
}

.btn,
.btn-default,
.btn.btn-default,
button,
input[type="submit"],
input[type="button"],
#booking_sub,
.lx-btn,
.hp-link--primary,
.photo-pager__nav{
  border-radius: 999px;
  font-family: var(--ds-font-body);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn-default,
.btn.btn-default,
input[type="submit"],
input[type="button"],
#booking_sub,
.lx-btn--primary,
.hp-link--primary{
  background: linear-gradient(135deg, var(--ds-gold-rich) 0%, var(--ds-gold-mid) 52%, var(--ds-gold-dark) 100%) !important;
  border-color: transparent !important;
  color: #111 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px rgba(200,169,106,.20);
}

.btn-default:hover,
.btn.btn-default:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
#booking_sub:hover,
.lx-btn--primary:hover,
.hp-link--primary:hover{
  transform: translateY(-1px);
  color: #111 !important;
  box-shadow: 0 14px 30px rgba(200,169,106,.26);
}

.btn-ghost,
.lx-btn--ghost,
.photo-pager__nav,
.hp-link--ghost{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(200,169,106,.48) !important;
  color: var(--ds-gold-light) !important;
}

.btn-ghost:hover,
.btn-ghost:focus,
.lx-btn--ghost:hover,
.lx-btn--ghost:focus,
.photo-pager__nav:hover,
.photo-pager__nav:focus,
.hp-link--ghost:hover,
.hp-link--ghost:focus{
  background: rgba(200,169,106,.14) !important;
  color: #fff !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea,
.bootstrap-select > .btn,
.selectpicker{
  background: rgba(8,8,8,.96) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-md) !important;
  color: var(--ds-text) !important;
  box-shadow: none !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.bootstrap-select > .btn:focus,
.bootstrap-select > .btn:hover{
  border-color: var(--ds-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,.10) !important;
  outline: none !important;
}

::placeholder{
  color: rgba(255,255,255,.56);
  opacity: 1;
}

.rockon_service,
.arrangement-card,
.arrangement-info-item,
.special-banner__inner,
.photo-showcase__panel,
.artist-showcase__panel,
.lx-agenda__card,
.hp-date-card,
.hp-program__card,
.home-gallery-card,
.table_form,
.rock_comment{
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-panel-glass);
  box-shadow: var(--ds-shadow-md);
}

.arrangement-info-item:hover,
.arrangement-card:hover,
.rockon_service:hover,
.photo-card:hover,
.artist-card:hover,
.lx-agenda__card:hover,
.hp-date-card:hover,
.home-gallery-card:hover{
  border-color: var(--ds-line-strong) !important;
}

.rock_heading h1:after,
.rock_heading h2:after,
.page-title-line,
.lx-agenda__header::after{
  border-bottom-color: var(--ds-gold) !important;
}



/* =========================================================
   COMPONENT FIXES - labels blijven labels, prijzen krijgen eigen stijl
   ========================================================= */
.arrangement-price--ticket{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto 24px !important;
  padding: 10px 22px !important;
  border: 1px solid rgba(200,169,106,.42) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ds-gold-rich) 0%, var(--ds-gold-mid) 56%, var(--ds-gold-dark) 100%) !important;
  color: #111 !important;
  font-family: var(--ds-font-body) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 28px rgba(200,169,106,.20), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.arrangement-price--ticket::before,
.arrangement-price--ticket::after{
  display: none !important;
  content: none !important;
}

.arrangement-price--ticket .ticket-price{
  font-size: 1.08em;
  white-space: nowrap;
}

.arrangement-price--ticket .ticket-label{
  font-size: .78em;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}

.arrangement-info-grid,
.hotel-package-grid,
.hotel-photo-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
}

.arrangement-info-item,
.arrangement-info-item h3,
.arrangement-info-item h4,
.hotel-package-card,
.hotel-package-card h3{
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 992px) and (max-width: 1199px){
  .arrangement-info-grid--4{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px){
  .arrangement-price--ticket{
    gap: 7px !important;
    padding: 9px 15px !important;
    font-size: 12px !important;
    letter-spacing: .06em !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .arrangement-price--ticket .ticket-label{
    font-size: .72em;
  }
}

/* SEO/UX FINAL AUDIT IMPROVEMENTS */
.skip-link{
  position:absolute;
  left:12px;
  top:-48px;
  z-index:1000001;
  display:inline-block;
  padding:12px 16px;
  border-radius:999px;
  background:#f1d8a0;
  color:#111 !important;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
  transition:top .18s ease;
}
.skip-link:focus{ top:12px; outline:3px solid rgba(255,255,255,.85); outline-offset:2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(241,216,160,.75) !important;
  outline-offset:3px !important;
}
.rock_menu ul li.menu-cta > a,
.rock_menu .menu-cta > a{
  background:linear-gradient(135deg,var(--ds-gold-rich),var(--ds-gold-mid) 56%,var(--ds-gold-dark)) !important;
  color:#111 !important;
  border-radius:999px !important;
  font-weight:800 !important;
  text-align:center !important;
  box-shadow:0 10px 26px rgba(200,169,106,.24) !important;
}
.rock_menu ul li.menu-cta > a:hover,
.rock_menu ul li.menu-cta > a:focus{
  color:#111 !important;
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(200,169,106,.32) !important;
}
.rock_menu a[aria-current="page"]{
  color:var(--ds-gold-light) !important;
}
@media (min-width:992px){
  .rock_menu ul li.menu-cta > a{ margin-top:18px !important; padding:12px 18px !important; }
}
@media (max-width:991px){
  .rock_menu a[aria-current="page"]{ background:rgba(200,169,106,.10) !important; }
  .rock_menu ul li.menu-cta{ padding:12px 18px 16px !important; }
}
@media (max-width:767px){
  .btn, a.btn, .btn-default, input[type="submit"], input[type="button"], #booking_sub, .lx-btn, .hp-link{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .table_form input,
  .table_form select,
  .table_form textarea,
  .reservation-form input,
  .reservation-form select,
  .reservation-form textarea{
    min-height:46px;
    font-size:16px !important;
  }
}

/* =========================================================
   PRODUCTION CLEANUP - UX, accessibility and semantic fixes
   ========================================================= */
.visually-hidden-field{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.rock_comment.arrangement-card h2,
.rock_comment_auther h2{
  margin:0 0 34px !important;
  color:var(--ds-text, #fff) !important;
  font-family: var(--ds-font-heading) !important;
  font-size:clamp(32px, 4vw, 50px) !important;
  line-height:1.12 !important;
  font-weight:600 !important;
}
h2.arrangement-title{
  font-family: var(--ds-font-heading) !important;
}
.page-thank-you,
.page-error{
  margin:0;
  min-height:100vh;
  background:#080808;
  color:#fff;
  font-family: var(--ds-font-body);
}
.page-thank-you .wrap,
.page-error{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.page-thank-you .wrap{ min-height:100vh; }
.page-thank-you .card,
.page-error .card{
  width:100%;
  max-width:760px;
  text-align:center;
  background:linear-gradient(145deg, rgba(24,24,24,.94), rgba(8,8,8,.98));
  border:1px solid rgba(200,169,106,.35);
  border-radius:28px;
  padding:44px 30px;
  box-shadow:0 25px 70px rgba(0,0,0,.55);
}
.page-thank-you .logo{
  max-width:220px;
  height:auto;
  margin:0 auto 14px;
  display:block;
}
.page-thank-you h1,
.page-error h1{
  font-family: var(--ds-font-heading) !important;
  font-size:clamp(34px, 6vw, 64px);
  line-height:1;
  margin:0 0 18px;
  color:#fff;
}
.page-thank-you p,
.page-error p{
  font-size:18px;
  line-height:1.7;
  color:#ead9a8;
  margin:0 auto 18px;
  max-width:620px;
}
.page-thank-you .gold{ color:var(--ds-gold-light, #e3d3a3); font-weight:800; }
.page-thank-you .small{ margin-top:14px; font-size:13px; color:rgba(255,255,255,.7); }
.page-thank-you .btns{ margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.page-thank-you a.btn,
.page-error a,
.reviews-main .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
}
.page-thank-you a.btn,
.reviews-main .btn-ghost{
  border:1px solid rgba(200,169,106,.48);
  color:#fff;
  background:rgba(0,0,0,.22);
}
.page-thank-you a.btn.primary,
.page-error a,
.reviews-main .btn-default{
  background:linear-gradient(135deg, var(--ds-gold-rich, #f1d8a0), var(--ds-gold-mid, #d6b36a));
  color:#111 !important;
  border-color:transparent;
}
.reviews-main{
  padding:80px 20px;
  max-width:860px;
}
.reviews-main h1{
  margin-bottom:18px;
}
@media (max-width:640px){
  .page-thank-you .card,
  .page-error .card{ padding:32px 20px; border-radius:22px; }
  .page-thank-you p,
  .page-error p{ font-size:16px; }
  .page-thank-you .btns{ align-items:stretch; }
  .page-thank-you a.btn{ width:100%; }
}

/* =========================================================
   HOME MOBILE ALIGNMENT HOTFIX
   Lost de mobiele uitlijnfout onder de hero op: de absolute
   slider/grid-laag werd buiten de hero zichtbaar bij de start
   van de sectie "Zo werkt het".
   ========================================================= */
@media (max-width: 991px){
  .home-hero{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background: #080405 !important;
  }

  .home-hero-slider,
  .home-hero-slides,
  .home-hero-overlay{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-hero-slide{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-hero-slide:not(.active){
    transform: none !important;
  }

  .home-hero-grid-wrap{
    display: none !important;
  }

  .home-hero + #main-content,
  #main-content,
  #main-content .hpv5-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  #main-content .hpv5-wrap{
    overflow: hidden !important;
    background: #12090b !important;
  }

  #main-content .hpv5-section:first-child{
    margin-top: 0 !important;
  }
}

@media (max-width: 767px){
  .home-hero{
    margin-bottom: 0 !important;
  }

  .home-hero-dots{
    z-index: 25 !important;
  }

  #main-content .hpv5-section:first-child{
    padding-top: 58px !important;
  }

  .site-footer .row,
  .site-footer__grid.row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-footer [class*="col-"],
  .site-footer__grid [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   HOME CTA CLEANUP - ALL DEVICES
   De twee grote hero CTA-knoppen onder de intro zijn overal
   verborgen: desktop, tablet en mobiel.
   ========================================================= */
.home-hero-copy-v9__actions{
  display: none !important;
}

.home-hero-copy-v9__lead{
  margin-bottom: 0 !important;
}

@media (max-width: 767px){
  .home-hero-copy-v9{
    min-height: 340px !important;
  }

  .home-hero-copy-v9__inner{
    padding-bottom: 64px !important;
  }
}

@media (max-width: 420px){
  .home-hero-copy-v9{
    min-height: 318px !important;
  }
}


/* =========================================================
   HOME HERO PHOTO CLARITY - TABLET ONLY
   Desktop en tabletweergave blijven zoals getest. Mobiele
   sliderregels staan verderop in één opgeschoond blok.
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px){
  .home-hero-slide--1,
  .home-hero-slide--2,
  .home-hero-slide--3{
    background-position: 72% center !important;
    background-size: cover !important;
  }

  .home-hero-copy-v9::before{
    background:
      linear-gradient(90deg,
        rgba(12,5,8,.88) 0%,
        rgba(12,5,8,.76) 32%,
        rgba(12,5,8,.34) 60%,
        rgba(12,5,8,.10) 100%),
      linear-gradient(180deg,
        rgba(12,5,8,.20) 0%,
        rgba(12,5,8,.12) 34%,
        rgba(12,5,8,.54) 100%) !important;
  }

  .home-hero-copy-v9__content{
    max-width: 54% !important;
  }
}

/* =========================================================
   TYPOGRAPHY & FOOTER AUDIT - final site-wide consistency layer
   ========================================================= */
:root{
  --ds-font-body: "Inter", Arial, sans-serif;
  --ds-font-heading: "Playfair Display", Georgia, serif;
}

html,
body,
button,
input,
select,
textarea,
.rock_menu,
.rock_menu a,
.site-footer,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer span,
.site-footer strong,
.cookie-banner,
.cookie-banner *{
  font-family: var(--ds-font-body) !important;
}

h1,h2,h3,h4,h5,h6,
.rock_heading h1,
.rock_heading h2,
.site-footer h3,
.hpv5-title,
#main-content .hpv5-wrap h1,
#main-content .hpv5-wrap h2,
#main-content .hpv5-wrap h3,
.home-hero-copy-v9 h1{
  font-family: var(--ds-font-heading) !important;
}

.site-footer{
  font-size: 15px;
}

.site-footer p,
.footer-intro,
.footer-links a,
.footer-contact-list a,
.footer-info-mini span{
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.footer-info-mini strong{
  font-size: 13px !important;
}

.footer-reserveer{
  font-size: 14px !important;
}

.footer-copy{
  font-size: 14px !important;
  line-height: 1.65 !important;
}

@media (max-width: 767px){
  .site-footer p,
  .footer-intro,
  .footer-links a,
  .footer-contact-list a,
  .footer-info-mini span{
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .footer-copy{
    font-size: 14px !important;
  }
}


/* =========================================================
   RESPONSIVE AUDIT 2026 - schaalbare final layer
   Plaats dit blok helemaal onderaan css/responsive-final.css.
   Doel: echte fluid containers, betere touch targets, robuuste
   grids/forms en minder horizontale overflow op 320px t/m brede schermen.
   ========================================================= */

:root{
  --audit-gutter: clamp(14px, 3.8vw, 32px);
  --audit-gutter-xs: clamp(14px, 4.5vw, 18px);
  --audit-card-pad: clamp(18px, 3.2vw, 42px);
  --audit-section-y: clamp(42px, 7vw, 88px);
  --audit-touch: 44px;
  --audit-touch-comfortable: 48px;
  --audit-container: 1170px;
  --audit-container-wide: 1200px;
}

html{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: 150px;
}

body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* fallback voor oudere browsers zonder overflow: clip */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (overflow: clip){
  body{ overflow-x: clip; }
}

img,
picture,
svg,
canvas,
video,
iframe,
embed,
object{
  max-inline-size: 100%;
}

img,
svg,
canvas,
video{
  block-size: auto;
}

iframe,
embed,
object{
  inline-size: 100%;
}

p,
li,
dd,
figcaption,
label,
.form-control,
.bootstrap-select .filter-option,
.rock_feed,
.footer-copy{
  overflow-wrap: break-word;
}

h1,h2,h3,h4,h5,h6,
.rock_heading h1,
.rock_heading h2,
.home-hero-copy-v9 h1,
.hpv5-title,
.arrangement-title,
.form-title,
.lx-agenda__title{
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Containers: Bootstrap 3 vaste breedtes worden vloeibaar gemaakt zonder grid te breken. */
@media (min-width: 992px){
  .container{
    width: min(calc(100% - 32px), var(--audit-container)) !important;
    max-width: var(--audit-container) !important;
  }
}

@media (min-width: 1440px){
  .container{
    width: min(calc(100% - 64px), var(--audit-container-wide)) !important;
    max-width: var(--audit-container-wide) !important;
  }
}

@media (min-width: 768px) and (max-width: 991px){
  .container{
    width: min(calc(100% - 32px), 760px) !important;
    max-width: 760px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 767px){
  .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(var(--audit-gutter-xs), env(safe-area-inset-left)) !important;
    padding-right: max(var(--audit-gutter-xs), env(safe-area-inset-right)) !important;
  }

  .row{
    margin-left: calc(var(--audit-gutter-xs) * -0.55) !important;
    margin-right: calc(var(--audit-gutter-xs) * -0.55) !important;
  }

  [class*="col-"]{
    min-width: 0 !important;
    padding-left: calc(var(--audit-gutter-xs) * 0.55) !important;
    padding-right: calc(var(--audit-gutter-xs) * 0.55) !important;
  }
}

.row,
[class*="col-"],
.rock_menu,
.rock_menu ul,
.rock_menu li,
.home-hero-copy-v9__content,
.footer-brand,
.footer-col,
.arrangement-card,
.rock_comment,
.lx-card,
.photo-card,
.artist-card{
  min-width: 0;
}

/* Navigatie: extra compact op kleine laptops en 1200-1399px waar het menu krap wordt. */
@media (min-width: 1200px) and (max-width: 1399px){
  .rock_logo img{
    max-height: 58px !important;
    width: auto !important;
  }

  .rock_menu ul li > a{
    padding: 28px 10px 26px !important;
    font-size: 12px !important;
    letter-spacing: .06em !important;
  }

  .rock_menu ul li.has-submenu > a,
  .rock_menu ul li.menu-item-has-children > a{
    padding-right: 24px !important;
  }

  .rock_menu ul li.menu-cta{
    margin-left: 6px !important;
  }

  .rock_menu ul li.menu-cta > a{
    padding: 11px 15px !important;
  }
}

@media (max-width: 991px){
  #rock_header,
  #rock_header_single_page,
  #rock_header_otherpage,
  .home-header{
    max-width: 100% !important;
  }

  .rock_menu_toggle.navbar-toggle,
  .rock_menu_toggle{
    min-height: var(--audit-touch-comfortable) !important;
    touch-action: manipulation;
  }

  .rock_menu .navbar-collapse,
  .rock_menu ul.collapse,
  .rock_menu ul.navbar-collapse{
    max-height: calc(100vh - 150px) !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .rock_menu ul li > a{
    min-height: var(--audit-touch-comfortable) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    touch-action: manipulation;
  }
}

@media (max-width: 767px){
  #rock_header_otherpage + .rock_page_title_main,
  #rock_header_single_page + .rock_page_title_main{
    margin-top: 138px !important;
  }

  .rock_page_title_main,
  .rock_page_title_main .rock_page_title_bg,
  .rock_page_title_main .rock_page_title_bg .main,
  .rock_page_title_main #rock_page_title_bg{
    min-height: clamp(154px, 42vw, 190px) !important;
    height: auto !important;
    max-height: none !important;
  }

  .rock_page_title_main .rock_page_title{
    min-height: clamp(154px, 42vw, 190px) !important;
    padding: 22px var(--audit-gutter-xs) !important;
  }

  .rock_page_title .rock_heading h1,
  .rock_page_title_main.page-title-luxe .rock_heading h1{
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1.08 !important;
  }
}

/* Algemene touch targets: minimaal 44px, ook voor icon-links en paginering. */
a.btn,
.btn,
.btn-default,
button,
input[type="submit"],
input[type="button"],
#booking_sub,
.lx-btn,
.lx-filter-btn,
.hp-link,
.home-hero-copy-v9__btn,
.footer-reserveer,
.footer-social a,
.rock_social ul li a,
.photo-pager a,
.photo-pager span,
.photo-card__zoom,
.artist-card__zoom{
  min-width: var(--audit-touch) !important;
  min-height: var(--audit-touch) !important;
}

.footer-social a,
.rock_social ul li a{
  width: var(--audit-touch) !important;
  height: var(--audit-touch) !important;
  line-height: var(--audit-touch) !important;
}

@media (max-width: 767px){
  a.btn,
  .btn,
  .btn-default,
  .lx-btn,
  .lx-filter-btn,
  .hp-link,
  .footer-reserveer,
  input[type="submit"],
  input[type="button"],
  #booking_sub{
    width: 100%;
    white-space: normal !important;
  }
}

/* Formulieren/selects: iOS zoom voorkomen en velden nooit buiten de kaart laten lopen. */
input,
select,
textarea,
button,
.form-control,
.bootstrap-select,
.bootstrap-select > .dropdown-toggle{
  max-width: 100% !important;
}

.table_form,
.reservation-form-wrap,
.table_form form,
.reservation-form{
  max-width: min(100%, 1080px) !important;
}

.table_form input,
.table_form select,
.table_form textarea,
.reservation-form input,
.reservation-form select,
.reservation-form textarea,
.bootstrap-select > .dropdown-toggle{
  width: 100% !important;
  font-size: 16px !important; /* voorkomt automatische zoom op iOS */
}

.bootstrap-select.btn-group .dropdown-menu{
  max-width: min(100%, calc(100vw - 32px)) !important;
}

@media (max-width: 767px){
  .table_form,
  .reservation-form-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .table_form form,
  .reservation-form{
    padding: clamp(20px, 5vw, 28px) clamp(14px, 4.5vw, 20px) !important;
    border-radius: 18px !important;
  }

  .form-section{
    padding: 18px 14px 12px !important;
  }

  .form-title{
    font-size: clamp(31px, 9vw, 40px) !important;
  }

  .form-legend{
    font-size: clamp(18px, 5vw, 22px) !important;
  }
}

/* Tabellen en brede content krijgen gecontroleerde horizontale scroll binnen hun container. */
table{
  width: 100%;
  max-width: 100%;
}

.table-responsive,
.responsive-table,
.table-scroll,
.agenda-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Arrangement/menu-kaarten: oude flex-widths vervangen door echte auto-fit grids. */
.arrangement-info-grid,
.menu-page .arrangement-info-grid,
.arrangementen-page .arrangement-info-grid,
.arrangementen-page .arrangement-info-grid--4{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: clamp(14px, 2vw, 24px) !important;
  align-items: stretch !important;
}

.arrangement-info-grid--4,
.arrangementen-page .arrangement-info-grid--4{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)) !important;
}

.arrangement-info-item,
.arrangement-info-grid--4 .arrangement-info-item,
.arrangementen-page .arrangement-info-grid--4 .arrangement-info-item{
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767px){
  .arrangement-info-grid,
  .menu-page .arrangement-info-grid,
  .arrangementen-page .arrangement-info-grid,
  .arrangementen-page .arrangement-info-grid--4{
    grid-template-columns: 1fr !important;
  }
}

/* Hotel/agenda/foto/artiest componenten blijven binnen de viewport. */
.hotel-arrangement-page .hotel-hero-grid,
.hotel-arrangement-page .hotel-package-grid,
.hotel-arrangement-page .hotel-photo-grid,
.photo-grid,
.artist-grid,
.lx-agenda__grid,
.hpv5-grid,
.hpv5-cta-inner{
  max-width: 100%;
}

@media (max-width: 767px){
  .hotel-arrangement-page .hotel-hero-grid,
  .hotel-arrangement-page .hotel-package-grid,
  .hotel-arrangement-page .hotel-photo-grid,
  .photo-grid,
  .artist-grid,
  .lx-agenda__grid,
  .hpv5-grid,
  .hpv5-cta-inner{
    grid-template-columns: 1fr !important;
  }

  .photo-card--featured,
  .artist-card--featured{
    grid-column: auto !important;
  }

  .photo-pager,
  .lx-agenda__actions,
  .lx-card__actions,
  .lx-agenda__filters,
  .arrangement-actions,
  .arrangementen-page .special-banner__actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Footer: social icons mogen wrappen in plaats van uit beeld lopen. */
.site-footer__bottom-inner,
.footer-social{
  max-width: 100%;
}

.footer-social{
  flex-wrap: wrap;
}

@media (max-width: 767px){
  .site-footer__bottom-inner{
    align-items: stretch !important;
  }

  .footer-social{
    justify-content: center;
  }
}

/* Motion/accessibility: respecteer gebruikers die minder animatie willen. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   HOME HERO SLIDER - MOBILE CLEAN FINAL
   Eén mobiel sliderblok. Niet meer onderaan bijplakken.
   Pas alleen deze waarden aan als de foto nog iets moet schuiven
   of lichter/donkerder moet worden.
   ========================================================= */
@media (max-width: 767px){
  body.page-home .home-hero-slide--1,
  body.page-home .home-hero-slide--2,
  body.page-home .home-hero-slide--3{
    background-size: auto 94% !important;
    background-position: 26% center !important;
    background-repeat: no-repeat !important;
  }

  body.page-home .home-hero-copy-v9__content{
    width: min(66vw, 270px) !important;
    max-width: min(66vw, 270px) !important;
  }

  body.page-home .home-hero-copy-v9::before{
    background:
      linear-gradient(90deg,
        rgba(12,5,8,.92) 0%,
        rgba(12,5,8,.80) 42%,
        rgba(12,5,8,.18) 70%,
        rgba(12,5,8,.02) 100%),
      linear-gradient(180deg,
        rgba(12,5,8,.18) 0%,
        rgba(12,5,8,.08) 30%,
        rgba(12,5,8,.08) 64%,
        rgba(12,5,8,.45) 100%) !important;
  }

  body.page-home .home-hero-copy-v9__inner{
    padding-top: clamp(26px, 8vw, 36px) !important;
    padding-bottom: 58px !important;
  }

  body.page-home .home-hero-copy-v9 h1{
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.04 !important;
  }

  body.page-home .home-hero-copy-v9__lead{
    max-width: 100% !important;
    font-size: clamp(14.5px, 3.8vw, 16px) !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 360px){
  body.page-home .home-hero-slide--1,
  body.page-home .home-hero-slide--2,
  body.page-home .home-hero-slide--3{
    background-size: auto 90% !important;
    background-position: 22% center !important;
  }

  body.page-home .home-hero-copy-v9__content{
    width: min(70vw, 235px) !important;
    max-width: min(70vw, 235px) !important;
  }

  body.page-home .home-hero-copy-v9 h1{
    font-size: clamp(25px, 8vw, 29px) !important;
  }
}