/* Final, shared responsive safeguards. Keep this stylesheet last in the cascade. */

:root {
  --responsive-sticky-offset: 1rem;
  --cookie-banner-block-size: 0px;
}

.trip-stop-editor__coordinates {
  grid-column: 1 / -1;
  min-width: 0;
}

:is(.field, .editor-section, .community-form, .dashboard-layout, .settings-layout, .profile-layout, .trip-layout) {
  min-width: 0;
}

/* Size camp facts to the space they actually receive, rather than the viewport. */
.site-detail-page .camp-glance {
  container-name: camp-glance;
  container-type: inline-size;
}

.site-detail-page .camp-glance .fact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-detail-page .camp-glance .fact-grid > div,
.site-detail-page .camp-glance .fact-grid :is(dt, dd) {
  min-width: 0;
}

.site-detail-page .camp-glance .fact-grid :is(dt, dd) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.site-detail-page .camp-glance .fact-grid dt > span:last-child {
  font-size: clamp(0.68rem, 0.75vw, 0.74rem);
  line-height: 1.3;
}

.site-detail-page .camp-glance .fact-grid dd {
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
}

/* Optional facts must not change the order of the remaining information. */
.site-detail-page .camp-glance .fact-grid > div {
  order: 0;
}

/* Give the rating text its own real width, not the three narrow leaf tracks. */
.site-detail-page .camp-glance .wild-rating {
  width: 10rem;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  column-gap: 0;
}

.site-detail-page .camp-glance .wild-rating small {
  width: 100%;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.site-detail-page .camp-glance__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.site-detail-page .camp-glance__header > div {
  flex: 1 1 15rem;
  min-width: 0;
}

.site-detail-page .detail-layout {
  align-items: start;
  row-gap: 0;
}

.site-detail-page .detail-main > .detail-section {
  min-width: 0;
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

.site-detail-page .booking-card {
  min-width: 0;
  width: 100%;
  margin-block: 2rem;
  overflow-wrap: anywhere;
}

.site-detail-page .camp-glance__extras {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* One photo should not leave half an empty gallery; every count uses equal tiles. */
.site-detail-page .gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  grid-template-rows: none;
  gap: 0.75rem;
}

.site-detail-page .gallery-grid button,
.site-detail-page .gallery-grid button:first-child {
  grid-column: auto;
  grid-row: auto;
  min-height: clamp(13rem, 23vw, 23rem);
}

.site-detail-page .detail-main > .detail-section.camp-glance {
  align-self: stretch;
}

.site-detail-page .camp-glance .site-access-summary__highlights strong,
.site-detail-page .camp-glance .site-access-summary__private {
  color: #60645e;
}

.site-detail-page .camp-glance .site-access-summary__highlights span {
  color: #30332f;
}

/* Long names and user-entered content may wrap without widening their cards. */
main :is(h1, h2, h3, .button, .tag) {
  overflow-wrap: break-word;
}

:is(.dashboard-layout, .settings-layout, .profile-layout, .trip-layout) > * {
  min-width: 0;
}

@media (max-width: 47.99rem) {
  .site-detail-page .detail-actions {
    flex-wrap: wrap;
  }

  .site-detail-page .detail-actions > * {
    min-width: 0;
    flex: 1 1 auto;
  }
}

@container camp-glance (max-width: 22rem) {
  .site-detail-page .camp-glance .fact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container camp-glance (min-width: 40rem) {
  .site-detail-page .camp-glance .fact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container camp-glance (min-width: 55rem) {
  .site-detail-page .camp-glance .fact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@supports not (container-type: inline-size) {
  .site-detail-page .camp-glance .fact-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.75rem), 1fr));
  }
}

/* The legacy header is not sticky, so sticky panels only need a modest edge gap. */
@media (min-width: 60.01rem) {
  :is(
    .filter-panel,
    .dashboard-sidebar,
    .settings-nav,
    .profile-sidebar,
    .trip-sidebar,
    .booking-request-layout .booking-calendar-summary,
    .location-editor-nav,
    .admin-editor-jumpbar
  ) {
    top: var(--responsive-sticky-offset);
  }
}

/* Campsite actions should leave the viewport as the page scrolls. */
.site-detail-page .detail-action-bar {
  position: static;
  top: auto;
}

/* Keep the non-sticky booking card above the full-bleed camp-details background. */
.site-detail-page .booking-card {
  position: relative;
  z-index: 2;
  top: auto;
}

/* Trip management follows the page instead of trapping a tall sidebar in view. */
.trip-detail-page .trip-sidebar {
  position: static;
  top: auto;
}

/* Keep booking beside the facts on wide screens and immediately after them elsewhere. */
.site-detail-page .detail-main {
  display: contents;
}

.site-detail-page .detail-main > .detail-section {
  grid-column: 1 / -1;
}

.site-detail-page .detail-main > .detail-section.camp-glance {
  grid-column: 1;
  grid-row: 1;
}

.site-detail-page .booking-card {
  grid-column: 1;
  grid-row: 2;
}

@media (min-width: 72rem) {
  .site-detail-page .booking-card {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 60rem) {
  .location-editor-nav,
  .admin-editor-jumpbar {
    top: 0.5rem;
  }
}

/* A tall filter must stay in normal document flow on a short desktop screen. */
@media (min-width: 64rem) and (max-height: 69rem) {
  .explore-page .filter-panel {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (min-width: 64rem) {
  .explore-page .filter-panel:has(.rating-guide[open]) {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

/* At the first desktop breakpoint these columns are too narrow to remain useful. */
@media (min-width: 64rem) and (max-width: 71.99rem) {
  :is(.dashboard-layout, .settings-layout, .profile-layout, .trip-layout),
  .site-detail-page .detail-layout,
  .booking-page .booking-request-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.dashboard-sidebar, .settings-nav, .profile-sidebar, .trip-sidebar),
  .booking-page .booking-request-layout .booking-calendar-summary {
    position: static;
    top: auto;
    width: auto;
  }

}

@media (min-width: 58rem) and (max-width: 71.99rem) {
  .booking-page .booking-request-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-page .booking-request-layout .booking-calendar-summary {
    position: static;
    top: auto;
  }
}

/* Keep bottom actions visible while cookie choices are waiting for a response. */
body.has-cookie-banner .location-save-bar {
  bottom: calc(var(--cookie-banner-block-size) + 0.35rem);
}

body.has-cookie-banner .toast-region {
  bottom: calc(var(--cookie-banner-block-size) + 1rem);
}

@media (max-width: 63.99rem) {
  body.filter-open .site-header {
    z-index: 2200;
  }

  body.filter-open .filter-panel {
    max-height: calc(100dvh - 5rem);
  }
}

@media (max-width: 47.99rem) {

  body .location-editor .field :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  body.admin-editor-page .editor-section .field :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  body .community-form .field :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  body.booking-page main .field :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ),
  body .profile-layout .field :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    min-height: 2.75rem;
    max-width: 100%;
    font-size: 1rem;
  }

  body main :is(.location-editor, .location-create) .field label,
  body.admin-editor-page main .field label,
  body main .community-form .field label,
  body.booking-page main .field label {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  body main :is(.location-editor, .location-create) :is(.field-help, .form-hint),
  body.admin-editor-page main :is(.field-help, .form-hint) {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  :is(.location-editor-nav, .admin-editor-jumpbar) :is(a, button),
  .cookie-banner__actions button {
    min-height: 2.75rem;
  }
}

@media (max-height: 50rem) {
  .primary-nav .nav-panel {
    justify-content: flex-start;
  }
}