/* gb-fixes.css — responsive/layout fixes. Loaded after all theme CSS. */

/* ---------- 1. Header: grid layout so logo / nav / buttons can never collide ---------- */
@media (min-width:1101px){
  .qodef-header-standard--center #qodef-page-header-inner .qodef-header-wrapper{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(10px,1.4vw,28px)}
  .qodef-header-standard--center #qodef-page-header-inner .qodef-header-logo,
  .qodef-header-standard--center #qodef-page-header-inner .qodef-widget-holder{position:static;height:auto}
  .qodef-header-standard--center #qodef-page-header-inner .qodef-header-logo{height:100%}
  .qodef-header-standard--center #qodef-page-header-inner .qodef-header-navigation{margin:0;justify-self:center;min-width:0}
  .qodef-header-standard--center #qodef-page-header-inner .qodef-widget-holder{display:flex;align-items:center;gap:clamp(8px,1vw,18px);white-space:nowrap}
  #qodef-page-header .qodef-header-navigation>ul>li,
  .qodef-header-sticky .qodef-header-navigation>ul>li{margin:0 clamp(7px,1.1vw,21px);white-space:nowrap}
  #qodef-page-header .qodef-header-navigation>ul>li>a,
  .qodef-header-sticky .qodef-header-navigation>ul>li>a{font-size:clamp(11px,.95vw,12px);letter-spacing:.08em}
  #qodef-page-header .qodef-widget-holder .qodef-button .qodef-m-text{white-space:nowrap}
}
/* Desktop header only from 1201px up (theme default). 1101-1200px and portrait iPads use the mobile header: the full menu collided with "Inquire now" there. */

@media (min-width:1201px) and (max-width:1320px){
  #qodef-page-header .qodef-header-navigation>ul>li,
  .qodef-header-sticky .qodef-header-navigation>ul>li{margin:0 clamp(5px,.6vw,8px)}
  #qodef-page-header .qodef-header-navigation>ul>li>a,
  .qodef-header-sticky .qodef-header-navigation>ul>li>a{font-size:11px;letter-spacing:.05em}
}

/* ---------- 2. Pricing-table arches: equal height within a row ---------- */
.elementor-widget-container:has(>.qodef-pricing-table){height:100%;display:flex;flex-direction:column;padding-bottom:0!important;margin-bottom:0!important}
.elementor-widget:has(>.elementor-widget-container>.qodef-pricing-table){align-self:stretch}
.qodef-pricing-table{flex:1 1 auto;box-sizing:border-box}

/* ---------- 3. Footer logo (about half the previous size) ---------- */
#qodef-page-footer .wp-block-media-text__media img{width:min(100%,175px);height:auto}

/* ---------- 4. Calendar thumbnails: always square ---------- */
.calendar-image{width:80px;height:auto;aspect-ratio:1/1}
.calendar-image img{aspect-ratio:1/1}
@media (max-width:700px){
  /* same look as the Wellness cards: full-width photo, then date, title, button */
  .calendar-image{width:100%;height:auto;aspect-ratio:auto;border-radius:4px}
  .calendar-image img{width:100%;height:240px;aspect-ratio:auto;object-fit:cover}
}

