/* Bruno Masese Portfolio — shared variables, typography, and the
   project-preview "mockup" component used on both the home page
   and the project detail page. Loaded on every page. */

:root {
  --bg: #f7f4ee; --panel: #fffdf8; --ink: #1c1a17; --ink-soft: #4a453e; --rule: #d8d1c2; --accent: #7a1f1f;
  --heading: 'Playfair Display', Georgia, serif; --body: 'Source Serif 4', Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); text-wrap: pretty; overflow-x: clip; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #5a1616; }
::selection { background: var(--accent); color: #fff; }
a.classic-btn:focus-visible, a.classic-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.classic-btn { text-decoration: none; white-space: nowrap; }

/* ---- Project preview mockups (placeholder screenshots) ---- */
/* Grayscale applies only to the CSS-drawn placeholder pieces (bar/body) —
   a real uploaded screenshot (.mockup-photo) shows in its true colors. */
.mockup { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--rule); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.mockup-bar { flex: none; height: 22px; background: #e9e5db; display: flex; align-items: center; gap: 5px; padding: 0 10px; filter: grayscale(1) contrast(0.95); }
.mockup-bar i { width: 6px; height: 6px; border-radius: 50%; background: #c9c2b3; display: block; }
.mockup-bar .url { margin-left: 8px; height: 9px; width: 55%; background: #d8d1c2; border-radius: 6px; }
.mockup-body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; filter: grayscale(1) contrast(0.95); }
.mockup-nav { display: flex; gap: 8px; }
.mockup-nav span { height: 5px; width: 22px; background: rgba(255,255,255,0.55); border-radius: 3px; }
.mockup-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.mockup-hero .t1 { height: 9px; width: 70%; background: rgba(255,255,255,0.92); border-radius: 3px; }
.mockup-hero .t2 { height: 6px; width: 46%; background: rgba(255,255,255,0.6); border-radius: 3px; }
.mockup-hero .cta { margin-top: 4px; height: 14px; width: 62px; background: rgba(255,255,255,0.85); border-radius: 3px; }
.mockup img.mockup-photo { width: 100%; height: 100%; object-fit: cover; }

/* A real uploaded project graphic — shown whole, at its own aspect ratio,
   full color, with no fake browser chrome drawn on top of it. */
.mockup-real { width: 100%; border: 1px solid transparent; overflow: hidden; line-height: 0; }
.mockup-real img { width: 100%; height: auto; display: block; }

/* ---- Accessibility utility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Flash banners (admin + public form feedback) ---- */
.flash { border: 1px solid var(--rule); padding: 12px 18px; font-size: 14.5px; margin-bottom: 24px; }
.flash.success { border-color: #3f5d3a; background: #eef3ec; color: #2c4228; }
.flash.error { border-color: var(--accent); background: #f7ecec; color: #5a1616; }

/* ---- Rich text from the admin editor (project summaries/descriptions) ---- */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 1em; }
.rich-text h3, .rich-text h4 { font-family: var(--heading); font-weight: 600; color: var(--ink); line-height: 1.3; margin: 1.4em 0 0.5em; }
.rich-text h3 { font-size: 1.25em; }
.rich-text h4 { font-size: 1.08em; }
.rich-text ul, .rich-text ol { margin: 0 0 1em; padding-left: 1.4em; }
.rich-text li { margin-bottom: 0.3em; }
.rich-text blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 2px solid var(--rule); font-style: italic; }
.rich-text strong { color: var(--ink); font-weight: 600; }
.rich-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }