/* ==========================================================================
   Sri Lanka Travel Tours — Things to Do (SEO hub page, mockup only)
   ========================================================================== */

/* ---- Title bar (Lonely Planet "Best in Travel"-style banner) ----
   Scoped to --ttd/--eyebrow so the shared .tours-titlebar used on other
   hub pages (tours-hub, destinations-hub, sigiriya, tour-detail) is
   untouched. ---- */

.ttd-titlebar-clip {
  position: relative;
}

.tours-titlebar--ttd {
  position: relative;
  background-color: #5d96ff;
  text-align: center;
  clip-path: inset(0 0 2px 0);
  transform: rotate(-1deg);
}

.tours-titlebar--ttd::before,
.tours-titlebar--ttd::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #5d96ff;
}

.tours-titlebar--ttd::before {
  left: 0;
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.tours-titlebar--ttd::after {
  right: 0;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

/* ---- Eyebrow row: same plain-div pattern as .tours-titlebar__year-row,
   so the badge can be centered + rotated like a stamp/sticker. The
   centered/rotated text is wider than the viewport on narrow screens —
   overflow: hidden clips the bleed here instead of it widening the whole
   page's scrollable area. (Setting only overflow-x makes the browser
   imply overflow-y: auto, which added an unwanted vertical scrollbar —
   both axes need to be explicit.) ---- */
.tours-titlebar__eyebrow-row {
  position: relative;
  margin-top: 28px;
  height: 48px;
  overflow: hidden;
  transform: rotate(-1deg);
}

.tours-titlebar__eyebrow {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  display: inline-block;
  white-space: nowrap;
  /* This sits directly on the page (its row is a sibling of, not nested
     inside, the blue .tours-titlebar--ttd banner below it) — no
     background here to contrast a hardcoded white against, so the color
     needs to react to theme like the rest of the page text. */
  color: var(--slt-ink);
  font-family: "Krona One", var(--font-base);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  margin: 0;
}

.tours-titlebar--ttd h1.tours-titlebar__caps {
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  font-family: "Krona One", var(--font-base);
  font-size: clamp(2rem, 8vw, 200px);
  font-weight: 400;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.tours-titlebar__year {
  position: absolute;
  bottom: 6px;
  display: inline-block;
  white-space: nowrap;
  background-color: #FFBF00;
  color: #14171a;
  font-family: "Krona One", var(--font-base);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 4px 0px;
}

/* ---- Catalog section head ---- */
/* ---- Browse by activity ---- */
.ttd-activities {
  padding-block: 24px;
  border-bottom: 1px solid var(--slt-gray-200);
}

.ttd-activities h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 14px;
}

.ttd-activity-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ttd-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slt-ink);
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  padding: 8px 16px;
}

.ttd-activity-chip:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.ttd-activity-chip i {
  width: 8px;
  height: 8px;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-blue);
  display: inline-block;
}

/* ---- Region sections ---- */
.ttd-region {
  padding-block: 36px;
  border-bottom: 1px solid var(--slt-gray-200);
}

.ttd-region__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.ttd-region__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slt-blue);
}

.ttd-region__head h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 4px 0 6px;
}

.ttd-region__head p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--slt-gray-600);
  margin: 0;
  max-width: 520px;
  min-height: 3em;
}

.ttd-region__viewall {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--slt-blue);
  white-space: nowrap;
}

/* ---- Region thumbs (tours.html cross-promo — 6 in a row, no scroll) ---- */
.ttd-region-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.ttd-region-thumbs .ttd-place-card__body {
  padding: 12px;
}

.ttd-region-thumbs .ttd-place-card__body h3 {
  font-size: 0.95rem;
  min-height: 0;
}

/* ---- Region tabs ---- */
.ttd-region-tabs-wrap {
  border-bottom: 2px solid var(--slt-gray-200);
  padding-block: 16px;
padding-top: 80px;
}

.ttd-region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ttd-region-tab {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slt-gray-600);
  background-color: var(--slt-surface-subtle);
  border: none;
  border-radius: var(--slt-radius-sm);
  padding: 10px 18px;
  cursor: pointer;
}

.ttd-region-tab:hover {
  color: var(--slt-ink);
}

.ttd-region-tab.is-active {
  background-color: var(--slt-ink);
  color: var(--slt-surface);
}

