/* ===========================================================
   Waypoint Adventures — public-facing CSS for shortcode output.
   Loaded on every page where a [waypoint_*] shortcode is used.
   =========================================================== */

/* Bundled fonts. Heading Now Variable is shipped INSIDE the plugin
   (assets/fonts/) so widget titles always render correctly — doesn't
   depend on the Media Library upload staying in place. The Media URL
   stays as a fallback so if Elementor has already uploaded the same
   font, the browser can re-use the cached copy. */
@font-face {
  font-family: 'Heading Now Variable';
  src: url('fonts/Heading-Now-Variable.ttf') format('truetype-variations'),
       url('/wp-content/uploads/2026/05/Heading-Now-Variable.ttf') format('truetype-variations'),
       url('fonts/Heading-Now-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 25% 200%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Deja Vu';
  src: url('/wp-content/uploads/2026/04/DejaVuSans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'REALity Hyper';
  src: url('/wp-content/uploads/2026/04/reality-hyper.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Brand tokens — match Elementor Global Colors */
:root {
  --wp-primary: #482818;          /* dark brown — TITLES */
  --wp-primary-dark: #2B1409;     /* darker brown — button hover state */
  --wp-accent: #D77534;            /* orange — CTAs, icons, price */
  --wp-accent-dark: #B85E22;       /* orange hover */
  --wp-dark: #2B1409;              /* secondary dark brown — button hover */
  --wp-text-body: rgba(10,10,10,0.59); /* body text token */
  --wp-text-muted: #6B5744;
  --wp-bg: #FFFFFF;
  --wp-bg-subtle: #FFF6DF;         /* L BG Yellow */
  --wp-bg-grey: #F0F0F1;           /* L BG Grey */
  --wp-border: #E8E0D8;
  --wp-success: #38A169;
  --wp-danger: #C53030;
  --wp-font-heading: 'Heading Now Variable', system-ui, sans-serif;
  --wp-font-body: 'Deja Vu', system-ui, sans-serif;
  --wp-font-display: 'REALity Hyper', system-ui, sans-serif;
}

/* Tier helpers — apply variable axis settings from Elementor Global Fonts */
.wp-tier-1 { font-variation-settings: 'wght' 900, 'wdth' 726; letter-spacing: -0.4px; }
.wp-tier-2 { font-variation-settings: 'wght' 809, 'wdth' 743; }
.wp-tier-3 { font-variation-settings: 'wght' 809, 'wdth' 743; letter-spacing: 0.6px; }
.wp-tier-4 { font-variation-settings: 'wght' 809, 'wdth' 743; }
.wp-tier-button { font-variation-settings: 'wght' 809, 'wdth' 743; letter-spacing: -1px; }

/* Elementor heading widgets — force the wght/wdth variable axis on live so
   the heading renders the SAME as the editor preview. Elementor's compiled
   CSS emits font-family + font-weight but often drops font-variation-settings,
   which makes the variable font fall back to its regular instance and look
   thin/narrow on live even though the editor canvas shows it heavy/wide. */
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title {
  font-variation-settings: 'wght' 809, 'wdth' 743;
}
.elementor-widget-heading h1.elementor-heading-title {
  font-variation-settings: 'wght' 900, 'wdth' 726;
}
/* Elementor button widget — match Juanita's button text tier */
.elementor-button .elementor-button-text {
  font-variation-settings: 'wght' 809, 'wdth' 743;
  letter-spacing: -1px;
}

/* ===========================================================
   TRIP CARD — used by [waypoint_trip_cards] and grids
   Matches Jean's mockup design exactly.
   =========================================================== */

.wp-trip-card {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(43, 20, 9, 0.06);
}
.wp-trip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(43, 20, 9, 0.12);
}

/* Image — clean, no dark overlay (title moves to body). Bumped from
   200px → 240px (+20%) per Juanita's request. */
.wp-trip-card-image {
  position: relative;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: #2B1409;
}

/* Short overview snippet under the title — 3 lines max. Keeps the card
   readable when locations are trimmed to "& more". */
.wp-trip-card-excerpt {
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wp-text-muted, #6B5744);
  margin: 4px 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Country pill — top-left of image */
.wp-trip-card-country {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--wp-accent);
  color: white;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 4px;
}

/* Days pill — top-right of image */
.wp-trip-card-days {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  color: var(--wp-accent);
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* SAVE % red circle badge — top-right of image, overlapping days badge */
.wp-trip-card-save {
  position: absolute;
  top: -10px;
  right: 14px;
  z-index: 4;
  background: var(--wp-danger);
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.wp-trip-card-save strong { font-size: 14px; margin-top: 2px; font-weight: 800; }

/* Body — white, padded, stacked content */
.wp-trip-card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: var(--wp-font-body);
}

.wp-trip-card-title {
  margin: 0 0 4px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-weight: 809;
  color: var(--wp-primary);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.wp-trip-card-subtitle {
  margin: 0 0 14px;
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--wp-text-body);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stacked single-column meta rows. Sized closer to Elementor body text
   (17px / weight 500) so the card content reads as a continuation of
   the section copy instead of small print. */
.wp-trip-card-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--wp-text-body);
  margin-bottom: 16px;
}
.wp-trip-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wp-trip-card-meta-row svg {
  width: 14px;
  height: 14px;
  color: var(--wp-accent);
  stroke: var(--wp-accent);
  flex-shrink: 0;
}

/* Price footer — single row: price left, plain Book Now text-link right */
.wp-trip-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--wp-border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.wp-trip-card-foot-price { display: flex; flex-direction: column; min-width: 0; }
.wp-trip-card-foot-noprice { justify-content: flex-end; }
.wp-trip-card-price-from {
  display: block;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-size: 11px;
  color: var(--wp-text-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.wp-trip-card-price-current {
  display: block;
  font-family: var(--wp-font-heading);
  /* Softer weight + smaller size — Juanita found the 22px/wght 809 too
     dominant on the card. 18px with wght 700 still reads as the price
     but doesn't crowd the title above. */
  font-variation-settings: 'wght' 700, 'wdth' 580;
  font-style: normal;
  font-size: 18px;
  color: var(--wp-accent);
  line-height: 1.15;
}

/* ============================================================
   THEME VARIANTS — wrap shortcode in .wp-theme-light or
   .wp-theme-dark to switch card colour scheme.
   Default = light. Add data-theme="dark" on shortcode to flip.
   Section background must be set on the Elementor SECTION,
   not the widget — these styles only target the card itself.
   ============================================================ */

/* Light variant (default) — already covered by base styles above. */

/* Dark variant — for use on dark sections */
.wp-theme-dark .wp-trip-card {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.wp-theme-dark .wp-trip-card:hover {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.wp-theme-dark .wp-trip-card-title { color: #FFFFFF; }
.wp-theme-dark .wp-trip-card-subtitle { color: rgba(255, 255, 255, 0.75); }
.wp-theme-dark .wp-trip-card-meta { color: rgba(255, 255, 255, 0.75); }
.wp-theme-dark .wp-trip-card-foot { border-top-color: rgba(255, 255, 255, 0.12); }
.wp-theme-dark .wp-trip-card-price-from { color: rgba(255, 255, 255, 0.7); }
.wp-theme-dark .wp-trip-card-price-was { color: rgba(255, 255, 255, 0.5); }
.wp-trip-card-price-was {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--wp-text-muted);
  text-decoration: line-through;
}

/* Trip card Book Now — plain orange text link with arrow, no background.
   Whole card is clickable (anchor wrapper); this just gives a clear CTA. */
.wp-trip-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--wp-accent);
  padding: 0;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}
.wp-trip-card-cta::after {
  content: '\2192';
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 0.15s ease;
}
.wp-trip-card:hover .wp-trip-card-cta { color: var(--wp-dark); }
.wp-trip-card:hover .wp-trip-card-cta::after { transform: translateX(3px); }

/* ===========================================================
   TRIP CARDS GRID + CAROUSEL
   =========================================================== */

.wp-trip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .wp-trip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wp-trip-grid { grid-template-columns: 1fr; } }

.wp-trip-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding: 4px 4px 16px;
}
.wp-trip-carousel::-webkit-scrollbar { display: none; }
.wp-trip-carousel.is-dragging { cursor: grabbing; }
.wp-trip-carousel .wp-trip-card { flex: 0 0 calc((100% - 48px) / 4); }
@media (max-width: 1200px) { .wp-trip-carousel .wp-trip-card { flex: 0 0 calc((100% - 32px) / 3); } }
@media (max-width: 800px)  { .wp-trip-carousel .wp-trip-card { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 560px)  { .wp-trip-carousel .wp-trip-card { flex: 0 0 80%; } }

/* ===========================================================
   DESTINATIONS WIDGET
   =========================================================== */

.wp-destinations {
  font-family: var(--wp-font-body);
}

.wp-destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wp-destinations-grid .wp-dest-card { height: 288px; }
@media (max-width: 1024px) { .wp-destinations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .wp-destinations-grid { grid-template-columns: 1fr; } }

.wp-destinations-carousel {
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.wp-destinations-carousel.is-dragging { cursor: grabbing; }
.wp-destinations-carousel-track {
  display: flex;
  gap: 16px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.wp-destinations-carousel-track .wp-dest-card {
  flex: 0 0 calc((100% - 48px) / 4);
  height: 288px;
}
@media (max-width: 1200px) { .wp-destinations-carousel-track .wp-dest-card { flex: 0 0 calc((100% - 32px) / 3); } }
@media (max-width: 800px)  { .wp-destinations-carousel-track .wp-dest-card { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 560px)  { .wp-destinations-carousel-track .wp-dest-card { flex: 0 0 80%; } }

.wp-dest-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  display: block;
  background: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.wp-dest-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.18); }
.wp-dest-card-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-dest-card:hover .wp-dest-card-img { transform: scale(1.08); }
.wp-dest-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.15) 100%);
  transition: background 0.4s ease;
}
.wp-dest-card:hover .wp-dest-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.20) 100%);
}
.wp-dest-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; }
.wp-dest-card h3 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 26px;
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
  color: white;
}
.wp-dest-card .wp-dest-count {
  font-family: var(--wp-font-body);
  font-size: 13px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 999px;
  color: white;
  font-weight: 400;
  transition: background 0.3s ease;
}
.wp-dest-card:hover .wp-dest-count { background: var(--wp-accent); }

/* Stagger fade-in */
.wp-dest-card { opacity: 0; transform: translateY(20px); animation: wpFadeInUp 0.6s ease forwards; }
.wp-dest-card:nth-child(1) { animation-delay: 0.05s; }
.wp-dest-card:nth-child(2) { animation-delay: 0.15s; }
.wp-dest-card:nth-child(3) { animation-delay: 0.25s; }
.wp-dest-card:nth-child(4) { animation-delay: 0.35s; }

/* ============================================================
   WP-DESTINATIONS V3 — white-card slider with image on top.
   Matches the "WHERE WE'RE GOING NEXT" reference design:
     - White card, subtle shadow
     - Image at the top with rounded corners
     - White body underneath with pin icon + COUNTRY NAME +
       short tagline + EXPLORE TOURS button
     - Arrow buttons on each side for desktop navigation
     - No visible scrollbar; touch-swipe + arrows handle navigation
   Drops in via [waypoint_destinations layout="v3"] inside an
   Elementor Shortcode widget. No outer wrapper, no heading.
   ============================================================ */
.wp-destinations-v3-wrap {
  position: relative;
  width: 100%;
  /* Side gutters so the arrow buttons sit OUTSIDE the cards rather
     than overlapping the first/last image. The rail uses the inner
     space; arrows live in the gutter. */
  padding: 0 60px;
}
/* Tighter gutter on laptops/tablets — keeps arrows visible without
   eating too much card width. */
@media (max-width: 1100px) {
  .wp-destinations-v3-wrap { padding: 0 50px; }
}
@media (max-width: 700px) {
  .wp-destinations-v3-wrap { padding: 0 34px; }
}
/* White circular arrow buttons floating outside the cards on the
   sides. Hidden on mobile — swipe is the natural pattern there. */
/* Theme buttons in this site default to red on hover — override hard
   with !important so our orange brand colour wins regardless of theme
   or Elementor button rules. */
.wp-destinations-v3-wrap .wp-dest-v3-arrow-btn,
button.wp-dest-v3-arrow-btn {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #D77534 !important;          /* orange icon on white pill */
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.18) !important;
  cursor: pointer;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.wp-dest-v3-arrow-btn svg { width: 22px; height: 22px; display: block; }
.wp-destinations-v3-wrap .wp-dest-v3-arrow-btn:hover,
.wp-destinations-v3-wrap .wp-dest-v3-arrow-btn:focus,
.wp-destinations-v3-wrap .wp-dest-v3-arrow-btn:focus-visible,
button.wp-dest-v3-arrow-btn:hover,
button.wp-dest-v3-arrow-btn:focus,
button.wp-dest-v3-arrow-btn:focus-visible {
  background: #D77534 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.25) !important;
  outline: none !important;
}
.wp-dest-v3-arrow-btn:active { transform: translateY(-50%) scale(0.96); }
/* Arrows sit INSIDE the wrapper at the edges so they can never
   clip outside an Elementor section or get cut off at the viewport
   edge. Slight overlap with the first/last card is intentional and
   matches standard carousel UX (Amazon/Netflix/etc). */
/* Arrows live in the wrap's 60px side gutter — entirely OUTSIDE the
   rail so they never touch the first or last card's image. */
.wp-dest-v3-arrow-btn--prev { left: 6px; }
.wp-dest-v3-arrow-btn--next { right: 6px; }
/* Smaller arrow buttons on tablet/mobile so they don't dwarf the
   card next to them. Position tightened toward the screen edge. */
