/* plh-districts v5 — built from home-districts-embed.html */
#plh-distsrc { display: none !important; }

.plh-dist {
  padding: var(--sections--paddings--pd-default, 80px) 0;
  font-family: Manrope, sans-serif;
  color: #303030;
}
.plh-dist__in { max-width: 1366px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.plh-dist__h {
  margin: 0; font-size: 44px; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.02em; color: #303030;
}
.plh-dist__lead {
  margin: 12px 0 0; max-width: 640px;
  font-size: 18px; font-weight: 500; line-height: 1.5; color: #838383;
}

.plh-dist__grid {
  margin-top: 40px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
}
.plh-dist__grid > :first-child { grid-column: span 2; }
/* Seven tiles fill a 5 × 2 board exactly: Central wide (first), Pratumnak tall, East wide. */
.plh-dist__grid[data-n="7"] { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 250px; }
.plh-dist__grid[data-n="7"] > .is-tall { grid-row: span 2; }
.plh-dist__grid[data-n="7"] > .is-wide { grid-column: span 2; }
/* Six tiles (East Pattaya merged into Jomtien, 2026-10-20) fill a 4 × 2
   board: Central wide, Pratumnak tall. */
.plh-dist__grid[data-n="6"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; }
.plh-dist__grid[data-n="6"] > .is-tall { grid-row: span 2; }

.plh-dist__tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: 16px; background: #eeeeee;
  color: #303030; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 420ms cubic-bezier(.23,1,.32,1), box-shadow 420ms cubic-bezier(.23,1,.32,1);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: keep the radius clip while the photo scales */
}
.plh-dist__tile,
.plh-dist__tile:hover,
.plh-dist__tile:focus { color: #303030; text-decoration: none; }
.plh-dist__tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.23,1,.32,1);
  will-change: transform; backface-visibility: hidden;
}
/* focal points for the generated set (2026-10-20): the Jomtien frame keeps
   its tower at the right edge, the Na Jomtien tower sits left of centre */
.plh-dist__tile[data-k="jomtien"] img { object-position: 78% 50%; }
.plh-dist__tile[data-k="najomtien"] img { object-position: 40% 50%; }
.plh-dist__tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16,32,54,0.34), rgba(16,32,54,0) 46%);
}
.plh-dist__lab {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  max-width: calc(100% - 24px); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.plh-dist__txt { display: flex; flex-direction: column; min-width: 0; }
.plh-dist__name {
  font-size: 15px; font-weight: 600; line-height: 1.25; color: #303030;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plh-dist__count {
  font-size: 13px; font-weight: 500; line-height: 1.3; color: #838383;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plh-dist__count:empty { display: none; }
.plh-dist__go {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  background: #1F3A5F; color: #fff;   /* site-wide: navy disc, white arrow */
  transition: background 420ms cubic-bezier(.23,1,.32,1);
}
.plh-dist__go svg { width: 16px; height: 16px; transition: transform 420ms cubic-bezier(.23,1,.32,1); }

/* Hover is deliberately quiet (client, 2026-10-19: "it flashes and jumps").
   The arrow disc is navy at rest (as on every other card on the site) and only
   deepens to the hover token over 420 ms; the arrow drifts 2 px, the photo
   zooms 3 % over 700 ms, the tile rises 2 px. */
@media (hover: hover) and (pointer: fine) {
  .plh-dist__tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,46,79,0.12); }
  .plh-dist__tile:hover img { transform: scale(1.03); }
  .plh-dist__tile:hover .plh-dist__go svg { transform: translateX(2px); }
  .plh-dist__tile:hover .plh-dist__go { background: #162B47; }
}
.plh-dist__tile:active { transform: scale(0.99); transition-duration: 120ms; }
.plh-dist__tile:focus-visible { outline: 2px solid #1F3A5F; outline-offset: 3px; }


/* Tablet: 3 columns — Central wide, Pratumnak tall, the rest in a row of three. */
@media (max-width: 1199px) {
  .plh-dist__grid,
  .plh-dist__grid[data-n="6"],
  .plh-dist__grid[data-n="7"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .plh-dist__grid[data-n="7"] > .is-wide:not(:first-child) { grid-column: auto; }
  /* six on three columns: the last tile closes the third row */
  .plh-dist__grid[data-n="6"] > :last-child { grid-column: span 2; }
}
@media (max-width: 991px) {
  .plh-dist__h { font-size: 36px; }
}
/* Phone: 2 columns, the first tile across both. */
@media (max-width: 767px) {
  .plh-dist { padding: var(--sections--paddings--pd-small, 64px) 0; }
  .plh-dist__h { font-size: 28px; }
  .plh-dist__lead { font-size: 16px; }
  .plh-dist__grid { margin-top: 28px; gap: 12px; }
  .plh-dist__grid,
  .plh-dist__grid[data-n="6"],
  .plh-dist__grid[data-n="7"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 172px; }
  .plh-dist__grid[data-n="6"] > .is-tall,
  .plh-dist__grid[data-n="7"] > .is-tall { grid-row: auto; }
  /* Russian names ("Центральная Паттайя") do not fit a 165px tile on one line:
     the name may take two, so the plate becomes a rounded rectangle. */
  .plh-dist__lab { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 7px 7px 7px 12px; gap: 8px; border-radius: 14px; }
  .plh-dist__name {
    font-size: 14px; line-height: 1.2; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .plh-dist__count { font-size: 12px; }
  .plh-dist__go { width: 26px; height: 26px; }
  .plh-dist__go svg { width: 14px; height: 14px; }
}
@media (max-width: 420px) {
  .plh-dist__grid,
  .plh-dist__grid[data-n="6"],
  .plh-dist__grid[data-n="7"] { grid-auto-rows: 150px; }
  .plh-dist__go { display: none; }
  .plh-dist__lab { padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .plh-dist__tile, .plh-dist__tile img, .plh-dist__go, .plh-dist__go svg { transition: none; }
  .plh-dist__tile:hover, .plh-dist__tile:hover img, .plh-dist__tile:hover .plh-dist__go svg, .plh-dist__tile:active { transform: none; }
}