/* ---- Dark theme: match the softer filled-chip treatment used by
   .tours-pill.is-active instead of a stark white/black inversion ---- */
:root[data-theme="dark"] .ttd-region-tab.is-active {
  background-color: var(--slt-slate-100);
  color: var(--slt-slate-900);
}

/* ---- Region place grid (wraps — no horizontal scroll) ---- */
.ttd-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---- Load more (same pattern as the tours page) ---- */
.tours-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}

.tours-loadmore__count {
  margin: 0;
  font-size: 0.88rem;
  color: var(--slt-gray-600);
}

.tours-loadmore__bar {
  width: 220px;
  height: 4px;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-gray-200);
  overflow: hidden;
}

.tours-loadmore__fill {
  height: 100%;
  background-color: var(--slt-blue);
  border-radius: var(--slt-radius-sm);
}

.tours-loadmore__btn {
  margin-top: 6px;
  background-color: transparent;
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  padding: 12px 28px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--slt-ink);
  cursor: pointer;
}

.tours-loadmore__btn:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.ttd-place-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
  background-color: var(--slt-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* .ttd-place-card sets its own display: flex above, which wins over the
   browser's default [hidden] rule (author styles always beat user-agent
   styles) — without this, card.hidden = true from the filter pills left
   the card visible. */
.ttd-place-card[hidden] {
  display: none;
}

.ttd-place-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
}

