/*!
 * KD Content Parts - photo carousel
 * Kenyon Digital - kenyondigital.com
 *
 * Ported from hcs-slideshow-thumbs.html, the layout HCS chose on 13 Aug 2026.
 * Caption and photographer/date rules are gone, per the client's request.
 *
 * Every rule is scoped under the block root (.kdps .kdps__x). That is not
 * decoration: the stratejus theme styles `.content__main h2`, `p` and `ul` as
 * descendant selectors, which outrank a single component class and would
 * repaint the heading, restyle the counter and add margins inside the frame.
 * Scoping under the root wins on specificity without a single !important.
 */

.kdps{
  --hcs-teal:#206d78;
  --hcs-teal-dk:#18545c;
  --hcs-blue:#00476c;
  --hcs-peach:#faaf7c;
  --hcs-cream:#f2f1ec;
  --hcs-sand:#efeae4;
  --hcs-ink:#333;
  --hcs-muted:#545860;
  --hcs-line:#d8d6cc;
  --kdps-radius:3px;
}

.kdps.kdps{margin:0 0 56px;position:relative;
  /* Cap the frame so the whole gallery — photo, thumbnail strip, counter and
     hint — fits a laptop window. Measured at 1440x900 without this: the stage
     ran 191px past the fold and the thumbnail strip sat 203px below it, so the
     page opened on a slab of photo with no visible controls.
     The 3:2 frame is preserved by capping width in step with height, rather
     than squashing the box and letting object-fit crop more. */
  --kdps-max-h:min(58vh,560px);
  --kdps-max-w:calc(var(--kdps-max-h) * 3 / 2)}
.kdps *,.kdps *::before,.kdps *::after{box-sizing:border-box}

/* head */
.kdps .kdps__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;margin:0 0 24px;
  padding-bottom:16px;border-bottom:2px solid var(--hcs-line)}
.kdps .kdps__titles{flex:1 1 320px;min-width:0}
.kdps .kdps__title{font-family:Oswald,Helvetica,Arial,sans-serif;font-weight:500;
  font-size:clamp(24px,3.2vw,34px);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;
  color:var(--hcs-blue);margin:0}
.kdps .kdps__dlall{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:var(--hcs-teal);
  color:#fff;text-decoration:none;border-bottom:0;font-weight:600;font-size:14px;padding:11px 20px;
  border-radius:var(--kdps-radius);border:2px solid var(--hcs-teal);transition:background .15s,border-color .15s}
.kdps .kdps__dlall:hover,.kdps .kdps__dlall:focus-visible{background:var(--hcs-teal-dk);border-color:var(--hcs-teal-dk)}

/* stage: one photo at a time */
.kdps .kdps__stage{position:relative;width:100%;aspect-ratio:3/2;background:var(--hcs-sand);
  border-radius:var(--kdps-radius);overflow:hidden;touch-action:pan-y;
  max-height:var(--kdps-max-h);max-width:var(--kdps-max-w);margin-inline:auto}
.kdps .kdps__panel{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .32s ease,visibility 0s linear .32s}
.kdps .kdps__panel.is-active{opacity:1;visibility:visible;transition:opacity .32s ease,visibility 0s}
.kdps .kdps__panel img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}

/* Fit: how a photo whose shape does not match the 3:2 stage is handled.
   'cover' (default, the approved look) fills the frame and crops. A portrait
   photo loses 56% of its height that way, which is fine for scenery and very
   much not fine for a person at a podium.
   'contain' shows the whole photo, floated over a blurred, enlarged copy of
   itself so the frame still reads as a photo rather than as empty bars. */
.kdps--fit-contain .kdps__panel img{object-fit:contain;object-position:center center;position:relative;z-index:1}
.kdps--fit-contain .kdps__panel img.kdps__blur{position:absolute;inset:0;z-index:0;
  object-fit:cover;transform:scale(1.15);filter:blur(24px) brightness(.62) saturate(1.1)}

/* With JavaScript off nothing can set .is-active, so every photo would be
   invisible. Stack them instead: the gallery still works, it is just a column
   of pictures with working download links. */
.kdps.no-js .kdps__stage{aspect-ratio:auto;overflow:visible;background:none}
.kdps.no-js .kdps__panel{position:relative;inset:auto;opacity:1;visibility:visible;
  margin:0 0 12px;border-radius:var(--kdps-radius);overflow:hidden}
.kdps.no-js .kdps__panel img{height:auto}
.kdps.no-js .kdps__nav,.kdps.no-js .kdps__thumbwrap,.kdps.no-js .kdps__count{display:none}

.kdps .kdps__dl{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.95);color:var(--hcs-blue);text-decoration:none;border-bottom:0;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:var(--kdps-radius);box-shadow:0 2px 10px rgba(0,0,0,.2);
  transition:background .15s,color .15s;z-index:6}
.kdps .kdps__dl:hover,.kdps .kdps__dl:focus-visible{background:#fff;color:var(--hcs-teal-dk)}
.kdps .kdps__zoom{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  cursor:zoom-in;padding:0;z-index:5}
.kdps .kdps__zoom:focus-visible{outline:3px solid var(--hcs-peach);outline-offset:-4px}

.kdps .kdps__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:48px;height:48px;
  border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--hcs-blue);cursor:pointer;
  box-shadow:0 3px 14px rgba(0,40,60,.28);display:grid;place-items:center;transition:background .15s,color .15s}
.kdps .kdps__nav:hover:not(:disabled),.kdps .kdps__nav:focus-visible{background:var(--hcs-teal);color:#fff}
.kdps .kdps__nav:focus-visible{outline:3px solid var(--hcs-peach);outline-offset:2px}
.kdps .kdps__nav:disabled{opacity:.32;cursor:default}
.kdps .kdps__nav--prev{left:12px}
.kdps .kdps__nav--next{right:12px}

/* thumbnail strip: the tablist */
.kdps .kdps__thumbwrap{position:relative;margin-top:12px;max-width:var(--kdps-max-w);margin-inline:auto}
.kdps .kdps__thumbwrap::before,.kdps .kdps__thumbwrap::after{content:"";position:absolute;top:0;bottom:0;
  width:36px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.kdps .kdps__thumbwrap::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.kdps .kdps__thumbwrap::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.kdps .kdps__thumbwrap.can-l::before{opacity:1}
.kdps .kdps__thumbwrap.can-r::after{opacity:1}

.kdps .kdps__thumbs{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding:3px 0 10px;
  margin:0;list-style:none;scrollbar-width:thin;scrollbar-color:var(--hcs-line) transparent}
.kdps .kdps__thumbs::-webkit-scrollbar{height:6px}
.kdps .kdps__thumbs::-webkit-scrollbar-thumb{background:var(--hcs-line);border-radius:3px}
.kdps .kdps__thumbs::-webkit-scrollbar-track{background:transparent}

.kdps .kdps__thumb{flex:0 0 auto;width:104px;height:72px;padding:0;border:0;background:var(--hcs-sand);
  cursor:pointer;border-radius:var(--kdps-radius);overflow:hidden;position:relative;opacity:.45;
  transition:opacity .2s ease,box-shadow .2s ease;outline-offset:2px}
.kdps .kdps__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kdps .kdps__thumb:hover{opacity:.8}
.kdps .kdps__thumb[aria-selected="true"]{opacity:1;box-shadow:0 0 0 3px var(--hcs-teal)}
.kdps .kdps__thumb:focus-visible{outline:3px solid var(--hcs-peach)}

/* foot */
.kdps .kdps__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:8px;
  max-width:var(--kdps-max-w);margin-inline:auto}
.kdps .kdps__count{flex:0 0 auto;margin:0;font-size:14px;font-variant-numeric:tabular-nums;
  color:var(--hcs-blue);font-weight:700}
.kdps .kdps__hint{margin:12px auto 0;font-size:13px;line-height:1.5;color:var(--hcs-muted);
  max-width:var(--kdps-max-w)}
.kdps .kdps__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* lightbox: one per document, shared by every gallery on the page */
.kdps__lb[hidden]{display:none}
/* z-index: the sibling hcs-day-of-giving plugin puts its confetti canvas at
   10000, which drew coloured particles straight over the photo viewer. A modal
   photo viewer has to be the topmost thing on the page. Long term the right
   answer is a native <dialog> with showModal(), which lands in the browser's
   top layer and escapes z-index arithmetic entirely -- worth doing when this
   component is next opened up. */
.kdps__lb{position:fixed;inset:0;z-index:100000;background:rgba(8,26,34,.94);
  /* minmax(0,1fr), not 1fr: a 1fr track keeps an automatic min-content floor,
     so the middle row grew to the photo's intrinsic height and the image's
     max-height:100% had nothing finite to resolve against. Measured before the
     fix: a 1600x2400 photo rendered 1408x2112 inside a 900px window. */
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:16px;
  --hcs-teal:#206d78;--hcs-blue:#00476c;--hcs-peach:#faaf7c;--kdps-radius:3px}
.kdps__lb *,.kdps__lb *::before,.kdps__lb *::after{box-sizing:border-box}
.kdps__lb .kdps__lbtop{display:flex;justify-content:flex-end}
.kdps__lb .kdps__lbclose{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff;
  border-radius:var(--kdps-radius);padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;gap:8px;align-items:center}
.kdps__lb .kdps__lbclose:hover,.kdps__lb .kdps__lbclose:focus-visible{background:rgba(255,255,255,.14);border-color:#fff}
.kdps__lb .kdps__lbstage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden}
.kdps__lb .kdps__lbstage img{max-width:100%;width:auto;height:auto;
  /* A viewport-relative cap rather than max-height:100%. The percentage does
     not resolve against the centred grid area here, so the box kept its
     intrinsic ratio height and a tall photo ran far past the window
     (measured: 1600x2400 rendered 1408x2112 in a 900px window). The subtracted
     space is the lightbox padding plus the close bar and the download bar.
     Never scales a photo up: width/height stay auto. */
  max-height:calc(100vh - 140px);
  object-fit:contain;object-position:center center;border-radius:var(--kdps-radius)}
.kdps__lb .kdps__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--hcs-blue);cursor:pointer;
  display:grid;place-items:center}
