@layer legacy {
.spot-list {
  margin-bottom: var(--margin-bottom-list);

  .spot__name--after {
    display: none;
  }
}

.spot-list--grid {
  --grid-space: 2rem;
  --item-min-width: 200px;

  display: grid;
  gap: var(--grid-space);
  /* column-gap: var(--grid-space);
  row-gap: var(--grid-space);
  grid-template-columns: repeat(2, calc((100% - var(--grid-space)) / 2));
 */

  /* Set card min width to 500px and max to 1fr by default (mobile = 1 column) */
  --item-min-width: 250px;
  grid-template-columns: 1fr;

  /* Tablet: 2 columns of min 500px, fluid width */
  @media (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(var(--item-min-width), 1fr));
  }

  /* Desktop: as many 500px cards as fit fluidly */
  @media (min-width: 1024px) {
    grid-template-columns: repeat(auto-fit, minmax(var(--item-min-width), 1fr));
  }
}

.spot-list--list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-grey-light, #e5e7eb);
  margin: auto calc(var(--spacing-md) * -1);
  & .spot--loading {
    border: none;
    border-bottom: 1px solid var(--color-grey-light, #e5e7eb);
    border-radius: 0;
    justify-content: space-between;
    padding: 0.875rem var(--spacing-md, 1rem);
    flex: initial;
  }
}

.spot-list--loading.spot-list--list {
  & .spot {
    aspect-ratio: auto;
    height: 60px;
    border-radius: 0;
  }
}

