/* The San Francesco di Paola case study (san-francesco-di-paola.html, 7 Nov). Loaded after about-us.css, whose hero,
   sheet (.bld) and church colours it reuses. */
.cs-hero-g { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.cs-hero .kicker { position: relative; z-index: 1; } /* the heading's box sat over the About Us link (QA, 9 Nov) */
.cs-hero .kicker a { color: inherit; text-decoration: none; }
.cs-hero .kicker a:hover { text-decoration: underline; }
.cs-h1 { max-width: 12ch; }
.cs-addr { margin-top: 18px; font: 600 15px/1.4 var(--sans); color: var(--navy); }
.cs-photo img { aspect-ratio: 4 / 5; object-position: center 30%; }
.cs-photo figcaption, .cs-pics figcaption { padding: 8px 12px; font: 500 12px/1.4 var(--sans); color: var(--ink-soft, #44506a); background: #fff; }
.cs-photo figcaption a, .cs-pics figcaption a { color: inherit; }

.cs-job-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cs-fig .sx-drawing { height: auto; max-height: min(calc(100vh - 200px), 640px); }
.cs-dl { margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--navy); }
.cs-dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(16, 45, 123, .18); }
.cs-dl dt { font: 600 12.5px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep, #0a6f8f); }
.cs-dl dd { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--navy); }

.cs-story-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cs-story p { margin-top: 16px; max-width: 60ch; }
.cs-pics { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.cs-pics figure { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 18px 40px -24px rgba(16, 45, 123, .45); }
.cs-pics img { display: block; width: 100%; height: auto; }

.cs-line { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--cyan-light, #7fd3f0); }
.cs-line li { position: relative; padding: 22px 16px 0 0; }
.cs-line li::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); border: 2px solid var(--cyan-light, #7fd3f0); }
.cs-line li:last-child::before { background: var(--cyan-light, #7fd3f0); }
.cs-line b { display: block; font: 700 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--display, 'Jost', sans-serif); color: #fff; }
.cs-line span { display: block; margin-top: 8px; font: 500 14px/1.45 var(--sans); color: var(--on-navy); }

.cs-src ul { margin: 14px 0 0; padding-left: 1.1em; display: grid; gap: 8px; font: 500 14px/1.5 var(--sans); color: var(--ink-soft, #44506a); }
.cs-src a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the exterior goes on from the ground up when the drawing comes into view */
.js .cs-fig .fin { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1) .2s; }
.js .cs-fig.play .fin, .rm .cs-fig .fin { clip-path: inset(0 0 0 0); }
.rm .cs-fig .fin { transition: none; }

@media (max-width: 900px) {
  .cs-hero-g, .cs-job-g, .cs-story-g { grid-template-columns: minmax(0, 1fr); }
  .cs-photo { max-width: 460px; }
  .cs-line { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--cyan-light, #7fd3f0); margin-left: 6px; }
  .cs-line li { padding: 0 0 22px 22px; }
  .cs-line li::before { left: -8px; top: 4px; }
  .cs-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}