/*
  CurioSpark v8.33.0 — Visual Storytelling + Content Polish
  Scope: public-facing presentation only. This stylesheet is intentionally scoped to
  .public-visual-storytelling and does not alter shared controllers, registration,
  Payhip, auth, APIs, mobile registration, or the global styles.css surface.
*/
.public-visual-storytelling {
  --cs-story-purple: #4b176c;
  --cs-story-ink: #30253a;
  --cs-story-muted: #6d5f73;
  --cs-story-gold: #f6c63c;
  --cs-story-paper: #fffdf8;
  --cs-story-lilac: #f8f0ff;
}

.public-visual-storytelling .cs-photo-story,
.public-visual-storytelling .cs-photo-break,
.public-visual-storytelling .cs-calendar-moment,
.public-visual-storytelling .cs-team-story,
.public-visual-storytelling .cs-resource-story {
  position: relative;
  display: grid;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.public-visual-storytelling .cs-photo-story,
.public-visual-storytelling .cs-photo-break,
.public-visual-storytelling .cs-team-story,
.public-visual-storytelling .cs-resource-story {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
}

.public-visual-storytelling .cs-photo-story-copy,
.public-visual-storytelling .cs-photo-break-copy,
.public-visual-storytelling .cs-calendar-moment-copy,
.public-visual-storytelling .cs-team-story-copy,
.public-visual-storytelling .cs-resource-story-copy {
  position: relative;
  z-index: 1;
}

.public-visual-storytelling .cs-photo-story h2,
.public-visual-storytelling .cs-photo-break h2,
.public-visual-storytelling .cs-calendar-moment h2,
.public-visual-storytelling .cs-team-story h2,
.public-visual-storytelling .cs-resource-story h2 {
  max-width: 15ch;
  margin: .35rem 0 .85rem;
  color: var(--cs-story-purple);
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-size: clamp(2rem, 4.2vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.public-visual-storytelling .cs-photo-story p:not(.eyebrow),
.public-visual-storytelling .cs-photo-break p:not(.eyebrow),
.public-visual-storytelling .cs-calendar-moment p:not(.eyebrow),
.public-visual-storytelling .cs-team-story p:not(.eyebrow),
.public-visual-storytelling .cs-resource-story p:not(.eyebrow) {
  max-width: 61ch;
  color: var(--cs-story-muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.public-visual-storytelling .cs-photo-story .button,
.public-visual-storytelling .cs-photo-break .button {
  margin-top: .55rem;
}

.public-visual-storytelling .cs-photo-story-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.45vw, 1.1rem);
  min-height: clamp(27rem, 45vw, 37rem);
}

.public-visual-storytelling .cs-photo-frame,
.public-visual-storytelling .cs-photo-break figure,
.public-visual-storytelling .cs-calendar-moment figure,
.public-visual-storytelling .cs-team-story figure,
.public-visual-storytelling .cs-resource-story figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(75, 23, 108, .13);
  border-radius: clamp(1.05rem, 2.2vw, 1.65rem);
  background: #eadff0;
  box-shadow: 0 20px 46px rgba(66, 16, 97, .12);
}

.public-visual-storytelling .cs-photo-frame::after,
.public-visual-storytelling .cs-photo-break figure::after,
.public-visual-storytelling .cs-calendar-moment figure::after,
.public-visual-storytelling .cs-team-story figure::after,
.public-visual-storytelling .cs-resource-story figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 4, 29, 0) 48%, rgba(20, 4, 29, .33) 100%);
}

.public-visual-storytelling .cs-photo-frame--tall { grid-row: span 2; }
.public-visual-storytelling .cs-photo-frame img,
.public-visual-storytelling .cs-photo-break img,
.public-visual-storytelling .cs-calendar-moment img,
.public-visual-storytelling .cs-team-story img,
.public-visual-storytelling .cs-resource-story img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .65s ease;
}
.public-visual-storytelling .cs-photo-frame:hover img,
.public-visual-storytelling .cs-photo-break figure:hover img,
.public-visual-storytelling .cs-calendar-moment figure:hover img,
.public-visual-storytelling .cs-team-story figure:hover img,
.public-visual-storytelling .cs-resource-story figure:hover img { transform: scale(1.035); }

.public-visual-storytelling .cs-photo-frame figcaption {
  position: absolute;
  z-index: 1;
  left: .95rem;
  right: .95rem;
  bottom: .85rem;
  color: #fff;
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-size: clamp(1.05rem, 1.75vw, 1.35rem);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.public-visual-storytelling .cs-photo-break-media { min-width: 0; }
.public-visual-storytelling .cs-photo-break-media--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: stretch;
  gap: clamp(.75rem, 1.5vw, 1.1rem);
  min-height: clamp(23rem, 36vw, 31rem);
}
.public-visual-storytelling .cs-photo-break-media--split figure:first-child { min-height: 100%; }
.public-visual-storytelling .cs-photo-break-media--split figure:last-child { min-height: 100%; }
.public-visual-storytelling .cs-photo-break--vision .cs-photo-break-media { order: 2; }
.public-visual-storytelling .cs-photo-break--vision .cs-photo-break-copy { order: 1; }

