/* ============================================================================
   AWPS — home page and card components.

   Ported from the original stylesheet so the WordPress build matches the static
   site. Everything here is shape, overlay or pseudo-element work that Elementor's
   own controls cannot express; colours still resolve from the Global Kit through
   the aliases declared in awps.css.
   ========================================================================== */

/* ------------------------------------------------------------------- hero --
   The source hero keeps its text static and cross-fades only the background,
   which is exactly what an Elementor container background-slideshow does. The
   gradient scrim and the left-aligned column are reproduced here. */

.awps-hero { position: relative; }

.awps-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,30,24,.72) 0%, rgba(8,30,24,.35) 55%, rgba(8,30,24,.1) 100%);
  pointer-events: none;
  z-index: 1;
}

.awps-hero > .e-con-inner { position: relative; z-index: 2; }

.elementor-element.awps-hero-script .elementor-heading-title {
  font-family: "Dancing Script", cursive;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--awps-lime);
  line-height: 1.2;
}

.elementor-element.awps-hero-title .elementor-heading-title {
  color: #fff;
  font-size: clamp(38px, 6vw, 72px);
  max-width: 720px;
  line-height: 1.12;
}

.awps-hero-sub { max-width: 620px; }
.awps-hero-sub, .awps-hero-sub p { color: rgba(255,255,255,.9); font-size: 16.5px; }

/* -------------------------------------------------------------- trip card --
   White panel, a 235px photo with a gradient pill badge, then the body. */

.awps-trip-card {
  background: #fff;
  border-radius: var(--awps-radius);
  overflow: hidden;
  box-shadow: var(--awps-shadow);
  transition: transform .35s, box-shadow .35s;
  height: 100%;
}
.awps-trip-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(20,70,60,.18); }

.awps-card-thumb { position: relative; overflow: hidden; padding: 0; }
.awps-card-thumb img {
  width: 100%; height: 235px; object-fit: cover;
  transition: transform .6s; display: block;
}
/* The featured image links to the trip, and Elementor's <a> is inline-block — its line
   box added 8px under the photo and pushed the thumb to 243px against the source's 235.
   Blocking the anchor and killing its leading takes the strip back to exactly 235. */
.awps-card-thumb .elementor-widget-container > a { display: block; line-height: 0; }
.awps-card-thumb .elementor-widget-theme-post-featured-image { line-height: 0; }
.awps-trip-card:hover .awps-card-thumb img { transform: scale(1.09); }

.awps-card-tag { position: absolute; top: 16px; left: 16px; z-index: 2; width: auto; }
.elementor-element.awps-card-tag .elementor-heading-title {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--awps-green) 0%, var(--awps-lime) 100%);
  background-color: var(--awps-green);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 30px;
}

