/* Mina Pass 2: property photography and restrained hospitality refinement.
   Loaded after shared styles; Pass 1 hero geometry and sticky behavior are preserved. */
.gallery { background: var(--offwhite); }
.gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gallery-heading .section-title { margin-bottom: 12px; }
.gallery-heading .section-body { max-width: 620px; }
.gallery-all { flex-shrink: 0; font: 600 14px 'Inter', 'Noto Sans Thai', sans-serif; color: var(--navy); background: transparent; border: 1px solid var(--navy); border-radius: 6px; padding: 13px 20px; min-height: 48px; cursor: pointer; }
.gallery-all:hover { background: var(--navy); color: white; }
.gallery-all[hidden] { display: none; }
.gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 32px; }
.gallery-item { display: block; min-width: 0; overflow: hidden; background: #e2e8f0; border-radius: 3px; }
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.gallery-ready .gallery-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gallery-ready .gallery-item:first-child { grid-row: span 2; }
.gallery-ready .gallery-item:nth-child(n+6) { display: none; }
.gallery-ready .gallery-item:first-child img { aspect-ratio: auto; }
.gallery-item:focus-visible { outline-offset: 3px; overflow: visible; }
.stay-context { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; font-size: 14px; color: var(--grey); }
.stay-context p + p { margin-top: 5px; }
.stay-context .stay-facts { color: var(--navy); font-size: 16px; font-weight: 600; }
.stay-context a { flex-shrink: 0; color: var(--navy); text-underline-offset: 5px; padding: 12px 0; }
/* Make benefits and guest proof read as content, rather than repeated boxed controls. */
.features-grid { grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 32px; }
.feature-card { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 24px 0; }
.feature-card:hover { transform: none; border-color: var(--border); }
.feature-title { font-family: 'Playfair Display', 'Noto Sans Thai', serif; font-size: 23px; line-height: 1.35; margin-bottom: 10px; }
.feature-desc { max-width: 55ch; font-weight: 400; }
.ratings-row { gap: 0 36px; }
.rating-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 16px 0; min-width: 150px; }
.rating-card:hover { transform: none; }
.reviews-grid { gap: 12px 36px; }
.review-card { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; padding: 24px 0; }
.review-body { font-weight: 400; }
.contact-card { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 28px 0; margin-top: 36px; }
.booking-grid { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 12px; }
.booking-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 0; min-height: 48px; }
.booking-card:hover { transform: none; box-shadow: none; }
.booking-platform, .booking-cta { display: none; }
.booking-name::after { content: ' ↗'; color: var(--gold-ink); }
.hero-stat-label, .hero-rating span, .hero-price span, .hero-ota-link { color: rgba(255,255,255,.85); }
/* Full-photo viewer: native modal semantics, natural aspect ratios, no decorative motion. */
.photo-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #09192e; color: white; overflow: hidden; }
.photo-dialog[open] { display: flex; flex-direction: column; }
.photo-dialog::backdrop { background: #09192e; }
.photo-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: max(12px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left)); flex-shrink: 0; }
.photo-header h2 { font: 500 16px 'Inter', 'Noto Sans Thai', sans-serif; }
.photo-control { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; color: white; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; cursor: pointer; }
.photo-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.photo-control:hover { background: rgba(255,255,255,.12); }
.photo-dialog :focus-visible { outline: 2px solid #f0cf68; outline-offset: 3px; }
.photo-figure { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.photo-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); touch-action: pinch-zoom; }
.photo-image { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.photo-image[hidden], .photo-error[hidden] { display: none; }
.photo-error { max-width: 40ch; padding: 24px; text-align: center; }
.photo-original { display: inline-block; padding: 12px; color: #f0cf68; }
.photo-caption { display: flex; justify-content: center; align-items: baseline; gap: 16px; padding: 16px 24px 8px; font-size: 14px; color: #e2e8f0; flex-shrink: 0; text-align: center; }
.photo-position { white-space: nowrap; color: #f0cf68; font-variant-numeric: tabular-nums; }
.photo-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.15); }
.photo-navigation { display: flex; gap: 12px; }
.photo-dialog .book-btn { min-height: 48px; white-space: normal; text-align: center; justify-content: center; }
@media (max-width: 900px) {
  .gallery-heading, .stay-context { align-items: flex-start; flex-direction: column; gap: 16px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-ready .gallery-grid { grid-template-rows: auto; }
  .gallery-ready .gallery-item:first-child { grid-column: span 2; grid-row: auto; }
  .gallery-ready .gallery-item:first-child img { aspect-ratio: 3 / 2; }
  .features-grid { gap: 0 32px; }
}
@media (max-width: 600px) {
  .gallery-grid { gap: 6px; }
  .gallery-ready .gallery-item:nth-child(n+4) { display: none; }
  .gallery-all { width: 100%; }
  .features-grid { grid-template-columns: 1fr; }
  .ratings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .rating-card { min-width: 0; }
  .photo-header { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 12px; }
  .photo-header h2 { font-size: 14px; }
  .photo-stage { margin: 0; }
  .photo-caption { align-items: center; flex-direction: column; gap: 4px; padding: 12px 16px; font-size: 13px; }
  .photo-footer { gap: 12px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .photo-navigation { gap: 8px; }
  .photo-dialog .book-btn { font-size: 13px; padding: 10px 14px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .photo-header { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .photo-caption { padding: 6px 16px; }
  .photo-footer { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}