/* ============================================================
   SHARED CSS — Example Sites
   All example pages link to this file for reset + utilities.
   Each page's own <style> block handles palette + components.
============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
address { font-style: normal; }
a { text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }

/* Layout */
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }

/* Eyebrow label */
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Section spacing */
.section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Back-to-portfolio bar */
.back-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.back-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.back-bar a:hover { opacity: 1; }

/* Responsive shared breakpoints */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 0; }
}
@media (max-width: 480px) {
  .container, .container--narrow { padding: 0 1rem; }
}