/* ==========================================================================
   Sri Lanka Travel Tours — Place detail page (Things to Do guides)
   Built on top of tour-detail.css's .td-* layout/sidebar classes.
   ========================================================================== */

.ttd-crumb-row {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 20px;
}

.ttd-crumb-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ttd-crumb-row .td-title__h1 {
  margin: 10px 0 0;
}

.ttd-crumb-row .td-title__action {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .ttd-crumb-row__top {
    flex-wrap: wrap;
  }
}

.pd-activity-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.pd-activity {
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
}

.pd-activity__thumb {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--slt-radius-sm);
  object-fit: cover;
  display: block;
}

.pd-activity__thumb--a { background: linear-gradient(135deg, #a9c7e8, #5380b5); }
.pd-activity__thumb--b { background: linear-gradient(135deg, #d8c389, #8a6d3b); }
.pd-activity__thumb--c { background: linear-gradient(135deg, #9fd6c0, #2f8f6a); }
.pd-activity__thumb--d { background: linear-gradient(135deg, #c9b3e8, #7649c9); }
.pd-activity__thumb--e { background: linear-gradient(135deg, #f3b89a, #d9703f); }
.pd-activity__thumb--f { background: linear-gradient(135deg, #b9d99a, #6b9c4a); }

.pd-activity__body {
  padding: 18px;
}

.pd-activity__body h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 10px;
}

.pd-activity__body p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--slt-gray-600);
  margin: 0 0 14px;
}

.pd-activity__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  border-top: 1px solid var(--slt-gray-200);
  padding-top: 14px;
}

.pd-activity__fact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-activity__fact svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--slt-blue);
}

.pd-activity__fact div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-activity__fact span {
  font-size: 0.7rem;
  color: var(--slt-gray-600);
}

.pd-activity__fact strong {
  font-size: 0.85rem;
  font-weight: 700;
}

.pd-activity__fact .td-grade--sm strong {
  margin-left: 4px;
}

@media (max-width: 767.98px) {
  .pd-activity-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .pd-activity__thumb {
    aspect-ratio: 16 / 10;
  }

  .pd-activity__body h2 {
    font-size: 1.5rem;
    letter-spacing: -0.5px;
  }

  .pd-activity__facts {
    gap: 12px 20px;
  }
}

/* ---- Highlights — full-width text/media bands teasing the detailed
   activity guide below (DEPT Culture page "APPAREL" band style) ---- */
.pd-highlights {
  padding-block: 30px 8px;
}

/* Break out of the .slt-container max-width so the section runs
   full viewport width instead of matching the page's content column. */
.pd-highlights > .slt-container {
  max-width: none;
  padding-inline: 20px;
}

.pd-highlight-row {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 48px;
  align-items: top;
  padding-block: 40px;
  border-top: 1px solid var(--slt-ink);
}

.pd-highlight-row__text h2 {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -2px;
  margin: 0 0 30px;
  line-height: 1;
}

.pd-highlight-row__text p {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--slt-gray-100);
  margin: 0;
}

.pd-highlight-row__text p a {
  --pd-link-hover-bg: var(--slt-blue-200);
  color: var(--slt-blue-400);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--pd-link-hover-bg), var(--pd-link-hover-bg));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 100%;
  transition: background-size 0.25s ease, color 0.15s ease, border-color 0.15s ease;
}

.pd-highlight-row__text p a:hover,
.pd-highlight-row__text p a:focus-visible {
  background-size: 100% 100%;
  color: var(--slt-blue-900);
  border-bottom-color: transparent;
}

:root[data-theme="dark"] .pd-highlight-row__text p a {
  --pd-link-hover-bg: rgba(93, 150, 255, 0.42);
}

:root[data-theme="dark"] .pd-highlight-row__text p a:hover,
:root[data-theme="dark"] .pd-highlight-row__text p a:focus-visible {
  color: var(--slt-blue-100);
}

.pd-highlight-row__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--slt-radius-sm);
  object-fit: cover;
}

.pd-highlight-row__media--a { background: linear-gradient(135deg, #a9c7e8, #5380b5); }
.pd-highlight-row__media--b { background: linear-gradient(135deg, #d8c389, #8a6d3b); }
.pd-highlight-row__media--c { background: linear-gradient(135deg, #9fd6c0, #2f8f6a); }
.pd-highlight-row__media--d { background: linear-gradient(135deg, #c9b3e8, #7649c9); }
.pd-highlight-row__media--e { background: linear-gradient(135deg, #f3b89a, #d9703f); }
.pd-highlight-row__media--f { background: linear-gradient(135deg, #b9d99a, #6b9c4a); }

@media (max-width: 767.98px) {
  .pd-highlight-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 28px;
  }

  .pd-highlights > .slt-container {
    padding-inline: 20px;
  }

  /* At the desktop 48px/line-height:1 size, a two-or-three-word title
     wraps to 3 lines here and eats 150px+ of vertical space on a phone —
     scaled down so it reads like a heading, not a banner. */
  .pd-highlight-row__text h2 {
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
  }

  .pd-highlight-row__text p {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .pd-highlight-row__text h2 {
    font-size: 1.6rem;
  }
}

/* ---- No sidebar on place pages — content runs full width ---- */
.td-page__inner--single {
  grid-template-columns: 1fr;
}

/* ---- Activity insider tip callout ---- */
.pd-activity__tip {
  background-color: var(--slt-surface-subtle);
  border-radius: var(--slt-radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
}

.pd-activity__tip strong {
  color: var(--slt-ink);
}

/* ---- Hero image banner ---- */
.pd-hero__image {
  display: block;
  width: 100%;
  height: 460px;
  background: linear-gradient(135deg, #a9c7e8, #5380b5);
  object-fit: cover;
  margin-bottom: 12px;
}

@media (max-width: 575.98px) {
  .pd-hero__image {
    height: 240px;
  }
}

/* ---- Split hero (destinations-detail / things-to-do-detail only) —
   title + actions on the left, aligned with the site container; the
   banner image bleeds past the container all the way to the true
   right edge of the viewport (Lonely Planet itinerary style). The
   older single-column .pd-hero__image usage (e.g. sigiriya.html) is
   untouched — these rules only target it inside .pd-split-hero__right. ---- */
.pd-split-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--slt-container-max) / 2 - 20px)) 1fr;
  align-items: stretch;
  gap: 58px;
  min-height: calc(100vh - 77px);
  padding-left: max(24px, calc((100vw - var(--slt-container-max)) / 2 + 24px));
}

.pd-split-hero__left {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  padding-bottom: 150px;
}

.pd-split-hero__left .tours-breadcrumb {
  margin-bottom: 14px;
}

.pd-split-hero__left .td-title__h1 {
  margin: 0;
}

.pd-why-love {
  margin-top: auto;
  padding-top: 56px;
}

.pd-why-love__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: "Krona One", var(--font-base);
  font-size: 2.75rem;
  line-height: 3.75rem;
  font-weight: 400;
  color: var(--slt-ink);
  margin: 0 0 12px;
}

.pd-why-love__icon {
  height: 0.8em;
  width: auto;
  flex-shrink: 0;
}

.pd-why-love__icon--dark {
  display: none;
}

:root[data-theme="dark"] .pd-why-love__icon--light {
  display: none;
}

:root[data-theme="dark"] .pd-why-love__icon--dark {
  display: block;
}

.pd-why-love__text {
 font-size: 1.4rem;
    line-height: 1.2;
    color: var(--slt-ink);
    max-width: 46ch;
    margin: 0;
    padding: lef;
    padding-left: 51px;
}

.pd-handcrafted {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: 30px;
  transform: rotate(-3deg);
  font-family: var(--font-base);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--slt-ink);
}

@property --pd-handcrafted-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.pd-handcrafted__title,
.pd-handcrafted__tagline {
  position: relative;
  font: inherit;
  color: inherit;
  padding: 10px 10px 10px;
  isolation: isolate;
}

/* Static 1px base ring — always visible at low opacity, sits behind
   the rotating highlight below so the border never fully disappears
   between passes. */
.pd-handcrafted__title::after,
.pd-handcrafted__tagline::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: 3px;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.pd-handcrafted__title::after { background: rgb(255 93 93 / 35%); }
.pd-handcrafted__tagline::after { background: rgb(93 150 255 / 35%); }

/* Rotating outline ring — conic-gradient arc masked down to a 2px
   border, spinning continuously via the animated angle custom
   property. */
.pd-handcrafted__title::before,
.pd-handcrafted__tagline::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 3px;
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: pd-handcrafted-spin 2.4s linear infinite;
}

.pd-handcrafted__title::before {
  background: conic-gradient(from var(--pd-handcrafted-angle), transparent 0deg, rgb(255 93 93) 60deg, transparent 130deg, transparent 360deg);
}

.pd-handcrafted__tagline::before {
  background: conic-gradient(from var(--pd-handcrafted-angle), transparent 0deg, rgb(93 150 255) 60deg, transparent 130deg, transparent 360deg);
}

@keyframes pd-handcrafted-spin {
  to { --pd-handcrafted-angle: 360deg; }
}

.pd-split-hero__lead {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--slt-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.pd-split-hero__left .td-title__actions {
  margin-left: 0;
  margin-top: auto;
  padding-top: 24px;
}

.pd-split-hero__right {
  position: relative;
  min-height: 560px;
}

.pd-split-hero__right .pd-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .pd-split-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-left: 24px;
    padding-right: 24px;
    gap: 20px;
  }

  .pd-split-hero__left {
    padding-block: 24px 0;
  }

  /* .pd-why-love__title is an h1 (44px desktop, no other mobile
     override) — clearly oversized once the hero collapses to a single
     column on tablet/phone, so it gets a dedicated mobile size here. */
  .pd-why-love__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  /* Keeps .pd-why-love__text's left edge under the title text (icon
     width scales with the title's font-size via 0.8em, so the fixed
     51px desktop indent drifts out of alignment once the title shrinks
     at this breakpoint — recalculated to match: 0.8 * 40px icon + 10px
     gap). */
  .pd-why-love__text {
    padding-left: 42px;
  }

  .pd-split-hero__right {
    min-height: auto;
    margin-block: 16px;
  }

  .pd-split-hero__right .pd-hero__image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* ---- Split hero, reversed layout (things-to-do-detail only) — banner
   image bleeds past the container on the left, content column on the
   right. Additive-only: doesn't touch .pd-split-hero__left/__right
   above, which destinations-detail.html still relies on. ---- */
.pd-split-hero__inner--reversed {
  grid-template-columns: 1fr minmax(0, calc((var(--slt-container-max) - 40px) * 0.35));
  padding-left: 0;
  padding-right: max(24px, calc((100vw - var(--slt-container-max)) / 2 + 24px));
}

.pd-split-hero__content {
  display: flex;
  flex-direction: column;
  padding-block: 32px;
}

.pd-split-hero__media {
  position: relative;
  min-height: 560px;
}

.pd-split-hero__media .pd-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .pd-split-hero__inner--reversed {
    grid-template-columns: 1fr;
    padding-right: 24px;
    gap: 20px;
  }

  .pd-split-hero__content {
    padding-block: 24px 0;
  }

  .pd-split-hero__media {
    min-height: 380px;
  }

  .pd-split-hero__media .pd-hero__image {
    position: static;
    height: 380px;
  }
}

@media (max-width: 575.98px) {
  .pd-split-hero__media {
    min-height: 260px;
  }

  .pd-split-hero__media .pd-hero__image {
    height: 260px;
  }

  /* .pd-why-love__title is a real h1 (destination/place page's own
     title) — new fixed type-scale phone size, wins here over the
     991.98px tablet override above via source order. */
  .pd-why-love__title {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }

  /* Same re-alignment as the 991.98px breakpoint, recalculated for this
     smaller title size: 0.8 * 36px icon + 10px gap. */
  .pd-why-love__text {
    padding-left: 39px;
  }
}

/* ---- Title-row actions: wishlist toggle ---- */
#pdWishlist.is-active svg {
  color: var(--slt-red);
  fill: var(--slt-red);
  stroke: var(--slt-red);
}

/* ---- Social share (toggle button reuses .td-title__action styling) ---- */
.pd-share {
  position: relative;
  display: inline-flex;
}

.pd-share__toggle[aria-expanded="true"] {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.pd-share__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--slt-surface);
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
  z-index: 5;
}

.pd-share__menu.is-open {
  display: flex;
}

.pd-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--slt-radius-sm);
  border: 1px solid var(--slt-gray-200);
  background: var(--slt-surface);
  color: var(--slt-gray-600);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.pd-share__btn svg {
  width: 16px;
  height: 16px;
}

.pd-share__btn:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.pd-share__btn--copy.is-copied {
  border-color: var(--slt-green);
  color: var(--slt-green);
}