/* Shared public UI: typography, icons and square tour card images. */
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/noto-sans-thai-regular.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/noto-sans-thai-bold.ttf") format("truetype"); }
@font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/material-icons.ttf") format("truetype"); }
body { font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; }
.material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
#main:focus { outline: none; }

/* Shared rails keep native touch scrolling and support pointer dragging. */
[data-slider] { touch-action: pan-x pan-y pinch-zoom; }
.home-banner-viewport { touch-action: pan-y pinch-zoom; }
:is([data-slider], .home-banner-viewport).is-draggable { cursor: grab; }
:is([data-slider], .home-banner-viewport).is-draggable.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; scroll-snap-type: none; }
:is([data-slider], .home-banner-viewport) img { -webkit-user-drag: none; }
[data-slider].is-dragging .tour-card:hover { transform: none; }
.tour-card-slider { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 18px; }
.tour-card-slider::-webkit-scrollbar { display: none; }
.tour-card-slider > * { min-width: 0; scroll-snap-align: start; }
.tour-card-slider > .tour-card { height: 100%; }
@media (max-width: 820px) {
  .tour-card-slider { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; }
}
@media (max-width: 600px) {
  .tour-card-slider { grid-auto-columns: 86%; gap: 14px; }
  .tour-detail-page .slider-controls { display: flex; }
  .flash-sale-slider[data-slider] { display: grid; columns: auto; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: 0; padding: 4px 2px 18px; }
  .flash-sale-slider[data-slider] > .flash-sale-slide { display: block; margin: 0; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  [data-slider] { scroll-behavior: auto; }
}

/* The image stays square independently of the height of adjacent tour details. */
.tour-card[data-tour-slug] > .tour-photo-link {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-self: start;
}
.tour-card[data-tour-slug] > .tour-photo-link > .tour-photo {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
}
.tour-card[data-tour-slug] .tour-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tour-card[data-tour-slug] > .heart { min-width: 44px; min-height: 44px; }
.tour-card[data-tour-slug] .detail-button { min-height: 44px; }
.tour-card[data-tour-slug] :is(a, button, summary):focus-visible {
  outline: 3px solid #c51b47;
  outline-offset: 3px;
}