/* =========================================================================
   Postmark Travel — product-page fixes
   Pages: celebrate = .elementor-2859   indulge  = .elementor-2927
          curate    = .elementor-2900   immerse  = .elementor-1822

   Organised by CONCERN, each in ONE place, so a change to one area cannot
   silently break another. Read this map before editing:

     1. Destination cards ("What floats your boat")   — ALL viewports
     2. "How it works" two-column layout               — desktop only
     3. Section spacing (gaps between blocks)          — desktop only
     4. Section spacing (padding)                      — mobile only

   ELEMENT-ID REFERENCE (same section, cloned per page with different IDs):

     "What floats your boat"  outer card frame   |  inner image container
       curate  (2900)  759eaeb / 571eca6 / 2c23def |  d09d603 / ecc2f89 / 67e589f
       indulge (2927)  58be759 / 8d1f4e6 / 22f063e |  de3c0cf / f560de7 / 680b601
       immerse (1822)  2566115 / dab0eb9 / 00a214c |  eba408f / 45c6d8c / 6415951

   RULE OF THUMB: never put `height: 100%` on a card frame outside a
   desktop media query — at mobile the cards stack in a tall flex column
   and `height: 100%` blows each card up to the full column height.
   ========================================================================= */


/* =========================================================================
   1. DESTINATION CARDS — "What floats your boat"  (ALL viewports)
   Goal: every card shows an identically-sized image, flush with the top of
   the white card frame, cover-cropped (no distortion, no white gaps).
   No card-height forcing here — flexbox handles equal heights at desktop
   and natural heights at mobile.
   ========================================================================= */

/* 1a. Outer white card frame — image sits flush against the top edge. */
.elementor-2900 .elementor-element-759eaeb,
.elementor-2900 .elementor-element-571eca6,
.elementor-2900 .elementor-element-2c23def,
.elementor-2927 .elementor-element-58be759,
.elementor-2927 .elementor-element-8d1f4e6,
.elementor-2927 .elementor-element-22f063e,
.elementor-1822 .elementor-element-2566115,
.elementor-1822 .elementor-element-dab0eb9,
.elementor-1822 .elementor-element-00a214c {
  padding-top: 0 !important;
  overflow: hidden !important;
}
.elementor-2900 .elementor-element-759eaeb > :first-child,
.elementor-2900 .elementor-element-571eca6 > :first-child,
.elementor-2900 .elementor-element-2c23def > :first-child,
.elementor-2927 .elementor-element-58be759 > :first-child,
.elementor-2927 .elementor-element-8d1f4e6 > :first-child,
.elementor-2927 .elementor-element-22f063e > :first-child,
.elementor-1822 .elementor-element-2566115 > :first-child,
.elementor-1822 .elementor-element-dab0eb9 > :first-child,
.elementor-1822 .elementor-element-00a214c > :first-child {
  margin-top: 0 !important;
}

/* 1b. Inner image container — locked to a 4:3 box so all three images are
       the same height regardless of the source PNG's own dimensions. */
.elementor-2900 .e-con-full.elementor-element-d09d603,
.elementor-2900 .e-con-full.elementor-element-ecc2f89,
.elementor-2900 .e-con-full.elementor-element-67e589f,
.elementor-2927 .e-con-full.elementor-element-de3c0cf,
.elementor-2927 .e-con-full.elementor-element-f560de7,
.elementor-2927 .e-con-full.elementor-element-680b601,
.elementor-1822 .e-con-full.elementor-element-eba408f,
.elementor-1822 .e-con-full.elementor-element-45c6d8c,
.elementor-1822 .e-con-full.elementor-element-6415951 {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
}

