/* ============================================================
   Port Douglas Luxe Tours — single tour template styles
   Namespaced under .pdlt-tour so it never leaks into Themify.
   Enqueue ONLY on single-tour.php (see functions.php).

   Colours, fonts and the easing curve are NOT declared here: they
   live as --pdlt-* tokens on :root in pdlt-base.css, which loads on
   every page. Change a colour or a typeface THERE and nowhere else.
   Custom properties resolve when styles are computed, not when they
   are parsed, so it does not matter that this file loads first.

   Only what is specific to this template is declared below.
   ============================================================ */

.pdlt-tour{
  --pdlt-shadow:0 1px 3px rgba(18,16,12,.05), 0 10px 34px rgba(18,16,12,.07);
  --pdlt-maxw:1220px;

  /* Height of the Themify header — measured on production: 99.9px on desktop,
     79px on phones (see the media query below). The header floats over the
     page, so this is no longer load-bearing for the hero: it only sets the
     booking card's sticky offset and the hero's short-viewport floor. Being a
     couple of pixels off costs nothing now. */
  --pdlt-header-h:100px;

  /* Emphasis for <strong>/<b> in body copy.
     Weight only — NO colour step. Darkening emphasis to full ink made it
     shout on a page whose whole point is that it doesn't; `inherit` keeps
     bold text the same tone as the copy around it, and also keeps it white
     inside the dark highlights band instead of forcing it to ink.
     Hanken Grotesk: 400 body · 500 quiet · 600 here · 700 loud. */
  --pdlt-weight-strong:600;
  --pdlt-ink-strong:inherit;

  background:var(--pdlt-paper);
  color:var(--pdlt-ink);
  font-family:var(--pdlt-font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Phones only. 760px matches the breakpoint the rest of this file already uses,
   and sits below tablet portrait (768px), so tablets keep the 100px. */
@media(max-width:760px){.pdlt-tour{--pdlt-header-h:80px}}

.pdlt-tour *{box-sizing:border-box}
.pdlt-tour h1,.pdlt-tour h2,.pdlt-tour h3{font-family:var(--pdlt-font-display);font-weight:400;margin:0;letter-spacing:-.01em}
.pdlt-tour img{max-width:100%;display:block}
.pdlt-tour a{color:inherit}
.pdlt-wrap{max-width:var(--pdlt-maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ---------------- hero ----------------
   The hero sits under the menu because the page carries Themify's
   `transparent-header` body class (added in functions.php), which takes
   #headerwrap OUT of the flow — position:fixed, z-index:999, floating over
   the page. So the hero simply starts at the top of #body: no negative
   margin, and nothing here depends on how tall the header is.

   padding-top is kept only as a floor for very short viewports (a phone in
   landscape): the copy is bottom-aligned, so on any normal screen it sits
   far below the menu anyway. */
.pdlt-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;                       /* mobile: excludes the browser chrome */
  padding-top:var(--pdlt-header-h);
  display:flex;align-items:flex-end;overflow:hidden;
  background:radial-gradient(130% 100% at 80% 0%, rgba(184,150,74,.30), transparent 52%),linear-gradient(180deg,#1b1812 0%,#221f18 30%,#100e0a 100%);
}
.pdlt-hero.has-photo{background:#100e0a}

/* Cinematic entrance: a slow push-in on the photo, copy settling in above it.
   One-shot, never loops — a looping hero reads as a screensaver, not as film. */
.pdlt-hero .hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;transform-origin:52% 45%;
  animation:pdlt-kenburns 26s ease-out both}

/* Two scrims. Top one keeps the transparent header menu legible over the photo;
   bottom one is what makes the title and tagline readable on a bright image. */
.pdlt-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 14%, transparent 30%),
    /* The bottom scrim lands on the ink of the highlights band, fully opaque,
       so hero and band read as one surface. Ending it at 78% black left the
       photo 22% visible on the last row — that was the pale seam line. */
    linear-gradient(0deg, var(--pdlt-ink) 0%, rgba(18,16,12,.86) 4%, rgba(18,16,12,.45) 26%, transparent 58%),
    radial-gradient(150% 130% at 50% 0%, transparent 38%, rgba(0,0,0,.45) 100%);
}
.pdlt-hero .hero-inner{position:relative;z-index:2;padding-bottom:clamp(56px,8vw,104px);max-width:900px;margin-inline:auto;text-align:center}
.pdlt-hero .eyebrow{display:inline-flex;align-items:center;gap:14px;color:#D9BE7A;font-family:var(--pdlt-font-wordmark);font-size:14px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:26px;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.pdlt-hero .eyebrow::before,
.pdlt-hero .eyebrow::after{content:"";width:38px;height:1px;background:currentColor;opacity:.75}
.pdlt-hero h1{color:var(--pdlt-white);font-size:clamp(46px,8vw,92px);line-height:1.02;font-weight:300;text-shadow:0 2px 40px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.35)}
.pdlt-hero .tagline{color:rgba(255,253,248,.94);font-family:var(--pdlt-font-display);font-style:italic;font-size:clamp(20px,2.6vw,32px);margin:22px auto 0;max-width:620px;text-shadow:0 1px 24px rgba(0,0,0,.6)}

@keyframes pdlt-kenburns{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to  {transform:scale(1.11) translate3d(0,-1.1%,0)}
}
@keyframes pdlt-hero-rise{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}
@keyframes pdlt-hero-fade{ from{opacity:0} to{opacity:1} }

.pdlt-hero.has-photo::after{animation:pdlt-hero-fade 1200ms ease both}
.pdlt-hero .eyebrow{animation:pdlt-hero-rise 900ms var(--pdlt-ease-luxe) 180ms both}
.pdlt-hero h1{animation:pdlt-hero-rise 1100ms var(--pdlt-ease-luxe) 320ms both}
.pdlt-hero .tagline{animation:pdlt-hero-rise 1100ms var(--pdlt-ease-luxe) 520ms both}

/* highlights band.
   The -1px closes the sub-pixel gap between hero and band. On fractional
   device pixel ratios (most phones and tablets) the two edges round apart and
   the cream page background shows through as a hairline. */
.pdlt-highlights{background:var(--pdlt-ink);color:var(--pdlt-white);margin-top:-1px;position:relative;z-index:1}
.pdlt-highlights .pdlt-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:clamp(38px,5vw,56px) clamp(20px,5vw,48px)}
.pdlt-hl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.pdlt-hl .badge{width:60px;height:60px;border-radius:50%;border:1px solid rgba(184,150,74,.5);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,rgba(184,150,74,.18),transparent)}
.pdlt-hl .badge svg{width:26px;height:26px;color:var(--pdlt-gold-bright)}
.pdlt-hl .hl-label{font-family:var(--pdlt-font-display);font-size:24px}
.pdlt-hl .hl-sub{font-size:16px;color:rgba(255,253,248,.55)}
.pdlt-hl:not(:last-child){border-right:1px solid rgba(255,255,255,.08)}
@media(max-width:720px){.pdlt-highlights .pdlt-wrap{grid-template-columns:1fr;gap:28px}.pdlt-hl:not(:last-child){border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:28px}}

