/* Paradise Community Slider — portable, theme-agnostic.
   Scoped under .pcs so it cannot collide with a host theme. */

/* Host-theme reset. Every site in the network runs a different theme, and
   readable-measure rules like `p, li { max-width: 65ch }` will otherwise
   squeeze the slide. Reset only inside .pcs, only what the slider uses. */
.pcs, .pcs *{max-width:none !important;float:none !important}
.pcs ul, .pcs ol, .pcs li{list-style:none !important;margin:0 !important;padding:0 !important}
.pcs p, .pcs h2, .pcs figure{margin:0}
.pcs img{border-radius:0;box-shadow:none}
.pcs a{text-decoration:none}
.pcs button{font:inherit;margin:0;text-transform:none}

.pcs{
  --pcs-ink:#16211c; --pcs-body:#33403a; --pcs-muted:#5c6b64;
  --pcs-surface:#ffffff; --pcs-line:#d9d2c4; --pcs-line-strong:#74837c;
  --pcs-accent:#1f4a3a; --pcs-gold:#dfba66; --pcs-radius:14px;
  --pcs-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  background:#f7f5f0; border-top:1px solid var(--pcs-line);
  padding-block:clamp(3rem,6vw,5rem);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--pcs-body);
}
.pcs *,.pcs *::before,.pcs *::after{box-sizing:border-box}
.pcs__inner{width:100%;max-width:1180px !important;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

.pcs__eyebrow{margin:0 0 .6rem;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a6430}
.pcs__heading{margin:0 0 .6rem;font-size:clamp(1.75rem,1.3rem + 1.7vw,2.7rem);line-height:1.15;color:var(--pcs-ink);
  font-family:var(--pcs-serif);font-weight:600;letter-spacing:-.01em}
.pcs__intro{margin:0 0 2rem;max-width:62ch !important;font-size:clamp(1.02rem,.98rem + .2vw,1.18rem);line-height:1.6;color:var(--pcs-body)}

.pcs__viewport{position:relative}

/* All slides share one grid cell, so the track sizes itself to the tallest
   card and no slide ever switches between absolute and relative flow. */
.pcs__track{display:grid;grid-template-areas:"pcs";align-items:stretch}

.pcs__slide{grid-area:pcs;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s;pointer-events:none}
.pcs__slide.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto;z-index:1}

/* ---- The card: one full-bleed image, everything else layered on top ---- */
.pcs__card{position:relative;display:block;overflow:hidden;border-radius:var(--pcs-radius);
  min-height:clamp(420px,44vw,560px);background:var(--pcs-accent);
  box-shadow:0 1px 2px rgba(20,49,38,.08),0 18px 46px rgba(20,49,38,.16)}

.pcs__media{position:absolute;inset:0;z-index:0}
/* Bias the crop downward. These are landscape aerials with a lot of sky, and
   the card is wider than the source, so a centred crop shows mostly sky while
   the subject sits behind the scrim. Panning down puts the subject in the
   clear upper half. */
.pcs__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pcs-focal,50% 60%)}

/* Readability scrim. The bottom stop is the community accent at full strength,
   so the text always sits on a known colour rather than on whatever the
   photograph happens to be doing that day — contrast is measurable, not lucky. */
.pcs__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--pcs-accent) 10%, transparent) 32%,
      color-mix(in srgb, var(--pcs-accent) 86%, #06110c) 58%,
      color-mix(in srgb, var(--pcs-accent) 97%, #06110c) 100%)}

/* Browsers without color-mix still get a safe dark scrim. */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .pcs__scrim{background:linear-gradient(180deg,rgba(6,17,12,0) 0%,rgba(6,17,12,.12) 32%,rgba(6,17,12,.88) 58%,rgba(6,17,12,.97) 100%)}
}

/* A community with no photograph yet: the accent becomes the whole card. */
.pcs__card--nophoto .pcs__scrim{
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--pcs-accent) 88%, #ffffff) 0%,
    var(--pcs-accent) 45%,
    color-mix(in srgb, var(--pcs-accent) 70%, #000000) 100%)}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .pcs__card--nophoto .pcs__scrim{background:var(--pcs-accent)}
}

.pcs__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;min-height:inherit;gap:.55rem;
  padding:clamp(1.75rem,4vw,3.25rem);color:#fff}

/* Any uploaded logo is rendered as a solid white mark. A community logo is
   normally drawn for a light background; forcing it white is the only thing
   that stays legible on a photograph and keeps all five cards consistent. */
.pcs__logomark{max-height:clamp(58px,7vw,88px) !important;width:auto !important;height:auto;
  margin-bottom:.4rem;filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.5))}