/* 1c. Image widget + its widget-container fill the 4:3 box. */
.elementor-2900 .elementor-element-d09d603 .elementor-widget-image,
.elementor-2900 .elementor-element-ecc2f89 .elementor-widget-image,
.elementor-2900 .elementor-element-67e589f .elementor-widget-image,
.elementor-2927 .elementor-element-de3c0cf .elementor-widget-image,
.elementor-2927 .elementor-element-f560de7 .elementor-widget-image,
.elementor-2927 .elementor-element-680b601 .elementor-widget-image,
.elementor-1822 .elementor-element-eba408f .elementor-widget-image,
.elementor-1822 .elementor-element-45c6d8c .elementor-widget-image,
.elementor-1822 .elementor-element-6415951 .elementor-widget-image,
.elementor-2900 .elementor-element-d09d603 .elementor-widget-image > .elementor-widget-container,
.elementor-2900 .elementor-element-ecc2f89 .elementor-widget-image > .elementor-widget-container,
.elementor-2900 .elementor-element-67e589f .elementor-widget-image > .elementor-widget-container,
.elementor-2927 .elementor-element-de3c0cf .elementor-widget-image > .elementor-widget-container,
.elementor-2927 .elementor-element-f560de7 .elementor-widget-image > .elementor-widget-container,
.elementor-2927 .elementor-element-680b601 .elementor-widget-image > .elementor-widget-container,
.elementor-1822 .elementor-element-eba408f .elementor-widget-image > .elementor-widget-container,
.elementor-1822 .elementor-element-45c6d8c .elementor-widget-image > .elementor-widget-container,
.elementor-1822 .elementor-element-6415951 .elementor-widget-image > .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  display: block !important;
}

/* 1d. The <img> itself — cover-fit, centred. */
.elementor-2900 .elementor-element-d09d603 .elementor-widget-image img,
.elementor-2900 .elementor-element-ecc2f89 .elementor-widget-image img,
.elementor-2900 .elementor-element-67e589f .elementor-widget-image img,
.elementor-2927 .elementor-element-de3c0cf .elementor-widget-image img,
.elementor-2927 .elementor-element-f560de7 .elementor-widget-image img,
.elementor-2927 .elementor-element-680b601 .elementor-widget-image img,
.elementor-1822 .elementor-element-eba408f .elementor-widget-image img,
.elementor-1822 .elementor-element-45c6d8c .elementor-widget-image img,
.elementor-1822 .elementor-element-6415951 .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  aspect-ratio: auto !important;
}


/* =========================================================================
   2. "HOW IT WORKS" — desktop two-column layout  (>= 768px)
   Title/description column (left) + shell-bulleted list column (right) sit
   side by side without overlapping.
     curate/celebrate/indulge:  row 7aec704 → cols e4c3f53 + 410a07d
     immerse:                   row 4632ab7 → cols 7e924b4 + 7394eda
   ========================================================================= */