/* ---------- 5. Wellness / event cards grid (no stretched last card) ---------- */
#eventbrite-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
#eventbrite-collection::after{content:none;display:none}
#eventbrite-collection .event-card{flex:none;min-width:0}
@media (max-width:992px){#eventbrite-collection{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#eventbrite-collection{grid-template-columns:minmax(0,1fr)}}

/* ---------- 6. Interactive showcase sliders (home 2nd slider, Space Rental): mobile ---------- */
.qodef-interactive-link-showcase.qodef-layout--slider .qodef-m-images .qodef-m-image img{width:100%;height:100%;object-fit:cover;object-position:var(--gb-fx,50%) var(--gb-fy,40%)}
@media (max-width:767px){
  .qodef-interactive-link-showcase.qodef-layout--slider .swiper-container .swiper-wrapper{min-height:min(62vh,520px)}
  .qodef-interactive-link-showcase.qodef-layout--slider .qodef-m-item{width:100%!important;box-sizing:border-box;padding:0 22px}
  .qodef-interactive-link-showcase.qodef-layout--slider .qodef-m-item:before,
  .qodef-interactive-link-showcase.qodef-layout--slider .qodef-m-item:after{display:none}
  .qodef-interactive-link-showcase.qodef-layout--slider .qodef-m-item .qodef-e-title{
    font-size:clamp(32px,10.5vw,52px);line-height:1.08;letter-spacing:.03em;white-space:normal;overflow-wrap:break-word;text-wrap:balance}
}

/* ---------- 7. Invisible Instagram feed block (its script isn't part of the static export) ---------- */
.e-con:has(>.elementor-widget #sb_instagram),.e-con:has(#sb_instagram):not(:has(#eventbrite-collection)){display:none!important}
#sb_instagram{display:none!important}

/* ---------- 8. Forms: guests hint ---------- */
.cf7-hint{display:block;margin-top:4px;font-size:.8rem;opacity:.75}

/* ---------- 9. Header logo: same width on every page ---------- */
@media (min-width:1101px){
  #qodef-page-header .qodef-header-logo-link img{width:clamp(105px,11vw,150px)!important;height:auto!important;max-width:none}
}

/* ---------- 10. Inquiry form: single column, tighter spacing ---------- */
form[data-inquiry] .cf7-grid{display:block}
form[data-inquiry] .cf7-field{margin:0 0 14px;min-width:0}
form[data-inquiry] .cf7-field label{margin:0;line-height:1.3}
form[data-inquiry] .cf7-field input,form[data-inquiry] .cf7-field select,form[data-inquiry] .cf7-field textarea{width:100%;max-width:100%;box-sizing:border-box}
form[data-inquiry] .cf7-field input,form[data-inquiry] .cf7-field select{height:44px;min-height:0;margin:0}
form[data-inquiry] .cf7-field textarea{height:90px;min-height:0}
form[data-inquiry] .cf7-field .wpcf7-form-control-wrap{display:block}
form[data-inquiry] .cf7-hint{margin-top:2px}
form[data-inquiry] .cf7-submit{margin-top:8px}
/* centre the form column against the photo; keep the date input inside the column (iOS Safari) */
@media (min-width:768px){.e-con:has(>.elementor-widget form[data-inquiry]){justify-content:center}}
form[data-inquiry] input[type=date]{display:block;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}

/* ---------- 11. Qi masonry galleries (Last-Minute page): their init script is not in the export, so never hide them ---------- */
.qodef-qi-grid.qodef-layout--qi-masonry>.qodef-grid-inner{visibility:visible!important}

/* ---------- 12. Round 2 (Oct 8 brief) ---------- */
/* side-area + mobile-menu contact blocks */
.gb-btn{display:inline-block;padding:14px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;text-align:center;border:1px solid #fff;line-height:1.2;transition:background .2s,color .2s}
.gb-btn--solid,.gb-btn--solid:visited{background:#fff;color:#0B2121!important}
.gb-btn--solid:hover{background:transparent;color:#fff!important}
.gb-btn--outline,.gb-btn--outline:visited{background:transparent;color:#fff!important}
.gb-btn--outline:hover{background:#fff;color:#0B2121!important}
.gb-side-cta{display:flex;flex-direction:column;gap:12px;margin-top:26px;max-width:260px}
.gb-mobile-contact{padding:22px 24px 12px;text-align:left;box-sizing:border-box}
.gb-mobile-cta{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.gb-mobile-contact__title{margin:0 0 8px;font-size:22px;line-height:1.2}
.gb-mobile-contact p{margin:0 0 12px;font-size:15px;line-height:1.7}
.gb-mobile-contact a:not(.gb-btn){color:inherit;text-decoration:none}
.gb-mobile-contact__social a{text-transform:uppercase;letter-spacing:.12em;font-size:13px}
/* pricing cards: titles/content/buttons align across the row (no spacer paragraphs) */
.qodef-pricing-table{display:flex;flex-direction:column}
.qodef-pricing-table>.qodef-m-inner{flex:1 1 auto;display:flex;flex-direction:column}
.qodef-pricing-table .qodef-m-content{flex:1 1 auto}
.qodef-pricing-table .qodef-m-button{margin-top:auto}
@media (max-width:767px){
  /* home reviews */
  .qodef-testimonials-list{padding:0 26px;box-sizing:border-box}
  .qodef-testimonials-list .qodef-e-text{font-size:clamp(19px,5.2vw,23px);line-height:1.32;margin-bottom:14px}
  .qodef-testimonials-list .qodef-e-inner{padding-bottom:30px}
  /* readable text blocks never touch the screen edges */
  .elementor-element-a17caad .elementor-widget-container{padding-left:22px;padding-right:22px}
  /* photo galleries: two columns */
  .qodef-image-gallery.qodef-grid{width:100%!important;max-width:100%!important;align-self:stretch}
  .qodef-image-gallery.qodef-grid>.qodef-grid-inner{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
  .qodef-image-gallery.qodef-grid>.qodef-grid-inner>.qodef-grid-item{width:auto!important;max-width:none!important;margin:0!important}
}

/* ---------- 13. Wellness page (mobile): less empty green between the categories and Upcoming Events ---------- */
@media (max-width:767px){
  .elementor-element-834d138 .qodef-image-with-text{display:block!important;height:auto!important}
  .elementor-element-834d138>.e-con-inner{padding-bottom:36px!important}
  .elementor-element-2f2d0ed>.e-con-inner{padding-top:40px!important}
}

/* ---------- 14. Mobile: photo first, then the intro text and the first Inquire Now button ---------- */
@media (max-width:767px){
  .elementor-element-4157378,.elementor-element-f826c0e,.elementor-element-4d2c573{display:flex;flex-direction:column}
  .elementor-element-56a8215,.elementor-element-edebce8,.elementor-element-9298e17{order:-1}
}

/* ---------- 15. Wedding tour button ---------- */
.gb-tour-cta{margin-top:14px}
.gb-tour-cta .gb-btn{font-weight:900;padding:17px 30px}

/* ---------- 16. Mobile: breathing room between Reserve / Visit / Join; two cropped hero photos ---------- */
@media (max-width:767px){
  .elementor-element-b58c5a6{row-gap:20px!important;gap:20px!important}
  /* photo 1 (above the text) and photo 2 (below the buttons), both cropped */
  .elementor-element-56a8215 .qodef-m-image img,.elementor-element-edebce8 .qodef-m-image img,.elementor-element-9298e17 .qodef-m-image img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 35%}
  .gb-hero2 .qodef-m-image img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
  .gb-hero2{width:100%;margin-top:8px}
  .elementor-element-4157378,.elementor-element-f826c0e,.elementor-element-4d2c573{padding-top:0!important}
  .elementor-element-56a8215,.elementor-element-edebce8,.elementor-element-9298e17{margin-bottom:12px;padding-bottom:16px;height:auto!important;min-height:0!important}
  .elementor-element-56a8215 .elementor-widget,.elementor-element-edebce8 .elementor-widget,.elementor-element-9298e17 .elementor-widget,.elementor-element-56a8215 .elementor-widget-container,.elementor-element-edebce8 .elementor-widget-container,.elementor-element-9298e17 .elementor-widget-container{margin-top:0!important;height:auto!important;min-height:0!important}
}
@media (min-width:768px){.gb-hero2{display:none}}

/* ---------- 17. Wellness category pages (mobile): text keeps a comfortable distance from the screen edges ---------- */
@media (max-width:767px){
  .elementor-element-78926d7>.elementor-widget-container,.elementor-element-6db356e>.elementor-widget-container{padding-left:24px!important;padding-right:24px!important;box-sizing:border-box}
  .elementor-element-358fa46>.elementor-widget-container,.elementor-element-43e4447>.elementor-widget-container,.elementor-element-e834fad>.elementor-widget-container,.elementor-element-7fdf388>.elementor-widget-container,.elementor-element-0cd5713>.elementor-widget-container,.elementor-element-d4ab27d>.elementor-widget-container{padding-left:14px!important;padding-right:14px!important;box-sizing:border-box}
}

/* ---------- 18. Sticky mobile/tablet header on every page ---------- */
/* mobile/tablet header is NOT sticky (it scrolls away with the page); the desktop header stays sticky */
/* the theme already makes the open menu panel scrollable; do not add overflow to the header, it clips the absolutely positioned panel */

/* ---------- 19. Footer: Instagram icon + Schedule a Visit under the contact block ---------- */
.gb-footer-ig{margin-top:14px}
.gb-footer-ig a{display:inline-flex!important;width:26px!important;height:26px!important;color:#fff!important}
.gb-footer-ig svg{display:block;width:26px!important;height:26px!important;max-width:26px;fill:#fff!important}
.gb-footer-visit{margin-top:18px}
.gb-footer-visit .gb-btn{padding:14px 26px}
/* clip (not hidden) so the page does not become its own scroll container; this is what lets position:sticky work */
html,body{overflow-x:clip!important;overflow-y:visible!important}

/* ---------- 20. Home: tagline, HOST/JOIN height, rental button, mobile events in two columns ---------- */
.elementor-element-c5c8f78 h2{margin-bottom:6px!important}
.elementor-element-c5c8f78 h4{font-size:24px!important;line-height:1.15!important;margin-top:0!important;margin-bottom:0!important}
.gb-tagline-sub{max-width:560px;margin:22px auto 0!important;text-align:center;font-size:17px;line-height:1.6;color:#fff}
@media (max-width:767px){
  .elementor-element-c5c8f78 h4{font-size:21px!important}
  .gb-tagline-sub{font-size:15px;max-width:340px;margin-top:18px!important}
}
/* desktop HOST / JOIN: same shape, 30% less tall */
@media (min-width:768px){
  .elementor-element-7678358 .qodef-m-image img{height:auto!important;aspect-ratio:1/1.05;object-fit:cover}
}
/* "View our rental options" button */
.gb-rental-btn{margin-top:30px}
.gb-rental-btn--mobile{padding:26px 24px 8px;text-align:center}
/* desktop: photo as tall as the whole text block (including the button) */
@media (min-width:768px){
  .elementor-element-af3b926{align-items:stretch}
  .elementor-element-8d5acb6{align-self:stretch}
  .elementor-element-8d5acb6>.elementor-widget,.elementor-element-8d5acb6 .elementor-widget-container{height:100%}
  .elementor-element-8d5acb6 img{height:100%;width:100%;object-fit:cover}
}
/* mobile: events as two columns */
@media (max-width:767px){
  .elementor-element-1e76306{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding-left:14px;padding-right:14px;box-sizing:border-box}
  .elementor-element-1e76306>.elementor-widget{width:auto!important;max-width:none!important;margin:0!important}
  .elementor-element-1e76306 .qodef-m-title{font-size:18px;line-height:1.2}
}

/* 21. Space photo banner after HOST/JOIN (round 3) */
.gb-space-banner{width:100vw;max-width:100vw;margin:0 calc(50% - 50vw);padding:0;line-height:0;background:#0b2121;position:relative}
.gb-space-banner img{display:block;width:100%;height:auto;aspect-ratio:2.6/1;object-fit:cover;object-position:center 45%}
@media(max-width:767px){.gb-space-banner img{aspect-ratio:2/1}}

/* 22. Round 3 polish (desktop/tablet): HOST/JOIN top spacing, rental button aligned with the bullets */
@media (min-width:768px){
  .elementor-element-7678358{padding-top:var(--gb-hj-top,110px)!important}
  .elementor-element-bd49e06 .gb-rental-btn--desktop{align-self:flex-end;width:70%;max-width:70%;text-align:left;box-sizing:border-box}
}
@media (max-width:767px){
  .gb-rental-btn--mobile{padding:0 24px 30px!important}
  .elementor-element-b4655e8 .qodef-swiper-container:not(.gb-hero-ready){opacity:0;animation:gb-hero-reveal .01s linear 3s forwards}
  .elementor-element-b4655e8 .qodef-swiper-container.gb-hero-ready{opacity:1}
}
@keyframes gb-hero-reveal{to{opacity:1}}
/* 23. Phones: Kids Birthdays hero photo zoomed on the kids (hides the restroom sign) */
@media (max-width:767px){
  .elementor-element-b4655e8 .swiper-slide img[src*="IMG_6614_Original"]{object-fit:cover;object-position:55% 50%;transform:scale(1.4);transform-origin:55% 100%}
  .elementor-element-b4655e8 .swiper-slide .qodef-m-image{overflow:hidden}
}

/* 24. Phones: new Baby Shower photo (vertical crop) in the event-types slider */
@media (max-width:767px){
  .elementor-element-5c82ecc .qodef-m-images .qodef-m-image:nth-child(2){background-image:url(/img/gb-baby-shower-mobile.webp)!important;background-size:cover;background-position:center}
  .elementor-element-5c82ecc .qodef-m-images .qodef-m-image:nth-child(2) img{opacity:0}
}

/* 25. Phones: inquiry forms centered (equal side margins; labels stay left-aligned) */
@media (max-width:767px){
  .elementor-element-a839960>.elementor-widget-container{padding:0!important}
  form[data-inquiry]{margin-left:10px;margin-right:10px;box-sizing:border-box}
  /* 8-photo gallery: top/bottom padding equal to the side padding (7%) */
  .elementor-element-f616571{padding-top:7%!important;padding-bottom:7%!important}
}

/* 26. Desktop: space above the "join events at green boutique" heading = space below the "why host" block (100px) */
@media (min-width:1025px){
  .elementor-element-a9e4fe4{padding-top:77px!important}
}

/* 27. Last-minute page, phones: wedding-style horizontal photos, consistent block spacing */
@media (max-width:767px){
  /* photos: horizontal 4:3, first one flush under the header, second inset like the wedding page */
  .elementor-element-3f9bb226{padding:0!important;margin-top:0!important}
  .elementor-element-06f59ee,.elementor-element-e125323,.elementor-element-06f59ee .elementor-widget-container,.elementor-element-e125323 .elementor-widget-container{margin:0!important;padding:0!important}
  .elementor-element-06f59ee .qodef-e-inner,.elementor-element-e125323 .qodef-e-inner{overflow:hidden}
  .elementor-element-06f59ee img,.elementor-element-e125323 img{display:block;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover}
  .elementor-element-06f59ee img{object-position:50% 30%}
  .elementor-element-e125323{padding:0 10px!important;box-sizing:border-box}
  /* text blocks: same vertical rhythm and the same side margins */
  .elementor-element-6377e4e,.elementor-element-3a5e6846,.elementor-element-7aa10546,.elementor-element-585a753c{padding-left:24px!important;padding-right:24px!important;box-sizing:border-box}
  .elementor-element-6377e4e .elementor-widget,.elementor-element-3a5e6846 .elementor-widget,.elementor-element-7aa10546 .elementor-widget,.elementor-element-585a753c .elementor-widget{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  /* zoom-out entrance (added by gb-ui.js) */
  .gb-z{transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .gb-z.gb-in{transform:scale(1)}
}
@media (max-width:767px){
  .elementor-element-6377e4e>.e-con-inner,.elementor-element-585a753c>.e-con-inner{padding-top:var(--gb-lm-pt,75px)!important;padding-bottom:var(--gb-lm-pb,75px)!important}
  .elementor-element-6377e4e .qodef-m-title{margin-top:0!important}
  .elementor-element-3a5e6846 .elementor-widget-container,.elementor-element-7aa10546 .elementor-widget-container,.elementor-element-6377e4e .elementor-widget-container,.elementor-element-585a753c .elementor-widget-container{padding-left:0!important;padding-right:0!important}
}
@media (max-width:767px){
  .elementor-element-6377e4e>.e-con-inner,.elementor-element-3a5e6846>.e-con-inner,.elementor-element-7aa10546>.e-con-inner,.elementor-element-585a753c>.e-con-inner{padding-left:0!important;padding-right:0!important}
  .elementor-element-7aa85ee{padding-left:0!important;padding-right:0!important;padding-top:0!important;padding-bottom:0!important}
  .elementor-element-585a753c>.e-con-inner{padding-top:75px!important;padding-bottom:75px!important}
  .elementor-element-3a5e6846>.e-con-inner{padding-top:var(--gb-inc-pt,66px)!important}
  .elementor-element-7aa10546>.e-con-inner{padding-bottom:var(--gb-inc-pb,50px)!important}
}
@media (max-width:767px){
  .elementor-element-3a5e6846 .e-con,.elementor-element-7aa10546 .e-con{padding-left:0!important;padding-right:0!important}
  .elementor-element-3a5e6846>.e-con-inner{padding-top:41px!important}
  .elementor-element-7aa10546>.e-con-inner{padding-bottom:55px!important}
}

/* 28. Last-minute page gallery: always 5 in one row (tablet/desktop); two columns on phones (6th photo is phone-only) */
.gb-only-mobile{display:none!important}
.elementor-element-44139c50 .qodef-grid-inner{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0!important;width:100%}
.elementor-element-44139c50 .qodef-grid-item{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important}
.elementor-element-44139c50 .qodef-grid-item img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
@media (max-width:767px){
  .gb-only-mobile{display:block!important}
  .elementor-element-44139c50{padding:7%!important}
  .elementor-element-44139c50 .qodef-grid-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .elementor-element-44139c50 .elementor-widget-container{padding:0!important;margin:0!important}
}
@media (max-width:767px){
  .elementor-element-06f59ee .qodef-grid-inner,.elementor-element-e125323 .qodef-grid-inner{height:auto!important;display:block!important;margin:0!important;position:static!important}
  .elementor-element-06f59ee .qodef-grid-item,.elementor-element-e125323 .qodef-grid-item{position:static!important;top:auto!important;left:auto!important;width:100%!important;margin:0!important;padding:0!important;transform:none!important;height:auto!important}
  .elementor-element-06f59ee .qodef-qi-grid-masonry-sizer,.elementor-element-e125323 .qodef-qi-grid-masonry-sizer{display:none!important}
  .elementor-element-3f9bb226{padding-bottom:0!important}
  /* intro text and button block under the first photo: same side margin as the other blocks */
  .elementor-element-a17caad .elementor-widget-container{padding:34px 24px 40px!important;box-sizing:border-box}
  .elementor-element-e125323{margin:0 0 40px!important}
}
@media (max-width:767px){
  .elementor-element-3f9bb226>.e-con-inner{padding:0!important;gap:0!important}
}

/* 29. Last-minute page: phone-only line breaks */
@media (min-width:768px){.gb-br-m{display:none}}