@media (max-width: 1100px) {
  .wp-dest-v3-arrow-btn { width: 42px; height: 42px; }
  .wp-dest-v3-arrow-btn svg { width: 18px; height: 18px; }
  .wp-dest-v3-arrow-btn--prev { left: 4px; }
  .wp-dest-v3-arrow-btn--next { right: 4px; }
}
@media (max-width: 700px) {
  .wp-dest-v3-arrow-btn { width: 30px !important; height: 30px !important; }
  .wp-dest-v3-arrow-btn svg { width: 16px !important; height: 16px !important; }
  .wp-dest-v3-arrow-btn--prev { left: 2px; }
  .wp-dest-v3-arrow-btn--next { right: 2px; }
}
.wp-destinations-v3 {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 8px;
  margin: 0;
  /* Hide scrollbar — swipe + drag still work, just no visible track. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
}
.wp-destinations-v3::-webkit-scrollbar { display: none; height: 0; width: 0; } /* Chrome/Safari */
.wp-destinations-v3-track {
  display: flex;
  gap: 14px;
  padding: 4px 0 8px;
  /* No justify-content — cards EQUALLY fill the rail width via
     flex-grow. Centring was causing visible whitespace on the sides
     when widths didn't round perfectly. */
}

/* Card: WHITE container.
   ──────────────────────────────────────────────────────────────────
   Responsive rules:
   - Desktop (≥1101px): 5 visible per row, scrolls horizontally if
     there are more. If the country count fits (≤5), the wrap is
     given .wp-destinations-v3-wrap--fits in PHP — that scoped block
     below switches the cards back to flex-grow + hides the arrows.
   - Tablet (701–1100px): 3 visible per row, always scrolls past 3.
   - Mobile (≤700px): 1 visible per row, always scrolls.
   flex: 0 0 X locks the card width so it CANNOT shrink to fit the
   viewport — that's how we get the swipe/scroll behaviour on small
   screens instead of the old all-cards-squashed-into-one-row bug. */
.wp-dest-v3-card {
  flex: 0 0 calc((100% - 56px) / 5); /* 5 cards * 14px gap = 56px */
  min-width: 0;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.10);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
@media (max-width: 1100px) {
  .wp-dest-v3-card { flex: 0 0 calc((100% - 28px) / 3); } /* 3 per view */
}
@media (max-width: 700px) {
  .wp-dest-v3-card { flex: 0 0 100%; }                    /* 1 per view */
}

/* DESKTOP ONLY — when count ≤5 there's nothing to scroll, so kill
   the gutter, hide the arrows, and let cards grow to share the row.
   Scoped to ≥1101px because on tablet 5 cards still don't fit in a
   3-up view (and on mobile they don't fit in 1-up), so arrows must
   remain on those breakpoints regardless of count. */
@media (min-width: 1101px) {
  .wp-destinations-v3-wrap--fits {
    padding: 0;
  }
  .wp-destinations-v3-wrap--fits .wp-dest-v3-arrow-btn {
    display: none;
  }
  .wp-destinations-v3-wrap--fits .wp-destinations-v3 {
    overflow: hidden;
  }
  .wp-destinations-v3-wrap--fits .wp-dest-v3-card {
    flex: 1 1 calc((100% - 56px) / 5);
  }
}
.wp-dest-v3-card:hover {
  transform: translateY(-2px);
  /* Symmetric, gentler shadow so the bottom doesn't read like a
     hard band of dark. Tighter blur, lower opacity. */
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.10);
}

/* Image wrapper at the top of the card. Square-ish aspect (1:1)
   matching the reference. Rounded top corners — body is below. */
.wp-dest-v3-imgwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F1D392;
}
.wp-dest-v3-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-dest-v3-card:hover .wp-dest-v3-img { transform: scale(1.06); }

/* White body — icon + country name + tagline + button. */
.wp-dest-v3-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.wp-dest-v3-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wp-dest-v3-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--wp-accent, #D77534);
  flex-shrink: 0;
}
.wp-dest-v3-icon svg { width: 100%; height: 100%; display: block; }
/* Country name — matches the trip card title spec exactly so
   v3 reads as part of the same family of cards. Brand dark brown
   via --wp-primary (NOT pure black), Heading Now Variable 809/743. */
.wp-dest-v3-name {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-weight: 809;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
}
/* Tagline — matches the trip card subtitle spec (Deja Vu 15px / 500
   weight / line-height 1.5, body text token colour). */
.wp-dest-v3-tagline {
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wp-text-body, rgba(10,10,10,0.59));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 0;
}

/* Button + trip count row — pushed to the BOTTOM of the body with
   margin-top:auto so the button sits at the same height across every
   card regardless of how many lines the tagline wraps to. Layout:
   button on the left, "X TRIPS" pinned to the right. */
.wp-dest-v3-btnrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* EXPLORE TOURS button — orange outline, rounded, left aligned. */
.wp-dest-v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--wp-accent, #D77534);
  border-radius: 10px;
  background: transparent;
  color: var(--wp-accent, #D77534);
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.wp-dest-v3-btn:hover {
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
}
.wp-dest-v3-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.wp-dest-v3-btn:hover .wp-dest-v3-arrow { transform: translateX(2px); }

/* "5 TRIPS" — dark brown body text in the same uppercase / tracking
   rhythm as the button so they read as a matching pair. */
.wp-dest-v3-count {
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* On tablet / laptop / mobile the cards are narrow enough that
   button + count side-by-side clips the "N TRIPS" text. Stack the
   row vertically so the button takes a full line and the count
   sits centered underneath. Desktop stays side-by-side. */
@media (max-width: 1100px) {
  .wp-dest-v3-btnrow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wp-dest-v3-btn {
    justify-content: center;
  }
  .wp-dest-v3-count {
    text-align: center;
    white-space: normal;
  }
}

/* Stagger fade-in (matches v1 timing) */
.wp-dest-v3-card { opacity: 0; transform: translateY(20px); animation: wpFadeInUp 0.6s ease forwards; }
.wp-dest-v3-card:nth-child(1) { animation-delay: 0.05s; }
.wp-dest-v3-card:nth-child(2) { animation-delay: 0.15s; }
.wp-dest-v3-card:nth-child(3) { animation-delay: 0.25s; }
.wp-dest-v3-card:nth-child(4) { animation-delay: 0.35s; }
.wp-dest-v3-card:nth-child(5) { animation-delay: 0.45s; }
.wp-dest-v3-card:nth-child(6) { animation-delay: 0.55s; }
.wp-dest-v3-card:nth-child(7) { animation-delay: 0.65s; }
.wp-dest-card:nth-child(5) { animation-delay: 0.45s; }
.wp-dest-card:nth-child(6) { animation-delay: 0.55s; }
@keyframes wpFadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   TRIP CARDS SLIDER  [waypoint_trip_cards style="slider"]
   Same visual family as Destinations v3 — white cards in a
   scroll-snap slider, arrows OUTSIDE in a gutter, 5-up desktop
   / 3-up tablet / 1-up mobile. Body: icon + UPPERCASE TITLE +
   short excerpt + BOOK NOW pill + date label.
   Difference vs Destinations v3: image is the existing trip
   poster (240px fixed height, landscape) preserving the
   country/days/save badges.
   ============================================================ */
.wp-trip-slider-wrap {
  position: relative;
  width: 100%;
  padding: 0 66px;
  box-sizing: border-box;
}
@media (max-width: 1100px) { .wp-trip-slider-wrap { padding: 0 50px; } }
@media (max-width: 700px)  { .wp-trip-slider-wrap { padding: 0 34px; } }

.wp-trip-slider-wrap .wp-trip-slider-arrow-btn,
button.wp-trip-slider-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--wp-accent, #D77534);
  border: none;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.14);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.wp-trip-slider-arrow-btn svg { width: 22px; height: 22px; display: block; }
.wp-trip-slider-wrap .wp-trip-slider-arrow-btn:hover,
.wp-trip-slider-wrap .wp-trip-slider-arrow-btn:focus,
.wp-trip-slider-wrap .wp-trip-slider-arrow-btn:focus-visible,
button.wp-trip-slider-arrow-btn:hover,
button.wp-trip-slider-arrow-btn:focus,
button.wp-trip-slider-arrow-btn:focus-visible {
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  outline: none;
}
.wp-trip-slider-arrow-btn:active { transform: translateY(-50%) scale(0.96); }
.wp-trip-slider-arrow-btn--prev { left: 6px; }
.wp-trip-slider-arrow-btn--next { right: 6px; }

@media (max-width: 700px) {
  .wp-trip-slider-arrow-btn { width: 42px; height: 42px; }
  .wp-trip-slider-arrow-btn svg { width: 18px; height: 18px; }
  .wp-trip-slider-arrow-btn--prev { left: 4px; }
  .wp-trip-slider-arrow-btn--next { right: 4px; }
}

.wp-trip-slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wp-trip-slider::-webkit-scrollbar { display: none; height: 0; width: 0; }
.wp-trip-slider-track {
  display: flex;
  gap: 14px;
  padding: 4px 0 8px;
}

/* Card: WHITE container, same shell as destinations v3. Difference
   is inside — the image is the existing landscape trip poster, not
   the 1:1 destinations image. */
.wp-trip-slider-card {
  flex: 0 0 calc((100% - 56px) / 5);
  min-width: 0;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.10);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
@media (max-width: 1100px) {
  .wp-trip-slider-card { flex: 0 0 calc((100% - 28px) / 3); }
}
@media (max-width: 700px) {
  .wp-trip-slider-card { flex: 0 0 100%; }
}
@media (min-width: 1101px) {
  .wp-trip-slider-wrap--fits { padding: 0; }
  .wp-trip-slider-wrap--fits .wp-trip-slider-arrow-btn { display: none; }
  .wp-trip-slider-wrap--fits .wp-trip-slider { overflow: hidden; }
  .wp-trip-slider-wrap--fits .wp-trip-slider-card { flex: 1 1 calc((100% - 56px) / 5); }
}
.wp-trip-slider-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.10);
}

/* Image link wrapper — full-width poster on top. Uses the existing
   .wp-trip-card-image class (240px landscape, country/days/save
   badges), so the poster looks identical to the grid variant. */
.wp-trip-slider-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wp-trip-slider-image {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* White body — icon + trip name + short excerpt + BOOK NOW + date.
   Mirrors .wp-dest-v3-body spacing and typography exactly so the
   two widgets read as one system. */
.wp-trip-slider-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.wp-trip-slider-name {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-weight: 809;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
}
.wp-trip-slider-tagline {
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wp-text-body, rgba(10,10,10,0.59));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 0;
}
.wp-trip-slider-btnrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wp-trip-slider-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--wp-accent, #D77534);
  border-radius: 10px;
  background: transparent;
  color: var(--wp-accent, #D77534);
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.wp-trip-slider-btn:hover {
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
}
.wp-trip-slider-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.wp-trip-slider-btn:hover .wp-trip-slider-arrow { transform: translateX(2px); }
.wp-trip-slider-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.wp-trip-slider-date-icon {
  width: 14px;
  height: 14px;
  color: var(--wp-accent, #D77534);
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .wp-trip-slider-btnrow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wp-trip-slider-btn { justify-content: center; }
  .wp-trip-slider-date {
    text-align: center;
    white-space: normal;
  }
}

/* Stagger fade-in — same timing as destinations v3 */
.wp-trip-slider-card { opacity: 0; transform: translateY(20px); animation: wpFadeInUp 0.6s ease forwards; }
.wp-trip-slider-card:nth-child(1) { animation-delay: 0.05s; }
.wp-trip-slider-card:nth-child(2) { animation-delay: 0.15s; }
.wp-trip-slider-card:nth-child(3) { animation-delay: 0.25s; }
.wp-trip-slider-card:nth-child(4) { animation-delay: 0.35s; }
.wp-trip-slider-card:nth-child(5) { animation-delay: 0.45s; }
.wp-trip-slider-card:nth-child(6) { animation-delay: 0.55s; }
.wp-trip-slider-card:nth-child(7) { animation-delay: 0.65s; }

/* ============================================================
   SOCIAL SLIDERS — shared shell for
     [waypoint_feed    layout="slider"]
     [waypoint_events  layout="slider"]
     [waypoint_youtube layout="slider"]
   Same visual family as Destinations v3 / Trip slider — white
   cards in a scroll-snap rail, arrows OUTSIDE in a gutter,
   5-up desktop / 3-up tablet / 1-up mobile, --fits hides arrows
   when count fits. Card body content differs per widget via
   .wp-social-slider-card--feed / --events / --youtube modifiers.
   ============================================================ */
.wp-social-slider-outer { display: block; }
.wp-social-slider-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  /* Right-inset matches the slider wrap so the SUBSCRIBE button
     lines up with the right edge of the last card, not the arrow
     button that lives out in the gutter. */
  padding-right: 66px;
  box-sizing: border-box;
}
@media (max-width: 1100px) { .wp-social-slider-header { padding-right: 50px; } }
@media (max-width: 700px)  { .wp-social-slider-header { padding-right: 34px; } }
.wp-social-slider-wrap {
  position: relative;
  width: 100%;
  padding: 0 66px;
  box-sizing: border-box;
}
@media (max-width: 1100px) { .wp-social-slider-wrap { padding: 0 50px; } }
@media (max-width: 700px)  { .wp-social-slider-wrap { padding: 0 34px; } }

.wp-social-slider-wrap .wp-social-slider-arrow-btn,
button.wp-social-slider-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--wp-accent, #D77534);
  border: none;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.14);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.wp-social-slider-arrow-btn svg { width: 22px; height: 22px; display: block; }
.wp-social-slider-wrap .wp-social-slider-arrow-btn:hover,
.wp-social-slider-wrap .wp-social-slider-arrow-btn:focus,
button.wp-social-slider-arrow-btn:hover,
button.wp-social-slider-arrow-btn:focus {
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  outline: none;
}
.wp-social-slider-arrow-btn:active { transform: translateY(-50%) scale(0.96); }
.wp-social-slider-arrow-btn--prev { left: 6px; }
.wp-social-slider-arrow-btn--next { right: 6px; }
@media (max-width: 700px) {
  .wp-social-slider-arrow-btn { width: 42px; height: 42px; }
  .wp-social-slider-arrow-btn svg { width: 18px; height: 18px; }
  .wp-social-slider-arrow-btn--prev { left: 4px; }
  .wp-social-slider-arrow-btn--next { right: 4px; }
}

