/* ===============================
   Portfolio Minimal Pro Styles
   Author: ylehilds (generated)
   Notes:
   - Drop this file in your site root as /assets/css/portfolio.css (or any path).
   - Reference it from your HTML/Markdown layout.
   =============================== */

:root{
  --bg: #ffffff;
  --text: #111418;
  --muted: #5c6975;
  --primary: #2b6cb0;         /* blue */
  --primary-600: #2c5282;
  --accent: #14a38b;          /* teal */
  --surface: #f5f7fa;
  --border: #e6eaef;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(17,20,24,.06);
  --maxw: 980px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --text: #e7e9ee;
    --muted: #a6b0bb;
    --primary: #63b3ed;
    --primary-600: #4299e1;
    --accent: #4fd1c5;
    --surface: #151923;
    --border: #232838;
    --shadow: 0 6px 24px rgba(0,0,0,.4);
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 28px);
}

/* Header / Hero */
.hero{
  display: grid;
  gap: 8px;
  padding: clamp(12px, 2vw, 16px) 0 6px;
}
.hero h1{
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
}
.hero p{
  color: var(--muted);
  margin: 4px 0 0;
  font-size: clamp(14px, 1.4vw, 17px);
}

/* Top Navigation */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--border);
}
.nav .brand{
  font-weight: 700;
  letter-spacing:.2px;
}
.nav a{
  color: var(--text);
  text-decoration: none;
  opacity:.9;
}
.nav a:hover{ opacity:1; }
.nav .links{
  display:flex; gap: 14px; flex-wrap: wrap;
}

/* Sections */
.section{
  margin: 22px 0;
}
.section h2{
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 0 0 10px;
}

/* Cards / Lists */
.grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(17,20,24,.10);
  border-color: color-mix(in oklab, var(--primary) 20%, var(--border));
}
.card h3{
  margin:0 0 6px; font-size: 18px; line-height:1.25;
}
.card p{
  margin: 6px 0 10px; color: var(--muted);
}
.meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--border));
  font-size: 12px;
}

/* Links & Buttons */
a.inline{
  color: var(--primary); text-decoration: none; font-weight: 600;
}
a.inline:hover{ text-decoration: underline; }
.button{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--primary);
  color: #fff; border: 1px solid var(--primary-600);
  border-radius: 12px; padding: 10px 14px; font-weight:600;
  text-decoration:none; box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease;
}
.button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.button.secondary{
  background: transparent; color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 50%, var(--border));
}

/* Tables */
.table{
  width:100%; border-collapse: collapse; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.table th, .table td{
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.table thead th{
  background: color-mix(in oklab, var(--primary) 10%, var(--surface));
  font-weight: 700;
}
.table tr:hover td{
  background: color-mix(in oklab, var(--primary) 5%, var(--surface));
}

/* Code & Pre */
code, pre{
  font-family: var(--mono);
  background: color-mix(in oklab, var(--primary) 6%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px; 
}
code{ padding: .2em .45em; }
pre{ padding: 12px 14px; overflow: auto; }

/* Footer */
.footer{
  margin-top: 26px; padding: 18px 0; color: var(--muted);
  border-top: 1px solid var(--border); font-size: 14px;
}

/* Utilities */
.m0{ margin:0 !important; }
.mb8{ margin-bottom: 8px !important; }
.mb16{ margin-bottom: 16px !important; }
.mb24{ margin-bottom: 24px !important; }
.mt8{ margin-top: 8px !important; }
.mt16{ margin-top: 16px !important; }
.center{ text-align: center; }
.flex{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hidden{ display:none !important; }

/* Small banner */
.banner{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow);
}
.banner strong{ letter-spacing:.2px; }