/* ============================================
   PFH Slider – final unified CSS (outer border only)
   ============================================ */

/* knobs */
.pfh-slider{
  --pfh-top: 115px;          /* space above */
  --pfh-bottom: 20vh;        /* space below */
  --pfh-content: 80vw;       /* inner content width = 80vw => 10% gutters */
  --pfh-cap-left: 12%;       /* yellow box left offset */
  --pfh-outside: 0.60;       /* 60% of caption hangs below photo */
  --pfh-cap-maxw: 520px;     /* yellow box max width */
  --pfh-cap-overlap: 140px;  /* fallback overlap reserve; JS can update */
  --pfh-title-left: -120px;  /* from page edge */
  --pfh-title-gap: 20px;     /* from stripe’s right edge */

  /* connector knobs (added + deduped) */
  --pfh-connector-color: #ffd166; /* yellow */
  --pfh-connector-width: 4px;     /* line thickness */
  --pfh-connector-arm: 170px;     /* horizontal arm length from title */
  --pfh-connector-drop: 435px;    /* vertical leg down to/y past caption */
  --pfh-connector-overhang: 80px; /* extra drop into rail (beyond caption) */
  --pfh-connector-foot: 1300px;   /* bottom horizontal “foot” length */
  --pfh-connector-gap: 20px;      /* spacing between title & connector */
}

/* ===== OUTER WRAPPER: full-bleed and centered to viewport ===== */
body .pfh-slider{
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  margin-top: var(--pfh-top) !important;
  margin-bottom: var(--pfh-bottom) !important;

  /* allow caption to hang; wrapper height handled via header padding */
  overflow: visible !important;
  padding-bottom: 120px !important;

  box-sizing: border-box !important;
  contain: layout paint !important;
  background: transparent !important;
  z-index: 2 !important;

  /* only debug border kept */
  border: 0px solid red !important;

  /* ⚡ prevent inner scrollbar from appearing */
  overflow-y: hidden !important;
}

/* ===== INNER CONTENT: fixed to 80vw (10% gutters) ===== */
body .pfh-slider .pfh-viewport{
  position: relative !important;
  width: var(--pfh-content) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  height: clamp(420px, calc(100vh - var(--pfh-top) - var(--pfh-bottom)), 78vh) !important;
  max-height: 78vh !important;
  overflow: visible !important;
  background: transparent !important;
}
body .pfh-slider .pfh-viewport[data-ghost]::before{ display:none !important; }

body .pfh-slider .pfh-track{
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform .5s ease;
  background: transparent !important;
}
body .pfh-slider .pfh-slide,
body .pfh-slider .pfh-card{
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
}

