/* CroatiaMarinas.com — responsive stability + map repair · 2026-09-24 */
html,body{width:100%;max-width:100%;overflow-x:clip}
body{min-width:0}
main,.hero,.page-hero,.marina-hero,.ecosystem,.page-title,.map-shell,.footer{max-width:100%;min-width:0}
img{width:auto;max-width:100%;height:auto}
.card-image img,.inline-photo img,.story-card img{width:100%}

/* Keep all photographic heroes inside the viewport and improve contrast. */
.hero,.page-hero,.marina-hero,.ecosystem{overflow:hidden;background-repeat:no-repeat;background-size:cover}
.page-hero,.marina-hero{isolation:isolate}
.page-hero .hero-shade,.marina-hero .hero-shade{
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,23,25,.78) 0%,rgba(3,23,25,.62) 48%,rgba(3,23,25,.34) 100%),
    linear-gradient(180deg,rgba(3,23,25,.28) 0%,rgba(3,23,25,.08) 40%,rgba(3,23,25,.42) 100%);
}
.page-hero>div:last-child,.marina-title,.marina-meta{z-index:1;min-width:0}
.hero h1,.page-hero h1,.page-title h1,.marina-title h1,.ecosystem h2{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.page-hero p,.marina-title p,.ecosystem p{max-width:min(700px,100%)}
.page-hero h1,.marina-title h1,.ecosystem h2{
  text-shadow:0 2px 9px rgba(0,0,0,.30),0 12px 34px rgba(0,0,0,.22)
}
.page-hero p,.marina-title>p:last-child,.ecosystem p,.page-hero .eyebrow,.marina-title .eyebrow{
  text-shadow:0 2px 10px rgba(0,0,0,.36)
}
.ecosystem{
  background-image:linear-gradient(90deg,rgba(3,27,29,.88) 0%,rgba(3,27,29,.62) 54%,rgba(3,27,29,.34) 100%),var(--photo)
}
.ecosystem p{color:rgba(255,255,255,.88)}

/* Leaflet containment. These rules intentionally duplicate the critical
   layout portion of Leaflet CSS so the map remains stable if the CDN
   stylesheet is late or unavailable. */
.map-shell{width:100%;overflow:hidden;contain:layout paint}
.marina-map{position:relative;width:100%;max-width:100%;overflow:hidden;isolation:isolate;z-index:0}
.leaflet-container{position:relative;overflow:hidden;outline:0;background:#dfe6e2;-webkit-tap-highlight-color:transparent}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer{position:absolute;left:0;top:0}
.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}
.leaflet-container img.leaflet-tile,.leaflet-container .leaflet-marker-icon,.leaflet-container .leaflet-marker-shadow{max-width:none!important;max-height:none!important;width:auto}
.leaflet-tile{filter:inherit;visibility:hidden}
.leaflet-tile-loaded{visibility:inherit}
.leaflet-pane{z-index:400}
.leaflet-tile-pane{z-index:200}
.leaflet-overlay-pane{z-index:400}
.leaflet-shadow-pane{z-index:500}
.leaflet-marker-pane{z-index:600}
.leaflet-tooltip-pane{z-index:650}
.leaflet-popup-pane{z-index:700}
.leaflet-map-pane canvas{z-index:100}
.leaflet-map-pane svg{z-index:200}
.leaflet-control{position:relative;z-index:800;pointer-events:auto}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}
.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}
.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}
.leaflet-zoom-animated{transform-origin:0 0}.leaflet-zoom-hide{visibility:hidden}
.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:grab}.leaflet-dragging .leaflet-grab{cursor:grabbing}
.leaflet-control-zoom a{display:block;width:30px;height:30px;line-height:30px;text-align:center;background:rgba(244,241,233,.96);border-bottom:1px solid rgba(11,39,41,.15);font:18px/30px Arial,sans-serif;color:#0b2729}
.leaflet-control-attribution{background:rgba(244,241,233,.85);padding:2px 6px;font-size:8px;color:#40585a}
.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left}.leaflet-popup-content{margin:14px 18px;line-height:1.4}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;transform:rotate(45deg)}
.map-fallback .marina-map{display:none}
.map-fallback .map-list{display:grid}
.map-fallback .map-notice::after{content:'  Interactive map unavailable — use the marina list below.';font-weight:400;color:var(--ink)}