/* intro + at a glance */
.pdlt-intro{padding:clamp(52px,7vw,92px) 0 clamp(24px,4vw,40px)}
.pdlt-intro .lead{max-width:780px;font-family:var(--pdlt-font-display);font-weight:300;font-size:clamp(21px,2.7vw,29px);line-height:1.5}
.pdlt-intro .lead .accent{color:var(--pdlt-gold);font-style:italic}
.pdlt-glance{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--pdlt-line);border-bottom:1px solid var(--pdlt-line);margin-top:clamp(44px,6vw,64px)}
.pdlt-glance .cell{padding:26px 28px 26px 0;display:flex;gap:16px;align-items:flex-start;border-right:1px solid var(--pdlt-line)}
.pdlt-glance .cell:last-child{border-right:0;padding-right:0}
.pdlt-glance .ico{flex:0 0 auto;width:22px;height:22px;color:var(--pdlt-gold);margin-top:3px}
.pdlt-glance .k{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--pdlt-ink-soft);margin-bottom:5px}
.pdlt-glance .v{font-family:var(--pdlt-font-display);font-size:20px;line-height:1.3}
.pdlt-glance .v small{display:block;font-family:var(--pdlt-font-body);font-size:13px;color:var(--pdlt-ink-soft);margin-top:3px}
@media(max-width:760px){.pdlt-glance{grid-template-columns:1fr}.pdlt-glance .cell{border-right:0;border-bottom:1px solid var(--pdlt-line);padding:20px 0}.pdlt-glance .cell:last-child{border-bottom:0}}

