/* =========================================================
   Alish Portfolio – Professional Theme (Light)
   Tailwind handles structure; this file adds polish + rhythm.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg: #ffffff;
  --ink: #0f172a;                /* slate-900 */
  --ink-dim: #334155;            /* slate-700 */
  --ink-subtle: #64748b;         /* slate-500/600 */
  --line: #e5e7eb;               /* slate-200 */
  --ring: rgba(2,6,23,.10);
  --card: #ffffff;
  --card-bd: #e5e7eb;
  --card-bd-hover: #cbd5e1;
  --shadow-s: 0 1px 2px rgba(0,0,0,.04);
  --shadow-m: 0 10px 30px rgba(0,0,0,.08);
  --brand-a: #60a5fa;            /* sky-400 */
  --brand-b: #a78bfa;            /* violet-400 */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "ss01" on, "ss02" on, "tnum" on;
}
a{ color: var(--ink); text-decoration: none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #6366f1; outline-offset:2px;
}

/* ---------- Rhythm / containers ---------- */
.max-w-6xl{ max-width:72rem; }
.section{ margin-top:2.25rem; }
.section + .section{ border-top:1px solid var(--line); padding-top:2.25rem; }

/* ---------- Header nav ---------- */
.nav-link{ color:var(--ink-subtle); transition:color .2s ease,opacity .2s ease }
.nav-link:hover{ color:var(--ink) }
.nav-cta{
  padding:.45rem .8rem; border-radius:9999px;
  border:1px solid var(--ring); background:#fff; box-shadow:var(--shadow-s);
}

/* ---------- Hero (decongested) ---------- */
.hero{ position:relative }
.hero-inner{
  display:grid; align-items:center; gap:1.25rem;
  padding:1.25rem 0 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width:768px){ .hero-inner{ padding:1.5rem 0 1.75rem; gap:1.5rem; } }
@media (min-width:1024px){ .hero-inner{ grid-template-columns: 1.1fr .9fr } }

.hero-head{ display:flex; align-items:center; gap:1.25rem }
@media (min-width:640px){ .hero-head{ gap:1.25rem } }
@media (min-width:768px){ .hero-head{ gap:1.5rem } }

.avatar{
  width:96px;height:96px;border-radius:9999px;object-fit:cover;
  border:3px solid #fff; box-shadow:var(--shadow-s);
}
@media (min-width:768px){ .avatar{ width:110px;height:110px } }

.hero-title{
  font-weight:800;
  font-size: clamp(1.55rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.2;
  letter-spacing:.1px;
}
.hero-sub{ margin-top:.5rem; color:var(--ink-dim); max-width:52ch; line-height:1.55 }

.hero-actions{
  margin-top:.9rem;
  display:flex; flex-wrap:wrap; gap:.6rem .7rem;
}

.btn-primary{
  display:inline-block; padding:.55rem .95rem; border-radius:9999px;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  color:#0b1020; font-weight:700; box-shadow:var(--shadow-m);
}
.btn-primary:hover{ filter:brightness(1.06) }

.btn-ghost{
  display:inline-block; padding:.55rem .95rem; border-radius:9999px;
  border:1px solid var(--ring); background:#fff; color:var(--ink);
}
.btn-ghost:hover{ background:#f8fafc }

/* Refined hero art (compact) */
.hero-art{
  position:relative; display:none; aspect-ratio:16/10; max-width:480px;
  justify-self:end; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-m);
  border:1px solid var(--card-bd);
  background:
    radial-gradient(120% 120% at 70% 20%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(120% 120% at 20% 70%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(120% 120% at 90% 80%, rgba(16,185,129,.10), transparent 60%),
    #fff;
}
@media (min-width:1024px){ .hero-art{ display:block } }
.hero-art::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.7), transparent 55%);
  mix-blend-mode:screen;
}

/* ---------- Generic cards ---------- */
.card{
  background:var(--card); border:1px solid var(--card-bd); border-radius:1rem; padding:1rem;
  box-shadow:var(--shadow-s);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--card-bd-hover); box-shadow:var(--shadow-m) }

/* ---------- Section headings ---------- */
.section-title{
  font-weight:700; font-size:1.125rem; letter-spacing:.2px; margin-bottom:1rem;
}

/* ---------- Project imagery ---------- */
.img-cover{ width:100%; height:11rem; object-fit:cover; border-radius:.75rem }