/* Mobile system: no horizontal overflow, long editorial headings wrap safely. */
@media(max-width:760px){
  html,body{overflow-x:hidden}
  .site-header{width:100%;max-width:100vw}
  .brand{min-width:0}.brand-copy{white-space:nowrap}
  .page-hero,.page-hero.compact{
    width:100%;
    min-height:640px;
    padding:0 24px 58px;
    background-position:center center;
  }
  .page-hero>div:last-child{width:100%;max-width:100%}
  .page-hero h1{
    font-size:clamp(42px,11.5vw,50px);
    line-height:.96;
    letter-spacing:-.03em;
    margin:.22em 0 .30em;
  }
  .page-hero p{font-size:clamp(19px,5.2vw,23px);line-height:1.34}
  .page-hero .eyebrow{font-size:9px;line-height:1.5;letter-spacing:.18em}
  .page-title{padding:132px 24px 64px}
  .page-title h1{font-size:clamp(48px,13vw,58px);line-height:.96;overflow-wrap:anywhere}
  .page-title>p:last-child{font-size:clamp(19px,5.3vw,24px);line-height:1.38}
  .map-title{padding-bottom:62px}
  .map-shell{padding:0 24px 72px;contain:none}
  .map-notice{font-size:9px;line-height:1.65;padding:20px 0}
  .marina-map{height:min(62svh,520px);min-height:390px;width:100%;max-width:100%;border:1px solid var(--line)}
  .leaflet-control-attribution{max-width:78vw;white-space:normal;text-align:right}
  .marina-hero{width:100%;min-height:650px;height:82svh;background-position:center center}
  .marina-title{left:24px;right:24px;bottom:100px;width:auto;max-width:none}
  .marina-title h1{font-size:clamp(46px,12.4vw,58px);line-height:.96;overflow-wrap:anywhere}
  .marina-title>p:last-child{font-size:21px}
  .marina-meta{left:24px;right:24px;bottom:30px;max-width:calc(100% - 48px)}
  .ecosystem{min-height:610px;padding:76px 24px;background-position:center center}
  .ecosystem-copy{width:100%;max-width:100%}
  .ecosystem h2{font-size:clamp(45px,12vw,56px);line-height:.96;margin:.2em 0 .32em}
  .ecosystem p{font-size:16px;line-height:1.55}
  .ecosystem .btn{max-width:100%;white-space:normal;line-height:1.35}
  .about-grid,.data-band,.guide-editorial,.guide-cluster,.directory,.comparison-section,.marinas-section,.nearby{max-width:100%;overflow:hidden}
  .about-grid article{min-width:0}
  .about-grid h2,.data-band h2{overflow-wrap:anywhere}
  .footer{overflow:hidden}
  .footer-brand{font-size:clamp(34px,10vw,42px);overflow-wrap:anywhere}
  .footer-links a,.footer-bottom{overflow-wrap:anywhere}
}

@media(max-width:390px){
  .brand-copy{font-size:14px}.brand-copy em{font-size:17px}
  .page-hero,.page-hero.compact{padding-left:20px;padding-right:20px}
  .page-hero h1{font-size:clamp(39px,11.2vw,45px)}
  .page-title{padding-left:20px;padding-right:20px}
  .map-shell{padding-left:20px;padding-right:20px}
  .marina-title{left:20px;right:20px}
  .ecosystem{padding-left:20px;padding-right:20px}
}

/* Final phone refinements */
.home-hero .hero-shade{
  background:
    linear-gradient(90deg,rgba(4,22,25,.86) 0%,rgba(4,22,25,.76) 58%,rgba(4,22,25,.58) 100%),
    linear-gradient(180deg,rgba(3,17,20,.40) 0%,rgba(3,17,20,.20) 28%,rgba(3,17,20,.50) 100%);
}
@media(max-width:760px){
  .page-hero h1{font-size:clamp(38px,10vw,44px)}
  .home-hero .hero-shade{
    background:
      linear-gradient(90deg,rgba(4,22,25,.88) 0%,rgba(4,22,25,.80) 64%,rgba(4,22,25,.66) 100%),
      linear-gradient(180deg,rgba(3,17,20,.42) 0%,rgba(3,17,20,.22) 28%,rgba(3,17,20,.52) 100%);
  }
  .home-hero .hero-lede{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5),0 7px 22px rgba(0,0,0,.28)}
}
.map-degraded .map-list{display:grid;margin-top:28px}
.map-degraded .map-notice::after{content:'  Some map tiles could not load — the marina list is available below.';font-weight:400;color:var(--ink)}