/* ============================================================
   GAIA DO MAR — CENTERED LAYOUT THEME
   Load AFTER assets/style.css:
   <link rel="stylesheet" href="assets/centered.css">
   ============================================================ */

/* ---------- 1. Hero — editorial bottom-left composition ----------
   The hero keeps the original left-side text layout (professional
   resort style); the rest of the page uses centered headings. */
.hero h1{
  max-width:900px;
  font-size:clamp(36px,4.2vw,62px) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
}

/* ---------- 1b. Header — nav words + logo as ONE centered block ----------
   The menu button stays pinned left and BOOK NOW pinned right;
   everything else sits together in the exact middle of the header. */
.nav.brand-centered-nav{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:0 !important;
  grid-template-columns:none !important;
}
.nav.brand-centered-nav .nav-links-left{
  padding:0 !important;
  flex:0 0 auto;
  justify-content:flex-start !important;
}
.nav.brand-centered-nav .nav-links-right{
  padding:0 !important;
  flex:0 0 auto;
  justify-content:flex-end !important;
  margin-right:48px; /* tight next to the menu bars */
  gap:44px !important;
}
.nav.brand-centered-nav .nav-links-left{
  gap:44px !important;
}
.brand.brand-logo-only{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  width:92px !important;
  height:92px !important;
}
.brand.brand-logo-only img{
  height:82px !important;
  max-width:92px !important;
}
.header{
  height:92px !important;
  position:absolute !important;
  top:0;
  left:0;
  right:0;
  background:transparent !important;
  border-bottom:0 !important;
  backdrop-filter:none !important;
  z-index:90;
}
/* white line from the O of OFFERS to the menu bars */
.nav.brand-centered-nav{
  height:100%;
  border-bottom:1px solid rgba(255,255,255,.75);
}
/* white header text and icons */
.header .nav-links a,
.header .utility-link{
  color:#fff !important;
}
.header .nav-links a:hover,
.header .utility-link:hover{
  color:var(--gaia-gold,#d6ad57) !important;
}
.header .menu-button i{
  background:#fff !important;
}
.nav.brand-centered-nav .menu-button{
  position:absolute;
  right:0;
  left:auto;
  top:50%;
  transform:translateY(-50%);
}
.nav-links{font-size:10px !important;letter-spacing:.13em;gap:26px !important;}
.nav-links a{padding:6px 0;}
@media(max-width:1180px){
  .header{height:84px !important;}
  .brand.brand-logo-only{margin:0 !important;width:80px !important;height:80px !important;}
  .brand.brand-logo-only img{height:72px !important;max-width:80px !important;}
  .nav-links{font-size:8px !important;gap:14px !important;}
}
@media(max-width:760px){
  .header{height:70px !important;}
  .brand.brand-logo-only{margin:0 !important;width:60px !important;height:60px !important;}
  .brand.brand-logo-only img{height:54px !important;max-width:60px !important;}
}

/* ---------- 2. Section headings — centered everywhere ---------- */
.heading{
  text-align:center;
}
.heading>p:not(.eyebrow){
  margin-left:auto;
  margin-right:auto;
}
.heading.split{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:center;
}
.heading.split .light-copy{
  max-width:620px;
  margin:0 auto;
}
.filter-set{
  justify-content:center;
}

/* ---------- 3. Intro — single centered column ---------- */
.intro-grid{
  grid-template-columns:1fr;
  gap:36px;
  justify-items:center;
  align-items:center;
  text-align:center;
}
.intro-copy{
  max-width:660px;
}

/* ---------- 4. Weddings & Celebrations — centered over image ---------- */
.celebration-shade{
  background:linear-gradient(0deg,rgba(3,14,23,.8),rgba(3,14,23,.22));
}
.celebration-copy{
  margin:0 auto;
  align-items:center;
  text-align:center;
  width:min(660px,calc(100% - 64px));
}

/* ---------- 5. Gaia Circle membership — centered ---------- */
.membership-layout{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:30px;
}
.membership-layout>div>p:not(.eyebrow){
  margin-left:auto;
  margin-right:auto;
}

/* ---------- 6. Newsletter — centered ---------- */
.newsletter-layout{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:36px;
}
.newsletter-layout form{
  width:min(520px,100%);
}

/* ---------- 6b. Experiences — four balanced cards ---------- */
.experience-grid{
  grid-template-columns:repeat(4,1fr);
}
.experience-grid h3{
  font-size:31px;
}
@media(max-width:1180px){
  .experience-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .experience-grid{grid-template-columns:1fr;}
}

/* ---------- 7. Leisure & Activities — sliding carousel ---------- */
.activity-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
}
.activity-viewport{
  overflow:hidden;
  flex:1;
}
.activity-grid{
  display:flex !important;
  gap:14px;
  transition:transform .6s ease;
  will-change:transform;
}
.activity-grid:after{
  display:none !important;
}
.activity-grid article{
  flex:0 0 calc((100% - 28px)/3);
}
.activity-grid article:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
}
.activity-arrow{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--gaia-gold,#d6ad57);
  background:var(--gaia-gold,#d6ad57);
  color:#fff;
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.2s;
}
.activity-arrow:hover{
  background:#0a1c2a;
  border-color:#0a1c2a;
  color:#fff;
}
@media(max-width:1180px){
  .activity-grid article{flex:0 0 calc((100% - 14px)/2);}
}
@media(max-width:760px){
  .activity-grid{display:flex !important;}
  .activity-grid article{flex:0 0 100%;}
  .activity-arrow{width:38px;height:38px;font-size:15px;}
}

/* ---------- 8. Footer — ivory background, no brand block ---------- */
footer.sun-footer{
  background:#f0e8d9;
}
.sun-footer-grid{
  grid-template-columns:.9fr .8fr .75fr 1.05fr 1.5fr;
}
.sun-membership{
  border-top:0;
  padding-top:0;
}
/* Membership: SIGN UP under the text; hovers to BOOK NOW navy with beige text */
.sun-footer-action section{
  grid-template-columns:1fr;
  align-items:start;
}
.sun-footer-action .sun-outline-button{
  justify-self:start;
  margin-top:18px;
}
.sun-footer-action .sun-outline-button:hover{
  background:var(--gaia-navy,#0a1c2a);
  border-color:var(--gaia-navy,#0a1c2a);
  color:#f0e8d9;
}

/* Help / email bubble — same colors as BOOK NOW (navy, gold on hover) */
.help-bubble{
  background:var(--gaia-navy,#0a1c2a) !important;
  transition:.2s;
}
.help-bubble:hover{
  background:var(--gaia-gold,#d6ad57) !important;
}
.help-bubble:hover .help-icon path{
  stroke:var(--gaia-navy,#0a1c2a);
}

/* ---------- 9. Single header — utility items merged in ---------- */
.header .utility-link{
  border:0;
  background:transparent;
  padding:6px 0;
  color:inherit;
  font-size:10px !important;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:700;
}
.header .utility-link:hover{
  color:var(--gaia-gold,#d6ad57);
}
.header .member-mini{
  font-size:10px;
  letter-spacing:.1em;
  font-weight:700;
}
.header .utility-popover{
  position:absolute;
  z-index:130;
  top:calc(100% + 2px);
}
.header .collection-menu{left:calc(50% - 560px);}
.header .currency-menu{right:calc(50% - 560px);}
.header .language-menu{right:calc(50% - 460px);}
@media(max-width:1180px){
  .header .collection-menu{left:24px;}
  .header .currency-menu{right:24px;}
  .header .language-menu{right:24px;}
}
@media(max-width:760px){
  .header .collection-menu,.header .currency-menu,.header .language-menu{left:12px;right:12px;width:auto;}
}

/* ---------- Mobile — keep everything centered ---------- */
@media(max-width:760px){
  .heading.split{
    display:flex;
  }
  .heading.split>.line-link,
  .filter-set{
    margin-top:0;
  }
  .celebration-copy{
    margin:0 auto;
    width:calc(100% - 48px);
  }
  .membership-layout{
    grid-template-columns:1fr;
  }
  .membership-layout>button{
    grid-column:auto;
    justify-self:center;
  }
}



/* ============================================================
   10. Hero composition (desktop / large tablet)
   ============================================================ */
.hero-content{
  justify-content:center;
  padding-top:50svh;
  padding-bottom:0;
}
/* the lift the headline had before (was a saved editor offset, now part of
   the design so it survives translation); phones reset it in section 13 */
.hero-content>h1{
  transform:translateY(-130px);
}

/* ============================================================
   11. Shared container geometry
   The hero text and the booking box always use the same edges.
   --gaia-gutter is the side padding, per breakpoint.
   ============================================================ */
:root{ --gaia-gutter:35px; }
.container{
  width:min(1370px,calc(100% - var(--gaia-gutter) * 2));
  margin-left:auto;
  margin-right:auto;
}
.booking-widget{
  width:min(1370px,calc(100% - var(--gaia-gutter) * 2));
  margin-left:auto;
  margin-right:auto;
  margin-top:-118px; /* desktop overlap; app.js fine-tunes above 900px */
}
/* the booking row also carries .container — it must NOT apply the gutter a
   second time inside the already-inset booking box */
.booking-widget>.container,
.booking-row{
  width:100%;
}
.hero-content>h1,
.hero-content>p{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
  overflow-wrap:break-word;
}

/* no sideways scrolling, ever */
html,body{
  max-width:100%;
  overflow-x:hidden;
}
img,video,iframe{ max-width:100%; }
.container,.booking-row,.nav,.mega-grid{ min-width:0; }

/* ============================================================
   12. Tablets
   ============================================================ */
@media(max-width:1180px){
  :root{ --gaia-gutter:28px; }
  .sun-footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .sun-footer-action{ grid-column:span 3; }
}

/* ============================================================
   13. Phones and small tablets — one predictable layout.
   No fixed widths, no transforms, no script-driven offsets.
   ============================================================ */
@media(max-width:900px){
  :root{ --gaia-gutter:20px; }

  /* --- headings: scale with the screen instead of a 46px floor --- */
  .hero h1,
  .heading h2,
  .intro-grid h2,
  .destination-copy h2,
  .dining-copy h2,
  .wellness-layout h2,
  .celebration-copy h2,
  .membership-layout h2,
  .newsletter-layout h2,
  .booking-step h2,
  .simple-dialog h2,
  .map-dialog h2{
    font-size:clamp(27px,7.4vw,40px) !important;
    line-height:1.14 !important;
    letter-spacing:-.02em !important;
    overflow-wrap:break-word;
    hyphens:none;
  }
  .villa-panel h3,
  .offer h3,
  .experience-grid h3{ font-size:clamp(22px,5.6vw,28px) !important; }

  /* --- hero --- */
  .hero{ min-height:92svh; }
  .hero-content{
    justify-content:flex-end !important;
    padding-top:0 !important;
    padding-bottom:calc(36svh + 52px) !important; /* box overlap + fixed gap */
    text-align:left;
  }
  .hero h1{
    max-width:100% !important;
    transform:none !important;   /* desktop drag offsets don't apply on phones */
    margin:0 !important;
  }
  .hero-content>p:not(.eyebrow){ font-size:15px; max-width:100%; }

  /* --- booking box: same edges as the heading, gentle overlap --- */
  .booking-widget{
    /* sits just under the headline, like the desktop composition;
       svh keeps the same proportion on every phone */
    margin-top:-36svh;
    margin-bottom:0;
  }
  .booking-row{
    grid-template-columns:1fr !important;
    box-shadow:0 18px 40px rgba(4,24,35,.28);
  }
  .booking-cell{
    min-height:0;
    padding:11px 16px;
    border-right:0;
    border-bottom:1px solid rgba(7,25,37,.13);
  }
  /* every row fills the box edge to edge (buttons size to content otherwise) */
  .booking-row>*{
    width:100%;
    justify-self:stretch;
    align-self:stretch;
    box-sizing:border-box;
  }
  .booking-row{ overflow:hidden; }
  .booking-cell:last-of-type{ border-bottom:0; }
  .booking-cell label{ margin-bottom:5px; }
  .booking-cell strong{ font-size:15px; }
  .destination-selector small{ display:none; }
  .date-cell{ grid-column:auto !important; }
  .date-inputs{ flex-wrap:wrap; }
  .date-inputs input{ flex:1 1 40%; width:auto; min-width:0; font-size:16px; }
  .availability-btn{ grid-column:auto !important; min-height:54px; padding:16px; }
  .guests-popover{
    position:fixed;
    left:var(--gaia-gutter);
    right:var(--gaia-gutter);
    top:auto;
    bottom:16px;
    width:auto;
    max-width:none;
    max-height:70svh;
    overflow:auto;
  }
  .language-menu,
  .collection-menu{
    max-width:calc(100vw - var(--gaia-gutter) * 2);
  }

  /* --- header: logo centred, menu button on the gutter line --- */
  .header{ height:74px !important; }
  .nav.brand-centered-nav{ position:relative; }
  .brand.brand-logo-only{
    width:58px !important;
    height:58px !important;
  }
  .brand.brand-logo-only img{ height:52px !important; max-width:58px !important; }
  .nav.brand-centered-nav .menu-button{
    right:0;
    width:44px;
    height:44px;
    padding:0;
    align-items:flex-end;
    justify-content:center;
  }
  .nav.brand-centered-nav .menu-button i{ width:26px; }

  /* --- section rhythm --- */
  .section{ padding:64px 0; }
  .section-sand,.section-dark,.dining-section{ padding:56px 0; }
  .heading{ margin-bottom:28px; }

  /* --- stacked layouts --- */
  .experience-grid,
  .offer-grid,
  .event-grid,
  .journal-grid,
  .intro-grid,
  .villa-stage,
  .dining-layout,
  .wellness-layout,
  .destination-section,
  .sustainability-grid{
    grid-template-columns:1fr !important;
  }
  .experience-grid article{ height:300px; }
  .villa-image{ height:290px; }
  .dining-images{ height:300px; }
  .wellness-image{ height:300px; }
  .destination-visual{ min-height:280px; }
  .celebrations-section{ height:auto; min-height:520px; }
  .celebration-copy{ width:100%; padding:64px 0; }

  /* --- carousel --- */
  .activity-carousel{ gap:10px; }
  .activity-grid article{ flex:0 0 100%; }
  .activity-arrow{ width:42px; height:42px; font-size:16px; }

  /* --- footer --- */
  .sun-footer-grid{ grid-template-columns:1fr 1fr; gap:26px 18px; }
  .sun-footer-action{ grid-column:span 2; }
  .sun-footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }

  /* --- touch targets and form text --- */
  .nav-links a,
  .header .utility-link,
  .line-link,
  .filter-set button,
  .villa-switcher button,
  .dining-menu button,
  .sun-footer-column a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .sun-footer-column a{ margin-bottom:2px; }
  input,textarea,select{ font-size:16px; }

  /* --- dialogs --- */
  .dialog{
    max-width:calc(100% - var(--gaia-gutter) * 2);
    width:calc(100% - var(--gaia-gutter) * 2);
  }
  .booking-dialog-layout,
  .map-dialog,
  .simple-dialog{ padding:38px 18px 22px; }
  .form-grid{ grid-template-columns:1fr; }
  .available-villas{ grid-template-columns:1fr; }
}

/* ============================================================
   14. Small phones (320–430px)
   ============================================================ */
@media(max-width:430px){
  :root{ --gaia-gutter:20px; }
  .hero-content{ padding-bottom:calc(38svh + 46px) !important; }
  .booking-widget{ margin-top:-38svh; }
  .booking-cell{ padding:10px 14px; }
  .activity-arrow{ width:36px; height:36px; font-size:15px; }
  .help-bubble{ width:52px; height:52px; }
  .help-icon{ width:26px; height:26px; }
  .help-card{ min-width:0; max-width:calc(100vw - 84px); }
}
@media(max-width:360px){
  :root{ --gaia-gutter:18px; }
  .hero h1{ font-size:clamp(24px,7.6vw,30px) !important; }
  .sun-footer-grid{ grid-template-columns:1fr; }
  .sun-footer-action{ grid-column:auto; }
}


/* ============================================================
   15. Section pages (accommodation.html, dining.html, …)
   ============================================================ */
.page-banner{
  position:relative;
  min-height:58svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#0a1c2a;
}
.page-banner>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-banner-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(3,14,24,.72),rgba(3,14,24,.28) 55%,rgba(3,14,24,.55));
}
.page-banner-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding-bottom:150px;
}
.page-banner-content h1{
  font:500 clamp(34px,5vw,68px)/1.02 "Playfair Display",Georgia,serif;
  letter-spacing:-.03em;
  margin:0;
  max-width:900px;
}
body.subpage .booking-widget{
  margin-top:-96px;
}
body.subpage main>section:not(.page-banner):not(.booking-widget){
  padding-top:96px;
}
@media(max-width:900px){
  .page-banner{ min-height:46svh; }
  .page-banner-content{ padding-bottom:120px; }
  .page-banner-content h1{ font-size:clamp(28px,7.4vw,40px); }
  body.subpage .booking-widget{ margin-top:-72px; }
  body.subpage main>section:not(.page-banner):not(.booking-widget){ padding-top:56px; }
}