.pcs__logo{margin:0;font-family:var(--pcs-serif);font-weight:600;color:#fff;
  font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);line-height:1.06;letter-spacing:-.015em;
  text-shadow:0 2px 18px rgba(0,0,0,.4)}

.pcs__place{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;
  font-size:clamp(.82rem,.78rem + .15vw,.95rem);font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--pcs-gold)}
.pcs__soon{display:inline-block;padding:.28rem .62rem;border-radius:999px;letter-spacing:.14em;font-size:.72rem;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);color:#fff}

/* One line, always. Blurbs are written to fit — keep them under ~50 characters
   or this will overflow the card on a narrow desktop window. */
.pcs__blurb{margin:.5rem 0 0;color:#fff;white-space:nowrap;
  font-size:clamp(1.08rem,1rem + .45vw,1.4rem);line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.35)}

.pcs__btn{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.9rem;border-radius:4px;font-weight:700;
  font-size:clamp(1rem,.95rem + .2vw,1.1rem);letter-spacing:.01em;
  background:#fff;color:var(--pcs-accent);border:1px solid #fff;
  transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.pcs__btn:hover,.pcs__btn:focus-visible{color:var(--pcs-accent);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.3)}

/* ---- Controls ---- */
.pcs__nav{position:absolute;top:calc(50% - 26px);z-index:4;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.97);border:1px solid var(--pcs-line-strong);color:var(--pcs-ink);
  font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 3px 14px rgba(20,49,38,.22)}
.pcs__nav--prev{left:-16px}
.pcs__nav--next{right:-16px}
.pcs__nav:hover{background:#fff}

.pcs__controls{display:flex;align-items:center;gap:1rem;margin-top:1.4rem}
.pcs__playpause{width:44px;height:44px;min-width:44px;border-radius:50%;border:1px solid var(--pcs-line-strong);
  background:#fff;color:var(--pcs-ink);cursor:pointer;display:grid;place-items:center;font-size:.72rem;line-height:1}
.pcs__playpause .pcs__play-icon{display:none}
.pcs__playpause[data-state="paused"] .pcs__pause-icon{display:none}
.pcs__playpause[data-state="paused"] .pcs__play-icon{display:block;font-size:.9rem}

.pcs__dots{display:flex;gap:.4rem;flex-wrap:wrap}
.pcs__dot{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.pcs__dot::after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:var(--pcs-line-strong);transition:background .2s ease,width .2s ease}
.pcs__dot.is-active::after{background:var(--pcs-accent);width:30px;border-radius:6px}

.pcs__live{margin:.85rem 0 0;font-size:.85rem;color:var(--pcs-muted);min-height:1em}
.pcs__sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pcs :focus-visible{outline:3px solid #8a6430;outline-offset:3px;border-radius:3px}
.pcs__card :focus-visible{outline-color:#fff}

@media (max-width:820px){
  .pcs__card{min-height:clamp(420px,86vw,520px)}
  .pcs__nav{width:46px;height:46px;top:calc(50% - 23px);font-size:1.4rem}
  .pcs__nav--prev{left:-6px}
  .pcs__nav--next{right:-6px}
  .pcs__blurb{white-space:normal;max-width:34ch !important}
}

@media (prefers-reduced-motion:reduce){
  .pcs__slide{transition:none}
  .pcs__btn{transition:none}
}