/* Montenegro Atlas — Beach template */
:root{
  --ma-navy:#063653;
  --ma-navy-2:#0b4568;
  --ma-text:#0b2f49;
  --ma-muted:#6d7d88;
  --ma-line:#dce5ea;
  --ma-soft:#f7fafc;
  --ma-blue:#2d82d6;
  --ma-yellow:#f5c342;
  --ma-radius:16px;
  --ma-shadow:0 10px 30px rgba(6,54,83,.08);
}
.ma-beach{font-family:inherit;color:var(--ma-text);background:#fff}
.ma-beach *{box-sizing:border-box}
.ma-hero{position:relative;min-height:410px;background:#0d526e var(--ma-hero) center/cover no-repeat;color:#fff;overflow:hidden}
.ma-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,33,51,.78) 0%,rgba(1,33,51,.48) 42%,rgba(1,33,51,.10) 72%,rgba(1,33,51,.12) 100%)}
.ma-hero-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;min-height:410px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.75fr);align-items:stretch}
.ma-hero-copy{padding:48px 40px 52px}
.ma-breadcrumbs{display:flex;gap:9px;flex-wrap:wrap;font-size:13px;opacity:.84;margin-bottom:28px}
.ma-hero h1{font-size:clamp(42px,5vw,64px);line-height:1.05;margin:0 0 16px;color:#fff;letter-spacing:-.03em}
.ma-location{font-weight:600;font-size:14px;margin-bottom:16px}
.ma-hero-intro{max-width:620px;font-size:18px;line-height:1.55;margin:0 0 26px;color:#fff}
.ma-hero-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.ma-action{display:inline-flex;gap:8px;align-items:center;color:#fff;background:transparent;border:0;padding:8px 0;text-decoration:none;font-weight:600;cursor:pointer}
.ma-action:hover{color:#fff;opacity:.82}
.ma-hero-gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:rgba(255,255,255,.18)}
.ma-hero-thumb{position:relative;border:0;padding:0;overflow:hidden;background:#ddd;cursor:pointer;min-height:195px}
.ma-hero-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.ma-hero-thumb:hover img{transform:scale(1.025)}
.ma-photo-count{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,36,55,.45);color:#fff;font-weight:700;font-size:15px}
.ma-facts-wrap{max-width:1220px;margin:-34px auto 0;position:relative;z-index:5;padding:0 24px}
.ma-facts{background:#fff;border:1px solid var(--ma-line);border-radius:14px;box-shadow:var(--ma-shadow);display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden}
.ma-fact{min-height:92px;display:flex;align-items:center;gap:14px;padding:18px 22px;border-right:1px solid var(--ma-line)}
.ma-fact:last-child{border-right:0}
.ma-fact-icon{font-size:28px;line-height:1;color:var(--ma-navy)}
.ma-fact small,.ma-fact strong{display:block}
.ma-fact small{font-size:11px;color:var(--ma-muted);margin-bottom:4px}
.ma-fact strong{font-size:13px}
.ma-checked{text-align:center;font-size:11px;color:var(--ma-muted);padding:11px 0 0}
.ma-shell{max-width:1220px;margin:18px auto 0;padding:0 24px 60px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px}
.ma-main{min-width:0}
.ma-section{padding:22px 0 10px}
.ma-section h2{font-size:25px;line-height:1.2;margin:0 0 14px;color:var(--ma-text)}
.ma-section h3{color:var(--ma-text)}
.ma-section>p,.ma-prose{font-size:15px;line-height:1.75;color:#3b4f5c}
.ma-prose p:first-child{margin-top:0}
.ma-facilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ma-facility{display:flex;align-items:center;gap:12px;border:1px solid var(--ma-line);background:#fff;border-radius:10px;padding:13px 14px;box-shadow:0 3px 12px rgba(6,54,83,.04)}
.ma-facility-icon{width:30px;height:30px;display:grid;place-items:center;font-size:18px;color:var(--ma-navy);font-weight:700}
.ma-facility strong,.ma-facility small{display:block}
.ma-facility strong{font-size:12px;margin-bottom:2px}
.ma-facility small{font-size:11px;color:var(--ma-muted)}
.ma-facility.is-no .ma-facility-icon{color:#d63e3e}
.ma-callout-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.ma-callout{display:flex;gap:14px;border:1px solid var(--ma-line);border-radius:12px;padding:18px 20px;min-height:105px}
.ma-price{background:#f2f8ff;border-color:#c9def2}
.ma-tip{background:#fff9e9;border-color:#f4deb0}
.ma-callout-icon{font-size:22px;color:var(--ma-blue)}
.ma-tip .ma-callout-icon{color:#f2b118}
.ma-callout strong{font-size:13px}
.ma-callout-big{font-weight:700;font-size:15px;margin:7px 0}
.ma-callout small,.ma-callout p{font-size:12px;color:#596a76;margin:5px 0 0}
.ma-getting-layout{display:grid;grid-template-columns:1fr 1.45fr;gap:24px;align-items:stretch}
.ma-transport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ma-transport{border:1px solid var(--ma-line);border-radius:10px;padding:16px 14px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.ma-transport>span{font-size:22px}
.ma-transport strong{font-size:13px}
.ma-transport small{font-size:11px;line-height:1.45;color:var(--ma-muted)}
.ma-map-card{overflow:hidden;border-radius:10px;min-height:320px;background:#eef3f6}
.ma-map-card iframe,.ma-side-map iframe{width:100%!important}
.ma-map-fallback{height:320px;display:grid;place-items:center;padding:20px;color:var(--ma-muted);text-align:center}
.ma-explore-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ma-explore-card{position:relative;height:150px;border:0;padding:0;border-radius:8px;overflow:hidden;background:#d8e2e8;cursor:pointer}
.ma-explore-card img{width:100%;height:100%;object-fit:cover;display:block}
.ma-explore-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,20,32,.72))}
.ma-explore-card span{position:absolute;z-index:2;left:12px;bottom:10px;color:#fff;font-weight:700;font-size:12px}
.ma-outline-btn{display:block;margin:18px auto 0;background:#fff;border:1px solid #9eb0ba;border-radius:5px;color:var(--ma-text);padding:10px 22px;font-size:11px;font-weight:700;cursor:pointer}
.ma-nearby-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ma-nearby-card{border:1px solid var(--ma-line);border-radius:10px;padding:18px;min-height:180px;background:#fff}
.ma-nearby-card h3{font-size:15px;margin:0 0 14px}
.ma-mini-place{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ma-text);margin:10px 0}
.ma-mini-thumb{width:46px;height:46px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:#eaf0f3;flex:0 0 auto}
.ma-mini-thumb img{width:100%;height:100%;object-fit:cover}
.ma-mini-place strong,.ma-mini-place small{display:block}
.ma-mini-place strong{font-size:12px}
.ma-mini-place small{font-size:10px;color:var(--ma-muted)}
.ma-muted{font-size:12px;color:var(--ma-muted)}
.ma-more-beaches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ma-more-card{position:relative;height:120px;border-radius:8px;overflow:hidden;background:#dde7ec;text-decoration:none;color:#fff}
.ma-more-card img{width:100%;height:100%;object-fit:cover}
.ma-more-card:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,20,32,.76))}
.ma-more-card>span{position:absolute;z-index:2;left:12px;bottom:10px}
.ma-more-card strong,.ma-more-card small{display:block}
.ma-more-card strong{font-size:13px}
.ma-more-card small{font-size:10px;opacity:.9}
.ma-sidebar{padding-top:22px}
.ma-side-card{border:1px solid var(--ma-line);border-radius:12px;background:#fff;padding:22px;box-shadow:0 6px 20px rgba(6,54,83,.05)}
.ma-sticky-card{position:sticky;top:24px}
.ma-side-card h3{font-size:24px;margin:0 0 14px}
.ma-side-line{font-size:13px;margin:8px 0;color:#526572}
.ma-directions-btn{display:block;text-align:center;text-decoration:none;background:var(--ma-navy);color:#fff!important;border-radius:4px;padding:13px 14px;margin:16px 0;font-size:12px;font-weight:700}
.ma-side-map{border-radius:7px;overflow:hidden;background:#eef3f6;margin-bottom:18px}
.ma-side-card h4{font-size:13px;margin:16px 0 8px}
.ma-good-to-know{margin:0}
.ma-good-to-know>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:5px 0}
.ma-good-to-know dt,.ma-good-to-know dd{font-size:11px;margin:0}
.ma-good-to-know dt{color:#586c78}
.ma-good-to-know dd{color:var(--ma-text);font-weight:600}
.ma-lightbox{position:fixed;inset:0;background:rgba(0,19,31,.92);z-index:999999;display:none;align-items:center;justify-content:center;padding:48px}
.ma-lightbox.is-open{display:flex}
.ma-lightbox img{max-width:min(1100px,86vw);max-height:82vh;object-fit:contain}
.ma-lightbox-close,.ma-lightbox-prev,.ma-lightbox-next{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:46px;height:46px;border-radius:50%;font-size:26px;cursor:pointer}
.ma-lightbox-close{top:20px;right:20px}
.ma-lightbox-prev{left:24px;top:50%;transform:translateY(-50%)}
.ma-lightbox-next{right:24px;top:50%;transform:translateY(-50%)}
.ma-lightbox-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px}
@media (max-width:1100px){
  .ma-hero-inner{grid-template-columns:1fr}
  .ma-hero-gallery{display:none}
  .ma-facts{grid-template-columns:repeat(3,1fr)}
  .ma-fact:nth-child(3){border-right:0}
  .ma-fact:nth-child(n+4){border-top:1px solid var(--ma-line)}
  .ma-shell{grid-template-columns:1fr}
  .ma-sidebar{padding-top:0}
  .ma-sticky-card{position:static}
}
@media (max-width:820px){
  .ma-hero{min-height:360px}
  .ma-hero-inner{min-height:360px}
  .ma-hero-copy{padding:38px 22px 48px}
  .ma-hero-intro{font-size:16px}
  .ma-facts-wrap{margin-top:-20px;padding:0 14px}
  .ma-facts{grid-template-columns:1fr 1fr}
  .ma-fact,.ma-fact:nth-child(3){border-right:1px solid var(--ma-line);border-top:1px solid var(--ma-line)}
  .ma-fact:nth-child(1),.ma-fact:nth-child(2){border-top:0}
  .ma-fact:nth-child(even){border-right:0}
  .ma-shell{padding:0 16px 42px;gap:22px}
  .ma-facilities{grid-template-columns:1fr 1fr}
  .ma-callout-grid,.ma-getting-layout,.ma-nearby-grid{grid-template-columns:1fr}
  .ma-transport-grid{grid-template-columns:1fr}
  .ma-explore-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .ma-explore-card{min-width:180px;scroll-snap-align:start}
  .ma-more-beaches{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .ma-breadcrumbs{font-size:11px}
  .ma-hero h1{font-size:39px}
  .ma-hero-actions{gap:18px}
  .ma-facts{grid-template-columns:1fr}
  .ma-fact,.ma-fact:nth-child(n){border-right:0;border-top:1px solid var(--ma-line)}
  .ma-fact:first-child{border-top:0}
  .ma-facilities{grid-template-columns:1fr}
  .ma-more-beaches{grid-template-columns:1fr}
  .ma-lightbox{padding:20px}
}


/* GeoDirectory gallery adapter */
.ma-gd-gallery{
  min-width:0;
  overflow:hidden;
}
.ma-gd-gallery > *{
  width:100%;
  height:100%;
}
.ma-gd-gallery .geodir-post-slider,
.ma-gd-gallery .geodir-images,
.ma-gd-gallery .geodir-gallery,
.ma-gd-gallery .geodir-post-content-container,
.ma-gd-gallery .geodir-image-container{
  width:100%!important;
  height:100%!important;
  margin:0!important;
}
.ma-gd-gallery ul,
.ma-gd-gallery .geodir-images,
.ma-gd-gallery .geodir-gallery{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr!important;
  gap:2px!important;
  padding:0!important;
  list-style:none!important;
}
.ma-gd-gallery li,
.ma-gd-gallery .geodir-image,
.ma-gd-gallery .geodir-gallery-item{
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
}
.ma-gd-gallery img{
  width:100%!important;
  height:100%!important;
  min-height:195px;
  object-fit:cover!important;
  display:block!important;
  border-radius:0!important;
}
.ma-gallery-placeholder{
  grid-column:1/-1;
  grid-row:1/-1;
  display:grid;
  place-items:center;
  min-height:410px;
  padding:30px;
  background:rgba(255,255,255,.08);
  color:#fff;
  text-align:center;
  font-size:13px;
}

@media (max-width:1100px){
}
@media (max-width:900px){
}


/* V0.1.3 — exact hero gallery + GeoDirectory field icons */
.ma-fact-icon i,
.ma-facility-icon i{
  display:block;
  width:1.25em;
  text-align:center;
  font-style:normal;
}
.ma-hero-thumb-empty{
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.85);
  background:rgba(5,47,72,.55);
  font-size:12px;
  font-weight:700;
}
.ma-hero-gallery .ma-hero-thumb:nth-child(1){border-radius:10px 0 0 0}
.ma-hero-gallery .ma-hero-thumb:nth-child(2){border-radius:0 10px 0 0}
.ma-hero-gallery .ma-hero-thumb:nth-child(3){border-radius:0 0 0 10px}
.ma-hero-gallery .ma-hero-thumb:nth-child(4){border-radius:0 0 10px 0}

/* =========================================================
   V0.1.5 — MOBILE UI MATCHING APPROVED MONTENEGRO ATLAS MOCKUP
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --ma-mobile-pad: 16px;
  }

  html, body { overflow-x: hidden; }
  .montenegro-atlas-beach-page { background:#f5f7f9; }

  /* HEADER */

  /* HERO */
  .ma-hero {
    position:relative;
    min-height:0;
    background-position:center;
    border-radius:0;
  }
  .ma-hero-inner { display:block!important; min-height:0; }
  .ma-hero-copy {
    min-height:590px;
    padding:26px var(--ma-mobile-pad) 18px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
  }
  .ma-hero-overlay {
    background:linear-gradient(
      180deg,
      rgba(2,29,45,.05) 0%,
      rgba(2,29,45,.08) 32%,
      rgba(2,29,45,.58) 61%,
      rgba(2,29,45,.96) 100%
    );
  }
  .ma-breadcrumbs {
    position:static;
    order:1;
    margin:0 0 12px;
    font-size:11px;
    gap:6px;
    opacity:.95;
  }
  .ma-hero h1 {
    order:2;
    margin:0 0 9px;
    max-width:100%;
    font-size:40px;
    line-height:1;
    letter-spacing:-.035em;
  }
  .ma-location {
    order:3;
    margin:0 0 13px;
    font-size:12px;
  }
  .ma-hero-intro {
    order:4;
    max-width:94%;
    margin:0 0 17px;
    font-size:14px;
    line-height:1.55;
  }
  .ma-hero-actions {
    order:5;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    width:100%;
    margin:0;
  }
  .ma-action {
    min-width:0;
    min-height:66px;
    padding:9px 4px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;
    background:rgba(9,74,111,.88);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    font-size:11px;
    backdrop-filter:blur(8px);
  }
  .ma-action > span:first-child,
  .ma-action > i:first-child { font-size:20px; }

  /* Hero thumbnails like approved mockup */
  .ma-hero-gallery {
    display:flex!important;
    gap:7px;
    overflow-x:auto;
    padding:0 var(--ma-mobile-pad) 15px;
    background:#052f49;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .ma-hero-gallery::-webkit-scrollbar { display:none; }
  .ma-hero-thumb,
  .ma-hero-gallery .ma-hero-thumb:nth-child(n) {
    flex:0 0 30%;
    height:92px;
    min-height:92px;
    border-radius:9px!important;
    overflow:hidden;
    scroll-snap-align:start;
  }
  .ma-hero-thumb img {
    width:100%; height:100%;
    object-fit:cover;
    border-radius:9px;
  }
  .ma-photo-count { border-radius:9px; font-size:11px; }

  /* QUICK INFO */
  .ma-facts-wrap {
    margin:0;
    padding:13px var(--ma-mobile-pad) 0;
    background:#f5f7f9;
  }
  .ma-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    overflow:visible;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .ma-fact,
  .ma-fact:nth-child(n) {
    min-width:0;
    min-height:92px;
    padding:13px 12px;
    border:1px solid #dfe7ec;
    border-radius:11px;
    background:#fff;
    display:flex;
    align-items:flex-start;
    gap:9px;
  }
  .ma-fact:last-child:nth-child(odd) { grid-column:1 / -1; }
  .ma-fact-icon { min-width:25px; font-size:20px; }
  .ma-fact small { font-size:9px; line-height:1.25; }
  .ma-fact strong { font-size:11px; line-height:1.35; }
  .ma-checked {
    padding:11px 2px 2px;
    text-align:left;
    font-size:10px;
  }

  /* MAIN SINGLE COLUMN */
  .ma-shell {
    display:block!important;
    width:100%;
    max-width:none;
    margin:0;
    padding:0 var(--ma-mobile-pad) 34px;
  }
  .ma-main, .ma-sidebar { width:100%; }
  .ma-section { padding:23px 0 3px; }
  .ma-section h2 {
    margin:0 0 11px;
    font-size:20px;
    line-height:1.2;
    letter-spacing:-.015em;
  }
  .ma-prose, .ma-section > p {
    font-size:13px;
    line-height:1.62;
  }

  /* FACILITIES */
  .ma-facilities {
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .ma-facility {
    min-height:69px;
    padding:11px 10px;
    border-radius:10px;
    gap:8px;
    align-items:flex-start;
  }
  .ma-facility-icon {
    flex:0 0 23px;
    width:23px; height:23px;
    font-size:15px;
  }
  .ma-facility strong { font-size:10px; }
  .ma-facility small { font-size:9px; }

  /* PRICES */
  .ma-callout-grid {
    display:grid!important;
    grid-template-columns:1fr;
    gap:9px;
  }
  .ma-callout {
    min-height:0;
    padding:14px;
    border-radius:11px;
  }
  .ma-callout-big { font-size:14px; line-height:1.35; }

  /* HOW TO GET THERE */
  .ma-getting-layout { display:block!important; }
  .ma-transport-grid {
    display:grid!important;
    grid-template-columns:1fr;
    gap:8px;
    overflow:visible;
    padding:0;
  }
  .ma-transport {
    min-height:82px;
    padding:13px;
    border-radius:10px;
  }
  .ma-map-card {
    min-height:280px;
    margin-top:11px;
    border-radius:11px;
    overflow:hidden;
  }
  .ma-map-card > *,
  .ma-map-card .geodir-map-wrap,
  .ma-map-card .geodir-map-container { min-height:280px!important; }

  /* EXPLORE */
  .ma-explore-strip {
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr;
    gap:7px;
    overflow:visible;
    padding:0;
  }
  .ma-explore-card {
    min-width:0!important;
    width:auto;
    height:126px;
    border-radius:9px;
  }
  .ma-explore-card:first-child {
    grid-column:1 / -1;
    height:260px;
  }
  .ma-outline-btn {
    width:100%;
    min-height:43px;
    margin-top:10px;
    border-radius:8px;
  }

  /* NEARBY */
  .ma-nearby-grid {
    display:grid!important;
    grid-template-columns:1fr;
    gap:9px;
    overflow:visible;
  }
  .ma-nearby-card {
    min-width:0!important;
    min-height:0;
    padding:13px;
    border-radius:11px;
  }

  /* MORE BEACHES */
  .ma-more-beaches {
    display:flex!important;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:3px;
  }
  .ma-more-beaches::-webkit-scrollbar { display:none; }
  .ma-more-card {
    flex:0 0 42%;
    min-width:42%;
    height:150px;
    border-radius:9px;
    scroll-snap-align:start;
  }

  /* SIDEBAR INFO becomes final content card */
  .ma-sidebar { padding-top:20px; }
  .ma-sticky-card { position:static!important; }
  .ma-side-card {
    padding:16px;
    border-radius:12px;
    box-shadow:none;
  }
  .ma-side-card h3 { font-size:20px; margin-bottom:8px; }
  .ma-directions-btn {
    min-height:45px;
    display:grid;
    place-items:center;
    border-radius:7px;
  }
  .ma-side-map { margin:12px 0 14px; }
  .ma-side-map > *,
  .ma-side-map .geodir-map-wrap,
  .ma-side-map .geodir-map-container { min-height:220px!important; }
  .ma-good-to-know > div {
    padding:7px 0;
    border-bottom:1px solid #e9eef1;
  }
  .ma-good-to-know > div:last-child { border-bottom:0; }

  /* FOOTER/NEWSLETTER: keep narrow and app-like if present */
  .ma-newsletter,
  .ma-footer-inner {
    padding-left:var(--ma-mobile-pad)!important;
    padding-right:var(--ma-mobile-pad)!important;
  }

  /* LIGHTBOX */
  .ma-lightbox { padding:14px; }
  .ma-lightbox img { max-width:100%; max-height:78vh; }
  .ma-lightbox-prev, .ma-lightbox-next {
    width:40px; height:40px; font-size:22px;
  }
  .ma-lightbox-prev { left:8px; }
  .ma-lightbox-next { right:8px; }
}

@media (max-width:420px) {
  .ma-hero-copy { min-height:560px; }
  .ma-hero h1 { font-size:38px; }
  .ma-hero-thumb,
  .ma-hero-gallery .ma-hero-thumb:nth-child(n) {
    flex-basis:31%;
    height:88px;
    min-height:88px;
  }
  .ma-explore-card:first-child { height:235px; }
  .ma-more-card { flex-basis:46%; min-width:46%; }
}


/* =========================================================
   V0.1.6 — desktop refinement
   ========================================================= */

/* Facts and check date are one visual card, as in the approved desktop mockup */
.ma-facts-wrap{max-width:1220px;margin:-34px auto 0;position:relative;z-index:5;padding:0 24px}
.ma-facts-card{
  background:#fff;
  border:1px solid var(--ma-line);
  border-radius:14px;
  box-shadow:var(--ma-shadow);
  overflow:hidden;
}
.ma-facts{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.ma-checked{
  border-top:1px solid #edf1f3;
  padding:10px 18px 11px!important;
  text-align:center!important;
  background:#fff;
  color:#71818c;
  font-size:11px!important;
}

/* Typography closer to approved design */
.ma-section h2{
  color:#073a5a!important;
  font-weight:700!important;
  letter-spacing:-.02em;
}
.ma-nearby-card h3,
.ma-side-card h3,
.ma-side-card h4{
  color:#073a5a;
  font-weight:700;
}

/* How-to-get becomes full-width after the sticky sidebar content ends */
.ma-full-shell{
  max-width:1220px;
  margin:0 auto;
  padding:0 24px;
}
.ma-full-section{
  width:100%;
}
.ma-full-section .ma-getting-layout{
  grid-template-columns:minmax(280px,.7fr) minmax(0,1.55fr);
  gap:20px;
}
.ma-full-section .ma-map-card{
  min-height:360px;
}
.ma-full-section .ma-map-card > *,
.ma-full-section .ma-map-card .geodir-map-wrap,
.ma-full-section .ma-map-card .geodir-map-container{
  min-height:360px!important;
}

/* Sticky sidebar only participates in the upper two-column content */
.ma-sidebar{
  align-self:start;
}
.ma-sticky-card{
  position:sticky;
  top:24px;
}

/* Weather card from approved design */
.ma-weather-card{
  margin:16px -22px -22px;
  padding:16px 18px 14px;
  border-top:1px solid #cfe0ea;
  background:#eef8ff;
  border-radius:0 0 12px 12px;
}
.ma-weather-title{
  font-size:12px;
  font-weight:700;
  color:#0b4163;
  margin-bottom:9px;
}
.ma-weather-main{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:11px;
}
.ma-weather-icon{
  font-size:30px;
}
.ma-weather-temp{
  font-size:28px;
  line-height:1;
  font-weight:700;
  color:#0b4163;
}
.ma-weather-desc{
  margin-top:3px;
  font-size:11px;
  color:#607684;
}
.ma-weather-meta{
  display:grid;
  gap:3px;
}
.ma-weather-meta span{
  font-size:9px;
  color:#5d7483;
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.ma-weather-meta strong{
  color:#183c53;
}
.ma-weather-link{
  display:block;
  margin-top:11px;
  text-align:center;
  font-size:9px;
  font-weight:700;
  color:#1977c8!important;
  text-decoration:none;
}

/* Mobile keeps the approved phone composition */
@media (max-width:768px){
  .ma-facts-wrap{
    margin:0;
    padding:13px var(--ma-mobile-pad) 0;
  }
  .ma-facts-card{
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }
  .ma-checked{
    border:0;
    background:transparent;
    padding:10px 2px 2px!important;
    text-align:left!important;
  }
  .ma-full-shell{
    padding:0 var(--ma-mobile-pad);
  }
  .ma-full-section .ma-getting-layout{
    display:block!important;
  }
  .ma-weather-card{
    margin:16px -16px -16px;
  }
}


/* =========================================================
   V0.1.7 — full-bleed hero + reference section order
   ========================================================= */

/* Desktop hero must touch the left and right viewport edges, regardless
   of the GeneratePress content container width. */
@media (min-width: 769px){
  .ma-hero{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border-radius:0;
  }

  /* Keep the actual hero content aligned and controlled inside the full bleed image. */
  .ma-hero-inner{
    width:100%;
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
  }

  /* How-to-get is back in the left content column, directly after Sunbeds & Prices,
     exactly like the approved desktop reference. */
  .ma-getting-there .ma-getting-layout{
    grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr);
    gap:20px;
  }

  .ma-getting-there .ma-map-card{
    min-height:320px;
  }

  .ma-getting-there .ma-map-card > *,
  .ma-getting-there .ma-map-card .geodir-map-wrap,
  .ma-getting-there .ma-map-card .geodir-map-container{
    min-height:320px!important;
  }
}

/* Mobile remains edge-to-edge using the approved mobile layout rules. */
@media (max-width:768px){
  .ma-hero{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}


/* =========================================================
   V0.1.8 — fix How to get there desktop layout
   ========================================================= */
@media (min-width:769px){
  .ma-getting-there{
    width:100%;
  }

  .ma-getting-there .ma-getting-layout{
    display:grid!important;
    grid-template-columns:minmax(0, 360px) minmax(0, 1fr)!important;
    gap:18px!important;
    width:100%;
    align-items:stretch;
  }

  .ma-getting-there .ma-getting-layout > *{
    min-width:0;
  }

  .ma-getting-there .ma-transport-grid{
    display:grid!important;
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
    gap:10px!important;
    width:100%;
    min-width:0;
    overflow:visible!important;
  }

  .ma-getting-there .ma-transport{
    min-width:0!important;
    width:auto!important;
    min-height:180px;
    padding:15px 12px;
    overflow-wrap:anywhere;
  }

  .ma-getting-there .ma-map-card{
    width:100%!important;
    min-width:0!important;
    min-height:360px!important;
    overflow:hidden;
    border-radius:12px;
  }

  .ma-getting-there .ma-map-card > *,
  .ma-getting-there .ma-map-card .geodir-map-wrap,
  .ma-getting-there .ma-map-card .geodir-map-container{
    width:100%!important;
    min-width:0!important;
    min-height:360px!important;
  }
}


/* =========================================================
   V0.5.7 — final Beach template refinement
   - desktop hero aligned with the global 1220px Atlas grid
   - taller, consistent hero
   - route image replaces the main How-to live map
   - cleaner mobile facts/facilities/actions/how-to layout
   ========================================================= */

/* Desktop: the hero remains full-bleed, but text starts on the same line as the Atlas logo. */
@media (min-width: 1101px){
  .ma-beach .ma-hero,
  .ma-beach .ma-hero-inner{min-height:520px;}
  .ma-beach .ma-hero-inner{
    max-width:none!important;
    grid-template-columns:minmax(0,1fr) minmax(430px,32vw)!important;
  }
  .ma-beach .ma-hero-copy{
    padding-top:112px!important;
    padding-right:48px!important;
    padding-bottom:62px!important;
    padding-left:max(24px,calc((100vw - 1220px)/2))!important;
  }
  .ma-beach .ma-hero-gallery{min-height:520px;}
  .ma-beach .ma-hero-thumb{min-height:259px;}
}

/* Medium desktop/tablet keeps a taller hero without pushing content into the header. */
@media (min-width:769px) and (max-width:1100px){
  .ma-beach .ma-hero,
  .ma-beach .ma-hero-inner{min-height:470px;}
  .ma-beach .ma-hero-copy{padding:102px 36px 56px;}
}

.ma-action-icon{
  display:inline-grid;
  place-items:center;
  width:1.25em;
  height:1.25em;
  line-height:1;
  font-size:1.15em;
  flex:0 0 auto;
}

/* Route visual in the main How-to section. */
.ma-route-card{
  width:100%;
  min-width:0;
  min-height:360px;
  border-radius:12px;
  overflow:hidden;
  background:#eef3f6;
  border:1px solid var(--ma-line);
}
.ma-route-image{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center;
}
.ma-route-placeholder{
  min-height:360px;
  display:grid;
  place-content:center;
  gap:6px;
  padding:30px;
  text-align:center;
  color:var(--ma-muted);
  background:linear-gradient(135deg,#f5f8fa,#e8f1f6);
}
.ma-route-placeholder strong{color:var(--ma-text);font-size:16px;}
.ma-route-placeholder span{font-size:12px;}

@media (min-width:769px){
  .ma-getting-there .ma-getting-layout{
    grid-template-columns:minmax(0,360px) minmax(0,1fr)!important;
    gap:18px!important;
  }
  .ma-getting-there .ma-route-card,
  .ma-getting-there .ma-route-image{min-height:360px;}
}

@media (max-width:768px){
  /* Hero actions: two balanced controls with icons large enough to read instantly. */
  .ma-beach .ma-hero-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    max-width:250px;
  }
  .ma-beach .ma-action{
    min-height:64px;
    padding:9px 8px;
    gap:5px;
    font-size:12px;
  }
  .ma-beach .ma-action-icon{font-size:23px;width:24px;height:24px;}

  /* Quick facts: transparent section, only the individual facts are white cards. */
  .ma-beach .ma-facts-wrap{
    background:transparent!important;
    padding:15px var(--ma-mobile-pad) 0!important;
  }
  .ma-beach .ma-facts-card{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .ma-beach .ma-facts{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    background:transparent!important;
  }
  .ma-beach .ma-fact,
  .ma-beach .ma-fact:nth-child(n){
    min-height:104px;
    padding:14px 10px!important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:7px;
    background:#fff!important;
    border:1px solid #dfe7ec!important;
    border-radius:12px!important;
  }
  .ma-beach .ma-fact:last-child:nth-child(odd){grid-column:1/-1;}
  .ma-beach .ma-fact-icon{
    width:34px;
    min-width:34px;
    height:34px;
    display:grid;
    place-items:center;
    font-size:25px!important;
    line-height:1;
  }
  .ma-beach .ma-fact-icon i{width:auto!important;}
  .ma-beach .ma-fact small{font-size:10px;line-height:1.25;margin:0 0 3px;}
  .ma-beach .ma-fact strong{font-size:12px;line-height:1.3;}
  .ma-beach .ma-checked{padding-top:11px!important;text-align:center!important;}

  /* Facilities: centered and slightly larger for thumb-friendly scanning. */
  .ma-beach .ma-facilities{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }
  .ma-beach .ma-facility{
    min-height:102px;
    padding:13px 9px!important;
    flex-direction:column;
    justify-content:center;
    align-items:center!important;
    text-align:center;
    gap:7px!important;
    border-radius:12px;
  }
  .ma-beach .ma-facility-icon{
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    font-size:21px!important;
    display:grid!important;
    place-items:center!important;
  }
  .ma-beach .ma-facility-icon i{width:auto!important;}
  .ma-beach .ma-facility strong{font-size:11px!important;line-height:1.25;margin-bottom:3px;}
  .ma-beach .ma-facility small{font-size:10px!important;line-height:1.25;}

  /* How to get there: centered cards and full-width route image below them. */
  .ma-beach .ma-getting-there>h2{text-align:center;margin-bottom:14px;}
  .ma-beach .ma-getting-there .ma-getting-layout{display:block!important;}
  .ma-beach .ma-transport-grid{gap:9px!important;}
  .ma-beach .ma-transport{
    min-height:116px;
    padding:15px 18px!important;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:6px;
  }
  .ma-beach .ma-transport>span{font-size:27px;line-height:1;}
  .ma-beach .ma-transport strong{font-size:13px;}
  .ma-beach .ma-transport small{font-size:11px;line-height:1.5;max-width:270px;}
  .ma-beach .ma-route-card{
    width:100%;
    min-height:0;
    margin-top:11px;
    border-radius:12px;
  }
  .ma-beach .ma-route-image{
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    object-fit:contain;
  }
  .ma-beach .ma-route-placeholder{min-height:230px;}
}

@media (max-width:420px){
  .ma-beach .ma-fact{min-height:100px;}
  .ma-beach .ma-facility{min-height:98px;}
}


/* =========================================================
   V0.5.8 — Beach desktop layout structure
   Upper editorial content shares the row with the sidebar.
   From How to get there onward, content spans the full Atlas grid.
   Mobile keeps the original reading order: main content -> lower sections -> sidebar.
   ========================================================= */
@media (min-width:1101px){
  .ma-beach .ma-beach-layout{
    grid-template-columns:minmax(0,1fr) 320px;
    column-gap:40px;
    row-gap:0;
    align-items:start;
  }
  .ma-beach .ma-beach-layout > .ma-main{
    grid-column:1;
    grid-row:1;
  }
  .ma-beach .ma-beach-layout > .ma-sidebar{
    grid-column:2;
    grid-row:1;
  }
  .ma-beach .ma-beach-layout > .ma-lower-content{
    grid-column:1 / -1;
    grid-row:2;
    min-width:0;
    width:100%;
    padding-top:10px;
  }
  .ma-beach .ma-lower-content .ma-getting-there{
    padding-top:26px;
  }
  .ma-beach .ma-lower-content .ma-getting-there .ma-getting-layout{
    grid-template-columns:minmax(0,360px) minmax(0,1fr)!important;
    width:100%;
  }
}

@media (max-width:1100px){
  .ma-beach .ma-beach-layout > .ma-main,
  .ma-beach .ma-beach-layout > .ma-sidebar,
  .ma-beach .ma-beach-layout > .ma-lower-content{
    grid-column:auto;
    grid-row:auto;
    width:100%;
    min-width:0;
  }
  /* DOM order intentionally keeps lower beach sections before the sidebar on tablets/phones. */
  .ma-beach .ma-beach-layout{row-gap:22px;}
}


/* =========================================================
   V0.5.9 — Beach hero gallery separators
   Match the approved visual reference with crisp white dividers.
   ========================================================= */
@media (min-width: 769px){
  .ma-beach .ma-hero-gallery{
    gap:3px!important;
    background:#fff!important;
  }
  .ma-beach .ma-hero-thumb{
    border:0!important;
  }
}

@media (max-width: 768px){
  .ma-beach .ma-hero-gallery{
    gap:7px!important;
  }
  .ma-beach .ma-hero-thumb,
  .ma-beach .ma-hero-gallery .ma-hero-thumb:nth-child(n){
    border:2px solid #fff!important;
  }
}