.awps-card-loc .elementor-icon-list-item { font-size: 13.5px; color: var(--awps-body, #5E6D67); }
.awps-card-loc .elementor-icon-list-icon { color: var(--awps-green); }

/* The body takes the slack in a fixed-height card so the meta row below can sit on the
   card's bottom edge however short the title runs — as `.trip-card .meta` does in the
   source, where the button always lines up across a row of cards. */
.awps-trip-card .awps-card-body { flex: 1 1 auto; }

.awps-card-meta {
  border-top: 1px solid var(--awps-mint2);
  margin-top: auto;
  padding-top: 14px;
}
.awps-card-days .elementor-icon-list-item { font-size: 13.5px; font-weight: 700; color: var(--awps-deep); }
.awps-card-days .elementor-icon-list-icon { color: var(--awps-green); }

/* `.book { padding: 10px 22px }` — the source's compact booking pill. The widget's own
   controls carry the size; this only stops the flex row stretching it. */
.awps-card-meta .awps-card-btn { flex: 0 0 auto; }
.awps-card-meta .awps-card-btn .elementor-button { white-space: nowrap; }

/* A trip with no badge or no location line must not leave an empty gradient pill or a
   blank row behind it. Every trip carries both today; this is for the ones the client
   adds later. */
.awps-card-tag .elementor-heading-title:empty { display: none; }
.awps-card-loc .elementor-icon-list-text:empty,
.awps-card-days .elementor-icon-list-text:empty { display: none; }

/* ------------------------------------------------------- destination card --
   Full-bleed photo with a bottom gradient and the caption laid over it. */

.awps-dest-card {
  position: relative;
  border-radius: var(--awps-radius);
  overflow: hidden;
  box-shadow: var(--awps-shadow);
  height: 100%;
}
.awps-dest-card img {
  width: 100%; height: 380px; object-fit: cover;
  transition: transform .7s; display: block;
}
.awps-dest-card:hover img { transform: scale(1.1); }

.awps-dest-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(rgba(8,30,24,0) 40%, rgba(8,30,24,.82) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px;
  pointer-events: none;
}
.awps-dest-overlay .elementor-widget { pointer-events: auto; }
.awps-dest-overlay .elementor-heading-title { color: #fff; font-size: 22px; }
/* `.dest-card .sub { font-size: 13.5px; color: #cfe3d5 }`.
   Scoped through `.awps-dest-overlay` for the weight: the subtitle is a text-editor
   widget, and typography.css sets `body .elementor-widget-text-editor` to the body
   grey at (0,1,1), which outranks a bare `.awps-dest-sub`.

   The source's `margin-bottom: 4px` is not set here — Elementor zeroes widget margins
   with `margin-block-end`, so it is carried by the overlay container's flex gap
   instead (see _migration/rebuild-destination-card.php). */
.awps-dest-overlay .awps-dest-sub,
.awps-dest-overlay .awps-dest-sub p {
  font-size: 13.5px;
  color: #cfe3d5;
}

/* ------------------------------------------------- card padding (all cards) --

   Elementor gives every container a default 10px of padding. The source's cards have
   none: `.cat-card .ph` and `.dest-card img` both run the full width of the card.

   That 10px was visible, not just a measurement quibble. On the destination card —
   which is a transparent rounded box carrying only a border-radius and a drop shadow —
   it left a shadowed empty frame standing proud of the photo on all four sides, which
   read as a stray background behind the card. On the category card it shrank the photo
   from 250px to 217px, and since `border-radius: 130px` is then clamped against the
   narrower box (217/260 → ~108px instead of ~125px), the oval gained a long straight
   edge and its shadow squared off into a boxy halo.

   Set through Elementor's own padding custom properties rather than with !important,
   because that is where `.e-con-full` reads them from. */
.awps-cat-card,
.awps-dest-card {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* ---------------------------------------------------------- category card --
   Tall rounded photos, alternately tilted, as on the original. */

.awps-cat-card { text-align: center; }
.awps-cat-card img {
  width: 100%; height: 300px; object-fit: cover;
  border-radius: 130px;
  box-shadow: var(--awps-shadow);
  transition: transform .6s;
}
.awps-cat-card:hover img { transform: scale(1.06); }
.awps-cat-card .elementor-heading-title { font-size: 18px; }

/* `.cat-card .ph { margin-bottom: 18px }`. The container contributes 6px of flex gap,
   so 12px here makes up the difference — and that same 6px is what then separates the
   title from the See More link.

   Hung on the image rather than its widget wrapper: Elementor zeroes widget margins
   inside a flex container with `margin-block-end`, a logical property that beats an
   equal-specificity `margin-bottom` no matter which stylesheet loads last. */
.awps-cat-card img { margin-bottom: 12px; }

/* `.cat-card a.more { font-size: 13.5px; font-weight: 700; color: green }` — a plain
   link, not a pill. The widget already asks for a transparent background and green
   text, but the Global Kit paints every button with a gradient *background-image*,
   which a background-color of `transparent` cannot cancel: the pill kept showing and
   swallowed the green text. Clearing the image, the padding and the radius is what
   turns it back into the link the source has. */
.awps-cat-card .elementor-button {
  background-image: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--awps-green);
}
.awps-cat-card .elementor-button:hover {
  background-image: none;
  background-color: transparent;
  color: var(--awps-deep);
}

.awps-cat-row .swiper-slide { transition: transform .35s; }
.awps-cat-row .swiper-slide:nth-child(odd)  { transform: rotate(-2.5deg); }
.awps-cat-row .swiper-slide:nth-child(even) { transform: rotate(2.5deg) translateY(14px); }
.awps-cat-row .swiper-slide:hover { transform: rotate(0) translateY(-6px); }

@media (max-width: 767px) {
  .awps-cat-row .swiper-slide,
  .awps-cat-row .swiper-slide:nth-child(odd),
  .awps-cat-row .swiper-slide:nth-child(even) { transform: none; }
  .awps-cat-card img { height: 230px; }
}

/* ---------------------------------------------------------------- gallery --
   The original is a CSS-columns masonry, not a uniform grid. */

.elementor-element.awps-gallery .elementor-image-gallery .gallery {
  display: block !important;
  columns: 4 260px;
  column-gap: 18px;
  margin: 0;
}
.elementor-element.awps-gallery .elementor-image-gallery .gallery-item {
  display: block !important;
  width: 100% !important;
  /* WordPress sets max-width:25% for a 4-column gallery. Inside a CSS-columns
     masonry that quarters each item again, so it has to be released. */
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  break-inside: avoid;
  float: none !important;
}
.elementor-element.awps-gallery .elementor-image-gallery .gallery-icon,
.elementor-element.awps-gallery .elementor-image-gallery .gallery-icon a { width: 100%; display: block; }
.elementor-element.awps-gallery .elementor-image-gallery .gallery-item img {
  width: 100% !important; height: auto !important; max-width: 100% !important;
}
.elementor-element.awps-gallery .gallery-icon {
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--awps-shadow); display: block; position: relative;
}
.awps-gallery .gallery-icon img { width: 100%; height: auto; display: block; transition: transform .6s; }
.awps-gallery .gallery-item:hover img { transform: scale(1.07); }

@media (max-width: 767px) { .awps-gallery .elementor-image-gallery .gallery { columns: 2 150px; } }

/* ------------------------------------------------------------------ stats --
   Deep teal with the acacia photo blended in, and dashed circular counters. */

.awps-stats { background-blend-mode: soft-light; }

.awps-stats .elementor-counter {
  width: 168px; height: 168px; margin-inline: auto;
  border-radius: 50%;
  border: 3px dashed rgba(169, 206, 59, .55);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: transform .35s, border-color .35s;
  background: transparent;
}
.awps-stats .elementor-counter:hover { transform: scale(1.06); border-color: var(--awps-lime); }
.awps-stats .elementor-counter-number-wrapper {
  font-family: "Manrope", sans-serif;
  font-size: 40px; font-weight: 800;
  color: var(--awps-lime); line-height: 1.1;
}
.awps-stats .elementor-counter-title {
  font-family: "Manrope", sans-serif;
  font-weight: 700; font-size: 14.5px; color: #dcebe0;
  margin-top: 2px;
}
@media (max-width: 767px) {
  .awps-stats .elementor-counter { width: 146px; height: 146px; }
  .awps-stats .elementor-counter-number-wrapper { font-size: 32px; }
}

/* ----------------------------------------------------------- testimonials --
   White card, gold stars, a big serif quote mark and a gradient initial avatar. */

.awps-testi-card {
  background: #fff;
  border-radius: var(--awps-radius);
  box-shadow: var(--awps-shadow);
  position: relative;
  height: 100%;
}
.awps-testi-card::before {
  content: "”";
  font-family: Georgia, serif;
  font-size: 78px;
  color: var(--awps-mint2);
  position: absolute; top: 8px; right: 24px;
  line-height: 1;
  pointer-events: none;
}

.elementor-element.awps-stars .elementor-heading-title {
  color: var(--e-global-color-awps_gold, #E8A317);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

.awps-testi-text, .awps-testi-text p {
  font-size: 15px;
  color: var(--awps-body, #5E6D67);
  margin: 0;
}

.elementor-element.awps-avatar .elementor-heading-title {
  width: 52px; height: 52px; border-radius: 50%;
  background-image: linear-gradient(135deg, var(--awps-green) 0%, var(--awps-lime) 100%);
  background-color: var(--awps-green);
  color: #fff;
  display: grid; place-items: center;
  font-family: "Manrope", sans-serif;
  font-weight: 800; font-size: 19px;
  line-height: 1;
}

.elementor-element.awps-testi-name .elementor-heading-title {
  font-size: 16px; color: var(--awps-ink); font-weight: 800; line-height: 1.3;
}
.awps-testi-role, .awps-testi-role p {
  font-size: 13px; color: var(--awps-body, #5E6D67); margin: 0;
}

.awps-testi .swiper-slide { height: auto; }
.awps-testi .swiper-slide > .e-con { height: 100%; }

.awps-trust-strip .elementor-widget-text-editor p {
  font-family: "Manrope", sans-serif; font-weight: 700;
  color: var(--awps-ink); margin: 0;
}

/* ------------------------------------------------------------- newsletter --
   Deep gradient band: heading on the left, the form inline on the right. */

.awps-newsletter .elementor-field-group input[type="email"] {
  border: 0; border-radius: 40px; padding: 15px 26px; min-width: 300px; font-size: 15px;
}
.awps-newsletter .elementor-field-label { display: none !important; }
.awps-newsletter .elementor-button { border-radius: 40px; }
@media (max-width: 767px) {
  .awps-newsletter .elementor-field-group input[type="email"] { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------------- misc */

.awps-cta-band .elementor-heading-title { color: #fff; }
.awps-about-collage img { border-radius: var(--awps-radius); box-shadow: var(--awps-shadow); }


/* ============================================================================
   SOURCE-ICON + EXACT-DIMENSION PARITY

   The static site uses emoji glyphs as its icons and fixed card dimensions.
   Both are reproduced here rather than approximated with an icon font.
   ========================================================================== */

/* Emoji glyph used by .fact .ic and .feature-list .ic (26px in the source). */
.elementor-element.awps-ic .elementor-heading-title {
  font-size: 26px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.awps-feature-item { align-items: flex-start; }
.awps-feature-item .elementor-element.awps-ic .elementor-heading-title { font-size: 22px; }

/* Icon-lists that carry their emoji inline need no icon column. */
.awps-chips .elementor-icon-list-icon,
.awps-tags .elementor-icon-list-icon,
.awps-card-loc .elementor-icon-list-icon,
.awps-card-days .elementor-icon-list-icon,
.awps-topbar .elementor-icon-list-icon,
.awps-contact-list .elementor-icon-list-icon,
.awps-footer-legal .elementor-icon-list-icon,
.awps-footer-menu .elementor-icon-list-icon { display: none !important; }

/* .checks li::before  { "✓" in a mint circle }
   .x-list li::before  { "✕" in a pink circle }  — drawn, as in the source. */
.awps-list-check .elementor-icon-list-icon,
.awps-list-x .elementor-icon-list-icon { display: none !important; }

.awps-list-check .elementor-icon-list-item,
.awps-list-x .elementor-icon-list-item {
  display: flex; gap: 12px; align-items: flex-start;
}
.awps-list-check .elementor-icon-list-item::before,
.awps-list-x .elementor-icon-list-item::before {
  flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
}
.awps-list-check .elementor-icon-list-item::before {
  content: "✓"; background: var(--awps-mint); color: var(--awps-green); font-size: 14px;
}
.awps-list-x .elementor-icon-list-item::before {
  content: "✕"; background: #fbe6e6; color: #c0392b; font-size: 13px;
}

/* ------------------------------------------------------------ dimensions --
   .trip-card 358px · .dest-card.wide 340x420 · .cat-card 250px / ph 300px
   .testi-card 420px · .day-cards max-width 900px · .incl-grid max-width 900px */

.awps-day-cards, .awps-day-card { max-width: 900px; margin-inline: auto; width: 100%; }
.awps-quote-panel { max-width: 900px; }

.awps-dest-card img { height: 420px; }

/* ---------------------------------------------------------------- header --
   .topbar 13.5px #cfe4d8 · .site-header blurred sticky · .logo img 66px */

/* Elementor writes icon-list colours at .elementor-N .elementor-element weight,
   so the topbar's light-on-dark text needs to be pinned at least as strongly. */
.awps-topbar,
.awps-topbar .elementor-icon-list-item > .elementor-icon-list-text,
.awps-topbar .elementor-icon-list-item > a > .elementor-icon-list-text,
.awps-topbar .elementor-icon-list-item a { color: #cfe4d8 !important; }
.awps-topbar .elementor-icon-list-item > .elementor-icon-list-text { font-size: 13.5px; }
.awps-topbar a:hover { color: var(--awps-lime); }
.awps-topbar .elementor-icon-list-items { gap: 20px; }
.awps-topbar .elementor-icon-list-item { font-size: 13.5px; }

@media (max-width: 767px) { .awps-topbar-right { display: none !important; } }

.awps-navbar {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 24px rgba(20,70,60,.08);
}
.awps-logo img { height: 66px; width: auto; border-radius: 0; }

.awps-mainnav .elementor-nav-menu > li > a.elementor-item { padding: 26px 14px; }

/* The source hides the desktop menu below 1024px and shows a burger. */
@media (max-width: 1024px) {
  .awps-mainnav .elementor-nav-menu--main { display: none; }
  .awps-wa-btn { display: none; }
}

/* ---------------------------------------------------------------- footer --
   footer 14.5px #b9cfc2 · .logo-badge white rounded · links use a "›" marker */

/* footer.site-footer { color: #b9cfc2 }
   Pinned above the global body-text colour set in typography.css. */
.awps-footer,
.awps-footer p,
.awps-footer .elementor-widget-text-editor,
.awps-footer .elementor-widget-text-editor p,
.awps-footer .elementor-icon-list-item > .elementor-icon-list-text,
.awps-footer .elementor-icon-list-item > a > .elementor-icon-list-text,
.awps-footer .elementor-icon-list-item a { color: #b9cfc2; }
.awps-footer a:hover { color: var(--awps-lime); }

.awps-logo-badge img {
  background: #fff; border-radius: 14px; padding: 10px 16px;
  height: 62px; width: auto; box-shadow: none;
}

/* footer .links a { inline-flex; gap 8px }  a::before { "›" lime 800 }
   Plain lists, not the nav-menu widget, so there are no hover/pointer effects. */
.awps-links .elementor-icon-list-item { margin-bottom: 11px; }
.awps-links .elementor-icon-list-item a,
.awps-links .elementor-icon-list-item > .elementor-icon-list-text {
  display: inline-flex; gap: 8px; align-items: center;
}
.awps-links .elementor-icon-list-item > a::before,
.awps-links .elementor-icon-list-item > .elementor-icon-list-text::before {
  content: "›"; color: var(--awps-lime); font-weight: 800;
}
.awps-links .elementor-icon-list-icon { display: none !important; }

.awps-contact-list .elementor-icon-list-item { margin-bottom: 12px; align-items: flex-start; }
.awps-footer-bottom, .awps-footer-bottom p { color: rgba(255,255,255,.6); font-size: 14px; }

/* Floating WhatsApp bubble: 60px circle, as in the source. */
.awps-float-wa .elementor-button {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 10px 30px rgba(37,211,102,.4);
}
.awps-float-wa .elementor-button-icon { font-size: 30px; margin: 0; }
.awps-float-wa .elementor-button-text { display: none; }


/* ------------------------------------------------- footer exact metrics --
   footer.site-footer { background --deep; color #b9cfc2; padding 80px 0 0; 14.5px }
   .footer-grid { 1.3fr 1fr 1.2fr 1.2fr; gap 44px; padding-bottom 54px }
   .footer-bottom { border-top rgba(255,255,255,.09); padding 22px 0; 13.5px }
   .footer-bottom img { height 26px } */

.awps-footer-bottom,
.awps-footer-bottom p,
.awps-footer-bottom .elementor-icon-list-item > .elementor-icon-list-text {
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
}
.awps-footer-bottom img { height: 26px; width: auto; border-radius: 0; }
.awps-footer-legal .elementor-icon-list-items { gap: 8px; }
.awps-footer-legal .elementor-icon-list-item > .elementor-icon-list-text::after { content: ""; }

/* .cta-band uses a fixed-attachment photo; iOS ignores `fixed`, so fall back to
   scroll there to avoid the zoomed-in rendering that background-attachment causes. */
@media (max-width: 1024px) {
  .awps-cta-band { background-attachment: scroll !important; }
}

/* .newsletter { background: --grad-deep; padding: 64px 0 }
   .newsletter input { min-width 300px; radius 40; padding 15px 26px } */
.awps-newsletter .elementor-field-group { margin-bottom: 0; }
.awps-newsletter .elementor-form-fields-wrapper { gap: 12px; flex-wrap: wrap; align-items: center; }


/* ============================================================================
   EXACT DIMENSIONS measured from https://africawanderingpeaksafaris.com
   at a 1280px viewport. The live carousels are horizontal scrollers with
   fixed-width children, so each card is pinned to its real width rather than
   stretched to fill an Elementor column.
   ========================================================================== */

/* .trip-card 358x438 · .thumb 358x235 */
.elementor-element.awps-trip-card { max-width: 358px; margin-inline: auto; width: 100%; }

/* .dest-card.wide 340x420 */
.elementor-element.awps-dest-card { max-width: 340px; margin-inline: auto; width: 100%; }
.awps-dest-card img { height: 420px; }

/* .cat-card 266 wide · .ph 263x311 */
.elementor-element.awps-cat-card { max-width: 266px; margin-inline: auto; width: 100%; }
/* 311px was measured off the live site, but the source stylesheet says 300
   (`.cat-card .ph { height: 300px }`) — and 311 did not fit the 379px card height set
   further down, so the title was being pulled 4px back over the bottom of the photo.
   The source's figure both matches the original and leaves the title room. */
.awps-cat-card img { height: 300px; }

/* .testi-card 420 wide */
.elementor-element.awps-testi-card { max-width: 420px; margin-inline: auto; width: 100%; }

/* .about-collage: 2 columns of 274px, 18px gap, each image 274x280,
   with the 132px "10+ Years of Experience" badge overlapping the grid. */
.elementor-element.awps-about-collage { position: relative; max-width: 565px; }
.awps-about-collage img { height: 280px; object-fit: cover; width: 100%; }

.awps-about-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 132px; height: 132px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--awps-green) 0%, var(--awps-lime) 100%);
  background-color: var(--awps-green);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  box-shadow: var(--awps-shadow);
  z-index: 3;
  gap: 0;
  padding: 0;
}
.elementor-element.awps-badge-num .elementor-heading-title {
  font-family: "Manrope", sans-serif; font-weight: 800;
  font-size: 30px; line-height: 1; color: #fff;
}
.elementor-element.awps-badge-lbl,
.elementor-element.awps-badge-lbl p {
  font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.25; margin: 0;
}

/* .stats is 328px: 80px padding either side of a single 168px circle row. */
.awps-stats .elementor-widget-counter { margin: 0; }
.awps-stats .elementor-counter-title { margin-top: 2px; }
.awps-stats .e-con-inner > .e-con,
.awps-stats .e-con-inner > .e-con > .e-con-inner { padding-block: 0; }
.awps-stats .elementor-counter { flex: 0 0 168px; }

/* .topbar is 40px tall: 8px padding either side of a 24px line. */
.awps-topbar > .e-con-inner { padding-block: 0; }
.awps-topbar .elementor-icon-list-item { line-height: 1.5; }

/* .newsletter is 228px: 64px padding around one row — heading left, form right. */
.awps-newsletter .elementor-widget-form .elementor-form-fields-wrapper { margin-bottom: 0; flex-wrap: nowrap; }
.awps-newsletter .elementor-field-group { padding-bottom: 0 !important; margin-bottom: 0; }
.awps-newsletter .e-con-inner > .e-con,
.awps-newsletter .e-con-inner > .e-con > .e-con-inner { padding-block: 0; }
.awps-newsletter .elementor-widget-heading { margin-bottom: 0; }
@media (max-width: 767px) {
  .awps-newsletter .elementor-widget-form .elementor-form-fields-wrapper { flex-wrap: wrap; }
}


/* ============================================================================
   FINAL DIMENSION PASS — measured against the live site at 1280px.

   Elementor pins every container to `max-width:100%` through .e-con-full, so the
   fixed card widths from the original need !important to land. The carousels on
   the live site are horizontal scrollers with fixed-width children; matching the
   child width reproduces that without changing the carousel mechanics.
   ========================================================================== */

/* .cat-card { width: 250px }  .cat-card .ph { height: 300px } */
.elementor-element.awps-cat-card { max-width: 250px !important; }
.awps-cat-card img { height: 300px; }

/* .testi-card { width: 420px } */
.elementor-element.awps-testi-card { max-width: 420px !important; }

/* .trip-card { width: 358px }  .dest-card.wide { width: 340px } */
.elementor-element.awps-trip-card { max-width: 358px !important; }
.elementor-element.awps-dest-card { max-width: 340px !important; }

/* The home carousel card shows title + location + meta only — no description.
   The All Trips grid does show one, so this is scoped to the carousel. */
.elementor-widget-loop-carousel .awps-trip-card .elementor-widget-theme-post-excerpt { display: none; }

/* .about-grid { grid-template-columns: 565px 538px; gap: 60px } */
.awps-about-row { gap: 60px !important; }
.awps-about-row > .elementor-element.awps-about-collage { flex: 0 0 565px; max-width: 565px; }
.awps-about-row > .e-con:not(.awps-about-collage) { flex: 1 1 auto; }

@media (max-width: 1024px) {
  .awps-about-row > .elementor-element.awps-about-collage { flex: 1 1 auto; max-width: 100%; }
}


/* Elementor adds a 20px gap between widgets (Kit: space_between_widgets). The
   stats band and the newsletter band are single-row layouts in the original, so
   that extra rhythm has to come out for their heights to match. */
.awps-stats .e-con-inner > .e-con,
.awps-stats .e-con-inner > .e-con > .e-con-inner,
.awps-stats .e-con-inner .e-con { padding: 0; row-gap: 0; align-items: center; }
.awps-stats .elementor-widget { margin-block: 0 !important; }

.awps-newsletter .e-con-inner > .e-con > .e-con-inner { padding: 0; }
.awps-newsletter .elementor-widget { margin-block: 0 !important; }
.awps-newsletter .e-con-inner .e-con { row-gap: 4px; }
.awps-newsletter .elementor-element.awps-eyebrow .elementor-heading-title { line-height: 1.1; }


/* .about-collage rows are exactly the image height in the original; Elementor's
   default container padding was adding 40px to each. */
.awps-about-collage > .e-con,
.awps-about-collage > .e-con > .e-con-inner { padding: 0; }
.awps-about-collage .elementor-widget-image { margin-block: 0 !important; line-height: 0; }


/* ============================================================================
   CAROUSEL VERTICAL RHYTHM (measured on the live site)

     section 864 = 90 padding + 110 heading + 48 margin + 526 carousel + 90
     carousel 526 = 478 track (card 438 + 30 padding-bottom) + 48 nav row

   Elementor overlays its arrows on the track and puts dots directly beneath, so
   the nav row's 48px and the track's 30px have to be reserved explicitly.
   ========================================================================== */

.elementor-widget-loop-carousel,
.elementor-widget-n-carousel { padding-bottom: 54px; position: relative; }

/* Categories carry .track{padding-bottom:44px} in the original; the testimonial
   row is followed by the Trustpilot strip, so it reserves less. */
.awps-cat-row.elementor-widget-n-carousel { padding-bottom: 57px; }
.awps-testi.elementor-widget-n-carousel   { padding-bottom: 13px; }

/* The source's carousels carry no dots at all: navigation is the pair of round buttons
   centred under the track (`.carousel .navbtns`, style.css §355). Elementor instead
   overlays small arrows on the sides and prints bullets underneath, so the bullets go
   and the arrows move down into the strip the padding above already reserves. */
.elementor-widget-loop-carousel .swiper-pagination,
.elementor-widget-n-carousel .swiper-pagination { display: none; }

/* The !importants are not laziness. Elementor positions these from its own widget
   stylesheet through a `:is()` selector — `.elementor-widget-n-carousel.elementor-element
   :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev` — which scores (0,4,0)
   and drives `left`/`top` from CSS variables, and colours them from
   `.elementor-element .swiper .elementor-swiper-button` at (0,3,0). Neither can be
   outranked by a sane class selector here, and the variables differ between the loop
   and nested carousels, so overriding the handful of declarations directly is the
   honest way to move the buttons. */
.elementor-widget-loop-carousel .elementor-swiper-button,
.elementor-widget-n-carousel .elementor-swiper-button {
  position: absolute;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  transform: none !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* `.carousel .navbtns button { border: 2px solid var(--mint-2) }`. Elementor resets
     the arrow's border to `none`, so the mint ring needs to be forced back on. */
  border: 2px solid var(--awps-mint2) !important;
  background: #fff;
  color: var(--awps-deep) !important;
  font-size: 19px !important;
  /* Elementor lays the button out as `inline-flex` from `.elementor-element .swiper
     .elementor-swiper-button` at (0,3,0), so a plain `display: grid` here never took
     and the chevron stayed pinned to the left edge of the circle at x=0. Forcing the
     flex centring is what actually puts the glyph in the middle. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: background-color .3s, border-color .3s, color .3s;
}

/* 48 + 12px gap + 48 = 108px, split either side of the centre line. */
.elementor-widget-loop-carousel .elementor-swiper-button-prev,
.elementor-widget-n-carousel .elementor-swiper-button-prev { left: 50% !important; margin-left: -54px; }
.elementor-widget-loop-carousel .elementor-swiper-button-next,
.elementor-widget-n-carousel .elementor-swiper-button-next { left: 50% !important; margin-left: 6px; }

.elementor-widget-loop-carousel .elementor-swiper-button:hover,
.elementor-widget-n-carousel .elementor-swiper-button:hover {
  background: var(--awps-green);
  border-color: var(--awps-green) !important;
  color: #fff !important;
}

/* Elementor draws the chevron as an inline SVG sized in `em` and filled with its own
   pale grey, so neither the button's font-size nor its colour reaches it on their own.
   Both are set here, and the glyph is blocked so no baseline gap creeps back in. */
.elementor-widget-loop-carousel .elementor-swiper-button svg,
.elementor-widget-n-carousel .elementor-swiper-button svg {
  width: 19px !important;
  height: 19px !important;
  display: block;
  fill: var(--awps-deep) !important;
  transition: fill .3s;
}

.elementor-widget-loop-carousel .elementor-swiper-button:hover svg,
.elementor-widget-n-carousel .elementor-swiper-button:hover svg { fill: #fff !important; }

/* Section heading block: .section-head { margin-bottom: 48px } */
.elementor-171 .elementor-widget-heading + .elementor-widget-loop-carousel,
.elementor-171 .elementor-widget-heading + .elementor-widget-n-carousel { margin-top: 48px; }

/* Live card heights, so each carousel row is exactly as tall as the original:
   trip 438 · destination 420 · category 379 · testimonial 287. */
/* Elementor writes a height on loop-item containers at .elementor-N weight, so
   these need !important to hold the original card heights. */
.elementor-element.awps-trip-card  { height: 438px !important; }
 /* 420px applies to the loop-carousel cards on the home page. The Destinations
    page grid uses the source's 380px — scoped in about.css. */
.e-loop-item .awps-dest-card,
.elementor-widget-loop-carousel .awps-dest-card,
.elementor-widget-loop-grid .awps-dest-card { height: 420px !important; }
/* The category card is the one card the source gives no height to — `.cat-card` sets
   only a width, so it is as tall as the photo, the title and the link make it. A hard
   379px here was shorter than that content and squeezed the flex children into each
   other; a minimum keeps the row even without capping it. */
.elementor-element.awps-cat-card   { height: auto !important; min-height: 379px; }
.elementor-element.awps-testi-card { height: 287px !important; }

.awps-trip-card > .e-con-inner { row-gap: 6px; height: 100%; }
.awps-trip-card .elementor-widget-theme-post-title .elementor-heading-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 48px;
}
.awps-testi-card .awps-testi-text { overflow: hidden; }

/* .cta-band content: p { max-width: 620px } and 34px above the button.
   The max-width here is a belt-and-braces fallback — Elementor puts `--width: 100%` on
   every widget, which outranks it, so the real 620px cap is a width set on the widget
   itself in lib/Blocks.php::ctaBand(). */
.awps-cta-band .elementor-widget-text-editor { max-width: 620px; margin-inline: auto; }
.awps-cta-band .elementor-widget-button { margin-top: 34px; }

/* Trailing paragraph margins. The source's reset puts every <p> at margin 0 and spaces
   blocks with margins on the elements themselves. Hello Elementor adds ~14px after the
   last paragraph of every text widget, which stacks on top of the margins the migration
   carries across — it stretched banners, section heads, CTA bands and every prose column
   on the site. Only the last paragraph is zeroed, so a multi-paragraph editor keeps its
   internal rhythm. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* `.btn` in a CTA band: a 40px pill on the green→lime gradient. Elementor's button
   background control takes a flat colour only, which is why the gradient lives here. */
.awps-cta-band .elementor-button {
  background-image: linear-gradient(135deg, var(--awps-green, #3FA535) 0%, var(--awps-lime, #A9CE3B) 100%);
  border-radius: 40px;
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}


/* About section: the source column stack is tighter than Elementor's default
   20px inter-widget rhythm — .feature-list uses 22px gaps and no widget margins. */
.awps-about-row .elementor-widget { margin-block: 0 !important; }
.awps-about-row > .e-con:not(.awps-about-collage) > .e-con-inner { row-gap: 6px; padding: 0; }
.awps-about-row .awps-feature-item > .e-con-inner { row-gap: 0; padding: 0; }
/* Elementor's 20px inter-element rhythm applies to containers as well as widgets;
   the source column has none, so both have to be cleared. */
.awps-about-row .awps-feature-item,
.awps-about-row > .e-con:not(.awps-about-collage) > .e-con-inner > * { margin-block: 0 !important; }
.awps-about-row .awps-feature-item .elementor-widget-text-editor p { margin: 0; }
.awps-about-row .awps-feature-item { margin-block: 0 !important; }

/* Newsletter: one centred row, 64px padding, nothing else. */
.awps-newsletter .e-con-inner > .e-con { align-items: center; }
.awps-newsletter .elementor-widget-heading .elementor-heading-title { margin: 0; }
.awps-newsletter .elementor-form-fields-wrapper { row-gap: 0; }


/* Newsletter heading column: eyebrow + h2 with no extra rhythm, so the row is
   100px tall and the band lands on the original's 228px. */
.awps-newsletter .e-con-inner > .e-con > .e-con { row-gap: 0 !important; }
.awps-newsletter .elementor-element.awps-eyebrow .elementor-heading-title { margin: 0; line-height: 1; }
.awps-newsletter .elementor-widget-heading { padding: 0 !important; }

.awps-newsletter .e-con-inner > .e-con > .e-con,
.awps-newsletter .e-con-inner > .e-con > .e-con > * { margin-block: 0 !important; }
.awps-newsletter .elementor-widget-form { margin-block: 0 !important; }


/* Newsletter: the source lets the heading take the room it needs and sizes the
   form to its content, so the h2 stays on one line and the band is 228px.
   Fixed 50/50 columns forced it to wrap. */
.awps-newsletter .e-con-inner > .e-con { flex-wrap: nowrap; }
.awps-newsletter .e-con-inner > .e-con > .e-con:first-child { flex: 1 1 auto; width: auto !important; }
.awps-newsletter .e-con-inner > .e-con > .e-con:last-child  { flex: 0 0 auto; width: auto !important; }
@media (max-width: 767px) {
  .awps-newsletter .e-con-inner > .e-con { flex-wrap: wrap; }
  .awps-newsletter .e-con-inner > .e-con > .e-con { flex: 1 1 100%; }
}

/* About collage: two 280px rows + an 18px gap = 578, matching .about-collage. */
.elementor-element.awps-about-collage > .e-con-inner { row-gap: 18px; padding: 0; }
.awps-about-collage > .e-con { margin-block: 0 !important; }


/* ============================================================================
   HEIGHT PARITY — footer, about column, newsletter band.
   Measured targets: footer 501px, about 874px, newsletter 228px.
   ========================================================================== */

/* [7] .footer-bottom is a single 13.5px row in the original: 22px padding either
       side of a 26px payment logo. Elementor was stacking its three children and
       adding its own inter-element rhythm. */
.awps-footer-bottom > .e-con-inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 22px;
}
.awps-footer-bottom .elementor-widget,
.awps-footer-bottom .e-con { margin-block: 0 !important; }
.awps-footer-bottom .elementor-widget-text-editor p { margin: 0; }
.awps-footer-bottom .elementor-widget-image { line-height: 0; }

/* The four footer columns carry no extra widget rhythm either. */
.awps-footer .elementor-widget { margin-block: 0 !important; }
.awps-footer .awps-links .elementor-icon-list-item { margin-bottom: 11px; }
.awps-footer h3.elementor-heading-title { margin-bottom: 18px; }

@media (max-width: 640px) {
  .awps-footer-bottom > .e-con-inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* [8] About text column: the original stacks eyebrow, title, copy, three feature
       rows and a button with no widget margins at all. */
.awps-about-row > .e-con:not(.awps-about-collage) > .e-con-inner > *,
.awps-about-row .awps-feature-item,
.awps-about-row .awps-feature-item > .e-con-inner > * { margin-block: 0 !important; }
.awps-about-row > .e-con:not(.awps-about-collage) > .e-con-inner { row-gap: 10px; }
.awps-about-row .awps-feature-item + .awps-feature-item { margin-top: 0 !important; }

/* [9] Newsletter: heading and form share one row; the h2 must not wrap. */
.awps-newsletter .e-con-inner > .e-con > .e-con:first-child { flex: 1 1 60%; max-width: none; }
.awps-newsletter .e-con-inner > .e-con > .e-con:last-child { flex: 0 1 auto; }
.awps-newsletter .elementor-widget-heading h2.elementor-heading-title { white-space: nowrap; }
@media (max-width: 900px) {
  .awps-newsletter .elementor-widget-heading h2.elementor-heading-title { white-space: normal; }
}


/* [7b] .footer-bottom is one 13.5px row: 22px padding around a 26px payment logo.
        Elementor's widget rhythm and the stacked legal list were adding ~40px. */
.awps-footer-bottom .elementor-widget-icon-list .elementor-icon-list-items { margin: 0; }
.awps-footer-bottom .elementor-icon-list-item { margin-bottom: 0 !important; }
.awps-footer-bottom > .e-con-inner > * { align-self: center; }
.awps-footer-bottom .e-con > .e-con-inner { padding: 0; }

/* [8b] The about column's remaining height is Elementor's own widget spacing on
        the intro copy and the three feature rows. */
.awps-about-row .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.awps-about-row > .e-con:not(.awps-about-collage) > .e-con-inner { row-gap: 4px; }
.awps-about-row .awps-feature-item .elementor-widget-heading { margin-bottom: 2px !important; }


/* ============================================================================
   FINAL HEIGHT PARITY — footer 501px, about 874px.
   ========================================================================== */

/* Footer bottom: one row, 22px padding, a 26px logo. The legal links were
   stacking instead of sitting inline, which added ~30px. */
.awps-footer-bottom .awps-footer-legal .elementor-icon-list-items {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 0;
}
.awps-footer-bottom .awps-footer-legal .elementor-icon-list-item { margin: 0 !important; }
.awps-footer-bottom .elementor-widget-text-editor,
.awps-footer-bottom .elementor-widget-text-editor p { line-height: 1.6; margin: 0; }
.awps-footer-bottom > .e-con-inner { padding-block: 22px !important; }

/* Footer columns: the source heading sits 18px above a list whose items are
   14.5px on a 1.6 line — Elementor's default 1.75 body leading made them taller. */
.awps-footer h3.elementor-heading-title { margin-bottom: 10px; line-height: 1.3; }
.awps-footer .awps-links .elementor-icon-list-item,
.awps-footer .awps-contact-list .elementor-icon-list-item { line-height: 1.5; }
.awps-footer .elementor-widget-text-editor p { line-height: 1.6; }

/* About text column: Elementor's container padding was adding ~117px. */
.awps-about-row > .e-con:not(.awps-about-collage),
.awps-about-row > .e-con:not(.awps-about-collage) > .e-con-inner { padding: 0 !important; }
.awps-about-row { align-items: center; }

/* .about-collage is 622px tall in the original (two 280px rows + an 18px gap
   plus its own padding). */
.elementor-element.awps-about-collage { max-height: 622px; }


/* Footer link lists: footer .links li { margin-bottom: 11px } and nothing else —
   Elementor's icon-list adds its own row gap on top of that. */
.awps-footer .awps-links .elementor-icon-list-items,
.awps-footer .awps-contact-list .elementor-icon-list-items { gap: 0 !important; }
.awps-footer .awps-links .elementor-icon-list-item {
  margin-bottom: 11px !important; line-height: 1.45; padding: 0 !important;
}
.awps-footer .awps-contact-list .elementor-icon-list-item {
  margin-bottom: 12px !important; line-height: 1.45; padding: 0 !important;
}
.awps-footer .awps-links .elementor-icon-list-item:last-child,
.awps-footer .awps-contact-list .elementor-icon-list-item:last-child { margin-bottom: 0 !important; }

/* Footer bottom: every item on one 26px line, matching the payment logo. */
.awps-footer-bottom > .e-con-inner > *,
.awps-footer-bottom .elementor-widget-text-editor p,
.awps-footer-bottom .elementor-icon-list-item { line-height: 26px !important; }
.awps-footer-bottom .elementor-widget-text-editor,
.awps-footer-bottom .awps-footer-legal { display: flex; align-items: center; }