.spot-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem var(--spacing-md, 1rem);
  border-bottom: 1px solid var(--color-grey-light, #e5e7eb);
  color: var(--text-color, #111827);
  text-decoration: none;

  &:active {
    background-color: var(--color-grey-light, #f5f5f5);
  }
}

.spot-list-item__map {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  object-fit: cover;
  background-color: var(--color-grey-light, #e5e7eb);
}

.spot-list-item__name {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spot-list-item__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.spot-list-item__cta-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary-text-color, #9ca3af);
  white-space: nowrap;
}

.spot-list-item__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;

  & svg {
    width: 10px;
    height: 10px;
    fill: var(--secondary-text-color, #9ca3af);
  }
}

.spot-list--style-1 {
  & .spot {
    /* border: 1px solid #dddddd; */
    border-radius: 1rem;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 0 1px #dddddd;
  }

  & .spot__name {
    font-weight: 700;
  }
}

.overflow-visible {
  overflow: visible;
  scrollbar-color: auto;
  scrollbar-width: auto;
}

.spot-list--featured {
  --spacing: .25rem;
  transform: translate3d(0px, 0px, 0px);
  width: 100%;
  gap: calc(var(--spacing) * 4);
  display: flex;
  & .spot {
    flex-basis: 36%;
    flex-grow: 0;
    flex-shrink: 0;
  }
}

.spot-list--scroll-x {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* gap: 1rem; */
  gap: 1rem;
  padding-bottom: 1rem;
  /* padding-inline: var(--spacing-md); */
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--spacing-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  & .spot {
    /* flex: 0 0 260px; */
    flex: 0 0 calc(100% - 20px + 1rem);
    scroll-snap-align: start;
  }
}

@media (min-width: 640px) {
  .spot-list--scroll-x {
    padding-inline: 0;
    scroll-padding-inline-start: 0;
    & .spot {
      flex: 0 0 260px;
    }
  }
}

.spot-list--reduced-height {
  & .spot {
    flex: 0 0 260px;
    height: 120px;
  }

  & .spot__map,
  & .spot__map-placeholder {
    height: 100%;
    aspect-ratio: auto;
  }
}

.spot-list--loading.spot-list--reduced-height {
  & .spot {
    aspect-ratio: auto;
    width: 260px;
    height: 120px;
  }
}

.spot-list--loading {
  & .spot {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    background: #ddd;
    border-radius: 1rem;
  }
}

.spot--loading {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ddd;
  border-radius: 1rem;
  color: var(--secondary-text-color, #666);
  font-weight: 600;
  font-size: 0.9rem;
  scroll-snap-align: start;
}

/* The pagination frame nests a fresh copy of itself (same id) for each
   subsequent batch so it can keep auto-loading on scroll. Once a copy has
   fetched its content it collapses out of the box tree so its .spot
   children lay out as direct grid/flex items instead of being trapped a
   level deep; the still-empty innermost copy keeps its own box so the
   scroll-appearance check has something to measure. */
turbo-frame#spot_pagination[complete] {
  display: contents;
}

.spot-list__separator {
  flex: 0 0 2px;
  background: #ddd;
  border-radius: 2px;
  align-self: stretch;
  scroll-snap-align: none;
}

.spot-list--nearest {
  margin: var(--margin-medium) 0 calc(var(--margin-medium) - var(--scrollbar-needed-padding));

  /* Specificity note: chained through .spot--card so these beat the
     equal-specificity, later-loaded rules in spot.css (.spot--card .spot__map
     etc.) instead of losing a same-specificity tie to file load order. */
  & .spot--card {
    height: auto;
    border: none;
    background: none;

    /* The card's border/radius/background move to the image itself, so the
       title below renders as a plain caption outside the card, not inside it. */
    & .spot__map,
    & .spot__map-placeholder {
      height: 120px;
      aspect-ratio: auto;
      border-radius: 1rem;
      border: 1px solid var(--color-grey-light, #dddddd);
    }

    & .spot__name--after {
      display: block;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-color, #111827);
      text-shadow: none;
      text-align: center;
      margin-top: 0.5rem;
      padding: 0 0.125rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  & .spot__tide {
    display: none !important;
  }

  & .spot__overlay {
    display: none !important;
  }

  /* Anchor to the image's bottom edge (120px) instead of the now-taller card */
  & .spot__estimation-strip {
    top: 120px;
    bottom: auto;
    transform: translateY(-100%);
  }
}

/* Desktop spot show layout: a 2-1-2 grid — two stacked nearby-spot cards on
   the left, the spot's rectangular map centered (with its name above), and
   two more stacked nearby-spot cards on the right. The nearby-spots turbo
   frame is flattened with `display: contents` so its four card children lay
   out as direct grid items of `.spot-overview` instead of being trapped in
   a single grid cell; nth-child then fans them out two-per-side. */
.spot-overview {
  display: grid;
  /* Map column caps at 760px so a 19:9 map lands at exactly 360px tall,
     matching the two stacked nearby-spot cards' combined height (142px card
     image + 28px caption) * 2 + 20px gap = 360px — keeping both the top and
     bottom borders of the map aligned with the cards' borders. minmax(0, …)
     lets the column shrink instead of overflowing on narrower desktop
     widths (the alignment is exact only at the 760px reference width). */
  grid-template-columns: 260px minmax(0, 760px) 260px;
  /* Row 1 is the name/location header — it only occupies the map column, so
     row 2 is where the map image and the top nearby-spot cards all begin,
     keeping their top borders aligned. */
  grid-template-rows: auto auto auto;
  justify-content: center;
  gap: 1.25rem;
  align-items: start;
  margin: var(--margin-medium) 0;
}

/* !important: must beat Turbo's own injected `turbo-frame:not([disabled]) {
   display: block }` rule, which has equal selector specificity and loads
   after this stylesheet. */
turbo-frame.spot-overview__nearby {
  display: contents !important;
}

.spot-overview__map {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.spot-overview__map-header {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 0.75rem;
  text-align: center;
}

.spot-overview__map-name {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-color, #111827);
}

.spot-overview__map-location {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary-text-color, #64748b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.spot-overview__nearby .spot {
  &:nth-child(1) { grid-column: 1; grid-row: 2; }
  &:nth-child(2) { grid-column: 1; grid-row: 3; }
  &:nth-child(3) { grid-column: 3; grid-row: 2; }
  &:nth-child(4) { grid-column: 3; grid-row: 3; }
}

.spot-overview__nearby .spot--loading {
  height: 142px;
  border-radius: 1rem;
}

.spot-overview__nearby .spot--card {
  height: auto;
  border: none;
  background: none;

  & .spot__map,
  & .spot__map-placeholder {
    height: 142px;
    aspect-ratio: auto;
    border-radius: 1rem;
    border: 1px solid var(--color-grey-light, #dddddd);
  }

  /* line-height pinned to a px value (rather than left to the font's
     default) so the caption's total height is a known 28px (20px line +
     8px margin-top) — the 142px image height above is chosen so image +
     caption == 170px per card, making the two-card stack match the map's
     height exactly (see .spot-overview comment). */
  & .spot__name--after {
    display: block;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--text-color, #111827);
    text-shadow: none;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & .spot__overlay,
  & .spot__tide {
    display: none !important;
  }

  & .spot__estimation-strip {
    top: 142px;
    bottom: auto;
    transform: translateY(-100%);
  }
}

@media (max-width: 900px) {
  .spot-overview {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .spot-overview__map-header {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .spot-overview__map {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .spot-overview__nearby .spot {
    &:nth-child(1) { grid-column: 1; grid-row: 3; }
    &:nth-child(2) { grid-column: 2; grid-row: 3; }
    &:nth-child(3) { grid-column: 1; grid-row: 4; }
    &:nth-child(4) { grid-column: 2; grid-row: 4; }
  }
}

/* Compact "card" nearby-spots switcher for small screens: small square
   thumbnails with a wave-height badge and distance so several spots are
   glanceable and tappable at once without the full card's map/wind/tide
   detail. */
.spot-chip-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  overflow-x: auto;
  gap: 0.875rem;
  margin: var(--margin-medium) 0 calc(var(--margin-medium) - var(--scrollbar-needed-padding));
  /* padding-inline: var(--spacing-md); */
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--spacing-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.spot-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  scroll-snap-align: start;
  text-decoration: none;
}

.spot-chip__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.spot-chip__map {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-grey-light, #dddddd);
  font-size: 1.5rem;
}

.spot-chip__wave {
  position: absolute;
  left: 50%;
  bottom: 0.375rem;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

.spot-chip__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.spot-chip__distance {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--secondary-text-color, #555555);
  text-align: center;
  white-space: nowrap;
}

.spot-chip-skeleton {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.spot-chip-skeleton__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  background: #ddd;
}

.spot-chip-skeleton__name {
  width: 56px;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
}

.spot-chip-skeleton__distance {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: #ddd;
}
}