/**
 * What is in this town — town pages and the "More in <town>" block on a
 * listing. Cards come from find-a-trip.css; this only places them.
 */

/* The Find-a-trip wrapper carries page spacing for its own page; not here. */
.sarea.sft-wrap { padding-top: 0; padding-bottom: 0; }

/* Town page: the paragraph and the groups sit in the page's normal column,
   lined up with the title above (the paragraph used to run edge to edge). */
.sarea--town {
  max-width: 1290px;
  margin: 0 auto;
  padding: 40px 20px 64px !important;
  box-sizing: border-box;
}
.sarea-intro { max-width: 860px; font-size: 16px; line-height: 1.7; color: var(--sft-text-2); }
.sarea-group { margin-top: 48px; }
.sarea h2.sarea-title { margin: 0 0 20px !important; font-size: 26px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--sft-text-1) !important; }
.sarea .sarea-empty { margin: 0; font-size: 15px; color: var(--sft-text-3); }

/* One picture shape for the whole site: 16:9. */
.sarea .sft-card-img { aspect-ratio: 16 / 9; }
.sarea h3.sft-card-title { margin: 0 0 6px !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
.sarea .sarea-noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--sft-primary-ultra); color: var(--sft-primary); }
.sarea .sarea-noimg .svgico { width: 36px; height: 36px; }

/* Listing page: "More in Kandy", 3 cards per group. */
.sarea--listing { margin-top: 8px; }
.sarea-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sarea-all { font-size: 15px; font-weight: 700; color: var(--sft-primary); text-decoration: none; white-space: nowrap; }
.sarea-all:hover { text-decoration: underline; color: var(--sft-primary-dark); }
.sarea-group--small { margin-top: 24px; }
.sarea h3.sarea-subtitle { margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--sft-text-3) !important; }
.sarea .sarea-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767px) {
  .sarea .sarea-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .sarea--town { padding: 28px 16px 48px !important; }
}

/* ─────────── "Explore other options": tabs + one pair of arrows ─────────── */
.sarea--explore { margin-top: 8px; }
.sarea-explore-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sarea--explore .st-heading { margin-bottom: 6px; }
.sarea .sarea-explore-sub { margin: 0 !important; font-size: 15px !important; color: var(--sft-text-2); }
.sarea-explore-sub .sarea-all { margin-left: 6px; }
.sarea-arrows { display: flex; gap: 10px; }
.sarea .sarea-arrow {
  width: 40px; height: 40px; padding: 0; border-radius: 9999px;
  border: 1px solid var(--sft-border); background: #fff; color: var(--sft-text-1);
  font-size: 24px; line-height: 1; cursor: pointer; text-transform: none;
}
.sarea .sarea-arrow:hover { border-color: var(--sft-primary); color: var(--sft-primary); background: #fff; }
.sarea-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.sarea .sarea-tab {
  padding: 9px 16px; border-radius: 9999px; border: 1px solid var(--sft-border);
  background: #fff; color: var(--sft-text-2); font-size: 14px; font-weight: 600;
  line-height: 1.2; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.sarea .sarea-tab.is-on { background: var(--sft-primary); border-color: var(--sft-primary); color: #fff; }
.sarea-tab-n { opacity: .75; font-weight: 500; margin-left: 2px; }
.sarea-pane[hidden] { display: none !important; }
.sarea--explore .owl-stage-outer { padding: 4px 2px 12px; }
@media (max-width: 767px) { .sarea-explore-head { align-items: flex-start; } }
.sarea--explore h2.st-heading { margin: 0 0 6px !important; }

/* Every card the same width and height, whatever its kind (Chiran). */
.sarea--explore .owl-stage { display: flex; }
.sarea--explore .owl-item { display: flex; }
.sarea--explore .item-slide { display: flex; width: 100%; }
.sarea--explore .sarea-card { display: flex; width: 100%; }
.sarea--explore .sarea-card > .item { display: flex; flex-direction: column; width: 100%; }
.sarea--explore .sarea-card .content-item { display: flex; flex-direction: column; flex: 1; }
.sarea--explore .sarea-card .content-inner { flex: 1; }
.sarea--explore .sarea-card .featured-image { aspect-ratio: 3 / 2; overflow: hidden; }
.sarea--explore .sarea-card .featured-image img.image-feature { width: 100%; height: 100%; object-fit: cover; }
.sarea--explore .sarea-card-stars { min-height: 18px; margin-bottom: 6px; }
.sarea--explore .sarea-noimg.image-feature { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--sft-primary-ultra); color: var(--sft-primary); }
.sarea--explore .sarea-noimg .svgico { width: 40px; height: 40px; }
.sarea--explore .sarea-noprice { font-size: 14px; color: var(--sft-text-3); }
.sarea--explore .sarea-card a.sarea-card-imglink { display: block; height: 100%; }
.sarea--explore .sarea-card .price-wrapper { min-height: 28px; }