/* ---------- Chips ---------- */
.chip{
  display:inline-block; padding:.38rem .78rem; border-radius:9999px;
  border:1px solid var(--card-bd); background:#fff; color:var(--ink);
  font-size:.9rem; line-height:1;
}

/* ---------- TABLES (admin) ---------- */
.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table th,.table td{ border-bottom:1px solid var(--line); padding:.65rem .6rem }
.table th{ text-align:left; color:var(--ink-subtle); font-weight:600 }

/* =========================================================
   PROJECT CARDS (grid, hover, featured, tags)
   ========================================================= */
.project-grid{ display:grid; gap:1rem; }
@media (min-width:640px){ .project-grid{ grid-template-columns:1fr 1fr; gap:1.25rem; } }

.project-card{
  position:relative;
  background:var(--card); border:1px solid var(--card-bd);
  border-radius:16px; padding:16px 18px;
  box-shadow:var(--shadow-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
  border-color: var(--card-bd-hover);
}
.project-card::after{
  content:""; position:absolute; right:10px; top:10px; width:110px; height:60px;
  background: radial-gradient(80px 40px at 100% 0%, rgba(96,165,250,.2), rgba(167,139,250,.12) 60%, transparent 70%);
  pointer-events:none;
}
.project-card.is-featured{
  border-color: rgba(96,165,250,.5);
  box-shadow: 0 8px 30px rgba(96,165,250,.12);
}
.project-card.is-featured::before{
  content:"Featured";
  position:absolute; left:12px; top:-10px;
  font-size:.72rem; letter-spacing:.2px;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  color:#0b1020; padding:.22rem .5rem; border-radius:9999px;
}

.project-thumb{
  width:100%; height:10rem; object-fit:cover; border-radius:12px; margin-bottom:.6rem;
}
.project-title{
  font-weight:700; line-height:1.25; margin:0 0 .35rem 0; font-size:1.05rem;
}
.project-summary{
  color:var(--ink-dim); font-size:.95rem; line-height:1.5;
}
.project-actions{ display:flex; gap:.9rem; align-items:center; margin-top:.6rem; }
.project-link{
  font-size:.92rem; color:#0f172a; position:relative;
}
.project-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: currentColor; opacity:.12; transition:opacity .18s ease;
}
.project-link:hover::after{ opacity:.35 }
.project-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem; }
.tag{
  border:1px solid var(--card-bd); background:#fff; color:var(--ink-subtle);
  font-size:.8rem; padding:.28rem .55rem; border-radius:9999px;
}

/* ---------- Footer ---------- */
.footer-wrap{
  background: radial-gradient(1200px 200px at 50% -60px, rgba(99,102,241,.06), rgba(59,130,246,.05) 40%, rgba(255,255,255,0) 70%);
}
.footer-line{ height:1px; width:100%; background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent) }
.footer-cta{ margin-top:1.25rem; margin-bottom:1.5rem; display:block }
.footer-grid{ display:grid; gap:1.5rem; margin-top:1.5rem; grid-template-columns:1fr }
@media (min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1.2fr; gap:2rem } }
.footer-title{ font-weight:700; margin-bottom:.75rem }
.footer-links{ display:grid; gap:.45rem }
.footer-links a{ color:var(--ink-dim); font-size:.95rem }
.footer-links a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.availability-dot{ width:.66rem; height:.66rem; border-radius:9999px; background:#10b981; box-shadow:0 0 0 .34rem rgba(16,185,129,.18) }
.social{
  display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem;
  border-radius:.75rem; border:1px solid var(--ring); background:#fff;
}
.social:hover{ background:#f8fafc }
.icon{ width:1.1rem; height:1.1rem; color:#334155 }
.footer-bottom{
  margin-top:1.75rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  color:var(--ink-subtle); font-size:.9rem;
}
.to-top{
  display:inline-block; width:2rem; height:2rem; border-radius:9999px; border:1px solid var(--ring);
  text-align:center; line-height:2rem; color:var(--ink); background:#fff;
}
.to-top:hover{ background:#f8fafc }

/* ---------- Helpers ---------- */
.text-dim{ color:var(--ink-dim) }
.text-subtle{ color:var(--ink-subtle) }
.grid-gap{ gap:1.25rem }

/* Asset mapping note:
If index.php is at root and assets live under /public, your root .htaccess should contain:
  RewriteEngine On
  RewriteRule ^assets/(.*)$ public/assets/$1 [L]
*/