@import './project-results.css?v=results-1';
/* B3 desktop frame from Figma, with shared result layout. */
.b3-page { --b3-inline: 150px; --b3-radius: 150px; --results-accent: #28316b; --results-icon-background: #dce7f7; --results-inline: var(--b3-inline); --results-radius: var(--b3-radius); }
.b3-project { background: white; color: var(--system-text-black); width: 100%; }
.b3-project p, .b3-project dd, .b3-context li { margin: 0; font: 400 20px/1.4 var(--font-family-body); letter-spacing: .01em; }
.b3-project strong { font-weight: 700; }
.b3-hero { background: #28316b; color: white; border-radius: 0 0 0 var(--b3-radius); }
.b3-hero-inner { width: 100%; min-height: 600px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 583px; padding-left: max(var(--b3-inline), calc((100% - 1140px) / 2)); }
.b3-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 16px; padding-top: 100px; padding-bottom: 64px; }
.b3-brand { width: 60px; height: 48px; object-fit: contain; }
.b3-hero h1 { display: flex; flex-direction: column; gap: 8px; margin: 0; font: 400 56px/1.2 var(--font-family-headings); letter-spacing: -.04em; }
.b3-project .b3-hero-tag { background: #ffe700; color: var(--system-text-black); padding: 0 8px; font-size: 24px; }
.b3-hero-visual { position: relative; display: flex; align-items: center; min-width: 0; min-height: 600px; }
.b3-hero-shapes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b3-hero-card { position: relative; width: 480px; max-width: calc(100% - 32px); height: auto; filter: drop-shadow(0 4px 24px rgb(0 0 0 / 25%)); }
.b3-context { max-width: 1440px; margin-inline: auto; padding: 100px var(--b3-inline); display: flex; flex-direction: column; gap: 48px; }
.b3-copy-group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.b3-label { display: inline-flex; margin: 0; padding: 2px 6px; background: #ffe700; color: var(--system-text-black); font: 700 16px/1.2 var(--font-family-body); letter-spacing: .01em; }
.b3-context-description ul { margin: 0; padding-left: 27px; }
.b3-context-description li:not(:last-child) { margin-bottom: 8px; }
.b3-metadata { display: grid; grid-template-columns: max-content 204px minmax(0, 1fr) 180px; gap: 88px; margin: 0; }
.b3-metadata > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.b3-gallery { display: flex; flex-direction: column; gap: 48px; max-width: 1440px; padding: 100px var(--b3-inline) 0; margin-inline: auto; }
.b3-gallery figure { margin: 0; width: 100%; }
.b3-gallery img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 1250px) {
 .b3-page { --b3-inline: 64px; }
 .b3-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
 .b3-hero h1 { font-size: clamp(32px, 4vw, 56px); }
 .b3-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 900px) {
 .b3-page { --b3-inline: 24px; --b3-radius: 64px; }
 .b3-hero-inner { grid-template-columns: minmax(0, 1fr); }
 .b3-hero-copy { padding-top: 64px; padding-right: var(--b3-inline); padding-bottom: 40px; }
 .b3-hero-visual { min-height: 360px; justify-content: center; }
 .b3-context { padding-block: 64px; }
 .b3-gallery { padding-top: 64px; gap: 48px; }
}
@media (max-width: 600px) {
 .b3-page { --b3-inline: 20px; --b3-radius: 48px; }
 .b3-hero-copy { padding-top: 48px; }
 .b3-hero h1 { font-size: clamp(26px, 7.5vw, 40px); }
 .b3-project .b3-hero-tag { font-size: 20px; }
 .b3-metadata { grid-template-columns: minmax(0, 1fr); }
 .b3-context { padding-block: 48px; }
 .b3-gallery { padding-top: 48px; gap: 48px; }
}