/* Pin Travel Destinations — taxonomy page styles */
.ptd{max-width:1200px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1a1a1a}
.ptd-crumb{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--fb-navy,#1B2A4A);font-weight:700;margin-bottom:1rem}
/* When the breadcrumb sits INSIDE the hero (full-bleed cinematic
   variant), float it absolutely top-left over the dark overlay. */
.ptd-hero .ptd-crumb{
  position: absolute;
  top: 22px;
  left: clamp(20px, 4vw, 50px);
  margin: 0;
  z-index: 4;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.ptd-hero .ptd-crumb a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
}
.ptd-hero .ptd-crumb a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Hero — full-bleed cinematic. The image slider sits as the
   absolute backdrop, dark gradient overlay on top, and the title
   + description + CTA float centered over it. Breaks out of the
   constrained .ptd article container so it hits the viewport edges,
   AND pulls upward via negative margin to flush against the navbar. */
.ptd-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(420px, 56vh, 640px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 0;
  margin-bottom: 2.5rem;
  background: var(--fb-navy, #1B2A4A);
}

/* Strip top padding/margin from every container above the hero on
   tour-destination pages so the hero flushes against the site nav
   with zero gap. */
.tax-tour_destination #main-content,
.tax-tour_destination #main-content > .container,
.tax-tour_destination #main-content > .container > .ptd {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Image backdrop (the slider container) — fills the whole hero */
.ptd-hero-img{
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--fb-navy, #1B2A4A);
  z-index: 0;
}
.ptd-hero-img::after{
  /* Heavier dark overlay for clean text legibility regardless of
     what the slide image looks like (sky / busy street / etc.). */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.8) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.ptd-hero-img img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Darken the slide images themselves so bright photos
     (sunny streets, bright museums, etc.) don't fight with the
     foreground text panel. The dark gradient on top is on .after,
     this brightness filter dims the underlying image. */
  filter: brightness(0.62);
  transition: transform .8s ease-out;
}
.ptd-hero-img:hover img{ transform: scale(1.03); }

/* Slider crossfade — slow + smooth so the eye registers each
   image; JS still toggles .is-active every 7 seconds. */
.ptd-hero-slider .ptd-hero-slide{
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
}
.ptd-hero-slider .ptd-hero-slide.is-active{
  opacity: 1;
  z-index: 2;
}

/* Text content overlay — sits above the gradient, centered, with a
   dark frosted-glass backdrop for guaranteed legibility regardless
   of how busy the slide image is. */
/* Dark frosted-glass "card" over the cinematic hero image — the
   look that worked best: integrates with the moody composition
   without competing with the slide image. */
.ptd-hero-left{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 5vw, 80px);
  max-width: 1100px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  pointer-events: none; /* text wrapper doesn't block clicks; children opt in */
}
.ptd-hero-title{
  /* Keeps full title on one line on desktop; rust brand colour for
     the H1 ties to the CTA + Hidden Gems tab. Layered shadows give
     a soft inner-shadow / letterpress feel + outer halo for
     legibility against the dark frosted backdrop. */
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fb-rust, #C4572A);
  margin: 0 0 14px;
  text-decoration: none;
  text-shadow:
    0 -1px 0 rgba(255, 200, 160, 0.35),
    0 1px 0 rgba(80, 25, 5, 0.7),
    0 2px 2px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.ptd-hero-title:hover{
  color: #E0764A;  /* lighter rust on hover */
}
.ptd-hero-title a{
  color: inherit;
  text-decoration: none;
  background: none;
}
@media (min-width: 720px){
  .ptd-hero-title{ white-space: nowrap; } /* one-line on desktop */
}
.ptd-hero-title:hover{ color: #fff; opacity: .9; }
.ptd-hero-title:hover a{ color: inherit; }
.ptd-hero-desc{
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: rgba(255,255,255,.95);
  margin: 0 0 24px;
  max-width: 720px;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.ptd-hero-cta{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.8rem;
  border: 2px solid var(--fb-rust, #C4572A);
  background: var(--fb-rust, #C4572A);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: all .2s;
  align-self: center;
  box-shadow: 0 6px 20px rgba(196, 87, 42, 0.35);
}
.ptd-hero-cta:hover{
  background: #A34420;
  border-color: #A34420;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

/* Dots indicator (still rendered by JS) sits above gradient, bottom-centered */
.ptd-hero-dots{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
  pointer-events: auto;
}
.ptd-hero-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .2s;
}
.ptd-hero-dots button.is-active{ background: #fff; transform: scale(1.4); }
.ptd-hero-dots button:hover{ background: rgba(255,255,255,.85); }

/* Empty-state placeholder when no slides exist */
.ptd-hero-ph{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  opacity: .3;
}

@media(max-width:720px){
  .ptd-hero{ height: clamp(360px, 52vh, 480px); margin-bottom: 1.5rem; }
  .ptd-hero-left{ padding: 24px 20px; }
}

/* Tour types slider */
.ptd-exp-wrap{margin-bottom:3.5rem}
.ptd-exp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.ptd-exp-head h2{margin:0;font-size:1.6rem;font-weight:800;color:var(--fb-navy,#1B2A4A)}
.ptd-exp-nav{display:flex;gap:.5rem}
.ptd-exp-btn{width:40px;height:40px;border-radius:999px;border:1px solid #e5e5e5;background:#fff;color:var(--fb-navy,#1B2A4A);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ptd-exp-btn:hover{background:var(--fb-navy,#1B2A4A);color:#fff;border-color:var(--fb-navy,#1B2A4A)}
.ptd-exp-slider{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ptd-exp-slider::-webkit-scrollbar{display:none}
.ptd-exp-card{flex:0 0 160px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.4rem 1rem;background:#fff;border:1px solid #e5e5e5;border-radius:14px;text-decoration:none;color:var(--fb-navy,#1B2A4A);transition:all .2s;min-height:150px}
.ptd-exp-card:hover{border-color:var(--fb-rust,#C4572A);background:#fff7f2;transform:translateY(-3px);box-shadow:0 8px 20px rgba(196,87,42,.12)}
.ptd-exp-label{font-size:.88rem;font-weight:700;text-align:center;line-height:1.25}
.ptd-exp-count{display:inline-block;margin-top:.3rem;font-size:.72rem;font-weight:600;color:#666;background:#f3f3f3;padding:2px 8px;border-radius:10px}

/* Attraction cards */
.ptd-sec{margin-bottom:3.5rem}
.ptd-sec h2{font-size:1.6rem;font-weight:800;margin:0 0 1.4rem;color:var(--fb-navy,#1B2A4A)}
.ptd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem}
.ptd-card{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;text-decoration:none !important;color:#fff;background:var(--fb-navy,#1B2A4A);box-shadow:0 4px 12px rgba(0,0,0,.08);transition:all .25s}
.ptd-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.2)}
.ptd-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:all .5s}
.ptd-card:hover img{transform:scale(1.08);filter:brightness(.5)}
.ptd-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,0) 75%);pointer-events:none}
.ptd-card-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem 1.3rem;z-index:2}
.ptd-card-name{font-size:1.35rem;font-weight:800;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.7);margin:0;color:#fff;transition:transform .3s}
.ptd-card:hover .ptd-card-name{transform:translateY(-6px)}
.ptd-card-desc{font-size:.88rem;line-height:1.45;margin:.55rem 0 0;color:#fff;max-height:0;opacity:0;overflow:hidden;transition:all .35s}
.ptd-card:hover .ptd-card-desc{max-height:180px;opacity:1}
.ptd-exp-icon-img{width:84px;height:84px;object-fit:contain;margin-bottom:.6rem}
.ptd-exp-icon-emoji{font-size:4.4rem;margin-bottom:.7rem;line-height:1;display:block}
.ptd-card-cta{display:inline-flex;gap:.3rem;margin-top:.8rem;font-size:.82rem;font-weight:700;background:var(--fb-rust,#C4572A);padding:.45rem .85rem;border-radius:6px;align-self:flex-start;opacity:0;transform:translateY(8px);transition:all .3s .1s;color:#fff}
.ptd-card:hover .ptd-card-cta{opacity:1;transform:translateY(0)}

/* Dual-link card: full-card link to Viator + Read More to landing page.
   .ptd-card-overlay covers the whole card (absolute, z-index 1).
   .ptd-card-body is above at z-index 2 but has pointer-events:none, so clicks
   pass through to the overlay — EXCEPT on .ptd-card-more which re-enables them. */
.ptd-card-dual{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;color:#fff;background:var(--fb-navy,#1B2A4A);box-shadow:0 4px 12px rgba(0,0,0,.08);transition:all .25s}
.ptd-card-dual:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.2)}
.ptd-card-dual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:all .5s}
.ptd-card-dual:hover img{transform:scale(1.08);filter:brightness(.5)}
.ptd-card-dual::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,0) 75%);pointer-events:none;z-index:1}
.ptd-card-overlay{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden}
.ptd-card-dual .ptd-card-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:1.2rem 1.3rem;z-index:3;pointer-events:none;transition:justify-content .35s}
.ptd-card-dual:hover .ptd-card-body{justify-content:center}
.ptd-card-dual .ptd-card-name,.ptd-card-dual .ptd-card-desc{pointer-events:none}
.ptd-card-dual .ptd-card-name{text-align:center;width:100%}
.ptd-card-dual .ptd-card-desc{text-align:center;max-height:0;opacity:0;margin:.55rem 0 0;overflow:hidden;transition:max-height .35s,opacity .35s,margin .35s}
.ptd-card-dual:hover .ptd-card-desc{max-height:180px;opacity:1}
.ptd-card-actions{display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:.8rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s .05s,margin .3s}
.ptd-card-dual:hover .ptd-card-actions{max-height:80px;opacity:1}
.ptd-card-dual .ptd-card-cta{opacity:1;transform:none;margin-top:0}
.ptd-card-more{pointer-events:auto;display:inline-block;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.35);padding:.4rem .8rem;border-radius:6px;color:#fff;text-decoration:none;transition:background .2s;position:relative;z-index:4}
.ptd-card-more:hover{background:rgba(255,255,255,.28);color:#fff}

.ptd-foot{margin-top:2.5rem;padding-top:2rem;border-top:1px solid #eee;text-align:center}
.ptd-btn{display:inline-block;background:var(--fb-navy,#1B2A4A);color:#fff;padding:.9rem 1.6rem;border-radius:8px;font-weight:700;text-decoration:none}
.ptd-btn:hover{background:var(--fb-navy-light,#2C4066)}
.ptd-disc{font-size:.78rem;color:#999;margin-top:1rem}

/* Breadcrumb ancestor links */
.ptd-crumb a{color:var(--fb-navy,#1B2A4A);text-decoration:none;font-weight:700}
.ptd-crumb a:hover{color:var(--fb-rust,#C4572A)}

/* Combo page (destination + type) */
.ptd-combo .ptd-hero-combo{grid-template-columns:1fr 1fr}
.ptd-combo-icon{margin-bottom:.5rem}
.ptd-combo-icon .ptd-exp-icon-emoji{font-size:3rem;margin-bottom:0}
.ptd-combo-icon .ptd-exp-icon-img{width:56px;height:56px}
.ptd-sec-desc{color:#666;margin:-.8rem 0 1.5rem;font-size:.95rem}

/* Tour cards for combo page */
.ptd-grid-tours{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ptd-card-tour{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff;color:var(--fb-navy,#1B2A4A)}
.ptd-card-tour::after{display:none}
.ptd-card-tour img{position:static;aspect-ratio:16/10;width:100%;height:auto}
.ptd-card-tour:hover img{filter:none}
.ptd-card-tour .ptd-card-body{position:static;padding:1rem 1.2rem 1.3rem}
.ptd-card-tour .ptd-card-name{font-size:1.1rem;color:var(--fb-navy,#1B2A4A);text-shadow:none}
.ptd-card-tour:hover .ptd-card-name{transform:none}
.ptd-card-tour .ptd-card-desc{color:#666;max-height:none;opacity:1}
.ptd-card-tour .ptd-card-meta{display:flex;gap:1rem;margin-top:.6rem;font-size:.85rem;color:#888}
.ptd-card-tour .ptd-card-duration{display:flex;align-items:center;gap:.3rem}
.ptd-card-tour .ptd-card-price{font-weight:700;color:var(--fb-rust,#C4572A)}
.ptd-card-tour .ptd-card-cta{opacity:1;transform:none;margin-top:.8rem}

/* Empty state */
.ptd-sec-empty{text-align:center;padding:3rem 1rem}
.ptd-sec-empty h2{margin-bottom:.5rem}
.ptd-sec-empty p{color:#666;margin:.5rem 0}

/* Pagination */
.ptd-pagination{margin-top:2rem;text-align:center}
.ptd-pagination .page-numbers{display:inline-block;padding:.5rem .9rem;margin:0 .2rem;border:1px solid #e5e5e5;border-radius:6px;text-decoration:none;color:var(--fb-navy,#1B2A4A);font-weight:600;font-size:.9rem}
.ptd-pagination .page-numbers:hover,.ptd-pagination .page-numbers.current{background:var(--fb-navy,#1B2A4A);color:#fff;border-color:var(--fb-navy,#1B2A4A)}
.ptd-pagination .prev,.ptd-pagination .next{font-weight:700}

/* ============================================================
   Main content (term description) below attractions
   ============================================================ */
.ptd-main-content{margin-top:3rem}
.ptd-prose{max-width:780px;margin:0 auto;color:#333;line-height:1.7;font-size:1.05rem}
.ptd-prose h2,.ptd-prose h3,.ptd-prose h4{color:var(--fb-navy,#1B2A4A);margin-top:2rem;margin-bottom:.8rem;line-height:1.25}
.ptd-prose h2{font-size:1.85rem}
.ptd-prose h3{font-size:1.4rem}
.ptd-prose h4{font-size:1.15rem}
.ptd-prose p{margin:0 0 1.1rem}
.ptd-prose a{color:var(--fb-rust,#C4572A);text-decoration:underline;text-underline-offset:3px}
.ptd-prose a:hover{text-decoration:none}
.ptd-prose ul,.ptd-prose ol{margin:0 0 1.2rem 1.5rem;padding:0}
.ptd-prose li{margin-bottom:.35rem}
.ptd-prose img{max-width:100%;height:auto;border-radius:8px;margin:1rem 0}
.ptd-prose blockquote{border-left:4px solid var(--fb-rust,#C4572A);padding-left:1.2rem;margin:1.5rem 0;color:#555;font-style:italic}
.ptd-prose strong{color:var(--fb-navy,#1B2A4A)}

/* ============================================================
   Hidden Gem by Locals badge
   ============================================================ */
.ptd-card-gem-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  background:#C4272D;
  color:#fff;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 3px 10px rgba(196,39,45,.4);
  pointer-events:none;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}
/* Subtle extra border glow for hidden gem cards */
.ptd-card-gem{position:relative}
.ptd-card-gem::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(196,39,45,.55);
  border-radius:14px;
  pointer-events:none;
  z-index:4;
  opacity:0;
  transition:opacity .3s;
}
.ptd-card-gem:hover::before{opacity:1}

/* ============================================================
   FAQ Accordion
   ============================================================ */
.ptd-faq-section{max-width:820px;margin:2.5rem auto;padding:0 1rem}
.ptd-faq-heading{font-size:1.75rem;font-weight:700;margin:0 0 1.25rem;color:#1a1a1a}
.ptd-faq-list{display:flex;flex-direction:column;gap:.5rem}
.ptd-faq-item{background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.ptd-faq-item[open]{border-color:#c4272d;box-shadow:0 2px 12px rgba(196,39,45,.08)}
.ptd-faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;font-size:1.02rem;font-weight:600;color:#1a1a1a;cursor:pointer;user-select:none;list-style:none;line-height:1.4}
.ptd-faq-q::-webkit-details-marker{display:none}
.ptd-faq-q::marker{display:none;content:''}
.ptd-faq-q-text{flex:1}
.ptd-faq-icon{flex-shrink:0;width:20px;height:20px;position:relative;transition:transform .3s}
.ptd-faq-icon::before,.ptd-faq-icon::after{content:'';position:absolute;background:#333;border-radius:1px}
.ptd-faq-icon::before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.ptd-faq-icon::after{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);transition:transform .3s}
.ptd-faq-item[open] .ptd-faq-icon::after{transform:translateX(-50%) rotate(90deg)}
.ptd-faq-item[open] .ptd-faq-icon::before{background:#c4272d}
.ptd-faq-item[open] .ptd-faq-icon::after{background:#c4272d}
.ptd-faq-a{padding:0 1.25rem 1.15rem;color:#444;line-height:1.65;font-size:.97rem}
.ptd-faq-a p{margin:0 0 .75rem}
.ptd-faq-a p:last-child{margin-bottom:0}
.ptd-faq-a ul,.ptd-faq-a ol{margin:.5rem 0 .75rem 1.25rem}
.ptd-faq-a li{margin-bottom:.3rem}
.ptd-faq-a strong{color:#1a1a1a}
/* Smooth reveal animation */
.ptd-faq-item[open] .ptd-faq-a{animation:ptd-faq-fade .25s ease-out}
@keyframes ptd-faq-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Mobile */
@media (max-width:600px){
  .ptd-faq-section{margin:1.75rem auto}
  .ptd-faq-heading{font-size:1.4rem}
  .ptd-faq-q{padding:.85rem 1rem;font-size:.96rem}
  .ptd-faq-a{padding:0 1rem 1rem;font-size:.93rem}
}

/* ============================================================
   CTA below attractions grid
   ============================================================ */
.ptd-attr-cta{margin:2rem auto 0;text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#fef6f6 0%,#fff 100%);border-radius:14px;border:1px solid #f0d4d5}
.ptd-attr-cta-btn{display:inline-flex;align-items:center;gap:.6rem;background:#c4272d;color:#fff;font-size:1.05rem;font-weight:600;padding:.95rem 1.9rem;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(196,39,45,.25);transition:transform .2s,box-shadow .2s,background .2s}
.ptd-attr-cta-btn:hover,.ptd-attr-cta-btn:focus{background:#a81e23;transform:translateY(-2px);box-shadow:0 6px 20px rgba(196,39,45,.35);color:#fff;text-decoration:none}
.ptd-attr-cta-btn:active{transform:translateY(0)}
.ptd-attr-cta-arrow{display:inline-block;transition:transform .25s}
.ptd-attr-cta-btn:hover .ptd-attr-cta-arrow{transform:translateX(4px)}
.ptd-attr-cta-sub{margin:.85rem 0 0;font-size:.88rem;color:#666}
@media (max-width:600px){
  .ptd-attr-cta{padding:1.4rem .85rem;margin:1.5rem auto 0}
  .ptd-attr-cta-btn{font-size:.95rem;padding:.8rem 1.4rem}
  .ptd-attr-cta-sub{font-size:.82rem}
}

/* Children destinations slider */
.ptd-children-wrap{margin-bottom:3.5rem}
.ptd-children-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem}
.ptd-children-head h2{margin:0;font-size:1.6rem;font-weight:800;color:var(--fb-navy,#1B2A4A)}
.ptd-children-nav{display:flex;gap:.5rem;flex-shrink:0}
.ptd-children-btn{width:40px;height:40px;border-radius:999px;border:1px solid #e5e5e5;background:#fff;color:var(--fb-navy,#1B2A4A);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ptd-children-btn:hover{background:var(--fb-navy,#1B2A4A);color:#fff;border-color:var(--fb-navy,#1B2A4A)}
.ptd-children-slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ptd-children-slider::-webkit-scrollbar{display:none}
.ptd-children-card{flex:0 0 280px;scroll-snap-align:start;aspect-ratio:4/3}
/* Single child — center it */
.ptd-children-single .ptd-children-slider{justify-content:center}
.ptd-children-single .ptd-children-card{flex:0 0 min(420px,100%)}
@media (max-width:600px){
  .ptd-children-card{flex:0 0 240px}
  .ptd-children-head h2{font-size:1.3rem}
}

/* ── Top-3 staples (medal-framed featured row) ────────────── */
/* Layout: heading + lede + 3-column grid of standard .ptd-card-dual cards
   that share the regular card hover behaviour (centred title; reveal desc
   + CTA on hover). The medal frame, rank circle and eyebrow are decorations
   layered on top of the standard card. */
.ptd-staples { margin-bottom: 2.5rem; }
.ptd-staples__h2 {
  font-size: 1.6rem; font-weight: 800; color: var(--fb-navy, #1B2A4A);
  /* !important needed to defeat Divi's default H2 spacing */
  margin: 0 0 .25rem !important;
  padding: 0 !important;
  text-align: center;
}
.ptd-staples__lede {
  margin: 0 auto 1.5rem !important;
  padding: 0 !important;
  text-align: center; color: #555;
  font-size: .95rem; max-width: 640px;
}
.ptd-staples__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width:760px) { .ptd-staples__grid { grid-template-columns: 1fr; } }

/* Rank circle in the top-left corner — decorative, doesn't intercept clicks */
.ptd-staple .ptd-staple__rank {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.45rem;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  pointer-events: none;
}
.ptd-staple .ptd-staple__num { line-height: 1; }

/* Eyebrow badge — sits in the card body, right-aligned with 20% gap on its right */
.ptd-staple .ptd-staple__eyebrow {
  display: inline-block;
  align-self: flex-end;
  font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 999px;
  color: #fff;
  margin-bottom: 6px;
  margin-right: 10%;
  pointer-events: none;
}

/* Medal variants — outline frame + recoloured rank/eyebrow */
.ptd-staple.is-gold   { box-shadow: 0 6px 22px rgba(212,144,0,.45) !important; outline: 4px solid #ffd54a; outline-offset: -4px; }
.ptd-staple.is-silver { box-shadow: 0 6px 22px rgba(120,125,130,.4) !important; outline: 4px solid #c7ccd1; outline-offset: -4px; }
.ptd-staple.is-bronze { box-shadow: 0 6px 22px rgba(91,42,8,.45) !important; outline: 4px solid #c46f2c; outline-offset: -4px; }
.ptd-staple.is-gold   .ptd-staple__rank    { background: linear-gradient(135deg,#ffd54a,#d49000); color: #14304d; }
.ptd-staple.is-gold   .ptd-staple__eyebrow { background: linear-gradient(135deg,#ffd54a,#d49000); color: #14304d; }
.ptd-staple.is-silver .ptd-staple__rank    { background: linear-gradient(135deg,#f0f2f4,#8a9095); color: #14304d; }
.ptd-staple.is-silver .ptd-staple__eyebrow { background: linear-gradient(135deg,#f0f2f4,#8a9095); color: #14304d; }
.ptd-staple.is-bronze .ptd-staple__rank    { background: linear-gradient(135deg,#c46f2c,#5b2a08); color: #fff; }
.ptd-staple.is-bronze .ptd-staple__eyebrow { background: linear-gradient(135deg,#c46f2c,#5b2a08); color: #fff; }

/* Rank badge on regular attraction cards (#4 onwards) */
.ptd-card-rank {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(0,0,0,.72); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 800; font-size: .82rem;
  letter-spacing: 0.3px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* ── Continents: 6-tile homepage grid ──────────────────────── */
.pt-continents-grid{
  display:grid;
  grid-template-columns:repeat(var(--pt-cont-cols, 3), 1fr);
  gap:18px;
  margin:0 0 2rem;
}
@media(max-width:900px){ .pt-continents-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:540px){ .pt-continents-grid{grid-template-columns:1fr} }

.pt-continent-card{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:var(--fb-navy,#1B2A4A);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .25s, box-shadow .25s;
}
.pt-continent-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.2);
}
.pt-continent-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s, filter .5s;
}
.pt-continent-card:hover .pt-continent-card__img{
  transform:scale(1.06);
  filter:brightness(.7);
}
.pt-continent-card__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 80%);
}
.pt-continent-card__body{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.pt-continent-card__name{
  margin:0;
  font-size:1.6rem;
  font-weight:800;
  line-height:1.1;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  color:#fff;
}
.pt-continent-card__meta{
  margin:0;
  font-size:.88rem;
  font-weight:600;
  opacity:.9;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ── Continent landing page tweaks ────────────────────────── */
.ptd-continent-countries{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
}

/* ── Continent landing — full-width hero + framed country layout ──
   Both the intro section and the country frame share a single fixed
   background image (passed as --pt-cont-bg via inline style on the
   wrapper). Fixed attachment gives a subtle parallax as user scrolls. */
/* Unified backdrop: a single dark shadow layered over the fixed hero image,
   shared by every section in the continent landing — so intro and frame
   don't show a seam between two different darknesses. */
.ptd-continent-wrap{
  background-color: var(--fb-cream, #FAF6F0);
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    var(--pt-cont-bg);
  background-size: cover, cover;
  background-position: center top, center top;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

.ptd-continent-intro{
  position:relative;
  width:100%;
  color:#fff;
  padding: clamp(60px, 9vh, 110px) 0 clamp(70px, 8vh, 120px);
  margin: 0;
}
/* Extra subtle radial darkening behind the title for legibility, layered
   over the wrap-level shadow. */
.ptd-continent-intro__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center top, rgba(0,0,0,0) 30%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
}
.ptd-continent-intro__inner{
  position:relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.ptd-continent-intro__head{
  text-align:center;
  max-width: 760px;
  padding-bottom: 30px;
}
.ptd-continent-intro__eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:700;
  opacity:.85;
  margin-bottom: 14px;
  padding: 5px 14px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  backdrop-filter: blur(4px);
}
.ptd-continent-intro__title{
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color:#fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.ptd-continent-intro__desc{
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  margin: 0 auto 24px;
  max-width: 640px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  opacity: .95;
}
.ptd-continent-intro__stats{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: .92rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.ptd-continent-intro__stats li{
  padding: 0 22px;
  border-right: 1px solid rgba(255,255,255,.25);
}
.ptd-continent-intro__stats li:last-child{ border-right:none; }
.ptd-continent-intro__stats strong{
  font-weight: 800;
  font-size: 1.15rem;
  margin-right: 6px;
  color: #fff;
}

/* ── Country frame: 6 top + 3 each side wrapping the map + rest below ── */
.ptd-continent-frame{
  position: relative;
  width: 100%;
  padding: 60px 0 80px;
  /* No own background — the unified dark backdrop comes from .ptd-continent-wrap */
}
.ptd-continent-frame__inner{
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}
.ptd-continent-frame__h2{
  margin: 0 0 28px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* 5-column grid — map is exactly 3 side-tile widths wide, with 1 side
   column on each flank. Top + middle + bottom rows all use the same
   5-column rhythm so every tile lines up perfectly. */
.ptd-continent-frame__row--top{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.ptd-continent-frame__middle{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}
.ptd-continent-frame__side{
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 14px;
  align-content: start;
  grid-column: span 1;
}
/* Tall continents (South America, Africa) get 4 tiles down each side
   instead of 3 — flanks the more vertical map nicely. */
.ptd-continent-frame.is-tall .ptd-continent-frame__side{
  grid-template-rows: repeat(4, auto);
}
.ptd-continent-frame__map{
  grid-column: span 3;
}
.ptd-continent-frame__map{
  background: #ece3cf; /* match the world-map ocean/parchment fill */
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ptd-continent-frame__map .pt-world-map{
  margin: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.ptd-continent-frame__bottom{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 1100px){
  .ptd-continent-frame__bottom{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .ptd-continent-frame__bottom{ grid-template-columns: repeat(2, 1fr); }
}
.ptd-continent-frame.is-simple .ptd-continent-frame__map,
.ptd-continent-frame.is-minimal .ptd-continent-frame__map{
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 18px;
}

/* MINIMAL mode — used when a continent has so few countries (≤5) that
   wrapping them around the map looks sparse. Show the map at sensible
   width on top, then a single horizontally-centered row of full-size
   country cards below. Card count drives column count so 2 countries
   render as 2 centered cards (not stretched across 5 columns). */
.ptd-continent-frame__minimal-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.ptd-continent-frame__minimal-row > .ptd-card{
  flex: 0 1 260px;
  max-width: 320px;
}
@media (max-width: 640px){
  .ptd-continent-frame__minimal-row > .ptd-card{ flex-basis: 100%; }
}

/* Compact card variant — same proportions as the bottom-grid cards but
   slimmer body text (no description / CTA) — used for the wrapping
   tiles in top row + side columns so all visible tiles match in size. */
.ptd-card-compact{ aspect-ratio: 4/3; }
/* South America has only 7 countries — 4 on one side, 3 on the other.
   Square tiles fill the vertical space next to the tall, narrow map.
   Africa keeps the standard 4:3 since it has more countries and a
   wider continent silhouette. */
.ptd-continent-frame.is-south-america .ptd-card-compact{ aspect-ratio: 1/1; }

/* South America: gently stretch the map horizontally so it matches the
   exact height of the 4 stacked square side cards. The SVG gets a
   slight horizontal stretch (preserveAspectRatio="none" applied via JS),
   which is a few percent of distortion — barely noticeable on the
   country shapes but eliminates the awkward gap at the bottom. */
/* Force the map cell to the same height as the 4 stacked square cards
   in each side column. The map area spans 3 cols wide; with 1:1 cards
   in 1fr columns + 14px gaps, the side stack is roughly 4/3 the cell's
   width. Setting aspect-ratio: 3/4 on the map cell pins its height to
   that target — and preserveAspectRatio="none" on the SVG (set via the
   inline script in the template) squishes the continent shape to fill. */
.ptd-continent-frame.is-south-america .ptd-continent-frame__map{
  aspect-ratio: 3 / 4;
  height: auto;
}
.ptd-continent-frame.is-south-america .ptd-continent-frame__map .pt-world-map,
.ptd-continent-frame.is-south-america .ptd-continent-frame__map .pt-world-map svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.ptd-card-compact .ptd-card-body{ padding: .7rem .9rem; }
.ptd-card-compact .ptd-card-name{ font-size: 1rem; line-height: 1.15; }
.ptd-card-compact .ptd-card-meta{ font-size: .68rem; margin: 2px 0 0; }
/* Compact Explore CTA — smaller pill so it fits the slim card body without
   pushing the title off-screen on hover. */
.ptd-card-compact .ptd-card-cta{
  font-size: .7rem;
  padding: .3rem .6rem;
  margin-top: .35rem;
}
.ptd-card-compact .ptd-card-actions{ margin-top: .35rem; }

/* Inside the continent frame, anchor card content to the bottom on hover
   instead of centering — keeps the Explore button visible even when a
   description is long enough to spill past the card height. */
.ptd-continent-frame .ptd-card-dual:hover .ptd-card-body{
  justify-content: flex-end;
}
.ptd-continent-frame .ptd-card-dual:hover .ptd-card-desc{
  max-height: 90px;
}

@media (max-width: 1100px){
  /* Stack: top row 3-up, side columns become a horizontal strip below the map */
  .ptd-continent-frame__row--top{ grid-template-columns: repeat(3, 1fr); }
  .ptd-continent-frame__middle{ grid-template-columns: 1fr; }
  .ptd-continent-frame__side{
    grid-template-rows: none;
    grid-template-columns: repeat(3, 1fr);
  }
  .ptd-continent-frame__side .ptd-card-compact{ aspect-ratio: 4/3; height: auto; }
}
@media (max-width: 640px){
  .ptd-continent-frame__row--top{ grid-template-columns: repeat(2, 1fr); }
  .ptd-continent-frame__side{ grid-template-columns: repeat(2, 1fr); }
  .ptd-continent-frame__inner{ padding: 0 16px; }
}

/* Country cards — small meta line above the description */
.ptd-card-meta{
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

/* ── Mosaic photo hero ────────────────────────────────────────
   World-map style continent picker (also acts as the cinematic hero):
       +-----------------------------+
       |           Europe            |   (full-width banner)
       +--------+----------+---------+
       |        |          |         |
       |  N.Am  |   TEXT   |  Asia   |
       |        |          |         |
       +--------+----------+---------+
       |        |          |         |
       |  S.Am  |  Africa  |  Aust   |
       |        |          |         |
       +--------+----------+---------+
   Each tile links to its continent. Title + subtitle live in the
   middle "text area" cell — clean, no overlay over images. */
.pt-mosaic-hero{
  position: relative;
  /* Force full viewport width even when wrapped inside a Divi container
     with constrained max-width — uses the classic margin-breakout trick. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Height is driven by content (Europe banner + two rows of 4:3 tiles)
     instead of a fixed clamp(). Keeps every non-Europe tile at standard
     4:3 photo aspect on every screen size. */
  height: auto;
  overflow: hidden;
  background: #0a0a0a;
}
.pt-mosaic-hero__grid{
  display: grid;
  /* minmax(0, 1fr) prevents tiles' aspect-ratio from inflating their
     min-content width past the container — without this, the 4:3
     tiles would push the grid wider than the viewport. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "europe europe europe"
    "na     text   asia"
    "sa     africa aust";
  gap: 6px;
  width: 100%;
}
/* All non-Europe tiles share the same 4:3 standard photo aspect so
   they look like a uniform photo set. Europe stays as a wide banner. */
.pt-mosaic-hero__tile:not(.pt-mosaic-hero__tile--europe){
  aspect-ratio: 4 / 3;
}
.pt-mosaic-hero__tile--europe{
  aspect-ratio: 32 / 9; /* cinematic banner across the top */
}

/* Strip Divi's default section padding when this section's only content
   is a mosaic hero — eliminates the white gap between the nav and the
   first tile so it sits flush at the top. */
.et_pb_section:has(> .et_builder_inner_content .pt-mosaic-hero),
.et_pb_section:has(.pt-mosaic-hero){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Continent → grid cell mapping. Class names use the same continent
   keys as PT_Continents::definitions() so the order is canonical. */
.pt-mosaic-hero__tile--north-america{ grid-area: na; }
.pt-mosaic-hero__tile--south-america{ grid-area: sa; }
.pt-mosaic-hero__tile--europe{ grid-area: europe; }
.pt-mosaic-hero__tile--africa{ grid-area: africa; }
.pt-mosaic-hero__tile--asia{ grid-area: asia; }
.pt-mosaic-hero__tile--oceania{ grid-area: aust; }
.pt-mosaic-hero__tile{
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #1B2A4A;
}
.pt-mosaic-hero__tile img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease-out, filter .35s;
  filter: brightness(.78);
}
.pt-mosaic-hero__tile:hover img{
  transform: scale(1.06);
  filter: brightness(1);
}
/* Continent labels — always visible, centered on each tile. Mosaic doubles
   as the continent picker so labels need to be unmistakable. */
.pt-mosaic-hero__tile-label{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.6);
  z-index: 4;
  transition: transform .25s, letter-spacing .25s;
  pointer-events: none;
}
.pt-mosaic-hero__tile:hover .pt-mosaic-hero__tile-label{
  transform: scale(1.04);
  letter-spacing: 0.01em;
}

/* Text block lives in the center "text" grid cell — NOT an overlay.
   Dark navy background ties it to the header and the rest of the
   brand palette; cream stood out too hard against the surrounding
   travel photos. */
.pt-mosaic-hero__text{
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: var(--fb-navy, #1B2A4A);
  padding: 32px clamp(20px, 3vw, 40px);
}
.pt-mosaic-hero__title{
  font-size: clamp(1.8rem, 3.3vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: #fff;
}
.pt-mosaic-hero__sub{
  font-size: clamp(.92rem, 1vw, 1.05rem);
  line-height: 1.55;
  margin: 0;
  max-width: 360px;
  color: rgba(255,255,255,.85);
}
.pt-mosaic-hero__cta{
  display: inline-block;
  margin-top: 22px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.pt-mosaic-hero__cta:hover{
  background: var(--fb-rust, #C4572A);
  border-color: var(--fb-rust, #C4572A);
  color: #fff;
  transform: translateY(-2px);
}

/* Mobile fallback: Europe banner top, text block, 5 tiles in 2 cols */
@media (max-width: 860px){
  .pt-mosaic-hero{ height: auto; }
  .pt-mosaic-hero__grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto repeat(3, 1fr);
    grid-template-areas:
      "europe europe"
      "text   text"
      "na     asia"
      "sa     aust"
      "africa africa";
  }
  .pt-mosaic-hero__tile{ aspect-ratio: 4/3; }
  .pt-mosaic-hero__tile--europe{ aspect-ratio: 16/7; }
  .pt-mosaic-hero__tile--africa{ aspect-ratio: 16/6; }
  .pt-mosaic-hero__text{ padding: 32px 24px; }
  .pt-mosaic-hero__title{ font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .pt-mosaic-hero__tile-label{ font-size: .9rem; left: 12px; bottom: 12px; }
}
@media (max-width: 480px){
  .pt-mosaic-hero__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto repeat(5, 1fr);
    grid-template-areas:
      "europe"
      "text"
      "na"
      "asia"
      "sa"
      "aust"
      "africa";
  }
  .pt-mosaic-hero__tile--europe{ aspect-ratio: 16/9; }
  .pt-mosaic-hero__tile--africa{ aspect-ratio: 16/9; }
}

/* Mosaic hero — live stats row inside the navy text block.
   3 equal-width columns with subtle vertical dividers between
   them, so the wide "19,855" cell doesn't make the row look
   lopsided next to the small "6" and "85" cells. */
.pt-mosaic-hero__stats{
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  max-width: 460px;
}
.pt-mosaic-hero__stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  position: relative;
}
.pt-mosaic-hero__stat + .pt-mosaic-hero__stat::before{
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,.18);
}
.pt-mosaic-hero__stat-num{
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pt-mosaic-hero__stat-label{
  margin-top: 4px;
  font-size: clamp(.65rem, .75vw, .78rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
  text-align: center;
  line-height: 1.2;
}

/* On smaller mosaic stacks (mobile), tighten everything */
@media (max-width: 720px){
  .pt-mosaic-hero__stats{ gap: 14px; margin-top: 16px; }
  .pt-mosaic-hero__stat-num{ font-size: 1.25rem; }
  .pt-mosaic-hero__stat-label{ font-size: .6rem; }
}

/* ── Hidden Gems sticky pull-tab ───────────────────────────────────
   The whole panel + its button slide as ONE unit from the left edge
   of the viewport. The button is anchored to the panel's top-right
   corner (sticking out past the panel's right border), so when the
   panel is off-screen-left, only the button peeks into view. On
   hover/click the entire unit slides right and reveals itself. */
.ptd-gems-tab{
  position: fixed;
  left: 0;
  top: 110px;
  z-index: 999;
  pointer-events: none; /* let children opt in */
}
@media (min-width: 720px){
  .ptd-gems-tab{ top: 160px; }
}
.ptd-gems-tab__panel{
  pointer-events: auto;
  position: relative;
  width: min(460px, 92vw);
  /* Auto-fit to ~66 % of the viewport height — keeps the panel tidy
     on tall desktop screens and prevents it from spilling off the
     bottom on shorter ones. Inner grid stretches to fill. */
  height: 66vh;
  max-height: 66vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--fb-text, #4A4A4A);
  border: 2px solid var(--fb-rust, #C4572A);
  border-left: none;
  /* Top-right corner is SQUARE — that's where the button latches on,
     and a rounded inner corner would clash with the button's straight
     left edge. Bottom-right stays rounded for the natural panel feel. */
  border-radius: 0 0 16px 0;
  /* Soft orange inner glow + outer drop shadows. The inset shadow
     bleeds the orange border colour inward as a subtle blur, tying
     the frame into the panel's body. */
  box-shadow:
    inset 0 0 32px rgba(196, 87, 42, 0.18),
    inset 0 0 8px rgba(196, 87, 42, 0.12),
    0 18px 50px rgba(0,0,0,.28),
    0 4px 14px rgba(0,0,0,.12);
  padding: 22px 18px 18px;
  /* Closed state — panel slid off-screen left; only the button (which
     extends past panel's right edge via translateX(100%)) remains
     visible at the viewport edge. */
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ptd-gems-tab:hover .ptd-gems-tab__panel,
.ptd-gems-tab:focus-within .ptd-gems-tab__panel,
.ptd-gems-tab.is-open .ptd-gems-tab__panel{
  transform: translateX(0);
}

/* Button sticks to the TOP-RIGHT corner of the panel and extends
   past the panel's right border by its own width. It rides along
   with the panel as a single unit when sliding. Aligned with the
   panel's orange border, it looks like one continuous frame. */
.ptd-gems-tab__btn{
  pointer-events: auto;
  position: absolute;
  top: -2px;          /* match panel border thickness */
  right: -2px;        /* hug right edge */
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--fb-rust, #C4572A);
  color: #fff;
  border: 2px solid var(--fb-rust, #C4572A);
  border-left: none;
  cursor: pointer;
  padding: 14px 10px;
  /* Top-right square so it lines up flush with the panel's square
     top-right corner — only the bottom-right rounds for a soft
     bottom curve on the protruding tab. */
  border-radius: 0 0 14px 0;
  box-shadow: 4px 0 12px rgba(0,0,0,.18);
  transition: background .2s;
}
.ptd-gems-tab__btn:hover{
  background: #A34420;
}
.ptd-gems-tab__icon{
  font-size: 1.4rem;
  line-height: 1;
}
.ptd-gems-tab__label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Periodic attention-grab shake — only the button shakes (not the
   off-screen panel) so it doesn't cause weird overflow flickering. */
.ptd-gems-tab__btn.is-shaking{
  animation: ptd-gems-shake .6s cubic-bezier(.36,.07,.19,.97);
}
@keyframes ptd-gems-shake{
  0%, 100% { transform: translateX(100%) rotate(0); }
  10% { transform: translateX(calc(100% - 2px)) rotate(-3deg); }
  20% { transform: translateX(calc(100% + 3px)) rotate(4deg); }
  30% { transform: translateX(calc(100% - 3px)) rotate(-3deg); }
  45% { transform: translateX(calc(100% + 2px)) rotate(2deg); }
  60% { transform: translateX(calc(100% - 1px)) rotate(-1deg); }
  80% { transform: translateX(calc(100% + 1px)) rotate(0); }
}
.ptd-gems-tab__head{
  text-align: center;
  margin-bottom: 14px;
  flex: 0 0 auto;  /* don't let the head steal grid space */
}
.ptd-gems-tab__title{
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fb-heading, #1B2A4A);
}
.ptd-gems-tab__sub{
  margin: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--fb-text, #4A4A4A);
  opacity: .85;
}

/* Desktop 2 wide × 3 tall, mobile 1 wide × 3 tall.
   The grid stretches to fill the remaining panel height (after the
   head block) — `flex: 1; min-height: 0` lets it shrink correctly
   inside the flex-column panel. Cards have NO fixed aspect-ratio
   so each row gets exactly one-third of the available space. */
.ptd-gems-tab__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.ptd-gems-tab__card{
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--fb-navy, #1B2A4A);
  transition: transform .2s, box-shadow .2s;
  min-height: 0;
}
.ptd-gems-tab__card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.ptd-gems-tab__card img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ptd-gems-tab__card::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.ptd-gems-tab__card-name{
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  z-index: 2;
}

@media (max-width: 720px){
  .ptd-gems-tab__btn{ padding: 14px 10px 12px; }
  .ptd-gems-tab__label{ font-size: .7rem; }
  .ptd-gems-tab__panel{ padding: 16px 14px 14px; }
  .ptd-gems-tab__title{ font-size: 1rem; }
  /* Mobile: 1 wide × 3 tall — top 3 gems only, stacked vertically */
  .ptd-gems-tab__grid{ grid-template-columns: 1fr; }
  .ptd-gems-tab__grid > .ptd-gems-tab__card:nth-child(n+4){ display: none; }
}