/* Facility pages on phones (Takeru, 11/11: 案A + 案B). Phones only; computers keep the page as it was.
   Sizes come from the 白銀比 steps of silver.css. place-phone.js adds the fold buttons this file styles. */

/* Computers: the fold buttons are not shown and everything stays open. */
.fold-toggle, .why__more { display: none; }
.do__more { display: contents; }

@media (max-width: 767px) {
  /* 案A: nearby facilities as one row to swipe sideways. The next card peeks in at the edge. */
  .page-place .card-grid--small {
    display: flex; gap: var(--s-n1); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 16px);
    margin-inline: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px) var(--s-n3);
    scrollbar-width: none;
  }
  .page-place .card-grid--small::-webkit-scrollbar { display: none; }
  .page-place .card-grid--small > .card { flex: 0 0 70.7%; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; scroll-snap-align: start; }
  /* The grid layout's spacing between rows of cards (proto.css) does not apply to a single row. */
  .page-place .detail__main > .section:has(.card-grid--small) .card-grid--small > .card:nth-child(n) { margin: 0; padding: 0; border: 0; }
  /* The card keeps the photo, kind, name, one line and the save button. 楽しみ方 and fees are on the facility's own page. */
  .page-place .card-grid--small .why, .page-place .card-grid--small .for-tags,
  .page-place .card-grid--small .card__facts, .page-place .card-grid--small .card__tags { display: none; }
  .page-place .card-grid--small .media { margin: 0 0 var(--s-n2); aspect-ratio: 1.414 / 1; }
  .page-place main .card-grid--small .card__kicker { margin: 0 0 var(--s-n4); font-size: var(--s-n1); line-height: var(--lh-head); }
  html:root body.ds.page-place main .card-grid--small .card__title { margin: 0 0 var(--s-n4); font-size: var(--s-0); line-height: var(--lh-head); }
  .page-place main .card-grid--small .card__lead {
    margin: 0 0 var(--s-n2); font-size: var(--s-n1); line-height: var(--lh-body); color: var(--c-text-weak);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .page-place .card-grid--small .btn--add { width: 100%; margin-top: auto; }

  /* 案B: the contents repeats the highlights right below it, so phones go straight to them. */
  /* The contents without photos: each highlight's name and its one-line summary, then the practical sections. */
  .page-place .detail__main > .visit-options { margin-top: var(--s-4); padding: var(--s-0); }
  .page-place .visit-options h2 { margin: 0 0 var(--s-n3); font-size: var(--s-n1); line-height: var(--lh-head); }
  .page-place .visit-options__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .page-place .visit-options__list li { display: block; padding: var(--s-n3) 0; border-top: 1px solid rgba(0, 0, 0, .08); }
  .page-place .visit-options__list li:first-child { border-top: 0; padding-top: 0; }
  .page-place .visit-options__list img { display: none; }
  .page-place .visit-options .visit-options__list a { min-height: 0; font-size: var(--s-0); line-height: var(--lh-head); }
  .page-place .visit-options__list span { font-size: var(--s-n1); line-height: var(--lh-head); color: var(--c-text-weak); }
  .page-place .visit-options__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); margin-top: var(--s-n3); padding-top: var(--s-n3); border-top: 1px solid rgba(0, 0, 0, .08); font-size: var(--s-n1); }
  .page-place .detail__main > .visit-options + .dos { margin-top: var(--s-8); }

  /* 楽しみ方のポイント stops after two lines; 続きを読む shows the rest and who wrote it. */
  .page-place .do__why:not(.is-open) .why__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .page-place .do__why:not(.is-open) .why__who { display: none; }
  .page-place .why__more {
    display: inline-flex; align-items: center; min-height: 44px; margin: var(--s-n4) 0 calc(-1 * var(--s-n2)); padding: 0;
    border: 0; background: none; color: var(--c-primary); font: inherit; font-size: var(--s-n1); line-height: var(--lh-head);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; cursor: pointer;
  }
  .page-place .why__more[hidden] { display: none; }

  /* Fees, times and booking fold into one line that already says the fee and whether to book. */
  .page-place .do__more:not(.is-open), .page-place .details:not(.is-open) > .details__extra { display: none; }
  .page-place .do__more { display: block; }
  .page-place .do__more { padding-bottom: var(--s-n2); }
  .page-place .do__more > .do__facts { padding-top: 0; border-top: 0; }
  .page-place .fold-toggle {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-n1);
    width: 100%; min-height: var(--s-8); margin: 0 0 var(--s-1); padding: var(--s-n2) 0;
    border: 0; border-block: 1px solid rgba(0, 0, 0, .12); background: none; color: var(--c-text);
    font: inherit; text-align: left; cursor: pointer;
  }
  .page-place .fold-toggle[aria-expanded="true"] { margin-bottom: var(--s-0); border-bottom-color: transparent; }
  .page-place .fold-toggle:focus-visible, .page-place .why__more:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
  .page-place .fold-toggle__label { grid-column: 1; font-size: var(--s-n1); line-height: var(--lh-head); color: var(--c-text-weak); }
  .page-place .fold-toggle__sum { grid-column: 1; font-size: var(--s-0); font-weight: 700; line-height: var(--lh-head); }
  .page-place .fold-toggle__closed { grid-column: 1; display: flex; gap: 0 var(--s-n2); margin-top: 2px; font-size: var(--s-n1); line-height: var(--lh-head); }
  .page-place .fold-toggle__closed-label { flex: none; color: var(--c-text-weak); }
  .page-place .fold-toggle__icon {
    grid-column: 2; grid-row: 1 / -1; display: grid; place-items: center;
    width: var(--s-4); height: var(--s-4); border: 1px solid rgba(0, 0, 0, .18); border-radius: 50%;
    transition: transform .2s ease;
  }
  .page-place .fold-toggle__icon::before {
    content: ""; width: 8px; height: 8px; margin-top: -4px;
    border-right: 1.5px solid var(--c-primary); border-bottom: 1.5px solid var(--c-primary); transform: rotate(45deg);
  }
  .page-place .fold-toggle[aria-expanded="true"] .fold-toggle__icon { transform: rotate(180deg); }
  .page-place .fold-toggle--section { margin-top: var(--s-4); }
  .page-place .fold-toggle--section .fold-toggle__sum { font-size: var(--s-1); }

  /* Location and access: the item name beside its value, as on a computer. */
  /* One name column for every section (six characters wide), so the values line up from contact down to access. */
  .page-place .details .facts { display: grid; grid-template-columns: calc(var(--s-n1) * 6) minmax(0, 1fr); column-gap: var(--s-0); }
  html:root body.ds.page-place .details .facts > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
  .page-place .details .facts dt { font-size: var(--s-n1); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .page-place .fold-toggle__icon { transition: none; }
}