/* Heritage Tourism - extracted from page--node--168.tpl.php */
#heritage-tourism-wrapper .responsive-container {
  background: #1d4b04;
  padding: 20px;
  border-radius: 20px;
  color: white;
  font-size: 18px;
}
#heritage-tourism-wrapper .ancRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
#heritage-tourism-wrapper .ancCol {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
#heritage-tourism-wrapper .w20 {
  flex: 0 0 20%;
}
#heritage-tourism-wrapper .w60 {
  flex: 0 0 60%;
}
#heritage-tourism-wrapper .w20,
#heritage-tourism-wrapper .w60 {
  text-align: center;
}
#heritage-tourism-wrapper .button-link {
  display: inline-block;
  color: #1d4b04;
  background: white;
  border-radius: 5px;
  padding: 5px 10px;
  text-decoration: none;
}
@media (max-width: 768px) {
  #heritage-tourism-wrapper .ancRow {
    flex-direction: column;
  }
  #heritage-tourism-wrapper .w20,
  #heritage-tourism-wrapper .w60 {
    flex: 0 0 100%;
    width: 100%;
  }
  #heritage-tourism-wrapper .ancCol {
    margin: 5px 0;
  }
}

/* Consultation tile disclosure ("Learn More").
   The legacy page-interactions.js drove this with jQuery `.hide()` /
   `.fadeIn()`, which write an INLINE `display`; the React component instead
   toggles the [hidden] attribute, which the cascade has to honour. Three
   things are needed for that, in the order the interaction depends on them. */

/* 1. Hide the tile FACE while the panel is open -- the fix the earlier
   attempts missed. `[hidden] { display: none }` is not only a UA rule here:
   theme/webflow.css declares it too, as an AUTHOR rule of specificity
   (0,1,0). theme/styles.css loads AFTER webflow.css and declares
   `.new-tile-main-content { display: flex }` at that SAME specificity, so it
   wins on source order and the face kept rendering as a flex item even with
   [hidden] set. The face and the panel then shared the row and split the card
   in half -- the reported symptom. Re-asserting [hidden] at a specificity no
   `.new-tile-*` rule reaches (including `.page-node-168 .new-tile-main-content`,
   which the body class does apply on this page) makes the face collapse, which
   in turn is what lets the panel take the full card below. */
.new-tile-container .new-tile-main-content[hidden] {
  display: none;
}

/* 2. Reveal the panel and let the tile GROW to fit all seven bullets, matching
   PROD (no inner scrollbar). `position: relative` is the containing block for
   the full-card close control in (3).
   Scoped to this panel's unique id -- and the container targeted via :has() on
   that same id -- so the four regular half-width tiles, whose empty
   `.new-tile-hidden-content` carries no [hidden] attribute and no id, are never
   revealed and never forced off their fixed height. That id scoping is what
   keeps the grid intact. */
#heritage-travel-consultation-detail:not([hidden]) {
  display: block;
  position: relative;
  height: auto;
  width: 100%;
}
/* `min-height` carries the closed card's 375px as a FLOOR rather than swapping
   the fixed height for a purely content-driven one. `height: auto` alone let
   the card shrink to the panel's content height, which at wide viewports is
   shorter than 375px, so the tile visibly contracted on opening. With the floor
   in place the card holds its closed height and only ever grows -- past 375px
   when the seven bullets need more room (narrow viewports), never below it. */
.new-tile-container:has(> #heritage-travel-consultation-detail:not([hidden])) {
  height: auto;
  min-height: 375px;
  align-items: stretch;
}

/* 3. The whole panel is the close control (legacy page-interactions.js binds
   its click handler to `.new-tile-hidden-content` itself, and PROD shows no
   visible Close button). A transparent <button> stretched over the panel gives
   that a real interactive element: it covers every pixel of the card, so a
   click anywhere collapses the tile, while the detail text beside it stays
   ordinary readable content rather than being swallowed into a button label.
   Being a positioned element it also paints above the in-flow text, so no
   pointer-events juggling is needed. */
.new-tile-hidden-close {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* 4. Breathing room between the panel's lead-in sentence and the bullets.
   Only the FIRST bullet is offset -- the shared
   `.new-tile-hidden-content ul li { margin-bottom: 8px }` in theme/styles.css
   already spaces the rest, so adding a top margin to every item would space
   them twice. Anchored to `#heritage-travel-consultation-detail`, which occurs
   once in the page, so this reaches only this tile's list: the four regular
   tiles' panels and the identical `.new-tile-hidden-content` lists on
   /the-products and /oral-histories are untouched. */
#heritage-travel-consultation-detail
  .new-tile-hidden-content-text
  ul
  > li:first-child {
  margin-top: 1em;
}

/* Additional styles extracted from inline React styles */
.testimonial-area .testimonial-img {
  width: 100%;
  height: 178px;
}
.testimonial-content p.testimonial-name {
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.fancybox-modal {
  max-width: 700px;
  padding: 20px;
}
.fancybox-modal img {
  margin-bottom: 5px;
}

/* Testimonial "read more" modal — restore the legacy Fancybox UX on top of
   the core.css modal:
   - width matches the legacy 700px box (core.css .modalContents is 600px)
   - the body scrolls INSIDE the box, capped to the viewport, so a long
     testimonial no longer scrolls the whole overlay and carries the close
     button off-screen
   - the close button is pinned to the box corner and given a visible circular
     chrome, matching the legacy control. */
.testimonial-modalContents.testimonial-modalContents {
  width: 700px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
}
.testimonial-modalBody {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 20px 20px;
}
.testimonial-modalBody .fancybox-modal {
  max-width: none;
  padding: 0;
}
/* Pin the close button to the box corner (not the scrolling body) and give it
   the circular look the legacy Fancybox close control used. */
.testimonial-modalContents .testimonial-modalClose.testimonial-modalClose {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.testimonial-modalContents
  .testimonial-modalClose.testimonial-modalClose:hover {
  background: #f0f0f0;
}
@media (max-width: 767px) {
  .testimonial-modalContents.testimonial-modalContents {
    max-height: calc(100dvh - 20px);
  }
  .testimonial-modalBody {
    padding: 40px 12px 12px;
  }
}