/* ============================================================================
   AWPS — About page blocks.

   Ported verbatim from css/style.css: the overlapping duo photo, the captioned
   photo band, accreditation badges, membership logo chips and the FAQ. The FAQ
   is a native Elementor Accordion here, styled to read like the original
   <details> list.
   ========================================================================== */

/* ---------------------------------------------------------------- duo shot --
   .duo-shot .main  { 100% x 470px }
   .duo-shot .inset { absolute right:-20 bottom:-34; 54% x 210; 7px white border }
   .duo-shot .tag   { absolute left:-18 top:28; gradient pill } */

.awps-duo-shot { position: relative; }

.elementor-element.awps-duo-main img {
  width: 100%; height: 470px; object-fit: cover;
  border-radius: var(--awps-radius);
  box-shadow: 0 24px 60px rgba(20, 70, 60, .18);
  display: block;
}

.elementor-element.awps-duo-inset {
  position: absolute; right: -20px; bottom: -34px;
  width: 54%; z-index: 2;
}
.elementor-element.awps-duo-inset img {
  width: 100%; height: 210px; object-fit: cover;
  border-radius: 16px; border: 7px solid #fff;
  box-shadow: 0 24px 60px rgba(20, 70, 60, .18);
  display: block;
}

.awps-duo-tag {
  position: absolute; left: -18px; top: 28px; z-index: 3;
  background-image: linear-gradient(135deg, var(--awps-green) 0%, var(--awps-lime) 100%);
  background-color: var(--awps-green);
  color: #fff;
  border-radius: 16px;
  padding: 14px 20px !important;
  box-shadow: 0 24px 60px rgba(20, 70, 60, .18);
  line-height: 1.15;
  width: auto;
}
.awps-duo-tag .elementor-element.awps-badge-num .elementor-heading-title { font-size: 26px; color: #fff; }
.awps-duo-tag .elementor-element.awps-badge-lbl,
.awps-duo-tag .elementor-element.awps-badge-lbl p { font-size: 12px; font-weight: 700; opacity: .92; color: #fff; }

@media (max-width: 767px) {
  .awps-duo-tag { left: 12px; top: 12px; }
  .elementor-element.awps-duo-inset { right: 0; bottom: -20px; }
}

/* -------------------------------------------------------------- photo band --
   .photo-card img { 320px cover }  figcaption { bottom gradient, 17px 800 } */

.elementor-element.awps-photo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--awps-radius);
  box-shadow: var(--awps-shadow);
  padding: 0 !important;
}
.awps-photo-card img {
  width: 100%; height: 320px; object-fit: cover;
  display: block; transition: transform .7s;
  border-radius: 0;
}
.awps-photo-card:hover img { transform: scale(1.07); }

.awps-photo-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 46px 22px 18px !important;
  background: linear-gradient(transparent, rgba(11, 40, 32, .88));
  width: 100%;
}
.awps-photo-cap .elementor-heading-title {
  color: #fff; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 17px;
}
.elementor-element.awps-photo-sub,
.elementor-element.awps-photo-sub p {
  color: #fff; font-size: 12.5px; font-weight: 600; opacity: .85; margin: 3px 0 0;
}

/* ----------------------------------------------------------------- badges --
   .badge { pill }  .badge .b-ic { 38px circle }  .b-ic.logo { white + border } */

.awps-badge-chip {
  background: #fff;
  border: 1px solid var(--awps-mint2);
  border-radius: 40px;
  padding: 8px 18px 8px 8px !important;
  box-shadow: var(--awps-shadow);
  width: auto !important;
}
.awps-badge-chip .elementor-widget-text-editor,
.awps-badge-chip .elementor-widget-text-editor p {
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px;
  color: var(--awps-deep); margin: 0; white-space: nowrap;
}
.elementor-element.awps-badge-ic { width: 38px; flex: 0 0 38px; }
.awps-badge-ic img {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--awps-mint2);
  object-fit: contain; display: block;
}

/* ------------------------------------------------------------- logo chips --
   .logo-chip { white, radius 16, padding 14/24 }  img { height 56px } */

.elementor-element.awps-logo-chip {
  background: #fff;
  border: 1px solid var(--awps-mint2);
  border-radius: 16px;
  padding: 14px 24px !important;
  box-shadow: var(--awps-shadow);
  width: auto !important;
}
.awps-logo-chip img {
  height: 56px; width: auto; max-width: 150px;
  object-fit: contain; transition: transform .4s;
  border-radius: 0;
}
.awps-logo-chip:hover img { transform: scale(1.07); }

/* -------------------------------------------------------------------- FAQ --
   .faq-item { 1.5px mint-2 border, radius 14 }  summary { 20/26, Manrope 800 }
   summary::after { "+" turning 45deg when open }  .ans { 0 26 22 } */