.wp-social-slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wp-social-slider::-webkit-scrollbar { display: none; height: 0; width: 0; }
.wp-social-slider-track {
  display: flex;
  gap: 14px;
  padding: 4px 0 8px;
}

.wp-social-slider-card {
  flex: 0 0 calc((100% - 56px) / 5);
  min-width: 0;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.10);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
@media (max-width: 1100px) { .wp-social-slider-card { flex: 0 0 calc((100% - 28px) / 3); } }
@media (max-width: 700px)  { .wp-social-slider-card { flex: 0 0 100%; } }
@media (min-width: 1101px) {
  .wp-social-slider-wrap--fits { padding: 0; }
  .wp-social-slider-wrap--fits .wp-social-slider-arrow-btn { display: none; }
  .wp-social-slider-wrap--fits .wp-social-slider { overflow: hidden; }
  .wp-social-slider-wrap--fits .wp-social-slider-card { flex: 1 1 calc((100% - 56px) / 5); }
}
.wp-social-slider-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.10);
}

/* Image at the top of the card. 4:3 landscape matches typical
   Facebook post + video thumbnail aspect. */
.wp-social-slider-imglink {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.wp-social-slider-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #F1D392;
}
/* YouTube thumbnails come back at native 16:9 (maxres / medium). Match
   the card image aspect so the video reads full-bleed with no bars.
   Falls back gracefully if only the older 4:3 padded `high` variant
   is returned — background-size:cover crops the padding away. */
.wp-social-slider-card--youtube .wp-social-slider-img {
  aspect-ratio: 16 / 9;
}
.wp-social-slider-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wp-social-slider-play svg { width: 56px; height: 56px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }

/* White body — matches destinations v3 spacing/typography. */
.wp-social-slider-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.wp-social-slider-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 16px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-social-slider-text {
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wp-text-body, rgba(10,10,10,0.59));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 0;
}
.wp-social-slider-btnrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wp-social-slider-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--wp-accent, #D77534);
  border-radius: 10px;
  background: transparent;
  color: var(--wp-accent, #D77534);
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.wp-social-slider-btn:hover {
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
}
.wp-social-slider-arrow-i {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.wp-social-slider-btn:hover .wp-social-slider-arrow-i { transform: translateX(2px); }
.wp-social-slider-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.wp-social-slider-date-icon {
  width: 14px;
  height: 14px;
  color: var(--wp-accent, #D77534);
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .wp-social-slider-btnrow {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wp-social-slider-btn { justify-content: center; }
  .wp-social-slider-date { text-align: center; white-space: normal; justify-content: center; }
}

.wp-social-slider-empty {
  padding: 24px;
  text-align: center;
  color: #6B5744;
  font-size: 14px;
}

/* Cards are click-to-open — signal it. */
.wp-social-slider-card[data-wp-social-open] {
  cursor: pointer;
}
.wp-social-slider-card[data-wp-social-open]:focus-visible {
  outline: 2px solid var(--wp-accent, #D77534);
  outline-offset: 2px;
}

/* ============================================================
   SOCIAL MODAL — shared in-page popup for FB feed / events /
   YouTube sliders. Keeps visitors on our page (feedback rule).
   ============================================================ */
.wp-social-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.wp-social-modal[hidden] { display: none; }
.wp-social-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.wp-social-modal.is-open .wp-social-modal-backdrop { opacity: 1; }
.wp-social-modal-panel {
  position: relative;
  background: #FFFFFF;
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s ease;
  font-family: var(--wp-font-body);
  color: var(--wp-text-body, rgba(10, 10, 10, 0.59));
  /* Thin, brand-orange scrollbar so it feels part of the modal
     instead of a default OS bar. Firefox gets the two-tuple
     scrollbar-color; WebKit browsers get the ::-webkit-scrollbar
     block below. */
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 117, 52, 0.55) transparent;
}
.wp-social-modal-panel::-webkit-scrollbar { width: 6px; height: 6px; }
.wp-social-modal-panel::-webkit-scrollbar-track { background: transparent; }
.wp-social-modal-panel::-webkit-scrollbar-thumb {
  background-color: rgba(215, 117, 52, 0.55);
  border-radius: 3px;
}
.wp-social-modal-panel::-webkit-scrollbar-thumb:hover {
  background-color: var(--wp-accent, #D77534);
}
.wp-social-modal.is-open .wp-social-modal-panel { transform: scale(1) translateY(0); }
.wp-social-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.wp-social-modal-close-btn:hover { background: rgba(0, 0, 0, 0.72); }
.wp-social-modal-media { width: 100%; background: #2B1409; }
.wp-social-modal-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #2B1409;
}
.wp-social-modal-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: #000;
}
.wp-social-modal-body { padding: 28px 32px; }
.wp-social-modal-title {
  margin: 0 0 12px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 24px;
  line-height: 1.25;
  color: var(--wp-primary, #482818);
  letter-spacing: -0.005em;
}
.wp-social-modal-meta {
  font-family: var(--wp-font-body);
  font-size: 13px;
  color: var(--wp-text-body, rgba(10, 10, 10, 0.59));
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wp-social-modal-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  color: var(--wp-primary, #482818);
}
.wp-social-modal-meta-row svg { color: var(--wp-accent, #D77534); }
.wp-social-modal-text {
  font-family: var(--wp-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--wp-text-body, rgba(10, 10, 10, 0.59));
  white-space: pre-wrap;
  word-wrap: break-word;
}
.wp-social-modal-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #EDE4D6;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wp-social-modal-btn,
.wp-social-modal-btn:link,
.wp-social-modal-btn:visited,
.wp-social-modal-btn:hover,
.wp-social-modal-btn:focus,
.wp-social-modal-btn:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  color: #FFFFFF !important;  /* Themes love overriding anchor color — force white on every state. */
}
.wp-social-modal-btn:hover { opacity: 0.9; transform: translateY(-1px); }
/* Parent-scoped + repeated-class selectors raise the specificity above
   themes that colour anchors with `.entry-content a { color: ... }` or
   similar. Combined with !important on background + colour it beats any
   theme reset short of another !important-parent chain. */
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-orange,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-orange:link,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-orange:visited,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-orange:hover,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-orange:focus,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-orange:active { background: var(--wp-accent, #D77534) !important; color: #FFFFFF !important; }
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-fb,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-fb:link,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-fb:visited,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-fb:hover,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-fb:focus,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-fb:active { background: #1877F2 !important; color: #FFFFFF !important; }
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-yt,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-yt:link,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-yt:visited,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-yt:hover,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-yt:focus,
.wp-social-modal .wp-social-modal-btn.wp-social-modal-btn-yt:active { background: #FF0000 !important; color: #FFFFFF !important; }
/* Also lock down inner spans just in case a theme paints nested text. */
.wp-social-modal .wp-social-modal-btn span,
.wp-social-modal .wp-social-modal-btn strong,
.wp-social-modal .wp-social-modal-btn em { color: inherit !important; }

/* YouTube-specific: SUBSCRIBE button — transparent bg, red YouTube
   glyph + brand text so it reads as a linked action, not a coloured
   pill. Sits in the .wp-social-slider-header above the rail. */
.wp-yt-slider-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  color: var(--wp-primary, #482818);
  border: 1.5px solid rgba(72, 40, 24, 0.25);
  border-radius: 8px;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-yt-slider-subscribe svg { width: 20px; height: 14px; display: block; }
.wp-yt-slider-subscribe:hover {
  background: rgba(215, 117, 52, 0.06);
  color: var(--wp-primary, #482818);
  border-color: var(--wp-accent, #D77534);
}

/* Stagger fade-in — same timing as the other sliders */
.wp-social-slider-card { opacity: 0; transform: translateY(20px); animation: wpFadeInUp 0.6s ease forwards; }
.wp-social-slider-card:nth-child(1) { animation-delay: 0.05s; }
.wp-social-slider-card:nth-child(2) { animation-delay: 0.15s; }
.wp-social-slider-card:nth-child(3) { animation-delay: 0.25s; }
.wp-social-slider-card:nth-child(4) { animation-delay: 0.35s; }
.wp-social-slider-card:nth-child(5) { animation-delay: 0.45s; }
.wp-social-slider-card:nth-child(6) { animation-delay: 0.55s; }
.wp-social-slider-card:nth-child(7) { animation-delay: 0.65s; }

/* ============================================================
   REVIEWS — v2  [waypoint_reviews layout="v2"]
   Same visual family as Destinations v3. White cards in a
   scroll-snap slider, arrows OUTSIDE in a 60px wrap gutter,
   5-up desktop / 3-up tablet / 1-up mobile, --fits class
   hides arrows when total ≤5 on desktop.
   ============================================================ */
.wp-reviews-v2-wrap {
  position: relative;
  width: 100%;
  padding: 0 60px;
}
@media (max-width: 1100px) {
  .wp-reviews-v2-wrap { padding: 0 50px; }
}
@media (max-width: 700px) {
  .wp-reviews-v2-wrap { padding: 0 34px; }
}

/* Arrow buttons — orange icon on white pill. !important across the
   board because the site theme has its own button hover (red) that
   would otherwise bleed in. */
.wp-reviews-v2-wrap .wp-rv2-arrow-btn,
button.wp-rv2-arrow-btn {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #D77534 !important;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.18) !important;
  cursor: pointer;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.wp-rv2-arrow-btn svg { width: 22px; height: 22px; display: block; }
.wp-reviews-v2-wrap .wp-rv2-arrow-btn:hover,
.wp-reviews-v2-wrap .wp-rv2-arrow-btn:focus,
.wp-reviews-v2-wrap .wp-rv2-arrow-btn:focus-visible,
button.wp-rv2-arrow-btn:hover,
button.wp-rv2-arrow-btn:focus,
button.wp-rv2-arrow-btn:focus-visible {
  background: #D77534 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.25) !important;
  outline: none !important;
}
.wp-rv2-arrow-btn:active { transform: translateY(-50%) scale(0.96); }
.wp-rv2-arrow-btn--prev { left: 6px; }
.wp-rv2-arrow-btn--next { right: 6px; }
@media (max-width: 1100px) {
  .wp-rv2-arrow-btn { width: 42px; height: 42px; }
  .wp-rv2-arrow-btn svg { width: 18px; height: 18px; }
  .wp-rv2-arrow-btn--prev { left: 4px; }
  .wp-rv2-arrow-btn--next { right: 4px; }
}
@media (max-width: 700px) {
  .wp-rv2-arrow-btn { width: 30px !important; height: 30px !important; }
  .wp-rv2-arrow-btn svg { width: 16px !important; height: 16px !important; }
  .wp-rv2-arrow-btn--prev { left: 2px; }
  .wp-rv2-arrow-btn--next { right: 2px; }
}

.wp-reviews-v2 {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wp-reviews-v2::-webkit-scrollbar { display: none; height: 0; width: 0; }
.wp-reviews-v2-track {
  display: flex;
  gap: 14px;
  padding: 4px 0 8px;
}

/* CARD */
.wp-rv2-card {
  flex: 0 0 calc((100% - 56px) / 5);
  min-width: 0;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.10);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  gap: 14px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
@media (max-width: 1100px) {
  .wp-rv2-card { flex: 0 0 calc((100% - 28px) / 3); }
}
@media (max-width: 700px) {
  .wp-rv2-card { flex: 0 0 100%; }
}
.wp-rv2-card:hover {
  transform: translateY(-2px);
  /* Symmetric, gentler shadow — matches the destinations v3 fix so
     the bottom doesn't read like a hard dark band on hover. */
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.10);
}

/* DESKTOP-ONLY --fits: ≤5 reviews fill the row, no arrows */
@media (min-width: 1101px) {
  .wp-reviews-v2-wrap--fits { padding: 0; }
  .wp-reviews-v2-wrap--fits .wp-rv2-arrow-btn { display: none; }
  .wp-reviews-v2-wrap--fits .wp-reviews-v2 { overflow: hidden; }
  .wp-reviews-v2-wrap--fits .wp-rv2-card {
    flex: 1 1 calc((100% - 56px) / 5);
  }
}

/* Card head: avatar + name + date */
.wp-rv2-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wp-rv2-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wp-rv2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* FB icon — white "f" centered inside the orange circle. */
.wp-rv2-avatar-fb {
  width: 60%;
  height: 60%;
  color: #FFFFFF;
  display: block;
}
/* Waypoint brand mark fallback — fits inside the orange circle with
   a small inset so the logo isn't crammed edge-to-edge. White
   background on the avatar in this case so the dark logo reads. */
.wp-rv2-avatar--waypoint {
  background: #FFFFFF;
  border: 1px solid rgba(43, 20, 9, 0.10);
}
.wp-rv2-avatar-logo {
  width: 78%;
  height: 78%;
  object-fit: contain;
  background: transparent;
}
.wp-rv2-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wp-rv2-name {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 15px;
  line-height: 1.2;
  color: var(--wp-primary, #482818);
  margin: 0;
}
.wp-rv2-date {
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--wp-text-body, rgba(10,10,10,0.59));
  margin-top: 2px;
  letter-spacing: 0.02em;
}
/* Tiny transparency note under Anonymous FB reviewers — explains
   why the name isn't shown so visitors don't read it as a bug. */
.wp-rv2-privacy {
  font-family: var(--wp-font-body);
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  color: rgba(10, 10, 10, 0.42);
  margin-top: 2px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Stars row */
.wp-rv2-stars {
  display: flex;
  gap: 2px;
  font-size: 16px;
  line-height: 1;
}
.wp-rv2-star { color: rgba(10,10,10,0.18); }
.wp-rv2-star.is-on { color: var(--wp-accent, #D77534); }

/* Review body */
.wp-rv2-text {
  font-family: var(--wp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--wp-text-body, rgba(10,10,10,0.7));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* "VIA FACEBOOK" / "VIA WAYPOINT" link — uppercase tracking matches
   destinations v3 button/count typography. Sits at the bottom of
   the card with a hairline divider above. */
.wp-rv2-link {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(43, 20, 9, 0.08);
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-accent, #D77534);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.wp-rv2-link:hover {
  color: var(--wp-accent-dark, #B85E22);
  text-decoration: underline;
}

/* ---- v2 card layout: stars TOP, text middle, name+date+avatar footer.
   Hides the "Anonymous" name + the privacy note (Juanita's call — was
   bothering clients). Avatar only renders when a profile picture exists. */
.wp-rv2-card--v2 {
  /* Stars at top — give them a touch more presence. */
}
.wp-rv2-card--v2 .wp-rv2-stars {
  font-size: 18px;
  gap: 3px;
}
.wp-rv2-card--v2 .wp-rv2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(43, 20, 9, 0.08);
}
.wp-rv2-card--v2 .wp-rv2-foot .wp-rv2-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.wp-rv2-card--v2 .wp-rv2-foot .wp-rv2-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
/* v2 link: keep the link styles but drop the extra top border + padding
   (the foot block already carries them when the foot is present). */
.wp-rv2-card--v2 .wp-rv2-link {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}
/* If neither name nor date nor avatar present, restore the link's own
   top divider so the bottom of the card still has a clean separator. */
.wp-rv2-card--v2 > .wp-rv2-link:first-of-type:not(.wp-rv2-foot + .wp-rv2-link) {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(43, 20, 9, 0.08);
}

/* Empty state */
.wp-reviews-v2-empty {
  font-family: var(--wp-font-body);
  color: var(--wp-text-body, rgba(10,10,10,0.59));
  text-align: center;
  padding: 40px 20px;
}

/* Stagger fade-in matching destinations v3 */
.wp-rv2-card { opacity: 0; transform: translateY(20px); animation: wpFadeInUp 0.6s ease forwards; }
.wp-rv2-card:nth-child(1) { animation-delay: 0.05s; }
.wp-rv2-card:nth-child(2) { animation-delay: 0.15s; }
.wp-rv2-card:nth-child(3) { animation-delay: 0.25s; }
.wp-rv2-card:nth-child(4) { animation-delay: 0.35s; }
.wp-rv2-card:nth-child(5) { animation-delay: 0.45s; }
.wp-rv2-card:nth-child(6) { animation-delay: 0.55s; }
.wp-rv2-card:nth-child(7) { animation-delay: 0.65s; }

/* ============================================================
   NEWSLETTER REDESIGN — [waypoint_signup layout="redesign"]
   Form ONLY: First Name + Surname on ONE row, Email full-width
   underneath, solid-orange CTA full-width below.
   Transparent container — the Elementor section background
   (image / colour / gradient) shows through unchanged.
   Posts to /api/newsletter/subscribe on the portal.
   ============================================================ */
.wp-signup-rd-form,
form.wp-signup-rd-form,
.wp-form.wp-signup-rd-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
}
.wp-signup-rd-form h3,
.wp-signup-rd-form > p { display: none; } /* hide any inherited wp-form bits */

.wp-signup-rd-field input {
  width: 100%;
  font-family: var(--wp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--wp-primary, #482818);
  background: #FFFFFF;
  border: 1px solid rgba(43, 20, 9, 0.18);
  border-radius: 999px;
  padding: 14px 22px;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-signup-rd-field input::placeholder {
  color: var(--wp-text-body, rgba(10,10,10,0.45));
  font-weight: 500;
}
.wp-signup-rd-field input:focus,
.wp-signup-rd-field input:focus-visible {
  border-color: #D77534;
  box-shadow: 0 0 0 3px rgba(215, 117, 52, 0.18);
}

/* Solid orange CTA — full-width, rounded-rect (radius 6) matching the
   provided reference button. Background colour stays the SAME on
   hover (no orange→darker-orange swap); the only hover effect is a
   subtle shrink. !important across the board so the theme's button
   hover rules can't repaint or re-radius it. */
.wp-signup-rd-btn,
button.wp-signup-rd-btn {
  width: 100%;
  margin-top: 6px;
  padding: 14px 22px;
  font-family: 'Deja Vu', system-ui, sans-serif !important;
  font-size: 15px !important;          /* laptop / desktop */
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  background: #D77534 !important;
  border: 0 !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(215, 117, 52, 0.22) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-signup-rd-btn:hover,
.wp-signup-rd-btn:focus,
.wp-signup-rd-btn:focus-visible,
button.wp-signup-rd-btn:hover,
button.wp-signup-rd-btn:focus,
button.wp-signup-rd-btn:focus-visible {
  color: #FFFFFF !important;
  background: #D77534 !important; /* SAME orange — no colour change */
  border-radius: 6px !important;
  outline: none !important;
  transform: scale(0.97);          /* shrink — the only hover effect */
  box-shadow: 0 2px 6px rgba(215, 117, 52, 0.18) !important;
}
.wp-signup-rd-btn:active { transform: scale(0.95); }
.wp-signup-rd-btn-arrow { width: 18px; height: 18px; display: block; }

/* Mobile — drop button text one more notch so it doesn't dominate
   the narrow viewport. Arrow shrinks to match. */
@media (max-width: 700px) {
  .wp-signup-rd-btn,
  button.wp-signup-rd-btn {
    font-size: 13px !important;
    padding: 13px 20px;
    letter-spacing: 0.05em;
  }
  .wp-signup-rd-btn-arrow { width: 16px; height: 16px; }
}

/* ===========================================================
   FORMS — newsletter, contact, enquiry
   =========================================================== */

.wp-form {
  font-family: var(--wp-font-body);
  max-width: 640px;
  text-align: left;
}
.wp-form h3 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 22px;
  margin: 0 0 8px 0;
  color: var(--wp-primary);
}
.wp-form p { margin: 0 0 20px 0; color: var(--wp-text-muted); font-size: 14px; }

.wp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.wp-form-row.wp-form-row-1 { grid-template-columns: 1fr; }
@media (max-width: 560px) { .wp-form-row { grid-template-columns: 1fr; } }

.wp-form input,
.wp-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--wp-border);
  border-radius: 999px;
  font-family: var(--wp-font-body);
  font-size: 14px;
  background: white;
  color: var(--wp-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-form textarea {
  border-radius: 12px;
  resize: vertical;
  min-height: 100px;
}
.wp-form input:focus,
.wp-form textarea:focus {
  outline: none;
  border-color: var(--wp-primary);
  box-shadow: 0 0 0 3px rgba(215, 116, 52, 0.15);
}

.wp-form button {
  background: var(--wp-primary);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 999px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-top: 8px;
}
.wp-form button:hover { background: var(--wp-accent); color: white; }
.wp-form button:disabled { opacity: 0.6; cursor: not-allowed; }

.wp-form-honeypot { position: absolute; left: -9999px; opacity: 0; }

.wp-form-disclaimer {
  margin-top: 12px;
  font-size: 12px;
  color: var(--wp-text-muted);
  line-height: 1.5;
}
.wp-form-disclaimer a { color: var(--wp-primary); text-decoration: underline; }

.wp-form-success {
  background: rgba(56, 161, 105, 0.1);
  border: 1px solid rgba(56, 161, 105, 0.3);
  border-radius: 12px;
  padding: 20px 24px;
  text-align: center;
  color: var(--wp-success);
  font-weight: 600;
}
.wp-form-error {
  background: rgba(197, 48, 48, 0.1);
  border: 1px solid rgba(197, 48, 48, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  color: var(--wp-danger);
  font-size: 14px;
}

/* ===========================================================
   SECTION HEADER — used in various places
   =========================================================== */

.wp-section-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--wp-primary);
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  margin: 0 0 8px 0;
}
.wp-section-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--wp-dark);
  margin: 0 0 12px 0;
  letter-spacing: 0.02em;
}

/* ===========================================================
   SINGLE TRIP TEMPLATE
   =========================================================== */

.wp-single-trip {
  font-family: var(--wp-font-body);
  color: var(--wp-dark);
}
.wp-single-trip-hero {
  position: relative;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-color: var(--wp-dark);
}
.wp-single-trip-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}
.wp-single-trip-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 60px;
  color: white;
  text-align: center;
}
.wp-single-trip-hero h1 {
  font-family: var(--wp-font-display);
  font-size: clamp(32px, 5.5vw, 48px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.wp-single-trip-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
}
@media (max-width: 900px) {
  .wp-single-trip-content { grid-template-columns: 1fr; }
}

.wp-single-trip-facts {
  background: var(--wp-bg-subtle);
  border-radius: 16px;
  padding: 24px;
  align-self: start;
  position: sticky;
  top: 24px;
}
.wp-single-trip-facts h3 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px 0;
  color: var(--wp-dark);
}
.wp-single-trip-facts ul { list-style: none; margin: 0 0 20px 0; padding: 0; }
.wp-single-trip-facts li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wp-border); font-size: 14px; }
.wp-single-trip-facts li:last-child { border-bottom: none; }
.wp-single-trip-facts li svg { width: 18px; height: 18px; stroke: var(--wp-primary); fill: none; stroke-width: 2; flex-shrink: 0; }

.wp-single-trip-price {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 28px;
  color: var(--wp-primary);
  margin: 16px 0;
}
.wp-single-trip-price small {
  font-size: 13px;
  color: var(--wp-text-muted);
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.wp-single-trip-cta {
  display: block;
  background: var(--wp-primary);
  color: white;
  padding: 16px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  transition: background 0.2s;
}
.wp-single-trip-cta:hover { background: var(--wp-primary-dark); color: white; }

.wp-single-trip-body h2 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 28px;
  color: var(--wp-dark);
  margin: 32px 0 16px 0;
  letter-spacing: 0.02em;
}
.wp-single-trip-body p { line-height: 1.7; color: var(--wp-dark); margin: 0 0 16px 0; }
.wp-single-trip-body ul { line-height: 1.7; color: var(--wp-dark); margin: 0 0 16px 0; padding-left: 20px; }

.wp-itinerary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin-top: 16px;
}
@media (max-width: 640px) { .wp-itinerary-grid { grid-template-columns: 1fr; } }
.wp-itinerary-day {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.wp-itinerary-day-icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(215, 116, 52, 0.1);
  color: var(--wp-primary);
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wp-itinerary-day-text strong {
  display: block;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp-dark);
}
.wp-itinerary-day-text span { font-size: 13px; color: var(--wp-text-muted); line-height: 1.5; }

/* ===========================================================
   SEARCH BAR
   =========================================================== */

.wp-search-bar {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 16px;
  display: grid;
  /* Destination | Year | Trip | Dates | Book Now */
  grid-template-columns: 1.2fr 0.9fr 1.6fr 1.4fr auto;
  gap: 10px;
  font-family: var(--wp-font-body);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .wp-search-bar { grid-template-columns: 1fr 1fr 1fr; }
  .wp-search-bar .wp-search-go { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .wp-search-bar { grid-template-columns: 1fr; }
  .wp-search-bar .wp-search-go { grid-column: auto; }
}
.wp-search-field {
  padding: 8px 12px;
  border: 1px solid var(--wp-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wp-search-field-label {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-size: 11px;
  color: var(--wp-text-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 4px;
}
.wp-search-field input,
.wp-search-field select,
.wp-search-field .wp-search-dates {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--wp-primary);
  line-height: 1.3;
}
.wp-search-field .wp-search-dates {
  display: block;
  padding-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Book Now — orange bg + brown text + dark brown 1px border by default;
   inverts to dark brown bg + white text + orange border on hover. */
.wp-search-bar .wp-search-go {
  background: var(--wp-accent);
  color: var(--wp-primary);
  border: 1px solid var(--wp-dark);
  border-radius: 12px;
  padding: 0 28px;
  min-height: 56px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-search-bar .wp-search-go:hover:not([disabled]),
.wp-search-bar .wp-search-go:focus-visible:not([disabled]) {
  background: var(--wp-dark);
  color: #FFFFFF;
  border-color: var(--wp-accent);
}
.wp-search-bar .wp-search-go[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===========================================================
   ARCHIVE PAGES — /tours, /shop, /blog
   =========================================================== */

.wp-archive { font-family: var(--wp-font-body); color: var(--wp-dark); }

.wp-archive-hero {
  position: relative;
  background: var(--wp-bg-subtle);
  padding: clamp(60px, 9vw, 120px) 24px clamp(48px, 7vw, 96px);
  text-align: center;
  border-bottom: 1px solid var(--wp-border);
  overflow: hidden;
}
.wp-archive-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.wp-archive-hero h1 {
  font-family: var(--wp-font-display);
  font-size: clamp(34px, 6vw, 60px);
  letter-spacing: 0.02em;
  color: var(--wp-dark);
  margin: 0 0 16px 0;
  line-height: 1.05;
}
.wp-archive-hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--wp-text-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* Image-banner variant — Shop, Blog & Tours archives use this to match the
   nature-photo + dark-overlay + white-text look from the React TripsArchivePage.
   Background image is set inline via style="background-image:url(...)". */
.wp-archive-hero--image {
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 0;
  padding: clamp(80px, 12vw, 160px) 24px clamp(64px, 9vw, 128px);
}
.wp-archive-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}
.wp-archive-hero--image h1                   { color: #FFFFFF; }
.wp-archive-hero--image .wp-archive-hero-sub { color: rgba(255,255,255,0.82); }
.wp-archive-hero--image .wp-section-eyebrow  { color: var(--wp-primary); }

.wp-archive-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
}
.wp-archive-body .wp-search-bar { margin-bottom: 48px; }
.wp-archive-body .wp-region-block { margin-bottom: 56px; }
.wp-archive-body .wp-region-block:last-child { margin-bottom: 0; }

/* ===========================================================
   PRODUCT CARDS + SINGLE PRODUCT
   =========================================================== */

.wp-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .wp-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wp-product-grid { grid-template-columns: 1fr; } }

.wp-product-card {
  display: block;
  background: white;
  border: 1px solid var(--wp-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wp-product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }

.wp-product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
}
.wp-product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--wp-text-muted);
  color: white;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border-radius: 999px;
}
.wp-product-card-badge-sale { background: var(--wp-primary); }

.wp-product-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wp-product-card-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 16px;
  margin: 0;
  color: var(--wp-dark);
  line-height: 1.3;
}
.wp-product-card-excerpt {
  font-size: 13px;
  color: var(--wp-text-muted);
  margin: 0;
  line-height: 1.5;
}
.wp-product-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
}
.wp-product-card-price-current { font-size: 18px; color: var(--wp-dark); }
.wp-product-card-price-was { font-size: 14px; color: var(--wp-text-muted); text-decoration: line-through; }

.wp-single-product { font-family: var(--wp-font-body); color: var(--wp-dark); }
.wp-single-product-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .wp-single-product-grid { grid-template-columns: 1fr; } }

.wp-single-product-image {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
  border-radius: 16px;
}

.wp-single-product-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: clamp(26px, 3.5vw, 34px);
  letter-spacing: 0;
  margin: 8px 0 16px;
  color: var(--wp-dark);
  line-height: 1.2;
}

.wp-single-product-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 16px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
}
.wp-single-product-price-current { font-size: 32px; color: var(--wp-primary); }
.wp-single-product-price-was { font-size: 18px; color: var(--wp-text-muted); text-decoration: line-through; }

.wp-single-product-stock {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--wp-success);
  font-weight: 600;
}
.wp-single-product-stock-out { color: var(--wp-danger); }

.wp-single-product-description {
  margin: 24px 0;
  line-height: 1.7;
}
.wp-single-product-description p { margin: 0 0 16px; }

/* ===========================================================
   BLOG CARDS + SINGLE POST
   =========================================================== */

.wp-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .wp-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wp-blog-grid { grid-template-columns: 1fr; } }

.wp-blog-card {
  display: block;
  background: white;
  border: 1px solid var(--wp-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wp-blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }

.wp-blog-card-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
}
.wp-blog-card-body { padding: 18px; }
.wp-blog-card-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 18px;
  margin: 8px 0 8px;
  color: var(--wp-dark);
  line-height: 1.3;
}
.wp-blog-card-excerpt {
  font-size: 14px;
  color: var(--wp-text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.wp-blog-card-date {
  font-size: 12px;
  color: var(--wp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.wp-single-post { font-family: var(--wp-font-body); color: var(--wp-dark); }
.wp-single-post-hero {
  position: relative;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-color: var(--wp-dark);
}
.wp-single-post-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}
.wp-single-post-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 24px 60px;
  color: white;
  text-align: center;
}
.wp-single-post-hero h1 {
  font-family: var(--wp-font-display);
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 8px 0 12px;
}
.wp-single-post-meta {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin: 0;
}

.wp-single-post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px;
  font-size: 17px;
  line-height: 1.7;
}
.wp-single-post-body p { margin: 0 0 18px; }
.wp-single-post-body h2,
.wp-single-post-body h3 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  color: var(--wp-dark);
  margin: 32px 0 12px;
}
.wp-single-post-body h2 { font-size: 26px; }
.wp-single-post-body h3 { font-size: 20px; }
.wp-single-post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; }

.wp-single-post-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ===========================================================
   FOOTER V2 — refined dynamic [waypoint_footer]
   =========================================================== */

/* Topographic contour-map pattern — brand visual used as a subtle overlay on
   solid-colour surfaces (footer, hero sections, plain Elementor blocks).
   Pattern itself is cream (#F4E4D0) so it reads as a soft highlight over the
   dark brand colours (orange #D77434, brown #482818, deep brown #2B1409) and
   on cream itself. Opacity per-surface via --wp-topo-opacity. */
:root {
  --wp-topo-opacity: 0.05;
  /* Brand topographic asset (Juanita's source file in assets/). Filename
     contains spaces, so encode them as %20 in the url(). */
  --wp-topo-pattern: url("Topography%20bg%20waypoint.svg");
}

.wp-footer-v2 {
  position: relative;
  isolation: isolate;
  background-color: var(--wp-footer-bg, #2B1409);
  color: #FFFFFF;
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 18px;
  padding: 44px 24px 20px;
}
/* Topo overlay sits between footer-bg and content — z-index:-1 puts it
   behind every child without forcing any layout/position changes on them. */
.wp-footer-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--wp-topo-pattern);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: var(--wp-topo-opacity);
  pointer-events: none;
}

/* Reusable utility — drop "wp-topo-bg" into any Elementor section's
   CSS Class field to overlay the topographic pattern on its existing bg.
   Children stay untouched (no position/z-index gymnastics required). */
.wp-topo-bg { position: relative; isolation: isolate; }
.wp-topo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--wp-topo-pattern);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: var(--wp-topo-opacity);
  pointer-events: none;
}
/* Force body text to Deja Vu 400 throughout the footer — without this
   Elementor's body-bold defaults bleed in and the text reads heavy. */
.wp-footer-v2,
.wp-footer-v2 p,
.wp-footer-v2 a,
.wp-footer-v2 li,
.wp-footer-v2 span,
.wp-footer-v2 input { font-weight: 400; }
.wp-footer-v2-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--wp-accent) 30%, var(--wp-accent) 70%, transparent 100%);
}

