/* Owner-approved Mina V3 gallery. Surrounding page and hero styles are preserved. */
.gallery { background: var(--offwhite); padding: 56px 56px 32px; }
.gallery > .section-inner { max-width: 1216px; }
.gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.gallery-heading .section-title { margin: 0; font-size: 44px; font-weight: 500; line-height: 1.15; letter-spacing: -.8px; text-wrap: balance; }
html[lang="th"] .gallery-heading .section-title { font-family: 'Noto Sans Thai', sans-serif; font-size: 38px; letter-spacing: 0; }
.gallery-booking-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 12px 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--navy); text-decoration: none; white-space: nowrap; }
.gallery-booking-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; container-type: inline-size; }
.gallery-item { display: block; min-width: 0; overflow: hidden; grid-column: span 4; }
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-item:nth-child(1), .gallery-item:nth-child(9) { grid-column: span 12; aspect-ratio: 3 / 2; }
.gallery-item:nth-child(2) { grid-column: span 5; height: calc((100cqw - 16px) * .29); }
.gallery-item:nth-child(3) { grid-column: span 7; height: calc((100cqw - 16px) * .29); }
.gallery-item:nth-child(4) { grid-column: span 7; height: calc((100cqw - 16px) * .389); }
.gallery-item:nth-child(5) { grid-column: span 5; height: calc((100cqw - 16px) * .389); }
.gallery-item:nth-child(6), .gallery-item:nth-child(7), .gallery-item:nth-child(8) { aspect-ratio: 3 / 2; }
.gallery-item:nth-child(3) img { object-position: 50% 58%; }
.gallery-item:nth-child(5) img { object-position: 100% 50%; }
.gallery-item:nth-child(9) { margin-top: 8px; }
.gallery-item:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.gallery-booking { display: flex; justify-content: center; padding-top: 28px; }
.gallery-booking .book-btn { justify-content: center; gap: 16px; border-radius: 3px; padding: 15px 24px; min-height: 48px; font-size: 13px; line-height: 1.4; }
.gallery-booking svg, .gallery-booking-link svg { display: block; width: 16px; height: 16px; min-width: 16px; max-width: 16px; min-height: 16px; max-height: 16px; flex: 0 0 16px; color: inherit; }
.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; }
/* One deliberate transition after the gallery's preserved property facts. */
#ratings { padding-top: 32px; }
/* 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-description { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.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) {
  .stay-context { align-items: flex-start; flex-direction: column; gap: 16px; }
  .features-grid { gap: 0 32px; }
}
@media (max-width: 1024px) {
  .gallery { padding: 44px 28px 32px; }
  .gallery-heading .section-title { font-size: 38px; }
  .gallery-grid { gap: 12px; }
  .gallery-item:nth-child(2), .gallery-item:nth-child(3) { height: calc((100cqw - 12px) * .29); }
  .gallery-item:nth-child(4), .gallery-item:nth-child(5) { height: calc((100cqw - 12px) * .389); }
}
@media (max-width: 600px) {
  .gallery { padding: 28px 16px 32px; }
  .gallery-heading { margin-bottom: 20px; }
  .gallery-heading .section-title { font-size: 30px; line-height: 1.15; letter-spacing: -.45px; max-width: 330px; }
  html[lang="th"] .gallery-heading .section-title { font-size: 27px; line-height: 1.3; }
  .gallery-booking-link { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery .gallery-item { grid-column: span 1; height: auto; aspect-ratio: 3 / 2; }
  .gallery .gallery-item:nth-child(1), .gallery .gallery-item:nth-child(4), .gallery .gallery-item:nth-child(9) { grid-column: span 2; }
  .gallery-item:nth-child(3) img, .gallery-item:nth-child(5) img { object-position: 50% 50%; }
  .gallery-item:nth-child(9) { margin-top: 0; }
  .gallery-booking { padding-top: 24px; }
  .gallery-booking .book-btn { 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)); }
}