.awps-faq .elementor-accordion-item {
  border: 1px solid var(--awps-mint2);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
}
.awps-faq .elementor-tab-title {
  padding: 20px 26px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--awps-ink);
  border: 0;
  background: #fff;
}
.awps-faq .elementor-tab-title a { color: var(--awps-ink); }
.awps-faq .elementor-tab-content {
  padding: 0 26px 22px;
  border: 0;
  color: var(--awps-body, #5E6D67);
}
.awps-faq .elementor-accordion-icon { color: var(--awps-green); font-size: 24px; }
.awps-faq .elementor-accordion-icon svg { width: 18px; height: 18px; }


/* .about-grid { grid-template-columns: 1.05fr 1fr; gap: 60px } — the duo photo
   sits in the left column, so the main image must not span the full width. */
.awps-about-grid { gap: 60px !important; align-items: center; }
.awps-about-media { flex: 0 0 47%; max-width: 47%; }
.awps-about-media .awps-duo-shot { width: 100%; }

@media (max-width: 1024px) {
  .awps-about-media { flex: 1 1 100%; max-width: 100%; }
}


/* ----------------------------------------------------------------- facts --
   .facts       { grid-template-columns: repeat(4, 1fr); gap: 22px }
   .facts.cols-3{ grid-template-columns: repeat(3, 1fr) }
   @900 -> 2 columns   @520 -> 1 column
   Elementor lays these out as a wrapping flex row, so the column basis has to be
   set explicitly at each breakpoint or six cards squeeze onto one line. */

/* The basis maths below is a percentage of the row's inner width, so the row must not
   carry Elementor's default 10px gutter or four cards come out 279px instead of 283.5. */
.awps-facts { flex-wrap: wrap !important; gap: 22px !important; padding: 0; }

.awps-facts > .awps-fact {
  flex: 0 0 calc((100% - 3 * 22px) / 4) !important;
  max-width: calc((100% - 3 * 22px) / 4) !important;
  width: auto !important;
}
.awps-facts--3 > .awps-fact {
  flex: 0 0 calc((100% - 2 * 22px) / 3) !important;
  max-width: calc((100% - 2 * 22px) / 3) !important;
}

@media (max-width: 900px) {
  .awps-facts > .awps-fact,
  .awps-facts--3 > .awps-fact {
    flex: 0 0 calc((100% - 22px) / 2) !important;
    max-width: calc((100% - 22px) / 2) !important;
  }
}
@media (max-width: 520px) {
  .awps-facts > .awps-fact,
  .awps-facts--3 > .awps-fact { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* .stats on the About page carries the same acacia band as the home page. */
.awps-stats { background-blend-mode: soft-light; }


/* .stats .grid { grid-template-columns: repeat(4, 1fr); gap: 30px } — four across
   on one line. A 25% basis plus a 30px gap overflows and wraps, so the basis has
   to subtract the gaps. */
.awps-stats-row { flex-wrap: nowrap !important; gap: 30px !important; }
.awps-stats-row > .e-con {
  flex: 0 0 calc((100% - 3 * 30px) / 4) !important;
  max-width: calc((100% - 3 * 30px) / 4) !important;
  width: auto !important;
}
@media (max-width: 900px) {
  .awps-stats-row { flex-wrap: wrap !important; row-gap: 44px !important; }
  .awps-stats-row > .e-con {
    flex: 0 0 calc((100% - 30px) / 2) !important;
    max-width: calc((100% - 30px) / 2) !important;
  }
}


/* ------------------------------------------------------------ fact card --
   Live card measures 373x178:
     .fact    { padding: 24px 22px; border-radius: 18px }
     .fact .ic{ font-size: 26px; line-height: 1 }
     .fact h4 { font-size: 15px; margin: 12px 0 6px }
     .fact p  { font-size: 14px; line-height: 1.55 } */

.elementor-element.awps-fact {
  padding: 24px 22px !important;
  border-radius: var(--awps-radius);
  background: #fff;
  border: 1px solid var(--awps-mint2);
  box-shadow: var(--awps-shadow);
}
 /* Elementor puts a 20px gap between container children; the source card has
    none — its rhythm comes from the h4's own 12px/6px margins. */
.elementor-element.awps-fact { gap: 0 !important; row-gap: 0 !important; }
.awps-fact > .e-con-inner { padding: 0; gap: 0 !important; row-gap: 0 !important; }
.awps-fact .elementor-widget { margin-block: 0 !important; }

.awps-fact .elementor-element.awps-ic .elementor-heading-title {
  font-size: 26px; line-height: 1; color: inherit;
}
/* `.fact h4 { font-size: 15px }`. The `.elementor-element` step is load-bearing:
   typography.css sets h4 to 17px at the same (0,3,1) weight and loads after this file,
   so an equal-specificity rule here silently loses. */
.awps-fact .elementor-element.elementor-widget-heading h4.elementor-heading-title {
  font-size: 15px; line-height: 1.25; margin: 12px 0 6px;
  color: var(--awps-deep, #14463C);
}
.awps-fact .elementor-widget-text-editor,
.awps-fact .elementor-widget-text-editor p {
  font-size: 14px; line-height: 1.55; margin: 0;
  color: var(--awps-ink, #1E2B27); opacity: .85;
}

/* -------------------------------------------------------------- FAQ open --
   The source has its first <details> open; Elementor's accordion starts with
   the first tab active too, so only the closed-height needs to match. */
.awps-faq .elementor-tab-content { padding: 0 26px 22px; }


/* ------------------------------------------------------------ FAQ metrics --
   Live: closed item 84px (summary 82 + 2px border), open item 190px,
   summary padding 20px 26px, its height set by the 24px "+" glyph,
   answer 16px/1.75 with 0 26px 22px padding, 16px between items. */

.awps-faq .elementor-tab-title {
  min-height: 82px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  line-height: 28px;
}
.awps-faq .elementor-accordion-icon {
  font-size: 24px;
  line-height: 1;
  width: auto;
  color: var(--awps-green);
}
.awps-faq .elementor-accordion-icon svg { width: 20px; height: 20px; }
.awps-faq .elementor-tab-content {
  font-size: 16px;
  line-height: 1.75;
  padding: 0 26px 22px;
}


/* REMOVED: `.awps-facts, .awps-photo-band, .awps-badge-row-wrap { margin-top: 48px }`
   and `.awps-facts { margin-bottom: 0 }`.

   Both were a workaround from before the section head carried its own margins: the
   48px under a head was pinned onto whichever grid happened to follow it. The head now
   ends with that 48 itself (lib/Page.php), so the rule doubled it — the Trekking page
   came out with 102px between the split and the fact cards. Worse, the `!important`
   margin-bottom overrode the 44px the source sets inline on that same row, closing the
   gap to the heading below it to zero. The margins live on the elements now, which is
   where the source has them. */


/* The question sits at the start of the row and the "+" at the end, exactly as
   summary / summary::after do in the source.

   Elementor always prints the icon BEFORE the title in the markup — `icon_align`
   only swaps a class, it does not reorder — so the two are re-ordered here with
   flex `order`. Without this, `justify-content: space-between` puts the icon hard
   left and throws the question over to the right. */
.awps-faq .elementor-tab-title .elementor-accordion-title {
  order: 1;
  flex: 1 1 auto;
  text-align: left;
}
.awps-faq .elementor-tab-title .elementor-accordion-icon {
  order: 2;
  flex: 0 0 auto;
  margin: 0 0 0 16px;
  text-align: right;
}


/* ============================================================================
   DESTINATIONS PAGE — region badge, filter chips, card grid.
   Values taken from .dest-card .region and .filters in css/style.css.
   ========================================================================== */

/* .dest-card .region { top-right pill, 12px 800, translucent white } */
.elementor-element.awps-dest-region {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: auto;
}
.elementor-element.awps-dest-region .elementor-heading-title {
  display: inline-block;
  background: rgba(255, 255, 255, .92);
  color: var(--awps-deep, #14463C);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 30px;
  line-height: 1.3;
}

/* .filters { centred pills, 44px below } */
.awps-filters { margin-bottom: 44px !important; gap: 12px !important; }

.elementor-element.awps-filter-chip .elementor-button {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 24px;
  border-radius: 30px;
  border: 2px solid var(--awps-mint2);
  background-color: #fff;
  background-image: none;
  color: var(--awps-ink, #1E2B27);
  fill: var(--awps-ink, #1E2B27);
  transition: .3s;
  cursor: pointer;
}
.elementor-element.awps-filter-chip .elementor-button:hover,
.elementor-element.awps-filter-chip.is-active .elementor-button {
  background-image: linear-gradient(135deg, var(--awps-green) 0%, var(--awps-lime) 100%);
  border-color: transparent;
  color: #fff;
  fill: #fff;
}

/* .dest-grid on this page is a 3-up wrapping grid of overlay cards. */
/* .dest-grid { grid-template-columns: repeat(3, 1fr); gap: 28px }
   with .dest-card { height: 380px } on this page. */
.awps-dest-grid { flex-wrap: wrap !important; gap: 28px !important; }
.awps-dest-grid > .awps-dest-card {
  flex: 0 0 calc((100% - 2 * 28px) / 3) !important;
  max-width: calc((100% - 2 * 28px) / 3) !important;
  width: auto !important;
  padding: 0 !important;
  height: 380px !important;
}
.awps-dest-grid > .awps-dest-card img { height: 380px !important; }
@media (max-width: 900px) {
  .awps-dest-grid > .awps-dest-card {
    flex: 0 0 calc((100% - 28px) / 2) !important;
    max-width: calc((100% - 28px) / 2) !important;
  }
}
@media (max-width: 560px) {
  .awps-dest-grid > .awps-dest-card { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* The two-column intro prose: .split with align-items:start, 54px below. */
.awps-dest-intro { align-items: flex-start !important; margin-bottom: 54px !important; }