/* — Action bar (Book / Login / Download App) —
   Sits below the footer columns (moved down from the top per Juanita
   2026-06-29). 40px top gap gives it breathing room from the social
   icons above. NO bottom border — .wp-footer-v2-bottom carries its
   own border-top which serves as the divider between the buttons and
   the copyright line. Two borders back to back were showing as a
   double line. */
.wp-footer-v2-actionbar {
  max-width: 1240px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .wp-footer-v2-actionbar { grid-template-columns: 1fr; gap: 8px; }
}
.wp-footer-v2-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #FFFFFF;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: all 0.25s ease;
  text-align: left;
}
.wp-footer-v2-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.wp-footer-v2-action:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.4);
  color: white;
  transform: translateY(-2px);
}
.wp-footer-v2-action-primary {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: white !important;
  box-shadow: 0 6px 20px rgba(215, 116, 52, 0.25);
}
.wp-footer-v2-action-primary:hover {
  background: var(--wp-accent-dark);
  border-color: var(--wp-accent-dark);
  color: white !important;
  box-shadow: 0 8px 24px rgba(215, 116, 52, 0.4);
}

.wp-footer-v2-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1024px) { .wp-footer-v2-inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px)  { .wp-footer-v2-inner { grid-template-columns: 1fr; gap: 28px; } }

/* TABLET ONLY (561–1024px) — promote the brand into a centred row that
   spans the full width, then sit Explore / Legal / Get In Touch in three
   equal columns below. Stops the long brand description from skewing
   the 2×2 grid heights and gives the tablet footer a proper hierarchy.
   Desktop (>1024px) and phone (≤560px) layouts are untouched. */
@media (min-width: 561px) and (max-width: 1024px) {
  .wp-footer-v2-inner {
    grid-template-columns: 1fr 1fr 1fr !important;
    column-gap: 36px !important;
    row-gap: 44px !important;
  }
  .wp-footer-v2-brand {
    grid-column: 1 / -1 !important;
    max-width: 600px !important;
    margin: 0 auto 8px !important;
    text-align: center !important;
  }
  .wp-footer-v2-brand .wp-footer-v2-logo {
    margin: 0 auto 18px !important;
    text-align: center !important;
  }
  .wp-footer-v2-brand .wp-footer-v2-tag {
    margin: 0 auto 22px !important;
    max-width: none !important;
  }
  .wp-footer-v2-brand .wp-footer-v2-socials {
    justify-content: center !important;
  }
  /* Centre the copyright + managed-by line at the very bottom too. */
  .wp-footer-v2-bottom {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* — Brand column — */
.wp-footer-v2-brand { text-align: left; }
.wp-footer-v2-brand .wp-footer-v2-logo {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  line-height: 0;
  text-align: left;
  width: fit-content;
  max-width: 100%;
  /* Negative margin compensates for whitespace baked into the .webp file
     so the visible logo art aligns flush with the tagline below it. */
  margin-left: -16px;
}
.wp-footer-v2-brand .wp-footer-v2-logo img {
  max-width: 320px;
  max-height: 120px;
  width: auto;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: left center;
}
.wp-footer-v2-wordmark {
  display: inline-block;
  font-family: var(--wp-font-display);
  font-size: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  margin-bottom: 16px;
  line-height: 1;
}
.wp-footer-v2-wordmark span { color: var(--wp-accent); }
.wp-footer-v2-tag {
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: #FFFFFF;
  margin: 0 0 22px;
  /* Match the socials row width below it so the text block ends at the
     same x as the last social icon. 5 × 38 + 4 × 10 = 230px. */
  max-width: 260px;
}

.wp-footer-v2-socials { display: flex; gap: 10px; }
.wp-footer-v2-socials a {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.25s ease, transform 0.25s ease;
}
.wp-footer-v2-socials a:hover {
  background: var(--wp-accent);
  transform: translateY(-2px);
}
.wp-footer-v2-socials svg { width: 17px; height: 17px; fill: currentColor; }

/* — Link columns — */
.wp-footer-v2-col h4,
.wp-footer-v2-contact h4 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 20px;
  color: #FFFFFF;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 12px;
}
.wp-footer-v2-col h4::after,
.wp-footer-v2-contact h4::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px;
  height: 2px;
  background: var(--wp-accent);
  border-radius: 2px;
}

.wp-footer-v2-col ul,
.wp-footer-v2-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-footer-v2-col li { margin-bottom: 10px; }
.wp-footer-v2-col a {
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.wp-footer-v2-col a::before {
  content: '→';
  position: absolute;
  left: -16px;
  opacity: 0;
  color: var(--wp-accent);
  transition: opacity 0.2s ease, left 0.2s ease;
}
.wp-footer-v2-col a:hover {
  color: var(--wp-accent);
  padding-left: 16px;
}
.wp-footer-v2-col a:hover::before { opacity: 1; left: 0; }

/* — Contact column with pill icons — */
.wp-footer-v2-contact ul { margin-bottom: 24px; }
.wp-footer-v2-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #FFFFFF;
}
.wp-footer-v2-contact a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}
.wp-footer-v2-contact a:hover { color: var(--wp-accent); }

.wp-footer-v2-pin {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(215, 116, 52, 0.15);
  border: 1px solid rgba(215, 116, 52, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-footer-v2-pin svg {
  width: 16px; height: 16px;
  stroke: var(--wp-accent);
  fill: none;
  stroke-width: 2;
}
/* WhatsApp icon inside a pin needs filled paths, not stroked */
.wp-footer-v2-pin svg[fill="currentColor"] {
  fill: var(--wp-accent);
  stroke: none;
}

/* — Newsletter band (own row under the 4 columns) — */
.wp-footer-v2-newsletter-band {
  max-width: 1240px;
  margin: 28px auto 0;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: block;
}
.wp-footer-v2-newsletter-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 800px) {
  .wp-footer-v2-newsletter-band { padding: 24px 20px; }
  .wp-footer-v2-newsletter-band-inner { grid-template-columns: 1fr; gap: 20px; }
}
.wp-footer-v2-newsletter-text { color: #FFFFFF; }
.wp-footer-v2-newsletter-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 22px;
  color: #FFFFFF;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.wp-footer-v2-newsletter-sub {
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.5;
}

/* — Newsletter form (used inside the band) — */
.wp-footer-v2-newsletter {
  margin: 0;
  max-width: none;
}
.wp-footer-v2-newsletter h3,
.wp-footer-v2-newsletter > p { display: none; }
.wp-footer-v2-newsletter-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.wp-footer-v2-newsletter-row:focus-within {
  border-color: var(--wp-accent);
  background: rgba(255,255,255,0.1);
}
.wp-footer-v2-newsletter-row input[type=email] {
  flex: 1;
  background: transparent;
  border: none !important;
  outline: none;
  padding: 14px 18px;
  font-family: var(--wp-font-body);
  font-weight: 400;
  font-size: 15px;
  color: #FFFFFF;
  width: 100%;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wp-footer-v2-newsletter-row input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.wp-footer-v2-newsletter-row button {
  flex-shrink: 0;
  width: 40px; height: 40px;
  margin: 4px 4px 4px 0;
  background: var(--wp-accent);
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.wp-footer-v2-newsletter-row button:hover {
  background: var(--wp-accent-dark);
  transform: scale(1.05);
}
.wp-footer-v2-newsletter-row button svg { width: 16px; height: 16px; }
.wp-footer-v2-newsletter .wp-form-success,
.wp-footer-v2-newsletter .wp-form-error { font-size: 13px; padding: 10px 14px; }


/* — Bottom bar — */
.wp-footer-v2-bottom {
  max-width: 1240px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--wp-font-body);
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}
.wp-footer-v2-bottom a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}
.wp-footer-v2-bottom a:hover { color: var(--wp-accent); }

/* ===========================================================
   FOOTER (legacy static .wp-footer — kept for back-compat)
   =========================================================== */

.wp-footer {
  background: #2B1409;
  color: #E8E0D8;
  font-family: var(--wp-font-body);
  padding: 60px 24px 24px;
}
.wp-footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}
@media (max-width: 900px) { .wp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wp-footer-grid { grid-template-columns: 1fr; } }

