/* Match TOP's photo-first summaries without changing the shared navigation. */
.locations-page { --locations-space: 64px; --locations-body: rgb(47 47 47 / 85%); }
.locations-index-page { padding-top: var(--header-height); letter-spacing: 0; }
.locations-inner { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }
.locations-intro { padding-block: 32px; }
.locations-intro h1 { font-size: 28px; line-height: 40px; font-weight: 700; }
.locations-intro p { max-width: 42em; margin-top: 12px; color: var(--locations-body); font-size: 15px; line-height: 26px; text-wrap: pretty; }
.locations-directory-page { padding-bottom: var(--locations-space); }
.locations-directory-board { scroll-margin-top: calc(var(--header-height) + 24px); }
.location-directory-grid { display: grid; gap: 48px; }
.location-directory-card { min-width: 0; }
.location-directory-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
  scroll-margin-block: calc(var(--header-height) + 16px) 100px;
}
.location-directory-media { position: relative; overflow: hidden; border-radius: 8px; }
.location-directory-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity var(--feedback-duration) ease;
}
.location-directory-body { min-width: 0; margin-top: 16px; }
[data-location-gallery] + .location-directory-link { height: auto; }
.location-gallery-track {
  position: relative;
  display: flex;
  aspect-ratio: 4 / 3;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  color: inherit;
  text-decoration: none;
}
.location-gallery-track::-webkit-scrollbar { display: none; }
.location-gallery-track:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.location-gallery-slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.location-gallery-slide .location-directory-photo { height: 100%; user-select: none; }
[data-location-gallery] > .location-card-status { pointer-events: none; }
/* Match the existing room-detail gallery counter. */
.location-gallery-count { position: absolute; right: 12px; bottom: 12px; padding: 5px 12px; border-radius: 6px; background: #0009; color: #fff; font: 500 12px/16px var(--font-num); pointer-events: none; }
.location-gallery-count strong { font-weight: 700; }
.location-card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.location-detail-action { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; color: var(--locations-body); font-size: 13px; line-height: 20px; font-weight: 400; white-space: nowrap; }
.location-detail-action .ic { width: 16px; height: 16px; }
.location-gallery-track:active .location-directory-photo { opacity: .92; }
.location-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}
.location-card-heading .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }
.location-card-place, .location-card-name { white-space: nowrap; }
.location-place-divider { flex: 0 0 1px; width: 1px; height: 14px; background: var(--muted); font-size: 0; }
.location-card-status {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-block;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  border-radius: 4px;
  color: var(--paper);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.location-card-status.is-open {
  background: #486860;
  color: var(--paper);
}
.location-card-status.is-preparing { background: var(--ink); }
.location-card-description { margin-top: 8px; color: var(--locations-body); font-size: 15px; line-height: 26px; font-weight: 400; }
.location-card-facts { display: grid; gap: 8px; margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 24px; }
.location-card-facts > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.location-card-facts dt { display: flex; align-items: flex-start; padding-top: 2px; color: var(--muted); font-weight: 400; }
.location-card-facts dt .ic { width: 20px; height: 20px; }
.location-card-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.location-card-note { display: inline-block; color: var(--muted); }
.location-directory-link:focus-visible, .locations-support a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.location-directory-link:active .location-directory-photo { opacity: .85; }

.location-directory-photo.is-pending { display: grid; place-items: center; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 20px; }

.locations-support { position: relative; padding-block: var(--locations-space); background: var(--surface); scroll-margin-top: calc(var(--header-height) + 24px); }
.locations-support h2 { min-width: 0; font-size: 24px; line-height: 34px; font-weight: 700; }
.locations-experience-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%; /* 滞在をもっと見る: two cards and the next peeking, as on the news pages */
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  margin: 28px calc(-1 * var(--gutter)) 0;
  padding: 6px var(--gutter);
  scrollbar-width: none;
  list-style: none;
}
.locations-experience-grid > li { min-width: 0; scroll-snap-align: start; }
.locations-experience-grid::-webkit-scrollbar { display: none; }
.locations-experience-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.locations-experience-link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; transition: opacity var(--feedback-duration) ease; }
.locations-experience-link h3 { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 700; }
.locations-experience-names { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 20px; }
.locations-experience-link:active img { opacity: .85; }
.locations-page .site-footer { position: relative; }
.locations-support::before, .locations-page .site-footer::before {
  content: "";
  position: absolute;
  inset: -17px 0 auto;
  height: 18px;
  pointer-events: none;
  background: var(--surface);
  -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
  mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
}
.locations-page .site-footer::before { background: var(--ink); }
@media (min-width: 768px) {
  .locations-page { --locations-space: 80px; }
  .locations-intro { padding-block: 48px 40px; }
  .locations-intro h1 { font-size: 36px; line-height: 48px; }
  .location-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
  .locations-intro p, .location-card-description, .locations-experience-lead, .locations-experience-link p { font-size: 16px; line-height: 28px; }
  .location-card-facts { font-size: 14px; }
  .locations-support h2 { font-size: 28px; line-height: 40px; }
  .locations-experience-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; overflow: visible; margin: 40px 0 0; padding: 6px 0; }
  .locations-experience-link h3 { font-size: 18px; line-height: 28px; }
  .locations-experience-link img { aspect-ratio: 4 / 3; }
  .locations-experience-names { font-size: 14px; line-height: 22px; }
}
@media (min-width: 1024px) {
  .locations-page { --locations-space: 88px; }
  .location-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .locations-support h2 { font-size: 30px; line-height: 42px; }
  .locations-experience-grid { gap: 32px; }
}
@media (hover: hover) {
  .location-directory-link:hover:not(:active) .location-directory-photo,
  .locations-experience-link:hover:not(:active) img { opacity: .92; }
  .location-directory-link:hover .location-card-name { text-decoration: underline; text-underline-offset: 4px; }
  .locations-experience-link:hover:not(:active) h3 { text-decoration: underline; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .locations-page { --feedback-duration: 0ms; }
}