.public-visual-storytelling .cs-photo-break-media--stacked {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(.75rem, 1.5vw, 1.1rem);
  min-height: clamp(22rem, 33vw, 29rem);
}
.public-visual-storytelling .cs-photo-break-media--stacked figure:first-child { min-height: 100%; }
.public-visual-storytelling .cs-photo-break-media--stacked figure:last-child { margin-top: clamp(1rem, 4vw, 3.25rem); margin-bottom: clamp(1rem, 4vw, 3.25rem); }

.public-visual-storytelling .cs-photo-break--programs {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(75, 23, 108, .1);
  border-radius: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(255, 248, 224, .76), rgba(251, 243, 255, .78));
  box-shadow: 0 19px 44px rgba(69, 19, 102, .075);
}
.public-visual-storytelling .cs-photo-break-media--programs figure { height: 100%; min-height: clamp(18rem, 29vw, 25rem); }
.public-visual-storytelling .cs-photo-break--programs img { object-position: 52% center; }

.public-visual-storytelling .cs-calendar-moment {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  border-radius: clamp(1.3rem, 3vw, 2rem);
  background: linear-gradient(130deg, #fff8dd, #f9efff 62%, #fff);
  box-shadow: 0 18px 42px rgba(69, 19, 102, .08);
}
.public-visual-storytelling .cs-calendar-moment-media {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(.65rem, 1.25vw, 1rem);
  min-height: clamp(15rem, 24vw, 20rem);
}
.public-visual-storytelling .cs-calendar-moment-media figure:first-child { min-height: 100%; }
.public-visual-storytelling .cs-calendar-moment-media figure:last-child { min-height: 100%; }

.public-visual-storytelling .cs-team-story {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(75, 23, 108, .1);
  border-radius: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(249, 239, 255, .84), rgba(255, 250, 236, .78));
}
.public-visual-storytelling .cs-team-story-media figure { height: clamp(21rem, 32vw, 29rem); }
.public-visual-storytelling .cs-team-story img { object-position: 48% center; }

.public-visual-storytelling .cs-resource-story {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
.public-visual-storytelling .cs-resource-story-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.65rem, 1.25vw, 1rem);
  min-height: clamp(20rem, 32vw, 28rem);
}
.public-visual-storytelling .cs-resource-story-media figure:first-child { margin-top: clamp(1.2rem, 4vw, 3rem); margin-bottom: 0; }
.public-visual-storytelling .cs-resource-story-media figure:last-child { margin-bottom: clamp(1.2rem, 4vw, 3rem); margin-top: 0; }

/* Resource previews: let the existing product artwork do more of the talking without touching its links or Payhip URLs. */
.public-visual-storytelling .resource-card-grid-restored { gap: clamp(1rem, 2vw, 1.4rem); }
.public-visual-storytelling .resource-card-grid-restored .resource-feature-card {
  position: relative;
  grid-template-columns: minmax(155px, .7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border-radius: 1.35rem;
  border-color: rgba(75, 23, 108, .14);
  box-shadow: 0 15px 34px rgba(69, 19, 102, .07);
  transition: transform .22s ease, box-shadow .22s ease;
}
.public-visual-storytelling .resource-card-grid-restored .resource-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 21px 44px rgba(69, 19, 102, .12);
}
.public-visual-storytelling .resource-card-grid-restored .resource-feature-card img {
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 178px;
  border-radius: 0;
  object-fit: cover;
}
.public-visual-storytelling .resource-card-grid-restored .resource-feature-card > div { padding-block: clamp(.15rem, 1vw, .5rem); }
.public-visual-storytelling .resource-card-grid-restored .resource-feature-card h2 { max-width: 17ch; }

