.water-page .water-hero { background-image: linear-gradient(rgba(0, 45, 80, .18), rgba(0, 45, 80, .18)), url("../img/facilities/cover.webp"); }
.facilities-content { width: min(100% - 48px, 1100px); margin: 58px auto 80px; }
.facilities-content > h2 { margin: 0 0 28px; padding-bottom: 24px; border-bottom: 3px solid #19ad69; color: #00a84d; font-size: 28px; font-weight: 700; text-align: center; }
.facilities-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 34px; margin: 0; padding: 36px 0 0; list-style: none; }
.facility-card { min-width: 0; }
.facility-card button { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #fff; color: #fff; cursor: pointer; font: inherit; text-align: center; box-shadow: 0 3px 12px rgba(0, 60, 55, .12); transition: transform .25s ease, box-shadow .25s ease; }
.facility-card button:hover, .facility-card button:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 100, 80, .22); }
.facility-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.facility-card__caption { display: block; min-height: 62px; padding: 10px 8px 8px; background: linear-gradient(100deg, #08a9dc, #26b66c); }
.facility-card__caption strong, .facility-card__caption small { display: block; }
.facility-card__caption strong { font-size: 18px; line-height: 1.25; }
.facility-card__caption small { margin-top: 2px; font-size: 11px; line-height: 1.3; }
.facilities-map { margin-top: 64px; }
.facilities-map iframe { display: block; width: 100%; height: 620px; border: 0; }
.facility-dialog { width: min(92vw, 1000px); max-height: 92vh; padding: 0; border: 0; background: transparent; color: #111; }
.facility-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.facility-dialog__panel { position: relative; overflow: auto; max-height: 92vh; padding: 30px 36px 36px; background: #fff; }
.facility-dialog__title { margin: 0 0 24px; padding: 14px 54px; background: linear-gradient(100deg, #08a9dc, #26b66c); color: #fff; font-size: 25px; text-align: center; }
.facility-dialog__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.facility-dialog__description { margin: 24px 8px 0; font-size: 15px; line-height: 1.9; white-space: pre-line; }
.facility-dialog__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.facility-dialog__gallery:empty { display: none; }
.facility-dialog__gallery button { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #eee; cursor: pointer; }
.facility-dialog__gallery img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.facility-dialog__gallery button:hover img, .facility-dialog__gallery button:focus-visible img { opacity: .84; transform: scale(1.025); }
.facility-dialog__close { position: absolute; top: 8px; right: 10px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #18785b; font-size: 28px; line-height: 1; cursor: pointer; }
body.has-open-dialog { overflow: hidden; }
@media (max-width: 768px) {
  .facilities-content { width: calc(100% - 30px); margin: 38px auto 55px; }
  .facilities-content > h2 { margin-bottom: 20px; padding-bottom: 17px; font-size: 23px; }
  .facilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding-top: 20px; }
  .facility-card__caption { min-height: 55px; padding: 8px 4px 6px; }
  .facility-card__caption strong { font-size: 14px; }
  .facility-card__caption small { font-size: 9px; }
  .facilities-map { margin-top: 42px; }
  .facilities-map iframe { height: 440px; }
  .facility-dialog__panel { padding: 18px 16px 24px; }
  .facility-dialog__title { margin-bottom: 16px; padding: 12px 44px 12px 15px; font-size: 19px; }
  .facility-dialog__description { margin: 18px 2px 0; font-size: 14px; }
  .facility-dialog__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
}