.wp-footer-col h4 {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: white;
  margin: 0 0 16px;
}
.wp-footer-col p,
.wp-footer-col a {
  font-size: 14px;
  color: #E8E0D8;
  margin: 0 0 8px;
  text-decoration: none;
  display: block;
  line-height: 1.6;
}
.wp-footer-col a:hover { color: var(--wp-primary); }
.wp-footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.wp-footer-socials a {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.2s;
}
.wp-footer-socials a:hover { background: var(--wp-primary); color: white; }
.wp-footer-socials svg { width: 18px; height: 18px; fill: currentColor; }

.wp-footer-cta {
  display: inline-block;
  background: var(--wp-primary);
  color: white !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 700, 'wdth' 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 8px 8px 0;
}
.wp-footer-cta:hover { background: var(--wp-primary-dark); color: white !important; }

.wp-footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.wp-footer-bottom a { color: rgba(255,255,255,0.6); }
.wp-footer-bottom a:hover { color: var(--wp-primary); }

/* ============================================================
   [waypoint_values] — Our Values grid (Who-We-Are page)
   3 left / 3 right. Flat — NO card box, no border, no shadow.
   Icon left (orange line), <h3> title + description right.
   ============================================================ */
.wp-values { width: 100%; }
.wp-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .wp-values-grid { grid-template-columns: 1fr; gap: 28px; }
}
.wp-value {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.wp-value-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--wp-primary, #D77434);
}
.wp-value-icon svg { width: 44px; height: 44px; display: block; }
.wp-value-text { min-width: 0; }
.wp-value-text h3 {
  margin: 2px 0 6px;
  font-family: var(--wp-font-heading), system-ui, sans-serif;
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-style: normal;
  font-size: 19px;
  line-height: 1.2;
  color: var(--wp-dark, #2B1409);
}
.wp-value-text p {
  margin: 0;
  font-family: var(--wp-font-body), system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp-text-muted, #6B5744);
}

/* ============================================================
   OUR STORIES HUB — [waypoint_our_stories_hub]
   Bento mosaic for the Our Stories page. 5 tiles:
     - 1 feature image tile (left, spans 2 rows)
     - 2 white card tiles (top middle + top right)
     - 1 image tile (bottom middle)
     - 1 white card tile (bottom right)
   ============================================================ */
.wp-osh {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
}
.wp-osh-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  min-height: 540px;
}
.wp-osh-tile {
  position: relative;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.08);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
}
.wp-osh-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(43, 20, 9, 0.14);
}
.wp-osh-tile-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 26px 26px 28px;
  gap: 12px;
}

/* FEATURE — large left tile spans both rows */
.wp-osh-tile--feature {
  grid-row: span 2;
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}
.wp-osh-tile--feature .wp-osh-tile-inner {
  justify-content: flex-end;
  padding: 28px 30px 32px;
  gap: 14px;
}

/* IMAGE tile (bottom middle) */
.wp-osh-tile--image {
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wp-osh-tile--image .wp-osh-tile-inner {
  justify-content: flex-end;
  gap: 10px;
}

/* WHITE tiles (top middle, top right, bottom right) */
.wp-osh-tile--white .wp-osh-tile-inner {
  justify-content: flex-start;
}
.wp-osh-tile--white .wp-osh-icon {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(215, 117, 52, 0.12);
  color: var(--wp-accent, #D77534);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-osh-tile--white .wp-osh-icon svg { width: 18px; height: 18px; }

/* Tag badge for image tiles — small orange pill, top-left of tile */
.wp-osh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  font-family: var(--wp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
}
.wp-osh-badge svg { width: 14px; height: 14px; }

/* Titles — Heading Now Variable, varies by tile type */
.wp-osh-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  margin: 0;
}
.wp-osh-title--lg {
  font-size: 32px;
  color: #FFFFFF;
}
.wp-osh-title--white {
  color: #FFFFFF;
}

/* Body text */
.wp-osh-text {
  font-family: var(--wp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--wp-text-body, rgba(10,10,10,0.7));
  margin: 0;
}
.wp-osh-text--lg {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 460px;
}
.wp-osh-text--white {
  color: rgba(255, 255, 255, 0.88);
}

/* CTA — orange link with arrow on white tiles, filled button on feature tile */
.wp-osh-cta {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-accent, #D77534);
}
.wp-osh-cta--white {
  color: #FFFFFF;
}
.wp-osh-cta--filled {
  align-self: flex-start;
  padding: 12px 22px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  border-radius: 6px;
  margin-top: 4px;
  padding-top: 12px;
  box-shadow: 0 4px 10px rgba(215, 117, 52, 0.28);
  transition: transform 0.18s ease;
}
.wp-osh-tile:hover .wp-osh-cta--filled {
  transform: scale(0.97);
}
.wp-osh-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.wp-osh-tile:hover .wp-osh-arrow {
  transform: translateX(3px);
}

/* RESPONSIVE
   - Tablet (700–1024px): feature on top full width, 4 smaller in 2×2
   - Mobile (<700px): single column stack */
@media (max-width: 1024px) {
  .wp-osh-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .wp-osh-tile--feature {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 320px;
  }
  .wp-osh-title--lg { font-size: 28px; }
}
@media (max-width: 640px) {
  .wp-osh-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }
  .wp-osh-tile--feature {
    grid-column: auto;
    min-height: 280px;
  }
  .wp-osh-tile-inner {
    padding: 22px 22px 24px;
  }
  .wp-osh-title { font-size: 20px; }
  .wp-osh-title--lg { font-size: 24px; }
  .wp-osh-text { font-size: 13.5px; }
}

/* ============================================================
   HOMEPAGE STORIES SLIDER — [waypoint_stories_slider]
   "Stories from the Road" — dark-overlay image cards in a
   horizontal slider, pulling latest posts from any category.
   Matches the approved homepage mockup.
   ============================================================ */
.wp-stories {
  width: 100%;
  /* Full width — matches the reviews v2 slider so the arrows sit near
     the page edges. No max-width cap. (Was capped at 1320px which made
     the slider look boxed-in next to the full-width reviews row.) */
  padding: 0;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
}
.wp-stories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 0 4px;
}
.wp-stories-h2 {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 20px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wp-primary, #482818);
}
.wp-stories-h2-dash {
  flex: 0 0 48px;
  height: 2px;
  background: var(--wp-accent, #D77534);
  display: inline-block;
  font-size: 0;
}
.wp-stories-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-primary, #482818);
  text-decoration: none;
  transition: color 0.2s ease;
}
.wp-stories-viewall:hover { color: var(--wp-accent, #D77534); }
.wp-stories-viewall-arrow {
  width: 16px;
  height: 16px;
  color: var(--wp-accent, #D77534);
  transition: transform 0.2s ease;
}
.wp-stories-viewall:hover .wp-stories-viewall-arrow { transform: translateX(3px); }

.wp-stories-wrap {
  position: relative;
  width: 100%;
  padding: 0 60px;
}
@media (max-width: 1100px) { .wp-stories-wrap { padding: 0 50px; } }
@media (max-width: 700px)  { .wp-stories-wrap { padding: 0 34px; } }

/* Arrow buttons — orange icon on white pill, same family as the
   destinations v3 and reviews v2 arrows so the page reads cohesive. */
.wp-stories-wrap .wp-stories-arrow-btn,
button.wp-stories-arrow-btn {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #D77534 !important;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.18) !important;
  cursor: pointer;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.wp-stories-arrow-btn svg { width: 22px; height: 22px; display: block; }
.wp-stories-wrap .wp-stories-arrow-btn:hover,
.wp-stories-wrap .wp-stories-arrow-btn:focus,
.wp-stories-wrap .wp-stories-arrow-btn:focus-visible,
button.wp-stories-arrow-btn:hover,
button.wp-stories-arrow-btn:focus,
button.wp-stories-arrow-btn:focus-visible {
  background: #D77534 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.25) !important;
  outline: none !important;
}
.wp-stories-arrow-btn:active { transform: translateY(-50%) scale(0.96); }
.wp-stories-arrow-btn--prev { left: 6px; }
.wp-stories-arrow-btn--next { right: 6px; }
@media (max-width: 1100px) {
  .wp-stories-arrow-btn { width: 42px; height: 42px; }
  .wp-stories-arrow-btn svg { width: 18px; height: 18px; }
  .wp-stories-arrow-btn--prev { left: 4px; }
  .wp-stories-arrow-btn--next { right: 4px; }
}
@media (max-width: 700px) {
  .wp-stories-arrow-btn { width: 30px !important; height: 30px !important; }
  .wp-stories-arrow-btn svg { width: 16px !important; height: 16px !important; }
  .wp-stories-arrow-btn--prev { left: 2px; }
  .wp-stories-arrow-btn--next { right: 2px; }
}

.wp-stories-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wp-stories-rail::-webkit-scrollbar { display: none; height: 0; width: 0; }
.wp-stories-track {
  display: flex;
  gap: 14px; /* matches reviews v2 */
  padding: 4px 0 8px;
}

/* CARD — dark-overlay image with category tag + title + READ MORE.
   Card counts match the reviews v2 slider exactly so the two sliders
   read as a consistent pair across breakpoints:
     Desktop (default) : 5 visible
     Tablet <=1100px   : 3 visible
     Mobile <=700px    : 1 visible */
.wp-stories-card {
  position: relative;
  flex: 0 0 calc((100% - 56px) / 5);
  min-width: 0;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background-color: #2B1409;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.10);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
@media (max-width: 1100px) {
  .wp-stories-card { flex: 0 0 calc((100% - 28px) / 3) !important; }
}
@media (max-width: 700px) {
  .wp-stories-card { flex: 0 0 100% !important; aspect-ratio: 4 / 3; }
}
/* Headerless variant for the homepage feed — Juanita drops her own H2
   in Elementor above the shortcode. Strip the section top spacing so
   the widget sits flush below her heading. */
.wp-stories--noheader .wp-stories-header { display: none; }
.wp-stories--noheader { padding-top: 0; margin-top: 0; }
.wp-stories-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.12);
}
.wp-stories-card-bg {
  position: absolute;
  inset: 0;
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-stories-card:hover .wp-stories-card-bg {
  transform: scale(1.04);
}
.wp-stories-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 24px 24px;
  color: #FFFFFF;
}
.wp-stories-card-tag {
  font-family: var(--wp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
}
.wp-stories-card-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  margin: auto 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-stories-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--wp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp-accent, #D77534);
}
.wp-stories-card-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.wp-stories-card:hover .wp-stories-card-arrow { transform: translateX(3px); }

.wp-stories-empty {
  font-family: var(--wp-font-body);
  text-align: center;
  padding: 40px 20px;
  color: var(--wp-text-body, rgba(10,10,10,0.59));
}

@media (max-width: 700px) {
  .wp-stories-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .wp-stories-h2 { font-size: 18px; }
  .wp-stories-card-title { font-size: 16px; }
  .wp-stories-card-content { padding: 18px 20px 20px; }
}

/* ============================================================
   MEET US HUB — [waypoint_meet_us_hub]
   9-tile bento. Feature tile (left, 2 rows) + 8 tiles arranged
   in a 3-col grid on the right (3 top, 4 bottom incl. one image).
   Same visual language as Our Stories hub.
   ============================================================ */
.wp-muh {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
}
.wp-muh-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  min-height: 620px;
}
.wp-muh-tile {
  position: relative;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.08);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
}
.wp-muh-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(43, 20, 9, 0.14);
}
.wp-muh-tile-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 22px 22px 24px;
  gap: 10px;
}

/* FEATURE TILE — large left, spans 2 rows */
.wp-muh-tile--feature {
  grid-row: span 2;
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
}
.wp-muh-tile--feature .wp-muh-tile-inner {
  justify-content: flex-end;
  padding: 26px 28px 30px;
  gap: 14px;
}

/* IMAGE tile (bottom row, position 5 = t4) */
.wp-muh-tile--image {
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wp-muh-tile--image .wp-muh-tile-inner {
  justify-content: flex-end;
  gap: 10px;
}

/* WHITE tile icon */
.wp-muh-tile--white .wp-muh-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(215, 117, 52, 0.12);
  color: var(--wp-accent, #D77534);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-muh-tile--white .wp-muh-icon svg { width: 16px; height: 16px; }

/* Tag badge for image tiles */
.wp-muh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  font-family: var(--wp-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
}
.wp-muh-badge svg { width: 12px; height: 12px; }

/* Titles */
.wp-muh-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  margin: 0;
  padding-right: 38px;  /* leave room for the icon */
}
.wp-muh-title--lg {
  font-size: 28px;
  color: #FFFFFF;
  padding-right: 0;
}
.wp-muh-title--white {
  color: #FFFFFF;
}

/* Body text */
.wp-muh-text {
  font-family: var(--wp-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--wp-text-body, rgba(10,10,10,0.7));
  margin: 0;
}
.wp-muh-text--lg {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 440px;
}
.wp-muh-text--white {
  color: rgba(255, 255, 255, 0.88);
}

/* CTA */
.wp-muh-cta {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-accent, #D77534);
}
.wp-muh-cta--white { color: #FFFFFF; }
.wp-muh-cta--filled {
  align-self: flex-start;
  padding: 11px 20px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  border-radius: 6px;
  padding-top: 11px;
  box-shadow: 0 4px 10px rgba(215, 117, 52, 0.28);
  transition: transform 0.18s ease;
}
.wp-muh-tile:hover .wp-muh-cta--filled { transform: scale(0.97); }
.wp-muh-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.wp-muh-tile:hover .wp-muh-arrow { transform: translateX(3px); }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .wp-muh-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .wp-muh-tile--feature {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 280px;
  }
  .wp-muh-title--lg { font-size: 26px; }
}
@media (max-width: 700px) {
  .wp-muh-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .wp-muh-tile--feature {
    grid-column: 1 / -1;
    min-height: 240px;
  }
  .wp-muh-title { font-size: 16px; }
  .wp-muh-title--lg { font-size: 22px; }
  .wp-muh-text { font-size: 12.5px; }
}
@media (max-width: 460px) {
  .wp-muh-grid { grid-template-columns: 1fr; }
  .wp-muh-tile--feature { grid-column: auto; }
}

/* ============================================================
   VIBE OF THE TRIBE — [waypoint_vibe_section]
   Premium magazine section. Each section = one category. One
   featured (large) card + grid of smaller cards. Click any card
   to open the full article in an inline modal (no navigation).
   ============================================================ */
.wp-vibe {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 0;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
  scroll-margin-top: 100px;
}
.wp-vibe-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding: 0 4px;
}
.wp-vibe-header-text { flex: 1; min-width: 0; }
.wp-vibe-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wp-vibe-emoji {
  font-size: 28px;
  line-height: 1;
}
.wp-vibe-title {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 26px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wp-primary, #482818);
}
.wp-vibe-title-dash {
  flex: 0 0 56px;
  height: 2px;
  background: var(--wp-accent, #D77534);
  font-size: 0;
}
.wp-vibe-tagline {
  font-family: var(--wp-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp-text-body, rgba(10,10,10,0.7));
  margin: 12px 0 0;
  max-width: 640px;
}
.wp-vibe-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 6px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF !important;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(215, 117, 52, 0.28);
  transition: transform 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.wp-vibe-submit-btn:hover { transform: scale(0.97); }
.wp-vibe-submit-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  font-size: 16px;
  line-height: 1;
}