@media (min-width: 768px) {
  .elementor-2859 .elementor-element-7aec704,
  .elementor-2927 .elementor-element-7aec704,
  .elementor-2900 .elementor-element-7aec704,
  .elementor-1822 .elementor-element-4632ab7 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-2859 .elementor-element-7aec704 > .elementor-element-e4c3f53,
  .elementor-2927 .elementor-element-7aec704 > .elementor-element-e4c3f53,
  .elementor-2900 .elementor-element-7aec704 > .elementor-element-e4c3f53,
  .elementor-2859 .elementor-element-7aec704 > .elementor-element-410a07d,
  .elementor-2927 .elementor-element-7aec704 > .elementor-element-410a07d,
  .elementor-2900 .elementor-element-7aec704 > .elementor-element-410a07d,
  .elementor-1822 .elementor-element-4632ab7 > .elementor-element-7e924b4,
  .elementor-1822 .elementor-element-4632ab7 > .elementor-element-7394eda {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================================
   3. SECTION SPACING — desktop gap tightening  (>= 768px)
   Product-page sections shipped with 60-100px of top/bottom padding, which
   left tall empty peach bands between blocks. Cap them.
   ========================================================================= */
@media (min-width: 768px) {

  /* Top-level containers: modest 32px band, except the first (hero) which
     stays flush. */
  .elementor-2859 > .e-con.e-parent,
  .elementor-2927 > .e-con.e-parent,
  .elementor-2900 > .e-con.e-parent,
  .elementor-1822 > .e-con.e-parent {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .elementor-2859 > .e-con.e-parent:first-child,
  .elementor-2927 > .e-con.e-parent:first-child,
  .elementor-2900 > .e-con.e-parent:first-child,
  .elementor-1822 > .e-con.e-parent:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Heading / text widget containers — trim their own stacked padding so
     title → body → next-title reads compact. */
  .elementor-2859 .elementor-widget-heading > .elementor-widget-container,
  .elementor-2927 .elementor-widget-heading > .elementor-widget-container,
  .elementor-2900 .elementor-widget-heading > .elementor-widget-container,
  .elementor-1822 .elementor-widget-heading > .elementor-widget-container,
  .elementor-2859 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-2927 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-2900 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-1822 .elementor-widget-text-editor > .elementor-widget-container {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* "How it works" → next section boundary. Raise specificity with the
     .e-con.e-parent prefix so these beat the generic 32px rule above. */
  .elementor-2900 .e-con.e-parent.elementor-element-7aec704,
  .elementor-2859 .e-con.e-parent.elementor-element-7aec704,
  .elementor-2927 .e-con.e-parent.elementor-element-7aec704 {
    padding-bottom: 8px !important;
  }
  .elementor-2900 .e-con.e-parent.elementor-element-f38a9ac,
  .elementor-2859 .e-con.e-parent.elementor-element-f38a9ac,
  .elementor-2927 .e-con.e-parent.elementor-element-f38a9ac,
  .elementor-1822 .e-con.e-parent.elementor-element-f38a9ac {
    padding-top: 8px !important;
  }

  /* IMMERSE-SPECIFIC: on immerse, "How it works" AND "What floats your
     boat" both live inside one container (4632ab7), separated by a large
     inner gap. Tighten it so the transition matches the other pages.
     NB: do NOT hide the spacer widget 0928172 — it draws the horizontal
     separator line beneath the "What floats your boat" heading. */
  .elementor-1822 .elementor-element-4632ab7 > .e-con-inner {
    gap: 8px !important;
    row-gap: 8px !important;
  }
  .elementor-1822 > .elementor-element-4632ab7.e-con.e-parent {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .elementor-1822 > .elementor-element-a0a9fcd.e-con.e-parent {
    padding-bottom: 12px !important;
  }
  /* The "How it works" block (7e924b4) ships with an 80px margin-top that
     opens a large empty band above it — far bigger than curate's ~46px.
     Trim the top, and add a bottom margin so the "How it works → What floats
     your boat" gap matches curate's ~64px (immerse was ~45px). */
  .elementor-1822 .elementor-element-7e924b4 {
    margin-top: 8px !important;
    margin-bottom: 20px !important;
  }
}


/* =========================================================================
   4. SECTION SPACING — mobile padding  (<= 767px)
   Close the oversized empty peach bands on small screens.
   ========================================================================= */
@media (max-width: 767px) {

  /* Non-hero top-level sections: 20px band. */
  .elementor-2859 > .e-con:not(:first-child),
  .elementor-2927 > .e-con:not(:first-child),
  .elementor-2900 > .e-con:not(:first-child),
  .elementor-1822 > .e-con:not(:first-child) {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Nested child containers. */
  .elementor-2859 > .e-con > .e-con.e-child,
  .elementor-2927 > .e-con > .e-con.e-child,
  .elementor-2900 > .e-con > .e-con.e-child,
  .elementor-1822 > .e-con > .e-con.e-child {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Heading / text / html widget containers — compact 8px. */
  .elementor-2859 .elementor-widget-heading > .elementor-widget-container,
  .elementor-2927 .elementor-widget-heading > .elementor-widget-container,
  .elementor-2900 .elementor-widget-heading > .elementor-widget-container,
  .elementor-1822 .elementor-widget-heading > .elementor-widget-container,
  .elementor-2859 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-2927 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-2900 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-1822 .elementor-widget-text-editor > .elementor-widget-container,
  .elementor-2859 .elementor-widget-html > .elementor-widget-container,
  .elementor-2927 .elementor-widget-html > .elementor-widget-container,
  .elementor-2900 .elementor-widget-html > .elementor-widget-container,
  .elementor-1822 .elementor-widget-html > .elementor-widget-container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Trim heading bottom margin. */
  .elementor-2859 .elementor-widget-heading .elementor-heading-title,
  .elementor-2927 .elementor-widget-heading .elementor-heading-title,
  .elementor-2900 .elementor-widget-heading .elementor-heading-title,
  .elementor-1822 .elementor-widget-heading .elementor-heading-title {
    margin-bottom: 8px !important;
  }
}