.kdps__lb .kdps__lbnav:disabled{opacity:.32;cursor:default}
.kdps__lb .kdps__lbnav--prev{left:4px}
.kdps__lb .kdps__lbnav--next{right:4px}
.kdps__lb .kdps__lbfoot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
  justify-content:space-between;padding-top:14px;color:#e8eef0;font-size:14px}
.kdps__lb .kdps__lbdl{display:inline-flex;align-items:center;gap:9px;background:var(--hcs-peach);
  color:#22303a;text-decoration:none;border-bottom:0;font-weight:700;font-size:14px;padding:11px 20px;
  border-radius:var(--kdps-radius)}
.kdps__lb :focus-visible{outline:3px solid var(--hcs-peach);outline-offset:2px}

@media (max-width:640px){
  /* On a phone the column is already narrow, so the width cap would only make
     the photo smaller for no reason. Let it use the full column. */
  .kdps.kdps{--kdps-max-h:none;--kdps-max-w:none}
  .kdps .kdps__stage{aspect-ratio:4/3;max-height:none;max-width:none}
  .kdps .kdps__thumb{width:78px;height:56px}
  .kdps .kdps__nav{width:40px;height:40px}
  .kdps .kdps__dlall{width:100%;justify-content:center}
}

/* The brief treats this as a hard gate: disable transitions, do not shorten. */
@media (prefers-reduced-motion:reduce){
  .kdps .kdps__panel{transition:none!important}
  .kdps .kdps__thumbs{scroll-behavior:auto}
  .kdps .kdps__nav,.kdps .kdps__thumb,.kdps .kdps__dl,.kdps .kdps__dlall{transition:none!important}
}