/* Case studies (web/site/work/*.html), on top of site.css. Same quiet language: paper, ink, teal; yellow only as a
   highlighter. Bump ?v= in the three pages when this file changes. */

/* Opening: who they are, then their homepage on a computer with the phone view over its corner (site.css .work-shots) */
.case-hero { padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.crumb { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 0.75rem; font-weight: 600; font-size: 1rem; }
.case-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1; letter-spacing: -0.035em; max-width: 15em; }
.case-hero .lede { max-width: 40rem; }
.case-facts { display: grid; gap: 0; margin: 2rem 0 0; border-top: 1px solid var(--rule); max-width: 40rem; }
.case-facts div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.case-facts dt { font-weight: 600; }
.case-facts dd { margin: 0; color: var(--soft); overflow-wrap: anywhere; }
.case-facts a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.6rem; font-weight: 600; }
.case-hero .work-shots { margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; max-width: 62rem; }
.case-note { margin: 0.75rem 0 0; font-size: 1rem; color: var(--soft); }

/* Body copy beside its heading on wide screens */
.case-split { display: grid; gap: 1.5rem var(--gap); }
.case-copy { max-width: 40rem; }
.case-copy p { color: var(--soft); }
.case-copy p:last-child { margin-bottom: 0; }
.case-copy strong { color: var(--ink); font-weight: 600; }

/* Section screenshots: a computer-width shot and a phone-width shot side by side */
.shots { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; }
.shot { margin: 0; display: grid; gap: 0.75rem; align-content: start; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--mist); }
.shot-phone { justify-self: center; width: min(100%, 20rem); }
.shot-phone img { border: 3px solid var(--ink); border-radius: 14px; }
.shot figcaption { font-size: 1rem; color: var(--soft); }

.live { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.live p { margin: 0; font-size: 1rem; color: var(--soft); }

/* Closing call to action: the two offers */
.offers { display: grid; gap: var(--gap); }
.offers h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); margin-bottom: 1rem; }
.offers p { max-width: 30rem; }
.offers .btn { margin-top: 0.5rem; }
.btn-light { background: #fff; color: var(--teal); }
.btn-light:hover { background: var(--mist); color: var(--teal); }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--teal); }
.offers > div + div { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: var(--gap); }

/* The other case studies */
.more { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 2vw, 2rem); max-width: 40rem; }
.more a { display: grid; gap: 0.75rem; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.25; }
.more a:hover span { text-decoration: underline; }
.more img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 3px solid var(--ink); border-radius: 12px; }
.more small { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 1rem; color: var(--soft); }

@media (min-width: 52rem) {
  .case-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .shots { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); align-items: start; }
  .shot-phone { justify-self: stretch; width: auto; }
  .offers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .offers > div + div { border-top: 0; padding-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.22); padding-left: var(--gap); }
}