/*
 * RBR P1P-P1 | Homepage Dive Sites phone containment | 2026-11-14
 * Scoped to the 6-site component introduced by P1P-M1.
 * Resolves older mobile .site-arrow {grid-column:3;grid-row:1} rules
 * without changing the content, sort, CMS API, other pages or desktop layout.
 */
@media (max-width: 820px) {
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 26px minmax(0, 1fr) clamp(70px, 18vw, 96px) 16px;
    grid-template-rows: minmax(90px, auto);
    column-gap: clamp(8px, 1.4vw, 12px);
    align-items: center;
  }

  /* Explicit placement prevents the legacy arrow rule from moving the map
     to a fifth, implicit column beyond the phone viewport. */
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry > .site-number {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry > .rbr-m1-labels {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry > .rbr-m1-map {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 112 / 78;
    min-width: 0;
    justify-self: end;
    overflow: hidden;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry > .rbr-m1-map img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry > .site-arrow {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1;
  }

  /* A Dive Site without a map still has the same clean one-line navigation. */
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry.rbr-m1-no-photo {
    grid-template-columns: 26px minmax(0, 1fr) 16px;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry.rbr-m1-no-photo > .site-arrow {
    grid-column: 3;
  }
}

@media (max-width: 420px) {
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry {
    grid-template-columns: 22px minmax(0, 1fr) clamp(58px, 19vw, 76px) 15px;
    grid-template-rows: minmax(91px, auto);
    column-gap: 7px;
    min-height: 104px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry.rbr-m1-no-photo {
    grid-template-columns: 22px minmax(0, 1fr) 15px;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] .site-name {
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.13;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] .rbr-m1-subtitle {
    font-size: 9px;
    line-height: 1.5;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] .site-boat {
    margin-top: 9px;
  }
}

@media (max-width: 359px) {
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry {
    grid-template-columns: 20px minmax(0, 1fr) 58px 14px;
    column-gap: 6px;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] > a.rbr-m1-entry.rbr-m1-no-photo {
    grid-template-columns: 20px minmax(0, 1fr) 14px;
  }
  .signature-sites .site-strips[data-rbr-home-dive-live="v1"] .site-name {
    font-size: 20px;
  }
}