/* gallery slider */
.pdlt-gallery{padding:clamp(20px,4vw,44px) 0 clamp(48px,6vw,80px)}
.pdlt-gallery .g-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.pdlt-gallery .g-head h2{font-size:clamp(22px,3vw,30px)}
.pdlt-gallery .g-head .rule{flex:1;height:1px;background:var(--pdlt-line)}
.pdlt-gallery .slider-nav{display:flex;align-items:center;gap:14px}
.pdlt-gallery .counter{font-size:13px;color:var(--pdlt-ink-soft);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.pdlt-gallery .snav-btn{width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid var(--pdlt-line);background:var(--pdlt-white);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--pdlt-ink);transition:background .32s var(--pdlt-ease-luxe),color .32s var(--pdlt-ease-luxe),border-color .32s var(--pdlt-ease-luxe)}
.pdlt-gallery .snav-btn:hover:not(:disabled){background:var(--pdlt-gold);color:var(--pdlt-white);border-color:var(--pdlt-gold)}
.pdlt-gallery .snav-btn:disabled{opacity:.3;cursor:not-allowed}
.pdlt-gallery .snav-btn svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;pointer-events:none}
.pdlt-slider{overflow:hidden}
.pdlt-track{display:flex;gap:16px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.pdlt-slide{flex:0 0 62%;aspect-ratio:16/10;border-radius:3px;position:relative;overflow:hidden}
.pdlt-slide img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.pdlt-slide{flex:0 0 88%}}

/* main layout */
.pdlt-layout{display:grid;grid-template-columns:1fr 380px;gap:clamp(40px,6vw,88px);padding:0 0 clamp(52px,7vw,92px)}
@media(max-width:960px){.pdlt-layout{grid-template-columns:1fr;gap:48px}}
.pdlt-section{margin-bottom:clamp(44px,6vw,72px);clear:both}
.pdlt-section:last-child{margin-bottom:0}
/* Contain any float/column the client may paste into a WYSIWYG field, so it
   can never bleed into the next section. */
.pdlt-rte::after{content:"";display:table;clear:both}
.pdlt-rte>*{float:none !important;width:auto !important;column-count:auto !important}
.pdlt-sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
.pdlt-sec-head h2{font-size:clamp(26px,3.4vw,34px)}
.pdlt-sec-head .rule{flex:1;height:1px;background:var(--pdlt-line);align-self:center}

/* rich text (WYSIWYG output: itinerary, included, etc.) */
.pdlt-rte p{margin:0 0 18px;color:var(--pdlt-ink-soft);font-size:16px;line-height:1.7}
.pdlt-rte p:last-child{margin-bottom:0}
.pdlt-rte h3{font-family:var(--pdlt-font-display);font-size:20px;color:var(--pdlt-ink);margin:30px 0 14px}
.pdlt-rte h3:first-child{margin-top:0}
.pdlt-rte h4{font-family:var(--pdlt-font-display);font-size:17px;color:var(--pdlt-ink);margin:24px 0 12px}
.pdlt-rte ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.pdlt-rte ul:last-child{margin-bottom:0}
.pdlt-rte li{position:relative;padding-left:22px;color:var(--pdlt-ink-soft);font-size:15.5px;line-height:1.55}
.pdlt-rte li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--pdlt-gold)}
.pdlt-rte em{color:var(--pdlt-ink-soft);font-style:italic}

/* Emphasis. <b> and <strong> render identically by default (both bold), so
   they are styled together — the editor's Bold button emits <strong> and the
   client should never have to pick a tag for visual reasons. */
.pdlt-tour strong,.pdlt-tour b{font-weight:var(--pdlt-weight-strong);color:var(--pdlt-ink-strong)}
.pdlt-rte a{color:var(--pdlt-gold);text-decoration:underline;text-underline-offset:3px}
.pdlt-rte a:hover{color:var(--pdlt-ink)}

/* numbered lists from the editor */
.pdlt-rte ol{margin:0 0 20px;padding-left:22px;display:grid;gap:11px}
.pdlt-rte ol:last-child{margin-bottom:0}
.pdlt-rte ol li{color:var(--pdlt-ink-soft);font-size:15.5px;line-height:1.55;padding-left:4px}
.pdlt-rte ol li::marker{color:var(--pdlt-gold);font-family:var(--pdlt-font-display)}