.ttd-place-card__media {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ttd-place-card__media--a { background: linear-gradient(135deg, #a9c7e8, #5380b5); }
.ttd-place-card__media--b { background: linear-gradient(135deg, #d8c389, #8a6d3b); }
.ttd-place-card__media--c { background: linear-gradient(135deg, #c9b3e8, #7649c9); }
.ttd-place-card__media--d { background: linear-gradient(135deg, #9aa8d9, #4c5fa8); }
.ttd-place-card__media--e { background: linear-gradient(135deg, #e8a9a9, #c24545); }
.ttd-place-card__media--f { background: linear-gradient(135deg, #9fd6c0, #2f8f6a); }
.ttd-place-card__media--g { background: linear-gradient(135deg, #f0a9c4, #c25a87); }
.ttd-place-card__media--h { background: linear-gradient(135deg, #cfe0a9, #7d9c4a); }
.ttd-place-card__media--i { background: linear-gradient(135deg, #b3a0d6, #5c3f99); }
.ttd-place-card__media--j { background: linear-gradient(135deg, #9bc7d6, #3d7e95); }
.ttd-place-card__media--k { background: linear-gradient(135deg, #5d96ff, #104ab3); }
.ttd-place-card__media--l { background: linear-gradient(135deg, #b9d99a, #6b9c4a); }
.ttd-place-card__media--m { background: linear-gradient(135deg, #f3b89a, #d9703f); }
.ttd-place-card__media--n { background: linear-gradient(135deg, #e8d9a0, #b89656); }
.ttd-place-card__media--o { background: linear-gradient(135deg, #8bb4ff, #1459d9); }
.ttd-place-card__media--p { background: linear-gradient(135deg, #a0b8d6, #3f5e85); }
.ttd-place-card__media--q { background: linear-gradient(135deg, #9adbe0, #2c8a92); }
.ttd-place-card__media--r { background: linear-gradient(135deg, #f0c98b, #c97f2f); }
.ttd-place-card__media--s { background: linear-gradient(135deg, #c4a8e0, #6a3f99); }
.ttd-place-card__media--t { background: linear-gradient(135deg, #aee0c4, #3f9966); }
.ttd-place-card__media--u { background: linear-gradient(135deg, #e0aec0, #99405f); }
.ttd-place-card__media--v { background: linear-gradient(135deg, #8bc7e0, #1f6f8f); }
.ttd-place-card__media--w { background: linear-gradient(135deg, #d6c79a, #8a6d2f); }
.ttd-place-card__media--x { background: linear-gradient(135deg, #9ae0d0, #2f9980); }
.ttd-place-card__media--y { background: linear-gradient(135deg, #d6a89a, #993f2f); }
.ttd-place-card__media--z { background: linear-gradient(135deg, #c9d68b, #7d992f); }
.ttd-place-card__media--aa { background: linear-gradient(135deg, #a8b3e0, #3f4f99); }
.ttd-place-card__media--bb { background: linear-gradient(135deg, #e0c4a8, #995f2f); }
.ttd-place-card__media--cc { background: linear-gradient(135deg, #d68be0, #8a2f99); }
.ttd-place-card__media--dd { background: linear-gradient(135deg, #8be0a0, #2f9954); }
.ttd-place-card__media--ee { background: linear-gradient(135deg, #e0d68b, #99852f); }

.ttd-place-card__body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ttd-place-card__body h3 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  min-height: 3.9em;
}

/* ---- Region grid cards (things-to-do.html) — no border, body
   background matches .tour-card__body, title clamps to 3 lines, and
   the banner flexes into whatever space a shorter title leaves
   unused (same fixed-height + flex:1 media pattern as .tour-card). ---- */
.ttd-region-grid .ttd-place-card {
  height: 400px;
  border: none;
}

.ttd-region-grid .ttd-place-card__media {
  aspect-ratio: unset;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.ttd-region-grid .ttd-place-card__body {
  flex: 0 0 auto;
  background-color: var(--slt-surface-subtle);
}

.ttd-region-grid .ttd-place-card__body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

.ttd-place-card--more {
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--slt-surface-subtle);
  border-style: dashed;
  min-height: 220px;
}

.ttd-place-card--more span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slt-gray-600);
  padding: 16px;
}

/* ---- FAQ ---- */
.ttd-faq {
  padding-block: 36px 56px;
}

.ttd-faq h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 8px;
}

.ttd-faq__item {
  border-top: 1px solid var(--slt-gray-200);
}

.ttd-faq__item:first-of-type {
  border-top: none;
  margin-top: 12px;
}

.ttd-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
}

.ttd-faq__item summary::-webkit-details-marker {
  display: none;
}

.ttd-faq__item svg {
  width: 18px;
  height: 18px;
  color: var(--slt-gray-600);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ttd-faq__item[open] svg {
  transform: rotate(180deg);
}

.ttd-faq__item p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--slt-gray-600);
  line-height: 1.6;
}

.ttd-faq__item p a {
  color: var(--slt-blue);
  text-decoration: underline;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 991.98px) {
  .ttd-region-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ttd-region-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575.98px) {
  .ttd-region-grid {
    grid-template-columns: 1fr;
  }

  .ttd-region-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }

  .ttd-region-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .ttd-region-tabs::-webkit-scrollbar {
    display: none;
  }

  .ttd-region-tab {
    flex-shrink: 0;
  }

  /* ---- Title bar eyebrow — at the desktop 30px size + 2px
     letter-spacing this badge is ~720px wide, several times the phone
     viewport; overflow: hidden on its row (above) only stops that from
     widening the whole page, it doesn't stop the text itself from being
     clipped down to an unreadable fragment. Shrunk here so the full
     phrase actually fits. ---- */
  .tours-titlebar__eyebrow {
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 5px 10px;
  }

  .tours-titlebar__eyebrow-row {
    margin-top: 20px;
    height: 30px;
  }

  /* ---- "This month" badge — at 26px fixed it barely reads as smaller
     than the caps title once that title clamps down on phones (title
     ~39px vs badge 26px, near-identical heights), so it stopped looking
     like a secondary badge. Text scaled well down here, but horizontal
     padding added back so the badge chip still spans a good chunk of the
     title behind it rather than shrinking to a tiny tag. ---- */
  .tours-titlebar__year {
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 3px 0;
  }

  .ttd-region__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ttd-region-tabs-wrap {
    padding-top: 42px;
  }

  .ttd-activities h2,
  .ttd-region__head h2,
  .ttd-faq h2 {
    font-size: 1.6rem;
    letter-spacing: -0.5px;
  }

  /* .ttd-place-card__body h3 has no mobile override anywhere and sits
     below the 20px heading floor at its base 1.2rem — bumped here since
     it's a real place-card title (things-to-do/index.php). */
  .ttd-place-card__body h3 {
    font-size: 1.25rem;
  }

  .ttd-builder__list {
    grid-template-columns: 1fr;
  }

}

@media (min-width: 1440px) {
  .ttd-region-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1920px) {
  .ttd-region-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}