/* Existing dynamic program markup stays controller-owned; these rules simply make its existing visual badges feel deliberate. */
.public-visual-storytelling .program-market-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(75, 23, 108, .15);
  box-shadow: 0 16px 38px rgba(69, 19, 102, .085);
  transition: transform .22s ease, box-shadow .22s ease;
}
.public-visual-storytelling .program-market-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #f6c63c, #b05bcb 54%, #5b1c78);
}
.public-visual-storytelling .program-market-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(69, 19, 102, .14); }
.public-visual-storytelling .program-card-heading-row { align-items: flex-start; gap: 1rem; }
.public-visual-storytelling .program-card-visual { border: 1px solid rgba(75, 23, 108, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 22px rgba(61, 17, 87, .1); }
.public-visual-storytelling .program-card-actions .button { min-height: 2.75rem; }

/* Team portraits and biography cards retain the existing details/summary behavior while feeling more like a public introduction. */
.public-visual-storytelling .team-grid-compact { gap: clamp(1rem, 2vw, 1.45rem); }
.public-visual-storytelling .team-card-placard {
  overflow: hidden;
  border-radius: 1.5rem;
  border-color: rgba(75, 23, 108, .14);
  box-shadow: 0 16px 38px rgba(69, 19, 102, .08);
}
.public-visual-storytelling .team-card-placard .team-photo-stage { min-height: 17rem; }
.public-visual-storytelling .team-card-placard .team-photo-stage img { transition: transform .65s ease; }
.public-visual-storytelling .team-card-placard:hover .team-photo-stage img { transform: scale(1.035); }
.public-visual-storytelling .team-card-copy { padding: clamp(1.1rem, 2vw, 1.5rem); }
.public-visual-storytelling .team-card-copy details { margin-top: 1rem; padding-top: .95rem; border-top: 1px solid rgba(75, 23, 108, .11); }
.public-visual-storytelling .team-card-copy summary { color: var(--cs-story-purple); font-weight: 850; cursor: pointer; }

.public-visual-storytelling .category-image-card,
.public-visual-storytelling .resource-feature-card { scroll-margin-top: 6rem; }

@media (max-width: 900px) {
  .public-visual-storytelling .cs-photo-story,
  .public-visual-storytelling .cs-photo-break,
  .public-visual-storytelling .cs-calendar-moment,
  .public-visual-storytelling .cs-team-story,
  .public-visual-storytelling .cs-resource-story { grid-template-columns: 1fr; }
  .public-visual-storytelling .cs-photo-break--vision .cs-photo-break-media,
  .public-visual-storytelling .cs-photo-break--vision .cs-photo-break-copy { order: initial; }
  .public-visual-storytelling .cs-photo-break-copy h2,
  .public-visual-storytelling .cs-calendar-moment-copy h2,
  .public-visual-storytelling .cs-team-story-copy h2,
  .public-visual-storytelling .cs-resource-story-copy h2 { max-width: 21ch; }
  .public-visual-storytelling .cs-resource-story-media { max-width: 43rem; }
  .public-visual-storytelling .cs-team-story { grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); }
}

@media (max-width: 680px) {
  .public-visual-storytelling .cs-photo-story,
  .public-visual-storytelling .cs-photo-break,
  .public-visual-storytelling .cs-calendar-moment,
  .public-visual-storytelling .cs-team-story,
  .public-visual-storytelling .cs-resource-story { margin-top: 3rem; margin-bottom: 3rem; }
  .public-visual-storytelling .cs-photo-story-gallery { min-height: 24rem; }
  .public-visual-storytelling .cs-photo-break-media--split,
  .public-visual-storytelling .cs-photo-break-media--stacked { min-height: 21rem; }
  .public-visual-storytelling .cs-calendar-moment-media { min-height: 15rem; }
  .public-visual-storytelling .cs-photo-story h2,
  .public-visual-storytelling .cs-photo-break h2,
  .public-visual-storytelling .cs-calendar-moment h2,
  .public-visual-storytelling .cs-team-story h2,
  .public-visual-storytelling .cs-resource-story h2 { max-width: none; }
  .public-visual-storytelling .cs-photo-break--programs { padding: .85rem; }
  .public-visual-storytelling .cs-team-story { grid-template-columns: 1fr; }
  .public-visual-storytelling .cs-team-story-media figure { height: 22rem; }
  .public-visual-storytelling .resource-card-grid-restored .resource-feature-card { grid-template-columns: 1fr; }
  .public-visual-storytelling .resource-card-grid-restored .resource-feature-card img { min-height: 210px; max-height: 245px; }
  .public-visual-storytelling .resource-card-grid-restored .resource-feature-card > div { padding: 1.05rem 1.15rem 1.25rem; }
}

@media (max-width: 460px) {
  .public-visual-storytelling .cs-photo-story-gallery { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: .55rem; min-height: 21.5rem; }
  .public-visual-storytelling .cs-photo-frame figcaption { left: .65rem; right: .65rem; bottom: .6rem; font-size: 1rem; }
  .public-visual-storytelling .cs-photo-break-media--split,
  .public-visual-storytelling .cs-photo-break-media--stacked { gap: .55rem; min-height: 18rem; }
  .public-visual-storytelling .cs-calendar-moment { padding: .85rem; }
  .public-visual-storytelling .cs-calendar-moment-media { gap: .55rem; min-height: 13rem; }
  .public-visual-storytelling .program-market-card { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .public-visual-storytelling .cs-photo-frame img,
  .public-visual-storytelling .cs-photo-break img,
  .public-visual-storytelling .cs-calendar-moment img,
  .public-visual-storytelling .cs-team-story img,
  .public-visual-storytelling .cs-resource-story img,
  .public-visual-storytelling .resource-card-grid-restored .resource-feature-card,
  .public-visual-storytelling .program-market-card { transition: none; }
}