/*
 * Spot Forecast V2 presentation owner — 9.51.3.2.
 * Only V2 is changed. Production renderer and engine remain shared.
 * All responsive layout/position rules live here, AFTER temporary legacy CSS.
 * Do not add overrides to legacy responsive.css or parity-fixes.css.
 */
.sccft-spot-forecast-v2,
.elementor-shortcode > .sccft-spot-forecast-v2 {
  --sccft-component-space: 14px;
  --sccft-component-radius: 12px;
  --sccft-component-focus: #17699a;
  --sccft-nav-top-gap: 6px;
  box-sizing: border-box !important;
  width: min(100%, 1320px) !important;
  max-width: min(100%, 1320px) !important;
  min-width: 0 !important;
  margin: 0 auto 34px !important;
  overflow: visible !important;
}
/* Allow Elementor's shortcode wrapper to shrink without injecting a viewport-wide canvas. */
.elementor-shortcode:has(> .sccft-spot-forecast-v2) {
  min-width: 0;
  max-width: 100%;
}
.sccft-spot-forecast-v2 button:focus-visible {
  outline: 2px solid var(--sccft-component-focus);
  outline-offset: 2px;
}
.sccft-spot-forecast-v2 .app {
  display: grid !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: visible !important;
}
.sccft-spot-forecast-v2 .app > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Equal width per column and equal height for cards sharing a grid row.
   Grid spans remain intentional: the map/readout pair share the left column;
   score/live and webcam can occupy the corresponding two-row height. */
.sccft-spot-forecast-v2 .app > .card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}
.sccft-spot-forecast-v2 .app > .sccft-navigation-placeholder {
  grid-area: sticky !important;
  min-width: 0 !important;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}
.sccft-spot-forecast-v2 .app > .sccft-navigation-placeholder[hidden] {
  display: none !important;
}
/* Single navigation DOM element: it moves to a body-level portal while floating.
   Placeholder and viewport geometry are still owned by the original V2 root. */
