/* ==========================================================================
   cr-photo.css — shared photography treatment (2026-10-19). One look for
   real photos and Henry renders on every page kit (v3 .sv-wrap pages, the
   older .wrap pages, the homepage): rounded frame, soft shadow, small-caps
   caption. Same treatment as about-us.html's .ab-photo.

   .crp-photo        figure: .crp-photo-img wrapper + optional figcaption
                     (--wide 16:10, --square 1:1, --tall 4:5; default 4:3)
   .crp-gallery      2/3/4-up row of .crp-photo; swipes on phones
   .crp-band         photo with overlaid copy (.k kicker, b title, .t text)
   .crp-cardphoto    inset photo at the top of an existing card
   .crp-art          drops a photo into a .sv-panel-art box, keeping its tag
   Captions flip to light text inside .sv-dark sections or .crp-on-dark.
   ========================================================================== */
.crp-photo { margin: 0; }
.crp-photo-img {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3; border-radius: 18px; background: #e7efe8;
  box-shadow: 0 1px 2px rgba(11, 61, 26, .06), 0 22px 40px -22px rgba(11, 61, 26, .45);
}
.crp-photo-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(11, 61, 26, .08);
  background: linear-gradient(180deg, transparent 62%, rgba(5, 32, 13, .16) 100%);
}
.crp-photo-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.crp-photo:hover .crp-photo-img img { transform: scale(1.04); }
.crp-photo--wide .crp-photo-img { aspect-ratio: 16 / 10; }
.crp-photo--square .crp-photo-img { aspect-ratio: 1 / 1; }
.crp-photo--tall .crp-photo-img { aspect-ratio: 4 / 5; }
html body .crp-photo figcaption,
html body .crp-photo > p { margin: 14px 2px 0; font: 400 14.5px/1.5 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #4a6150; text-align: left; }
html body .crp-photo figcaption b,
html body .crp-photo > p b {
  display: block; margin-bottom: 3px;
  font: 700 12px/1.3 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: #146b2f;
}

.crp-gallery {
  --crp-bleed: 16px;
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crp-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crp-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wrap .crp-gallery { --crp-bleed: 28px; }
@media (max-width: 980px) {
  .crp-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.crp-band {
  position: relative; margin: 0; min-height: 300px; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  border-radius: 22px; background: #05200d; color: #fff;
  box-shadow: 0 26px 50px -26px rgba(11, 61, 26, .55);
}
.crp-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.crp-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5, 32, 13, .95) 0%, rgba(5, 32, 13, .82) 38%, rgba(5, 32, 13, .18) 78%);
}
.crp-band--right { justify-content: flex-end; }
.crp-band--right::before { background: linear-gradient(270deg, rgba(5, 32, 13, .95) 0%, rgba(5, 32, 13, .82) 38%, rgba(5, 32, 13, .18) 78%); }
html body .crp-band figcaption { max-width: 440px; padding: 36px 40px; display: flex; flex-direction: column; gap: 10px; color: #fff; text-align: left; }
html body .crp-band .k { font: 700 12px/1.3 'Outfit', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #b9f24a; }
html body .crp-band b { font: 800 clamp(24px, 2.4vw, 32px)/1.08 'Outfit', system-ui, sans-serif; letter-spacing: -.015em; color: #fff; }
html body .crp-band .t { font: 400 15.5px/1.6 'DM Sans', system-ui, sans-serif; color: rgba(255, 255, 255, .84); }
html body .crp-band .t a { color: #b9f24a; font-weight: 700; }

.crp-cardphoto {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  margin: 0 0 24px; border-radius: 18px; background: #e7efe8;
  box-shadow: 0 16px 30px -18px rgba(11, 61, 26, .5);
}
.crp-cardphoto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
:hover > .crp-cardphoto img { transform: scale(1.04); }

.sv-panel-art.crp-art { background: #05200d; }
.sv-panel-art.crp-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.sv-panel-art.crp-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 32, 13, 0) 55%, rgba(5, 32, 13, .55) 100%); pointer-events: none; }
.sv-panel-art.crp-art .sv-art-tag { z-index: 1; }
.sv-panel:hover .sv-panel-art.crp-art > img { transform: scale(1.04); }

/* Darkened photo behind a .bn-panel-art tile (events page "who it's for") */
.bn-panel-art > .crp-panel-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.95); }
.bn-panel-art > .crp-panel-photo + * { position: relative; }
.bn-panel-art:has(> .crp-panel-photo) .bn-panel-ic { position: relative; z-index: 1; }

/* v3 step cards with a photo on top (.sv-steps.crp-steps) — matches items.html */
.crp-steps .sv-step { padding-top: 16px; overflow: hidden; }
.crp-step-img { margin: -2px -10px 16px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #e7efe8; }
.crp-step-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.crp-steps .sv-step:hover .crp-step-img img { transform: scale(1.06); }
:is(.sv-dark, .crp-on-dark) .crp-step-img { background: #0f2016; }

/* Captions on dark sections */
html body :is(.sv-dark, .crp-on-dark) .crp-photo figcaption,
html body :is(.sv-dark, .crp-on-dark) .crp-photo > p { color: rgba(255, 255, 255, .74); }
html body :is(.sv-dark, .crp-on-dark) .crp-photo figcaption b,
html body :is(.sv-dark, .crp-on-dark) .crp-photo > p b { color: #b9f24a; }
:is(.sv-dark, .crp-on-dark) .crp-photo-img { background: #0f2016; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .7); }

/* Phones: rows become a swipeable strip instead of three stacked photos */
@media (max-width: 760px) {
  .crp-gallery, .crp-gallery--2, .crp-gallery--4 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    gap: 14px; margin-inline: calc(-1 * var(--crp-bleed)); padding: 4px var(--crp-bleed) 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--crp-bleed);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .crp-gallery::-webkit-scrollbar { display: none; }
  .crp-gallery > * { scroll-snap-align: start; }
  .crp-band { min-height: 340px; align-items: flex-end; }
  .crp-band::before, .crp-band--right::before { background: linear-gradient(0deg, rgba(5, 32, 13, .96) 0%, rgba(5, 32, 13, .72) 55%, rgba(5, 32, 13, .12) 100%); }
  html body .crp-band figcaption { padding: 24px; max-width: none; }
}

/* Dark theme */
html[data-theme="dark"] body .crp-photo figcaption,
html[data-theme="dark"] body .crp-photo > p { color: #b8c8bb; }
html[data-theme="dark"] body .crp-photo figcaption b,
html[data-theme="dark"] body .crp-photo > p b { color: #5ef88a; }
html[data-theme="dark"] .crp-photo-img,
html[data-theme="dark"] .crp-cardphoto { background: #0f2016; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .7); }

@media (prefers-reduced-motion: reduce) {
  .crp-photo-img img, .crp-cardphoto img, .sv-panel-art.crp-art > img, .crp-step-img img { transition: none; }
  .crp-photo:hover .crp-photo-img img, :hover > .crp-cardphoto img, .sv-panel:hover .sv-panel-art.crp-art > img, .crp-steps .sv-step:hover .crp-step-img img { transform: none; }
}