/* "Our recommendation" — editorial 01 / 02 / 03 numbering.
   Applied to .pdlt-rte--numbered so the client just uses the normal
   numbered-list button in the editor and gets this treatment. */
.pdlt-rte--numbered ol{list-style:none;padding-left:0;counter-reset:tip;gap:16px}
.pdlt-rte--numbered ol li{counter-increment:tip;display:flex;gap:14px;padding-left:0;font-size:15px}
.pdlt-rte--numbered ol li::before{content:counter(tip,decimal-leading-zero);font-family:var(--pdlt-font-display);color:var(--pdlt-gold);font-size:14px;flex:0 0 auto;width:22px;padding-top:2px}
.pdlt-rte--numbered ol li::marker{content:none}

/* note callout */
.pdlt-note{margin-top:24px;border:1px solid var(--pdlt-line);border-left:3px solid var(--pdlt-gold);background:var(--pdlt-white);padding:20px 24px;border-radius:2px}
.pdlt-note .lbl{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--pdlt-gold);font-weight:600;margin-bottom:12px}
.pdlt-note ul{margin:0;padding-left:18px;display:grid;gap:9px}
.pdlt-note li{font-size:14px;color:var(--pdlt-ink-soft)}
/* WYSIWYG paragraphs pasted inside the callout */
.pdlt-note p{margin:0 0 12px;font-size:14px;color:var(--pdlt-ink-soft);line-height:1.6}
.pdlt-note p:last-child{margin-bottom:0}

/* booking — sticky offset follows the measured header so the card never
   ends up tucked under the menu, plus 32px of breathing room. */
.pdlt-booking{position:sticky;top:calc(var(--pdlt-header-h) + 32px);align-self:start}
.pdlt-book-card{background:var(--pdlt-white);border:1px solid var(--pdlt-line);border-radius:4px;box-shadow:var(--pdlt-shadow);overflow:hidden}
.pdlt-book-card .head{padding:22px 24px 18px;border-bottom:1px solid var(--pdlt-line)}
.pdlt-book-card .head h3{font-size:23px}
.pdlt-book-card .head p{margin:5px 0 0;font-size:13px;color:var(--pdlt-ink-soft)}
.pdlt-rezdy{padding:0;line-height:0}
.pdlt-rezdy iframe{width:100%;border:0;display:block}

/* enquiry section.
   The band and its heading only — the FORM inside it is styled by
   pdlt-base.css, which gives every Fluent Form on the site the same
   look. Nothing about the form belongs here any more. */
.pdlt-enquiry{background:var(--pdlt-panel);border-top:1px solid var(--pdlt-line)}
.pdlt-enquiry .pdlt-wrap{padding:clamp(56px,7vw,88px) clamp(20px,5vw,48px)}
.pdlt-enquiry h2{font-size:clamp(28px,4vw,40px);margin-bottom:8px}
.pdlt-enquiry .sub{color:var(--pdlt-ink-soft);margin-bottom:40px;max-width:520px}

/* scroll reveal */
.pdlt-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.pdlt-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pdlt-reveal{opacity:1;transform:none;transition:none}
  .pdlt-track{transition:none}
  .pdlt-hero .hero-photo,
  .pdlt-hero.has-photo::after,
  .pdlt-hero .eyebrow,
  .pdlt-hero h1,
  .pdlt-hero .tagline{animation:none;opacity:1;transform:none}
}

/* keyboard focus — must stay visible (WCAG 2.4.7) */
.pdlt-tour :focus-visible{outline:2px solid var(--pdlt-gold);outline-offset:3px;border-radius:2px}
.pdlt-slider:focus-visible{outline:2px solid var(--pdlt-gold);outline-offset:4px}
.pdlt-slider:focus:not(:focus-visible){outline:none}

/* ============================================================
   NOTE — full-bleed inside Themify
   Themify wraps the template output in a centred, max-width container
   (#content / .pagewidth). If the hero, the dark highlights band and the
   enquiry block do NOT run edge-to-edge on the live site, uncomment this.
   Check for horizontal scroll on mobile after enabling.

.pdlt-hero,
.pdlt-highlights,
.pdlt-enquiry{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
html{overflow-x:hidden}
   ============================================================ */