/* ============================================================
   Kevin Perlas Portfolio — Case study pages (shared layout)
   Linked from kevin_perlas_case_study_*.html; per-page hero
   crop lives in each file’s small inline <style> block.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f0f0f0; color: #1a1a1a; }
.page { width: 100%; background: white; display: flex; flex-direction: column; }

.hero { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: #1a1a1a; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.88) 100%); }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 44px 26px; }
.hero-tag { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.hero-headline { font-size: clamp(18px, 3vw, 32px); font-weight: 700; color: #fff; line-height: 1.3; max-width: 900px; }

.draft-banner { background: #fef3c7; border-bottom: 2px solid #d97706; padding: 12px 44px; font-size: 11.5px; color: #92400e; line-height: 1.6; }
.draft-banner strong { color: #78350f; }

.body { flex: 1; padding: 30px 44px 48px; display: flex; flex-direction: column; }
.zone-label { font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.zone-num { color: #0F766E; }
.divider { height: 1px; background: #e8e8e8; margin: 28px 0; }

.gap-block { border: 2px dashed #d97706; background: #fffbeb; border-radius: 4px; padding: 16px 18px; margin-top: 8px; }
.gap-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: #d97706; padding: 3px 8px; border-radius: 3px; margin-bottom: 10px; }
.gap-prompt { font-size: 12.5px; color: #92400e; line-height: 1.6; font-style: italic; }

.flag-block { border: 1px solid #93c5fd; background: #eff6ff; border-radius: 4px; padding: 12px 16px; margin-top: 10px; }
.flag-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: #2563eb; padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; }
.flag-text { font-size: 12px; color: #1e3a8a; line-height: 1.55; }

.source-note { font-size: 10px; color: #999; font-style: italic; margin-top: 8px; }

.zone-body-text { font-size: 12.5px; color: #333; line-height: 1.6; }
.zone-body-text strong { color: #1a1a1a; font-weight: 600; }
.sub-label { font-size: 10.5px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 4px; }
.sub-label:first-child { margin-top: 0; }

.zone-insights ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.zone-insights ul li { font-size: 12.5px; color: #333; line-height: 1.5; padding-left: 14px; position: relative; }
.zone-insights ul li::before { content: '•'; position: absolute; left: 0; color: #bbb; font-size: 11px; top: 1px; }

.contribution-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.contribution-list li { font-size: 12.5px; color: #333; line-height: 1.5; padding-left: 14px; position: relative; }
.contribution-list li::before { content: '•'; position: absolute; left: 0; color: #bbb; font-size: 11px; top: 1px; }

.approach-block { display: flex; gap: 28px; align-items: flex-start; margin-top: 10px; }
.approach-text { flex: 1; min-width: 0; }
.approach-image { flex: 1; }
.framed-image,
.pd-frame { background: #0F766E; padding: 1pt 1pt 12px 1pt; border-radius: 3px; }
.framed-image img,
.pd-frame img { width: 100%; height: auto; display: block; }
.frame-caption,
.pd-caption { color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.5; margin-top: 12px; }

.zone-outcome { background: #1a1a1a; border-radius: 3px; padding: 18px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.outcome-header { grid-column: 1/-1; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #0F766E; margin-bottom: 4px; }
.metric-block { display: flex; flex-direction: column; gap: 3px; }
.metric-number { font-size: 30px; font-weight: 700; color: #0F766E; line-height: 1; }
.metric-unit { font-size: 14px; font-weight: 400; color: #aaa; }
.metric-desc { font-size: 10.5px; color: #777; line-height: 1.4; margin-top: 2px; }

.bridge-line { font-size: 11px; color: #888; font-style: italic; margin-top: 20px; text-align: center; }
.bridge-line a { color: var(--blue); font-weight: 600; font-style: normal; text-decoration: none; border-bottom: 1px solid var(--blue); }

@media (max-width: 800px) {
  .zone-outcome { grid-template-columns: 1fr; }
  .approach-block { flex-direction: column; }
}