/* Admin Reports Unification — page-specific (shared: globalstyle.css, font.css) */

.case-page {
overflow-x: hidden;
}

/* ── Hero ── */
.case-hero {
position: relative;
padding-top: var(--page-header-title-padding-block);
overflow: hidden;
background-image: url("../img/hero.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

.case-hero__inner {
position: relative;
z-index: 1;
text-align: center;
}

.case-hero__title {
margin: 0 auto 1.75rem;
max-width: 20ch;
}

.case-hero__image {
display: block;
width: 100%;
max-width: min(100%, 960px);
max-height: min(72vh, 560px);
height: auto;
margin: 0 auto;
object-fit: contain;
object-position: center top;
}

/* ── Overview (equal-height columns on desktop) ── */
.case-overview {
padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.case-overview__grid {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: clamp(2rem, 5rem, 5rem);
align-items: stretch;
}

.case-overview__meta-col {
min-height: 0;
display: flex;
flex-direction: column;
}

.case-overview__copy {
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}


.case-meta dt {
margin-top: 1rem;
}

.case-meta dt:first-child { margin-top: 0; }

.case-meta dd {
margin: 0.2rem 0 0;
}

/* Overview body <p>: css/font.css + globalstyle */

/* Challenges section: Surface / Foundational diagram beside intro copy */
.case-prose--challenges > .container > article.case-prose--challenges .case-prose__diagram {
margin: 0;
padding: 0;
text-align: center;
}

.case-prose--challenges > .container > article.case-prose--challenges .case-prose__diagram img {
display: block;
width: 100%;
max-width: min(100%, 489px);
height: auto;
margin-inline: auto;
}

/* Solution header: title left, challenge diagram right */
.case-prose--challenges .case-prose__solution .case-prose__solution-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.case-prose--challenges .case-prose__solution .case-prose__solution-header .case-prose__section-title {
margin: 0;
}

.case-prose--challenges .case-prose__solution .case-prose__challenge-diagram {
margin: 0;
padding: 0;
text-align: center;
}

.case-prose--challenges .case-prose__solution .case-prose__challenge-diagram img {
display: block;
width: 100%;
max-width: min(100%, 489px);
height: auto;
margin-inline: auto;
}

@media (max-width: 768px) {
.case-prose--challenges .case-prose__solution .case-prose__solution-header {
display: block;
}

.case-prose--challenges .case-prose__solution .case-prose__solution-header .case-prose__challenge-diagram {
margin-top: clamp(1rem, 2vw, 1.6rem);
}
}

/* Other solution diagrams in this section keep default spacing */
.case-prose--challenges .case-prose__solution .case-prose__diagram {
margin: clamp(1.25rem, 3vw, 2rem) 0;
padding: 0;
text-align: center;
}

.case-prose--challenges .case-prose__solution .case-prose__diagram img {
display: block;
width: 100%;
max-width: min(100%, 720px);
height: auto;
margin-inline: auto;
}

/* Specific emphasis used in the "Challenges to consider" narrative */
.case-prose--challenges .case-prose__emphasis {
font-weight: 500;
}

/* "Challenges to consider" layout (matches screenshot): title + paragraph on the left,
   diagram on the right. */
.case-prose--challenges > .container > article.case-prose--challenges {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-areas:
    "title title"
    "copy diagram";
  align-items: start;
}

.case-prose--challenges > .container > article.case-prose--challenges .case-prose__section-title {
  grid-area: title;
}

.case-prose--challenges > .container > article.case-prose--challenges .case-prose__subsection {
  grid-area: copy;
  padding-right: 0;
}

.case-prose--challenges > .container > article.case-prose--challenges .case-prose__diagram {
  grid-area: diagram;
  align-self: center;
  justify-self: center;
  width: 100%;
}

.case-prose--challenges > .container > article.case-prose--challenges .case-prose__subsection p {
  max-width: 52ch;
}

@media (max-width: 768px) {
  .case-prose--challenges > .container > article.case-prose--challenges {
    display: block;
  }

  .case-prose--challenges > .container > article.case-prose--challenges .case-prose__subsection p {
    max-width: 85ch;
  }
}

/* ── Gallery (single full-width image in container) ── */
/* Use padding-bottom only — avoid a padding shorthand that sets padding-top: 0 and collapses top spacing */
.case-gallery {
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.case-gallery__figure {
margin: 0;
width: 100%;
max-width: 100%;
text-align: center;
}

.case-gallery__image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin-inline: auto;
}

/* ── Transition panel under gallery (Figma node 2294-151192) ── */
.case-transition {
padding: clamp(5rem, 8vw, 5rem) 0;
}

.case-transition__inner {
position: relative;
z-index: 1;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 24px;
}

.case-transition__panel {
position: relative;
overflow: visible;
background: var(--bg-base);
border-radius: 24px;
box-shadow:
  0 0 0 0.4rem var(--blue-soft),
  0 10px 28px rgba(54, 95, 178, 0.09),
  0 2px 8px rgba(2, 4, 6, 0.06);
padding: clamp(1.5rem, 4vw, 2.5rem);
z-index: 1;
}

.case-transition__blob {
position: absolute;
pointer-events: none;
}

.case-transition__blob--splat {
left: 0;
top: 0;
transform: translate(-45%, -45%);
width: clamp(88px, 11vw, 121px);
height: auto;
z-index: 2; /* above panel edge */
}

.case-transition__blob--circle {
right: 0;
bottom: 0;
transform: translate(45%, 45%);
width: clamp(112px, 13vw, 153px);
height: auto;
z-index: 0; /* behind paper panel */
}

.case-transition__eyebrow,
.case-transition__panel h2,
.case-transition__body,
.case-transition__chips {
position: relative;
z-index: 3;
}

.case-transition__eyebrow {
margin-bottom: 0.5rem;
}

.case-transition__panel h2 {
margin-bottom: 0.9rem;
max-width: 28ch;
}

.case-transition__body {
margin: 0 0 1rem;
max-width: 75ch;
}

.case-transition__chips {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}

.case-transition__chips span {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: var(--white);
border: 1px solid rgba(2, 4, 6, 0.08);
color: var(--text-body);
}

.case-prose__draft-gallery {
display: block;
margin: clamp(1.75rem, 4vw, 2.5rem) auto;
width: 100%;
max-width: 100%;
text-align: center;
}

.case-prose__draft-gallery img {
display: block;
width: 100%;
height: auto;
/* box-shadow: var(--shadow-card); */
}

.case-prose__draft-label {
margin: 0.85rem auto 0;
color: var(--warm-gray);
}

/* Prose sections + lists: css/globalstyle.css + css/font.css */

/* ── Research feedback (uses global .section-block) ── */
.case-feedback-section__flower {
position: absolute;
left: 0;
top: 0;
transform: translate(-32%, -50%);
z-index: 0;
line-height: 0;
pointer-events: none;
}

.case-feedback-section__flower img {
display: block;
width: clamp(72px, 16vw, 118px);
height: auto;
}

.case-feedback-section .case-feedback__inner {
position: relative;
z-index: 1;
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 24px;
}

.case-feedback__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2vw, 1.5rem);
}

.case-quote-card {
background: var(--bg-base);
border-radius: var(--radius-card);
padding: 1.35rem 1.25rem 1.5rem;
box-shadow: var(--shadow-card);
}

.case-quote-card__head {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 0.9rem;
}

.case-quote-card__icon {
line-height: 0;
flex-shrink: 0;
}

.case-quote-card__icon img {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
}

.case-quote-card__label {
margin: 0 0 0.2rem;
}

.case-quote-card__role {
margin: 0;
}

.case-quote-card blockquote {
margin: 1rem 0 0;
padding: 0;
border: none;
}

.case-quote-card blockquote p {
margin: 0;
font-size: 0.975rem;
font-weight: 300;
line-height: 1.65;
color: var(--text-body);
}

/* ── Takeaways: layout matches portfolio .philosophy-section + .pillars-grid (css/index.css) ── */

.case-takeaways {
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.case-cta__text {
margin: 1.25rem 0;
}

@media (max-width: 768px) {
.case-overview__grid {
    grid-template-columns: 1fr;
}

.case-transition__panel {
    padding: 1.25rem;
}

.case-feedback__grid {
    grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.case-feedback-section .case-feedback__inner {
    padding: 0 16px;
}

.case-transition__inner {
    padding: 0 16px;
}

.case-prose__draft-gallery { margin: clamp(1.25rem, 4vw, 1.75rem) auto; }

.case-hero__image {
    max-height: min(58vh, 420px);
}
}