/* image crops inside its own box */
body .pfh-slider .pfh-media{
  position: relative !important;
  z-index: 2 !important;                /* above red stripe */
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: transparent !important;
}
body .pfh-slider .pfh-media img{
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* title overlay */
body .pfh-slider .pfh-title{
  position: absolute !important;
  z-index: 6 !important; /* keep title text above caption */
  left: 90px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  max-width: min(60%, 980px) !important;
  pointer-events: none !important;
  background: transparent !important;
  overflow: visible !important; /* (title box still allows overflow) */
}
body .pfh-slider .pfh-title{ border: 0px solid lime !important; }
body .pfh-slider .pfh-title h3{
  margin: 0 !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .3px !important;
  line-height: 1.1 !important;
  font-size: clamp(22px, 4.2vw, 48px) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
}

/* --- DISABLE old connector on the title (so it doesn’t sit above caption) --- */
body .pfh-slider .pfh-title::before,
body .pfh-slider .pfh-title::after{
  content: none !important;
}

/* === NEW: Connector drawn on .pfh-card so it sits UNDER the yellow box === */
body .pfh-slider .pfh-card::before,
body .pfh-slider .pfh-card::after{
  content:"" !important;
  position:absolute !important;
  background: var(--pfh-connector-color) !important;
  pointer-events: none !important;
  z-index: 3 !important; /* under caption (4), above image (2) */
}

/* horizontal arm — aligned to the title midline */
body .pfh-slider .pfh-card::before{
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: calc(
    ((100vw - var(--pfh-content)) / 2)
    + var(--pfh-title-left)
    - var(--pfh-connector-arm)
    - var(--pfh-connector-gap)   /* apply gap */
  ) !important;
  width: var(--pfh-connector-arm) !important;
  height: var(--pfh-connector-width) !important;
}

/* vertical leg + bottom foot */
body .pfh-slider .pfh-card::after{
  top: 50% !important;
  left: calc(
    ((100vw - var(--pfh-content)) / 2)
    + var(--pfh-title-left)
    - var(--pfh-connector-arm)
    - var(--pfh-connector-gap)   /* apply gap */
  ) !important;

  height: calc(var(--pfh-connector-drop) + var(--pfh-connector-overhang)) !important;
  width: var(--pfh-connector-foot) !important;

  background:
    linear-gradient(var(--pfh-connector-color), var(--pfh-connector-color))
      left 0 top 0 / var(--pfh-connector-width) 100% no-repeat,
    linear-gradient(var(--pfh-connector-color), var(--pfh-connector-color))
      left 0 bottom 0 / 100% var(--pfh-connector-width) no-repeat !important;
}

/* yellow box (40/60 overlap) */
body .pfh-slider .pfh-caption{
  position: absolute !important;
  z-index: 4 !important;
  left: var(--pfh-cap-left) !important;
  bottom: 0 !important;
  transform: translateY(calc(var(--pfh-outside) * 100%)) !important;
  background: var(--pfh-accent, #ffd166) !important;
  color: var(--pfh-ink, #0e1a24) !important;
  padding: clamp(10px, 2vw, 20px) !important;
  max-width: min(var(--pfh-cap-maxw), 80%) !important;
  box-shadow: none !important; /* keep the bottom flush */
}
body .pfh-slider .pfh-box-title{ margin:0 0 .4rem 0 !important; font-size:clamp(16px,2.2vw,22px) !important; line-height:1.25 !important; font-weight:800 !important; }
body .pfh-slider .pfh-preview  { margin:.25rem 0 0 0 !important; font-size:clamp(13px,1.5vw,16px) !important; line-height:1.5 !important; }
body .pfh-slider .pfh-readmore { display:inline-block !important; margin-top:.45rem !important; text-decoration:none !important; font-weight:800 !important; font-size:clamp(13px,1.4vw,16px) !important; color:#0e1a24 !important; border-bottom:2px solid currentColor !important; padding-bottom:2px !important; }

/* controls */
body .pfh-slider .pfh-arrow{
  position: absolute !important;
  top: 50% !important; transform: translateY(-50%) !important;
  background: rgba(0,0,0,.45) !important; color:#fff !important;
  border:0 !important; width:42px !important; height:42px !important;
  border-radius:50% !important; cursor:pointer !important; z-index:6 !important;
}
body .pfh-slider .pfh-prev{ left:10px !important; }
body .pfh-slider .pfh-next{ right:10px !important; }
body .pfh-slider .pfh-dots{ display:flex !important; gap:8px !important; justify-content:center !important; margin-top:12px !important; position:relative !important; z-index:6 !important; }
body .pfh-slider .pfh-dot{ width:10px !important; height:10px !important; border-radius:50% !important; background:#88919a !important; border:0 !important; padding:0 !important; cursor:pointer !important; }
body .pfh-slider .pfh-dot[aria-selected="true"]{ background:#fff !important; }

/* safety */
body .pfh-slider img{ max-width:100% !important; height:100% !important; }
html, body{ overflow-x:hidden; }

/* ===== LEFT red column aligned to yellow box right edge ===== */
body .pfh-slider{ background: transparent !important; z-index:0 !important; }
body .pfh-slider::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important; bottom:0 !important; left:0 !important;
  width: calc(var(--pfh-cap-left) + var(--pfh-cap-maxw)) !important;
  background:#c30000 !important;
  z-index:1 !important;                    /* under image/title/caption */
  pointer-events:none !important;
}
/* stack content above the stripe */
body .pfh-slider .pfh-media   { z-index:2 !important; }
body .pfh-slider .pfh-title   { z-index:6 !important; }  /* (kept high for title text) */
body .pfh-slider .pfh-caption { z-index:4 !important; }

/* ===== Responsive tweak ===== */
@media (max-width: 768px){
  .pfh-slider{ --pfh-cap-left: 6%; --pfh-outside: 0.45; }
  body .pfh-slider .pfh-viewport{ width: 90vw !important; } /* 5% gutters each side */
}
@media (max-height: 600px){
  .pfh-slider{ --pfh-outside: 0.40; }
}
/* === Top-align slider image (no vertical centering) === */
body .pfh-slider .pfh-media img {
  object-fit: cover !important;
  object-position: top center !important;  /* top stays visible, trim bottom */
}

/* Mobile: scale down and adjust offset */
@media (max-width: 768px){
  body .pfh-slider .pfh-arrow{ width: 36px !important; height: 36px !important; }
  body .pfh-slider .pfh-prev{ bottom: calc(var(--pfh-outside) * 100% + 68px) !important; }
  body .pfh-slider .pfh-next{ bottom: calc(var(--pfh-outside) * 100% + 16px) !important; }
}

/* =========================================================
   PFH RAIL — from caption-right to PAGE-right + arrows
   ========================================================= */

/* knobs (uses your existing variables) */
body .pfh-slider{
  --pfh-cap-left: 12%;
  --pfh-cap-maxw: 520px;
  --pfh-content: 80vw;                 /* inner content width (your track/viewport) */

  --pfh-rail-h: 160px;                 /* rail height */
  --pfh-rail-gap: 38px;
  --pfh-rail-split: 35%;               /* portion of the rail that’s red */

  /* arrow look */
  --pfh-arrow-size: 56px;
  --pfh-arrow-radius: 8px;             /* 0 = hard square */
  --pfh-arrow-bg: #4b4b4b;
  --pfh-arrow-bg-hover: #2f2f2f;
  --pfh-arrow-color: #fff;
  --pfh-arrow-font: 24px;
}

/* Hide the original centered arrows so only rail arrows show */
body .pfh-slider > .pfh-arrow{ display:none !important; }

/* The slide/card is the positioning context; don’t clip */
body .pfh-slider .pfh-card{ position:relative !important; overflow:visible !important; }

/* ✅ Rail: starts at yellow box right edge and reaches PAGE right edge */
body .pfh-slider .pfh-overlay-rail{
  position:absolute !important;
  top:100% !important;  /* directly under the image */
  left: calc(var(--pfh-cap-left) + var(--pfh-cap-maxw)) !important;

  /* width = remaining content width to the right of the yellow box
            + the right gutter from content edge to viewport edge */
  width: calc(
    (var(--pfh-content) - (var(--pfh-cap-left) + var(--pfh-cap-maxw)))
    + ((100vw - var(--pfh-content)) / 2)
  ) !important;

  height: var(--pfh-rail-h) !important;
  z-index: 3 !important;                 /* under caption/title, above image */
  pointer-events: none !important;

  background:
    /* gentle darkening (a touch more on the red half) */
    linear-gradient(to right,
      rgba(0,0,0,.06) 0,
      rgba(0,0,0,.06) var(--pfh-rail-split),
      rgba(0,0,0,.03) var(--pfh-rail-split),
      rgba(0,0,0,.03) 100%),
    /* subtle mottled texture */
    repeating-radial-gradient(circle at 30% 40%,
      rgba(0,0,0,.24) 0 1px,
      transparent 1px 3px),
    /* your existing split */
    linear-gradient(
      to right,
      #c30000 0,
      #c30000 var(--pfh-rail-split),
      #D1D0CE var(--pfh-rail-split),
      #D1D0CE 100%
    ) !important;

  background-size: auto, 6px 6px, auto !important;
  background-blend-mode: multiply, overlay, normal !important;
}

/* no pseudo background layers needed; ensure old ones are off */
body .pfh-slider .pfh-overlay-rail::before,
body .pfh-slider .pfh-overlay-rail::after{
  content:none !important;
  background:none !important;
}

/* Inner container & arrows: left-flush, clickable, above rail bg */
body .pfh-slider .pfh-overlay-rail__inner{
  position:absolute !important; inset:0 !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:var(--pfh-rail-gap) !important;
  pointer-events:auto !important;
  z-index:5 !important;                  /* above the rail background */
  outline:0px dashed #00bfff !important; /* DEBUG aqua */
  padding-left: 5% !important;           /* adjust this number */
}
body .pfh-slider .pfh-overlay-rail__inner .pfh-rail-controls{
  display:flex !important; gap:var(--pfh-rail-gap) !important; margin:0 !important;
}
/* Square dark-gray arrows */
body .pfh-slider .pfh-overlay-rail__inner .pfh-rail-controls .pfh-arrow{
  position:static !important; top:auto !important; left:auto !important; transform:none !important;
  width:var(--pfh-arrow-size) !important;
  height:var(--pfh-arrow-size) !important;
  border-radius:var(--pfh-arrow-radius) !important;
  border:0 !important;
  background:var(--pfh-arrow-bg) !important;
  color:var(--pfh-arrow-color) !important;
  font-size:var(--pfh-arrow-font) !important;
  line-height:1 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
  cursor:pointer !important;
}
body .pfh-slider .pfh-overlay-rail__inner .pfh-rail-controls .pfh-arrow:hover,
body .pfh-slider .pfh-overlay-rail__inner .pfh-rail-controls .pfh-arrow:focus-visible{
  background:var(--pfh-arrow-bg-hover) !important; outline:none !important;
}

body .pfh-slider[data-dots="0"] .pfh-dots {
  display: none !important;
}

/* === Slider width lock: ensure only one slide per view === */
body .pfh-slider .pfh-track {
  display: flex !important;
  width: 100% !important;                 /* track fits viewport */
}
body .pfh-slider .pfh-slide {
  min-width: 100% !important;             /* each slide = full viewport */
  flex: 0 0 100% !important;              /* prevent shrink/grow */
}

/* === PFH stack mode: show exactly one slide without horizontal strip === */
body .pfh-slider.pfh-stack .pfh-track{
  position: relative !important;
  transform: none !important;      /* ignore translateX when stacked */
  height: 100% !important;
}
body .pfh-slider.pfh-stack .pfh-slide{
  position: absolute !important;
  inset: 0 !important;             /* fill the viewport area */
  opacity: 0 !important;
  pointer-events: none !important;
  /* width/height are already 100% from your existing CSS; we neutralize flex */
  flex: none !important;
  min-width: 0 !important;
}
body .pfh-slider.pfh-stack .pfh-slide.is-active{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Fade between slides when stack mode is on and fade is enabled */
body .pfh-slider.pfh-stack.pfh-fade .pfh-slide{
  transition: opacity .6s ease; /* adjust duration/ease to taste */
  will-change: opacity;
}

/* === Title positioning override === */

/* Option A: offset from PAGE left edge */
body .pfh-slider .pfh-title{
  left: calc( ((100vw - var(--pfh-content)) / 2) + var(--pfh-title-left) ) !important;
}

/* OR Option B: offset from STRIPE’s right edge
body .pfh-slider .pfh-title{
  left: calc(
    ((100vw - var(--pfh-content)) / 2)
    + (var(--pfh-cap-left) + var(--pfh-cap-maxw))
    + var(--pfh-title-gap)
  ) !important;
}   */

/* ===== Mobile simplification (<= 768px) ===== */
@media (max-width: 768px){

  /* 1) Remove the yellow connector */
  .pfh-slider .pfh-card::before,
  .pfh-slider .pfh-card::after{
    content: none !important;
  }

  /* 2 & 3) Remove the buttons and their rail/container */
  .pfh-slider .pfh-overlay-rail,
  .pfh-slider .pfh-overlay-rail__inner,
  .pfh-slider .pfh-overlay-rail__inner .pfh-rail-controls,
  .pfh-slider .pfh-overlay-rail__inner .pfh-rail-controls .pfh-arrow,
  .pfh-slider > .pfh-arrow{
    display: none !important;
  }

 /* ===== Mobile simplification (<= 768px) ===== */
@media (max-width: 768px){

  /* ... (connector/buttons/background removal as before) ... */

  /* Pure centered title */
  .pfh-slider .pfh-title{
    position: absolute !important;
    inset: 0 !important;                      /* fill slide area */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;       /* horizontal center */
    text-align: center !important;
    transform: none !important;               /* reset desktop transform */
    margin: 0 auto !important;
    max-width: 90% !important;
    pointer-events: none !important;
  }
  .pfh-slider .pfh-title h3{
    font-size: clamp(20px, 7vw, 34px) !important;
    line-height: 1.2 !important;
  }
}

  /* 5) Remove the split/red stripe background */
  .pfh-slider::before{
    content: none !important;
  }
}