/* ============================================================
   VIBE CARDS — WHITE base. Image on top, content below. Brand
   dark-brown title, brand-orange badge + CTA, soft shadow.
   ============================================================ */
.wp-vibe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--wp-primary, #482818);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(43, 20, 9, 0.08);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease;
}
.wp-vibe-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(43, 20, 9, 0.14);
}
.wp-vibe-card:focus-visible {
  outline: 3px solid var(--wp-accent, #D77534);
  outline-offset: 2px;
}
.wp-vibe-img {
  position: relative;   /* anchors the social pill (wp-vibe-social-pill) */
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--cream, #FFF6DF);
  overflow: hidden;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-vibe-img--placeholder {
  background-image: linear-gradient(135deg, rgba(215,117,52,0.22), rgba(72,40,24,0.42));
}
.wp-vibe-card:hover .wp-vibe-img { transform: scale(1.04); }
.wp-vibe-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 24px;
  flex: 1;
}
.wp-vibe-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 6px 12px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF;
  font-family: var(--wp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
}
.wp-vibe-badge--sm { font-size: 10px; padding: 5px 10px; }
.wp-vibe-card-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 18px;
  line-height: 1.18;
  color: var(--wp-primary, #482818);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-vibe-card-title--lg { font-size: 24px; -webkit-line-clamp: 3; }
.wp-vibe-card-title--xl { font-size: 30px; -webkit-line-clamp: 3; letter-spacing: 0.005em; }
.wp-vibe-card-title--white { color: #FFFFFF; }
.wp-vibe-card-excerpt {
  font-family: var(--wp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--wp-text-body, rgba(10,10,10,0.7));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-vibe-card-excerpt--profile { -webkit-line-clamp: 4; font-size: 15px; }
.wp-vibe-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--wp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-accent, #D77534);
}

/* ============================================================
   LAYOUT — MAGAZINE (default for Campfire Stories)
   1 large featured (left, full height) + 2x2 grid of smaller (right)
   ============================================================ */
.wp-vibe-magazine {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.wp-vibe-card--mag-feature { min-height: 540px; }
.wp-vibe-img--mag-feature { height: 320px; }
.wp-vibe-card--mag-feature .wp-vibe-body { padding: 28px 32px 32px; gap: 14px; }
.wp-vibe-mag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wp-vibe-img--mag-small { height: 160px; }
.wp-vibe-card--mag-small .wp-vibe-body { padding: 16px 18px 18px; gap: 10px; }
.wp-vibe-card--mag-small .wp-vibe-card-title { font-size: 15px; -webkit-line-clamp: 2; }
@media (max-width: 1000px) {
  .wp-vibe-magazine { grid-template-columns: 1fr; }
  .wp-vibe-card--mag-feature { min-height: 0; }
}
@media (max-width: 560px) {
  .wp-vibe-mag-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LAYOUT — CARDS (default for Keeping it Real)
   3-up equal grid with chunky imagery + bigger titles
   ============================================================ */
.wp-vibe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wp-vibe-img--card { height: 240px; }
@media (max-width: 1000px) {
  .wp-vibe-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wp-vibe-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   LAYOUT — LIST (default for Travel Tips)
   Numbered vertical list, image thumbnail + content
   ============================================================ */
.wp-vibe-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wp-vibe-card--list {
  flex-direction: row;
  align-items: center;
  border-radius: 12px;
  padding: 16px 22px;
  gap: 22px;
}
.wp-vibe-card--list:hover { transform: translateX(4px); }
.wp-vibe-list-num {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 32px;
  color: var(--wp-accent, #D77534);
  width: 56px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.wp-vibe-img--list {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  flex-shrink: 0;
}
.wp-vibe-body--list {
  flex: 1;
  padding: 0;
  gap: 6px;
}
.wp-vibe-body--list .wp-vibe-card-excerpt { -webkit-line-clamp: 2; }
.wp-vibe-list-arrow {
  font-size: 22px;
  color: var(--wp-accent, #D77534);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.wp-vibe-card--list:hover .wp-vibe-list-arrow { transform: translateX(4px); }
@media (max-width: 700px) {
  .wp-vibe-card--list { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
  .wp-vibe-img--list { width: 100%; height: 160px; }
  .wp-vibe-list-arrow { display: none; }
}

/* ============================================================
   LAYOUT — PROFILE (default for Behind the Build)
   Wide split cards — image on one side, content on the other,
   alternating direction for visual rhythm.
   ============================================================ */
.wp-vibe-profiles {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wp-vibe-card--profile {
  flex-direction: row;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
}
.wp-vibe-card--profile-reverse { flex-direction: row-reverse; }
.wp-vibe-img--profile {
  flex: 0 0 44%;
  min-height: 320px;
}
.wp-vibe-body--profile {
  flex: 1;
  padding: 36px 40px;
  justify-content: center;
}
@media (max-width: 800px) {
  .wp-vibe-card--profile,
  .wp-vibe-card--profile-reverse { flex-direction: column; }
  .wp-vibe-img--profile { flex: 0 0 auto; min-height: 220px; width: 100%; }
  .wp-vibe-body--profile { padding: 24px 22px 28px; }
}

/* ============================================================
   LAYOUT — GALLERY (default for Photo Essays)
   Masonry-style varied tiles. Image-first with overlay title.
   ============================================================ */
.wp-vibe-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  grid-auto-flow: row dense; /* pack squares around the tall tiles, no gaps */
  gap: 14px;
}
.wp-vibe-card--gal {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.wp-vibe-card--gal .wp-vibe-img--gal {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}
.wp-vibe-gal--tall   { grid-row: span 2; }
.wp-vibe-gal--wide   { grid-column: span 2; }
.wp-vibe-gal--square { /* default 1x1 */ }
.wp-vibe-gal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(43,20,9,0.08) 40%, rgba(43,20,9,0.85) 100%);
  color: #FFFFFF;
}
.wp-vibe-card--gal .wp-vibe-card-title { font-size: 16px; -webkit-line-clamp: 2; }
.wp-vibe-card--gal:hover .wp-vibe-gal-overlay {
  background: linear-gradient(180deg, rgba(43,20,9,0.10) 30%, rgba(43,20,9,0.90) 100%);
}
@media (max-width: 900px) {
  .wp-vibe-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .wp-vibe-gal--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .wp-vibe-gallery { grid-template-columns: 1fr; }
  .wp-vibe-gal--wide, .wp-vibe-gal--tall { grid-column: auto; grid-row: auto; }
  .wp-vibe-card--gal { min-height: 220px; }
}

.wp-vibe-empty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(215, 117, 52, 0.08);
  border: 1px solid rgba(215, 117, 52, 0.20);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--wp-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp-accent, #D77534);
  margin: 0;
}
.wp-vibe-empty-emoji { font-size: 16px; line-height: 1; }
.wp-vibe--noheader { padding: 32px 0; }
.wp-vibe-header-text--spacer { flex: 1; }

/* Shared responsive — header collapses on mobile */
@media (max-width: 640px) {
  .wp-vibe-header { flex-direction: column; align-items: flex-start; }
  .wp-vibe-submit-btn { width: 100%; justify-content: center; }
  .wp-vibe-title { font-size: 22px; }
}

/* ============================================================
   VIBE MODAL — full article popup, FB feed widget pattern
   ============================================================ */
body.wp-vibe-locked { overflow: hidden; }
.wp-vibe-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  /* Thin, brand-orange scrollbar so the modal reads as branded UI
     instead of a raw OS scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 117, 52, 0.55) transparent;
}
.wp-vibe-modal::-webkit-scrollbar { width: 6px; height: 6px; }
.wp-vibe-modal::-webkit-scrollbar-track { background: transparent; }
.wp-vibe-modal::-webkit-scrollbar-thumb {
  background-color: rgba(215, 117, 52, 0.55);
  border-radius: 3px;
}
.wp-vibe-modal::-webkit-scrollbar-thumb:hover {
  background-color: var(--wp-accent, #D77534);
}
.wp-vibe-modal.is-open { display: flex; }
.wp-vibe-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 20, 9, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.wp-vibe-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(43, 20, 9, 0.40);
  margin: auto;
}
/* Close + share buttons live in .wp-vibe-modal-actions (flex container);
   position is set on the container, not the individual buttons, so they
   sit side by side instead of stacking at the same coordinates. */
.wp-vibe-modal-close,
.wp-vibe-modal-share {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(43, 20, 9, 0.12);
  color: var(--wp-primary, #482818);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
.wp-vibe-modal-close { font-size: 28px; line-height: 1; }
.wp-vibe-modal-close:hover,
.wp-vibe-modal-share:hover { background: #FFFFFF; transform: translateY(-1px); }
.wp-vibe-modal-hero {
  width: 100%;
  height: 380px;
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
}
.wp-vibe-modal-body {
  padding: 32px 40px 40px;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
}
.wp-vibe-modal-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 34px;
  line-height: 1.1;
  color: var(--wp-primary, #482818);
  margin: 14px 0 12px;
}
.wp-vibe-modal-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp-font-body);
  font-size: 13px;
  color: var(--wp-text-body, rgba(10,10,10,0.55));
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.wp-vibe-modal-content {
  font-family: var(--wp-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--wp-text-body, rgba(10,10,10,0.78));
}
.wp-vibe-modal-content p { margin: 0 0 16px; }
.wp-vibe-modal-content h2, .wp-vibe-modal-content h3 {
  font-family: var(--wp-font-heading);
  font-weight: 809;
  font-variation-settings: 'wght' 809, 'wdth' 743;
  color: var(--wp-primary, #482818);
  margin: 28px 0 12px;
}
.wp-vibe-modal-content h2 { font-size: 22px; }
.wp-vibe-modal-content h3 { font-size: 18px; }
.wp-vibe-modal-content blockquote {
  border-left: 3px solid var(--wp-accent, #D77534);
  margin: 20px 0;
  padding: 6px 18px;
  font-style: italic;
  color: var(--wp-primary, #482818);
}
.wp-vibe-modal-content a {
  color: var(--wp-accent, #D77534);
  text-decoration: underline;
}
.wp-vibe-modal-content ul, .wp-vibe-modal-content ol { margin: 0 0 16px 22px; padding: 0; }
.wp-vibe-modal-content li { margin: 6px 0; }

/* Social row inside modal */
.wp-vibe-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(43, 20, 9, 0.10);
}
.wp-vibe-like {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(43, 20, 9, 0.15) !important;
  background: #FFFFFF !important;
  color: var(--wp-primary, #482818) !important;
  font-family: var(--wp-font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none !important;
  text-transform: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.wp-vibe-like:hover,
.wp-vibe-like:focus,
.wp-vibe-like:focus-visible {
  background: #FFFFFF !important;
  border-color: var(--wp-accent, #D77534) !important;
  color: var(--wp-accent, #D77534) !important;
  outline: none;
}
.wp-vibe-like svg { width: 18px; height: 18px; stroke: currentColor; }
.wp-vibe-like.is-liked,
.wp-vibe-like.is-liked:hover,
.wp-vibe-like.is-liked:focus {
  background: var(--wp-accent, #D77534) !important;
  border-color: var(--wp-accent, #D77534) !important;
  color: #FFFFFF !important;
}
.wp-vibe-like.is-liked svg { fill: #FFFFFF !important; stroke: #FFFFFF !important; }
.wp-vibe-like-count { color: inherit !important; }
.wp-vibe-social-hint {
  font-family: var(--wp-font-body);
  font-size: 13px;
  color: var(--wp-text-body, rgba(10,10,10,0.55));
}

/* Comments block inside modal */
.wp-vibe-comments {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(43, 20, 9, 0.10);
}
.wp-vibe-comments-title {
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-weight: 809;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp-primary, #482818);
  margin: 0 0 16px;
}
.wp-vibe-comments-list {
  margin-bottom: 16px;
}
.wp-vibe-comments-empty {
  font-family: var(--wp-font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--wp-text-body, rgba(10,10,10,0.55));
  margin: 0;
}
.wp-vibe-comment-form-gate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(215, 117, 52, 0.06);
  border: 1px dashed rgba(215, 117, 52, 0.40);
  border-radius: 12px;
}
.wp-vibe-signin-btn {
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 6px;
  background: var(--wp-accent, #D77534);
  color: #FFFFFF !important;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.wp-vibe-signin-btn:hover { background: #B85E22; }
.wp-vibe-comment-note {
  font-family: var(--wp-font-body);
  font-size: 13px;
  color: var(--wp-text-body, rgba(10,10,10,0.55));
}

@media (max-width: 700px) {
  .wp-vibe-modal { padding: 0; }
  .wp-vibe-modal-panel { border-radius: 0; max-width: 100%; min-height: 100vh; }
  .wp-vibe-modal-hero { height: 240px; }
  .wp-vibe-modal-body { padding: 24px 22px 32px; }
  .wp-vibe-modal-title { font-size: 26px; }
}

/* ==========================================================================
   VIBE OF THE TRIBE — section flex wrapper + thumbnail slider
   ==========================================================================
   Layout container holding the main card grid + the thumbnail slider.
   Position modes:
     bottom — slider below grid, both full width (campfire-stories, photo-essays)
     left   — slider left column, grid right column (keeping-it-real, behind-the-build)
     right  — grid left column, slider right column (travel-tips)
   Side mode = VERTICAL slider (thumbs stacked, up/down arrows). Collapses
   to horizontal bottom slider on tablet and below.

   Thumb fill is dynamic via CSS custom properties set inline by PHP:
     --wp-vibe-vis-lg : visible count on widescreen
     --wp-vibe-vis-md : visible count on laptop
     --wp-vibe-vis-sm : visible count on tablet (horizontal only)
     --wp-vibe-vis-xs : visible count on mobile  (horizontal only)
   These = min(post_count, max-per-breakpoint), so the row/column ALWAYS
   fills — never any empty gap when there are fewer posts than the max.
   ========================================================================== */
.wp-vibe-flex {
  display: flex;
  gap: 28px;
  width: 100%;
  align-items: stretch;
}
.wp-vibe-flex--bottom { flex-direction: column; gap: 32px; }
.wp-vibe-flex--right  { flex-direction: row; }
.wp-vibe-flex--left   { flex-direction: row-reverse; }
.wp-vibe-flex--bottom .wp-vibe-grid-col,
.wp-vibe-flex--bottom .wp-vibe-slider-col { flex: 1 1 100%; min-width: 0; }
.wp-vibe-flex--left .wp-vibe-grid-col,
.wp-vibe-flex--right .wp-vibe-grid-col   { flex: 1 1 66%; min-width: 0; }
.wp-vibe-flex--left .wp-vibe-slider-col,
.wp-vibe-flex--right .wp-vibe-slider-col {
  flex: 0 0 26%;
  min-width: 0;
  /* min-height: 0 is essential — without it a flex column child refuses to
     shrink below its content's intrinsic size, which makes the slider push
     the row taller than the main cards column and creates the uneven gap
     Juanita flagged. With this in place the slider stretches to match the
     main column's natural height and internal overflow scrolls the rail. */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Wrap + arrows (shared shell for horizontal and vertical orientations) */
.wp-vibe-thumbs-wrap {
  position: relative;
  width: 100%;
}
.wp-vibe-thumbs-wrap--horizontal { padding: 0 56px; }
.wp-vibe-thumbs-wrap--vertical {
  padding: 56px 0;
  flex: 1 1 0;              /* fill parent height, allow shrink */
  display: flex;
  flex-direction: column;
  min-height: 0;            /* pair with parent's min-height:0 */
  overflow: hidden;         /* clip any bleed past the main column */
}

.wp-vibe-thumbs-rail {
  display: flex;
  gap: 12px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wp-vibe-thumbs-rail::-webkit-scrollbar { display: none; }
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumbs-rail {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 2px;
}
.wp-vibe-thumbs-wrap--vertical .wp-vibe-thumbs-rail {
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  flex: 1 1 auto;
  padding: 2px 4px;
  height: 100%;
}

/* Arrows — orange icon on white pill default, FLIPS to solid orange on hover.
   !important on background/color/display so theme button rules can't bleed in
   (some themes hide buttons or override hover state). */
.wp-vibe-thumb-arrow {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 999px !important;
  border: none !important;
  background: #FFFFFF !important;
  color: var(--wp-accent, #D77534) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(43, 20, 9, 0.18);
  z-index: 3;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.wp-vibe-thumb-arrow svg { width: 26px; height: 26px; pointer-events: none; }
.wp-vibe-thumb-arrow:hover,
.wp-vibe-thumb-arrow:focus,
.wp-vibe-thumb-arrow:focus-visible {
  background: var(--wp-accent, #D77534) !important;
  color: #FFFFFF !important;
  outline: none;
}
/* Horizontal arrows: left + right, centred vertically. */
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb-arrow { top: 50%; transform: translateY(-50%); }
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb-arrow:hover { transform: translateY(-50%) scale(1.04); }
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb-arrow--prev { left: 4px; }
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb-arrow--next { right: 4px; }
/* Vertical arrows: top + bottom, centred horizontally. */
.wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow { left: 50%; transform: translateX(-50%); }
.wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow:hover { transform: translateX(-50%) scale(1.04); }
.wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow--prev { top: 4px; }
.wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow--next { bottom: 4px; }

/* ---- Individual thumb (shared base) */
.wp-vibe-thumb {
  position: relative;
  display: block;
  text-decoration: none !important;
  color: inherit;
  scroll-snap-align: start;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: #2B1409;
  box-shadow: 0 4px 12px rgba(43, 20, 9, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-vibe-thumb:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(43, 20, 9, 0.18); }
.wp-vibe-thumb-img {
  width: 100%;
  height: 100%;
  background-color: #2B1409;
  background-size: cover;
  background-position: center;
  position: relative;
}
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb-img { aspect-ratio: 4 / 3; height: auto; }
.wp-vibe-thumb-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 10px 8px;
  font-family: var(--wp-font-body, 'Deja Vu', sans-serif);
  font-size: 11px;
  line-height: 1.25;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.0) 100%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.wp-vibe-thumb-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(215, 117, 52, 0.95);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.30);
}
.wp-vibe-thumb-play svg { width: 18px; height: 18px; margin-left: 2px; }

/* ---- HORIZONTAL fill math: width = (100% - 12px*(visible-1)) / visible */
.wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb {
  flex: 0 0 calc((100% - 12px * (var(--wp-vibe-vis-lg, 9) - 1)) / var(--wp-vibe-vis-lg, 9));
}
/* ---- VERTICAL: FIXED thumb height so few-post sliders never stretch into
   giant tiles. Rail scrolls internally with the up/down arrows when there
   are more posts than fit in the visible column height. */
.wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb {
  flex: 0 0 130px;
  height: 130px;
  width: 100%;
  min-height: 130px;
}

/* Modal video — fills the hero box. */
.wp-vibe-modal-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}
.wp-vibe-modal-hero:has(.wp-vibe-modal-video) {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Breakpoints */
@media (max-width: 1399px) and (min-width: 1101px) {
  .wp-vibe-thumbs-wrap--horizontal .wp-vibe-thumb {
    flex: 0 0 calc((100% - 12px * (var(--wp-vibe-vis-md, 6) - 1)) / var(--wp-vibe-vis-md, 6));
  }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb {
    flex: 0 0 110px;
    height: 110px;
    min-height: 110px;
  }
}

/* Tablet + below: side-by-side modes collapse into a column, slider becomes
   a HORIZONTAL bottom slider regardless of original orientation. */
@media (max-width: 1100px) {
  .wp-vibe-flex--left,
  .wp-vibe-flex--right { flex-direction: column; gap: 28px; }
  .wp-vibe-flex--left .wp-vibe-grid-col,
  .wp-vibe-flex--right .wp-vibe-grid-col,
  .wp-vibe-flex--left .wp-vibe-slider-col,
  .wp-vibe-flex--right .wp-vibe-slider-col { flex: 1 1 100%; }

  /* Force vertical wrap to behave horizontal at this size. */
  .wp-vibe-thumbs-wrap--vertical {
    padding: 0 56px;
    flex-direction: row;
    min-height: 0;
  }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumbs-rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    height: auto;
    padding: 4px 2px;
  }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb { width: auto; min-height: 0; }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb .wp-vibe-thumb-img { aspect-ratio: 4 / 3; height: auto; }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow { top: 50%; left: auto; transform: translateY(-50%); bottom: auto; }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow--prev { left: 4px; }
  .wp-vibe-thumbs-wrap--vertical .wp-vibe-thumb-arrow--next { right: 4px; }

  /* Tablet thumb fill — 4 across (or fewer if fewer posts). */
  .wp-vibe-thumb {
    flex: 0 0 calc((100% - 12px * (var(--wp-vibe-vis-sm, 4) - 1)) / var(--wp-vibe-vis-sm, 4)) !important;
  }
}

@media (max-width: 700px) {
  .wp-vibe-thumbs-wrap--horizontal,
  .wp-vibe-thumbs-wrap--vertical { padding: 0 52px; }
  .wp-vibe-thumb-arrow { width: 42px !important; height: 42px !important; }
  .wp-vibe-thumb-arrow svg { width: 32px !important; height: 32px !important; }
  .wp-vibe-thumb-arrow svg path { stroke-width: 3.4 !important; }
  .wp-vibe-thumb {
    flex: 0 0 calc((100% - 12px * (var(--wp-vibe-vis-xs, 2) - 1)) / var(--wp-vibe-vis-xs, 2)) !important;
  }
  .wp-vibe-thumb-title { font-size: 10px; padding: 22px 8px 6px; }
}

/* ============================================================================
   VIBE — "View all N stories" pill + browse-all modal
   Appears below the slider when the section has more posts than can fit
   comfortably in the fixed-height rail. Clicking opens a fullscreen modal
   with EVERY post from this section in a 3-up thumbnail grid so users can
   browse without leaving the page.
   ============================================================================ */
.wp-vibe-viewall {
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid var(--wp-accent, #D77534);
  border-radius: 999px;
  background: transparent;
  color: var(--wp-accent, #D77534) !important;
  font-family: var(--wp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.wp-vibe-viewall:hover,
.wp-vibe-viewall:focus-visible {
  background: var(--wp-accent, #D77534) !important;
  color: #FFFFFF !important;
  outline: none;
}
.wp-vibe-viewall-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
}
/* When the slider is at the SIDE, keep the view-all pill inside the slider
   column (centered under the thumb rail). When the slider is at the BOTTOM
   or the section is empty, center it under the whole section. */
.wp-vibe-slider-col .wp-vibe-viewall-wrap { margin-top: 12px; }

/* Browse-all modal — full-screen dark backdrop with a 3-up thumbnail grid
   inside a rounded white panel. Modern glassmorphism close button. */
.wp-vibe-browse {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 24px;
  background: rgba(15, 10, 6, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.wp-vibe-browse.is-open {
  display: flex;
  opacity: 1;
}
.wp-vibe-browse-panel {
  position: relative;
  width: 100%;
  max-width: 1160px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  padding: 30px 30px 36px;
  transform: translateY(8px);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wp-vibe-browse.is-open .wp-vibe-browse-panel { transform: translateY(0); }
.wp-vibe-browse-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(43, 20, 9, 0.08) !important;
  color: #2B1409 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.wp-vibe-browse-close:hover,
.wp-vibe-browse-close:focus-visible {
  background: var(--wp-accent, #D77534) !important;
  color: #FFFFFF !important;
  outline: none;
  transform: scale(1.05);
}
.wp-vibe-browse-close svg { width: 20px; height: 20px; }
.wp-vibe-browse-title {
  margin: 0 46px 6px 0;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-size: 22px;
  line-height: 1.2;
  color: var(--wp-primary, #482818);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wp-vibe-browse-tagline {
  margin: 0 46px 22px 0;
  font-family: var(--wp-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.6);
}
.wp-vibe-browse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .wp-vibe-browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wp-vibe-browse-grid { grid-template-columns: 1fr; gap: 12px; }
  .wp-vibe-browse-panel { padding: 24px 18px 30px; }
}
.wp-vibe-browse-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  /* Force brand colours regardless of theme link rules — some themes paint
     button/link :hover states red and the color bleeds into child spans. */
  color: var(--wp-primary, #482818) !important;
  transition: transform 0.24s ease;
}
.wp-vibe-browse-card:hover,
.wp-vibe-browse-card:focus,
.wp-vibe-browse-card:focus-visible,
.wp-vibe-browse-card:active {
  transform: translateY(-3px);
  outline: none !important;
  background: transparent !important;
  color: var(--wp-primary, #482818) !important;
}
/* Belt+braces: nuke any theme colour on the text spans on hover too, so
   nothing paints red / underlined / whatever. */
.wp-vibe-browse-card:hover .wp-vibe-browse-title-text,
.wp-vibe-browse-card:focus .wp-vibe-browse-title-text,
.wp-vibe-browse-card:hover .wp-vibe-browse-excerpt,
.wp-vibe-browse-card:focus .wp-vibe-browse-excerpt {
  color: var(--wp-primary, #482818) !important;
}
.wp-vibe-browse-card:hover .wp-vibe-browse-excerpt,
.wp-vibe-browse-card:focus .wp-vibe-browse-excerpt {
  color: rgba(10, 10, 10, 0.6) !important;
}
.wp-vibe-browse-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #2B1409;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 12px rgba(43, 20, 9, 0.15);
  transition: box-shadow 0.24s ease;
}
.wp-vibe-browse-card:hover .wp-vibe-browse-thumb { box-shadow: 0 10px 24px rgba(43, 20, 9, 0.22); }
/* display:block forces the inline <span> to respect the flex-column parent
   width — without it the text renders on one line and gets clipped by the
   card's overflow:hidden. box-sizing + overflow-wrap keep long words tidy. */
.wp-vibe-browse-title-text {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wp-font-heading);
  font-variation-settings: 'wght' 809, 'wdth' 743;
  font-size: 14px;
  line-height: 1.3;
  color: var(--wp-primary, #482818) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 4px 12px 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.wp-vibe-browse-excerpt {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wp-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.6) !important;
  padding: 0 12px 10px;
  margin: 0;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-word;
}
body.wp-vibe-browse-open { overflow: hidden; }