/* ─────────────────────────  Base Reset  ───────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#222;background:#f7f7f7;line-height:1.6;
  max-width:1000px;margin-inline:auto;padding:1rem 1rem 2rem;
}

/* ─────────────────────────  Nav Bar  ──────────────────────────── */
header{margin-bottom:2rem;}
nav{position:relative;padding-bottom:0.75rem;}
nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#e2e2e2;}

nav .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}

/* Brand: plain text, never pills */
nav .brand{
  text-decoration:none;color:#222;font-weight:800;letter-spacing:.2px;
  background:transparent;padding:0;border-radius:0;display:inline-block;
}
nav .brand:hover,
nav .brand.active{color:#4e4e4e;background:transparent;}

/* Tabs: pills with hover + active */
nav ul{display:flex;gap:2rem;list-style:none;margin-left:auto;}
nav a:not(.brand){
  display:inline-block;
  padding:.5rem 1rem;
  border-radius:6px;
  text-decoration:none;
  color:#444;
  font-weight:500;
  transition:background .15s, color .15s;
}
nav a:not(.brand):hover{
  background:#eaeaea;
  color:#222;
}
nav a:not(.brand).active{
  background:#4a4a4a;
  color:#fff;
}

/* Mobile wrap */
@media (max-width:600px){
  nav .nav-inner{flex-wrap:wrap;}
  nav .brand{margin-bottom:.5rem;}
  nav ul{width:100%;justify-content:center;flex-wrap:wrap;gap:1rem;}
}

/* ────────────────────────  Sections & Cards  ─────────────────── */
section{margin-bottom:4rem;}
.card{
  background:#fff;border-radius:12px;padding:1.5rem 1.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);margin-bottom:1.75rem;
}
.card h3{color:#7c7c7c;}
.section-title{color:#222;}

#projects .section-title,#projects .section-sub,
#contact  .section-title,#contact  .section-sub{text-align:center;}

/* two-column helper */
.grid{display:flex;flex-wrap:wrap;gap:1rem;}
@media (min-width:700px){
  .grid.two-col{display:grid;grid-template-columns:1fr 1fr;}
}

/* ───────────────────────────  Profile  ───────────────────────── */
.profile{text-align:center;}
.profile img{width:120px;height:120px;border-radius:75%;object-fit:cover;display:block;margin-inline:auto;margin-bottom:1rem;}
.profile h2{font-size:1.75rem;margin-bottom:.25rem;}
.subtitle{color:#666;font-size:.9rem;}

/* ───────────────────── Tags & Buttons  ───────────────────────── */
.tag{display:inline-block;background:#e0e0e0;border-radius:20px;padding:.25rem .7rem;font-size:.8rem;margin:.25rem .15rem;}
.btn,.btn-outline{display:inline-block;margin-top:1rem;text-decoration:none;font-weight:600;padding:.45rem 1.1rem;border-radius:6px;font-size:.9rem;}
.btn{background:#000;color:#fff;}
.btn:hover{background:#4d4d4d;}
.btn-outline{border:1px solid #ccc;color:#444;}
.btn-outline:hover{background:#eee;}

/* ───────────────────────  Project Cards  ─────────────────────── */
/* Phones: 1 column */
.projects-grid{
  display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:2rem;
}
/* Desktop: 3 columns */
@media (min-width:900px){
  .projects-grid{grid-template-columns:repeat(3,1fr);}
}

.card-link{display:block;text-decoration:none;color:inherit;}
.card-link:visited,.card-link:hover,.card-link:active{color:inherit;}

.card-link .project-card{
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card-link:hover .project-card{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  cursor:pointer;
}

.project-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.project-card .card-body{
  padding:1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-card h3{margin-bottom:.2rem;color:#222;}
.project-card .type{font-size:.8rem;color:#666;margin-bottom:.6rem;}
.project-card .excerpt{font-size:.85rem;color:#555;margin-bottom:.8rem;}
.tag-row{margin-bottom:.8rem;}

/* ---- Project Card Sizing Overrides ---- */
.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card img {
  height: 200px;
  object-fit: cover;
  background: #f0f0f0; /* fallback if no image */
}

.projects-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch; /* make cards equal height in the row */
}

/* Ensure grid items and cards stretch full height so the button can pin to bottom */
.projects-grid > .card-link {
  display: flex;
  height: 100%;
}
.projects-grid > .card-link > .project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ───────────────────────────  Contact  ───────────────────────── */
.contact-card{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;}
.contact-row{display:flex;gap:.75rem;align-items:flex-start;}
.contact-row span{font-size:1.2rem;}

/* ───────────────────────────  Footer  ────────────────────────── */
footer{text-align:center;font-size:.8rem;color:#888;margin-top:2rem;}

/* ───────────────────────  Page Switching  ────────────────────── */
.page-section{display:none;}
.page-section.active{display:block;}

/* ─── Nav divider + spacing ─── */
nav{
  position:relative;
  padding:.5rem 0 .9rem;       /* more vertical space */
}

nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:#e3e3e3;          /* subtle divider */
}

header{
  margin-bottom:2.2rem;         /* space between divider and page content */
}

/* a touch tighter on small screens */
@media (max-width:600px){
  nav{ padding:.5rem 0 .8rem; }
  header{ margin-bottom:1.6rem; }
}
.project-card .btn {
  margin-top: auto;          /* anchor to bottom */
  align-self: flex-start;    /* prevent full-width stretch in flex container */
  width: auto;               /* keep natural button width */
  max-width: 100%;           /* avoid overflow on small screens */
}

.project-card .card-body > *:last-child {
  margin-top: auto;
}