/* =========================================================================
   Postmark Travel — home page "Tailored Packages" experience cards
   These are elementor-image-box widgets (NOT loop items).
   Fixes:
   1. Images don't cover the full card width (white space visible on Indulge)
   2. Description text gets cut mid-word ("Whether it's..." / "your standard,...")
   ========================================================================= */

/* --- Image: fill the full card width with a fixed aspect-ratio --- */
.elementor-widget-image-box .elementor-image-box-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center;
  width: 100% !important;
}

.elementor-widget-image-box .elementor-image-box-img,
.elementor-widget-image-box .elementor-image-box-wrapper > a,
.elementor-widget-image-box .elementor-image-box-wrapper > figure {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px 0 !important;
  display: block !important;
  flex: 0 0 auto;
}

.elementor-widget-image-box .elementor-image-box-img img,
.elementor-widget-image-box .elementor-image-box-wrapper img {
  width: 100% !important;
  height: 280px !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px 10px 0 0 !important;
}

/* The content area (title + description) should fill remaining height,
   so cards align bottoms. Vertically center the contents so quote-only
   cards (with short text) center within the equal-height container. */
.elementor-widget-image-box .elementor-image-box-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px 24px 24px 24px !important;
}

.elementor-widget-image-box .elementor-image-box-title {
  margin-bottom: 14px !important;
}

/* --- Description: allow full text, no truncation. Don't flex-grow it
   so the parent's justify-content: center can position the content
   block in the middle of the card. --- */
.elementor-widget-image-box .elementor-image-box-description {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.55 !important;
  padding: 0 4px !important;
  flex: 0 0 auto !important;
  margin-bottom: 14px !important;
}

/* Title sits naturally on top, doesn't stretch */
.elementor-widget-image-box .elementor-image-box-title {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/* =========================================================================
   Equal-height cards. Each card in a row stretches to match the tallest.
   ========================================================================= */
.elementor-1003 [data-widget_type="image-box.default"],
.elementor-1003 .elementor-widget-image-box {
  height: 100% !important;
  display: flex !important;
}

.elementor-1003 .elementor-widget-image-box > .elementor-widget-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Row container — make cards stretch to same height */
.elementor-1003 .elementor-element[class*="elementor-element-"] > .e-con-inner,
.elementor-1003 .e-con.e-flex.e-con-boxed > .e-con-inner,
.elementor-1003 [class*="e-con"]:has(.elementor-widget-image-box) {
  align-items: stretch !important;
}

/* The DIRECT parent of each image-box card needs to stretch */
.elementor-1003 .e-con-full.e-flex.e-con.e-child:has(.elementor-widget-image-box),
.elementor-1003 [class*="elementor-element-"]:has(> .elementor-widget-image-box) {
  display: flex !important;
  flex-direction: column !important;
  height: auto;
  align-self: stretch !important;
}

/* Add a Read more link after the description */
.elementor-widget-image-box .elementor-image-box-description::after {
  /* nothing — JS appends the link element instead */
}

.elementor-widget-image-box .pm-read-more {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--f-body, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
  align-self: center;
}
.elementor-widget-image-box .pm-read-more:hover {
  opacity: 0.7;
}

/* When a card already has a READ MORE link we've added, hide the
   redundant "MORE INFO" button that Elementor renders below it
   (only inside collapsible-box image-box widgets, leave standalone
   MORE INFO buttons elsewhere on the site alone). */
.elementor-element.collapsible-box .pm-read-more ~ * .elementor-button-link,
.elementor-element.collapsible-box [data-widget_type="button.default"] {
  display: none !important;
}
/* More aggressive: any sibling button widget after an image-box card
   that has our READ MORE — hide it (this kills the MORE INFO link). */
.elementor-widget-image-box[data-pm-readmore-added="1"] ~ .elementor-widget-button,
.elementor-widget-image-box[data-pm-readmore-added="1"] + .elementor-element .elementor-widget-button,
.elementor-element:has(> .elementor-widget-image-box[data-pm-readmore-added="1"]) ~ .elementor-element .elementor-widget-button {
  display: none !important;
}

/* Hide any "Read more" / "..." inline link that Elementor appends */
.elementor-widget-image-box .elementor-image-box-description .read-more-link,
.elementor-widget-image-box .elementor-image-box-description a.read-more {
  display: none !important;
}

/* =========================================================================
   Immerse card — "MORE INFO" placement fix
   -------------------------------------------------------------------------
   The Immerse package card (column .elementor-element-620b72d, image-box
   .elementor-element-d654408) sits in ROW 2 beside the two TALL centered
   quote cards (St. Augustine / Lao Tzu). The equal-height JS therefore
   stamps an inline `min-height: ~533px` on its .elementor-image-box-wrapper
   to match those quotes — which reserves ~31px of dead space BELOW the text
   and pushed its "MORE INFO" button noticeably lower than on the other three
   package cards (the "gap is too big" report).

   Release that reserved height so the button sits the SAME distance below the
   text as Celebrate / Indulge / Curate. The column still stretches to the row
   height, so the freed space simply becomes clean white space at the bottom of
   the card (matching the quote cards beside it — no teal shows through).
   `!important` is required to beat the inline min-height the JS writes.
   See SITEMAP.md §4a for the card anatomy.
   ========================================================================= */
.elementor-10 .elementor-element-83c1fe2 .elementor-element-d654408 .elementor-image-box-wrapper {
  min-height: 0 !important;
}
.elementor-10 .elementor-element-83c1fe2 .elementor-element-620b72d {
  justify-content: flex-start !important;
}