.sccft-spot-forecast-v2 .app > .stickybar {
  position: static !important;
  top: auto !important;
  grid-area: sticky !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  z-index: auto !important;
  box-sizing: border-box !important;
}
.sccft-spot-forecast-v2 .app > .stickybar.sccft-navigation--floating {
  position: fixed !important;
  top: var(--sccft-nav-top, calc(var(--sccwp-sticky-offset, 0px) + var(--sccft-nav-top-gap))) !important;
  left: var(--sccft-nav-left, 0px) !important;
  width: var(--sccft-nav-width, 100%) !important;
  max-width: var(--sccft-nav-width, 100%) !important;
  min-width: 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
  transform: translate3d(0, var(--sccft-nav-slide, 0px), 0) !important;
  box-shadow: 0 6px 22px rgba(0, 40, 75, .17) !important;
  border: 1px solid rgba(15, 74, 120, .11);
  background: var(--card, #f8f3ea);
}
/* 9.51.6.3: V2 visual-only body portal retains .sccwp-proto visual scope
   while escaping Elementor transform, contain,
   opacity and clipping contexts. Forecast data and button handlers are NOT cloned.
   The preferences dialog deliberately stays above this layer. */
.sccft-navigation-portal.sccft-spot-forecast-v2 {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 100000 !important;
  pointer-events: none !important;
}
.sccft-navigation-portal.sccft-spot-forecast-v2 > .app {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.sccft-navigation-portal.sccft-spot-forecast-v2 .app > .stickybar.sccft-navigation--floating {
  pointer-events: auto !important;
  isolation: isolate;
}

/* Explicit grid-area contracts on V2 cards. The inherited old CSS may
   assign grid-area:auto at higher specificity in Elementor, otherwise mobile
   moves the map before the navigation despite the intended template. */
.sccft-spot-forecast-v2 .app > .topbar {grid-area:top !important;}
.sccft-spot-forecast-v2 .app > .mapcard {grid-area:map !important;}
.sccft-spot-forecast-v2 .app > .readoutcard {grid-area:readout !important;}
.sccft-spot-forecast-v2 .app > .scorecard {grid-area:score !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-panel-live {grid-area:live !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-webcamcard {grid-area:webcam !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-panel-swell {grid-area:swell !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-panel-rws {grid-area:rws !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-panel-tide {grid-area:tide !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-panel-wind {grid-area:wind !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-panel-multimodel-wind {grid-area:multiwind !important;}
.sccft-spot-forecast-v2 .app > .sccft-editorial-card {grid-area:editorial !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-details-toggle-wrap {grid-area:toggle !important;}
.sccft-spot-forecast-v2 .app > .sccwp-uxr-details {grid-area:details !important;}

/* Keep the single arrow icons perfectly centred, including when legacy
   typography changes at mobile breakpoints. Touch target >= 40px on mobile. */
.sccft-spot-forecast-v2 .app > .stickybar .navbtns .iconbtn {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  line-height: 1 !important;
  text-align: center !important;
}
.sccft-spot-forecast-v2 .app > .stickybar .navbtns .iconbtn svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile: retain the 9.51.3 compact, two-line navigation composition.
   No re-layout of the already accepted mobile cards. */
@media (max-width: 759px) {
  .sccft-spot-forecast-v2,
  .elementor-shortcode > .sccft-spot-forecast-v2 {
    width: min(100%, calc(100vw - 12px)) !important;
    max-width: 640px !important;
  }
  .sccft-spot-forecast-v2 .app,
  .elementor-shortcode > .sccft-spot-forecast-v2 .app {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "top" "sticky" "map" "readout" "score" "webcam" "live" "editorial" "toggle" "details" !important;
    gap: 10px !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar {
    grid-area: sticky !important;
    min-height: 0 !important;
    padding: 0 0 4px !important;
  }
  /* Mobile cards may be in expanded/collapsed wrapping containers;
     do not impose artificial heights on collapsed content. */
  .sccft-spot-forecast-v2 .app > .card {
    height: auto !important;
  }
}
/* Tablet & desktop share EXACTLY ONE navigation design:
   date + day + time at left; mode switch in centre; arrows at right.
   No variant markup or omitted weekday on tablet. */
@media (min-width: 760px) {
  .sccft-spot-forecast-v2 .app > .card {
    margin: 0 !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(10px, 1.4vw, 22px) !important;
    min-height: 58px !important;
    padding: 8px clamp(12px, 1.4vw, 22px) !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar .dayrow {
    grid-column: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: clamp(7px, 1.1vw, 20px) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar .modebar {
    display: contents !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar .seg {
    grid-column: 2 !important;
    justify-self: center !important;
    width: clamp(246px, 24vw, 320px) !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar .navbtns {
    grid-column: 3 !important;
    justify-self: end !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar .segbtn {
    padding-inline: 8px !important;
  }
  .sccft-spot-forecast-v2 .app > .stickybar .navbtns .iconbtn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}
/* Tablet: centered two-column grid (both orientations).
   Historical tablet left alignment and 'map sticky' areas are superseded here,
   without editing the still active production CSS layers. */
@media (min-width: 760px) and (max-width: 1180px) {
  .sccft-spot-forecast-v2,
  .elementor-shortcode > .sccft-spot-forecast-v2 {
    width: min(100%, 980px) !important;
    max-width: min(100%, 980px) !important;
    margin-inline: auto !important;
  }
  .sccft-spot-forecast-v2 .app {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "top top"
      "sticky sticky"
      "map score"
      "readout score"
      "live webcam"
      "swell rws"
      "tide wind"
      "multiwind multiwind" !important;
    gap: 14px !important;
  }
}
/* Desktop: three EQUAL-width columns, common full-width nav, aligned rows.
   The top cards make one three-column content band via explicit grid spans. */
@media (min-width: 1181px) {
  .sccft-spot-forecast-v2,
  .elementor-shortcode > .sccft-spot-forecast-v2 {
    width: min(100%, 1320px) !important;
    max-width: min(100%, 1320px) !important;
    margin-inline: auto !important;
  }
  .sccft-spot-forecast-v2 .app {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "top top top"
      "sticky sticky sticky"
      "map score live"
      "readout score live"
      "swell rws webcam"
      "tide wind multiwind" !important;
    grid-template-rows: auto !important;
    gap: 18px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sccft-spot-forecast-v2 button { scroll-behavior: auto; }
}

/* 9.51.3.2 — the image must cover the *stretched* map tile, never leave
   the parent card's sand background visible and never clip the tide chip. */
.sccft-spot-forecast-v2 .app > .mapcard {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
.sccft-spot-forecast-v2 .app > .mapcard > .map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.sccft-spot-forecast-v2 .app > .mapcard > .map__overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
}
.sccft-spot-forecast-v2 .app > .mapcard .map__tidechip {
  left: 8px !important;
  bottom: 8px !important;
}
@media (max-width:759px) {
  .sccft-spot-forecast-v2 .app > .mapcard {
    min-height: 232px !important;
    aspect-ratio: 1.5;
  }
}
@media (min-width:760px) {
  .sccft-spot-forecast-v2 .app > .mapcard {
    min-height: clamp(232px, 23vw, 312px) !important;
  }
  /* Spend a little more of the available score-card height on the description,
     while preserving all per-hour data and scores exactly as before. */
  .sccft-spot-forecast-v2 .app > .scorecard .rating {
    margin-top: 10px !important;
  }
  .sccft-spot-forecast-v2 .app > .scorecard .rating__descriptor {
    margin-top: 6px !important;
  }
  .sccft-spot-forecast-v2 .app > .scorecard .scorebar {
    margin-top: 14px !important;
  }
  .sccft-spot-forecast-v2 .app > .scorecard .factors {
    margin-top: 20px !important;
  }
  /* Webcam occupies only the graph comparison row; multimodel fills the
     third column next to Tide and Wind on the next graph row. */
}