/* =====================================================================
   Solution Provider — Portfolio
   Palette:  ink #14110F · bone #F2EDE4 · brass #B08D57 · slate #6B6661
   Type:     Fraunces (display)  ·  Inter (body/utility)
   ===================================================================== */
:root{
  --ink:#14110F; --ink-2:#1d1916; --bone:#F2EDE4; --bone-2:#cfc7ba;
  --brass:#B08D57; --brass-2:#caa873; --slate:#8b857d; --line:#2c2723;
  --ok:#5a7d5a; --bad:#b4554b;
  --radius:4px; --maxw:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--bone);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.1rem clamp(1rem,4vw,2.5rem);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  background:rgba(20,17,15,.86); backdrop-filter:blur(10px);
}
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand-mark{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem;
  letter-spacing:.01em;
}
.brand-sub{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); margin-top:.25rem}
.topnav{display:flex; align-items:center; gap:1.25rem; font-size:.9rem}
.topnav a{color:var(--bone-2); transition:color .2s}
.topnav a:hover{color:var(--brass-2)}
.nav-name{color:var(--slate); font-size:.85rem}
.nav-login,.nav-out{
  border:1px solid var(--line); padding:.4rem .85rem; border-radius:var(--radius);
}
.nav-login:hover,.nav-out:hover{border-color:var(--brass)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.5rem)}

/* ---------- hero ---------- */
.hero{margin-bottom:2.8rem}
.hero h1{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(2rem,5.5vw,3.6rem); line-height:1.05; margin:0 0 .6rem;
  letter-spacing:-.01em;
}
.hero h1 em{font-style:italic; color:var(--brass-2)}
.hero p{max-width:46ch; color:var(--bone-2); font-size:1.02rem}

/* ---------- project grid (homepage) ---------- */
.proj-grid{
  display:grid; gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.proj-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--ink-2); border:1px solid var(--line);
  aspect-ratio:4/3; display:block;
}
.proj-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
  filter:saturate(.96)
}
.proj-card:hover img{transform:scale(1.05); filter:saturate(1.05)}
.proj-card .cap{
  position:absolute; inset:auto 0 0 0; padding:1.1rem;
  background:linear-gradient(to top,rgba(11,9,8,.92),transparent);
  display:flex; justify-content:space-between; align-items:flex-end; gap:.5rem;
}
.proj-card .cap h3{
  font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; margin:0;
}
.proj-card .cap small{color:var(--slate); font-size:.78rem}
.proj-card .badge-int{
  position:absolute; top:.8rem; left:.8rem; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; background:var(--brass); color:var(--ink);
  padding:.22rem .5rem; border-radius:2px; font-weight:600;
}
.empty{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:3rem 1.5rem; text-align:center; color:var(--slate);
}

/* ---------- single project gallery ---------- */
.crumb{font-size:.85rem; color:var(--slate); margin-bottom:1rem}
.crumb a:hover{color:var(--brass-2)}
.gallery{
  columns:3; column-gap:clamp(.7rem,1.6vw,1.1rem);
}
.gallery figure{margin:0 0 clamp(.7rem,1.6vw,1.1rem); break-inside:avoid;
  border-radius:var(--radius); overflow:hidden; background:var(--ink-2);
  border:1px solid var(--line); cursor:zoom-in}
.gallery img{width:100%; transition:opacity .3s; opacity:0}
.gallery img.loaded{opacity:1}
@media(max-width:900px){.gallery{columns:2}}
@media(max-width:560px){.gallery{columns:1}}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; background:rgba(7,6,5,.96); z-index:60;
  display:none; align-items:center; justify-content:center; padding:2rem}
.lb.open{display:flex}
.lb img{max-width:94vw; max-height:90vh; object-fit:contain; border-radius:2px}
.lb-close,.lb-nav{position:absolute; background:none; border:0; color:var(--bone);
  font-size:2rem; cursor:pointer; padding:1rem; opacity:.8}
.lb-close{top:.5rem; right:1rem}
.lb-nav{top:50%; transform:translateY(-50%)}
.lb-prev{left:.5rem} .lb-next{right:.5rem}
.lb-nav:hover,.lb-close:hover{opacity:1; color:var(--brass-2)}

/* ---------- forms / login ---------- */
.auth-wrap{max-width:380px; margin:6vh auto; padding:0 1rem}
.card{background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem}
.card h2{font-family:'Fraunces',serif; font-weight:500; margin:0 0 1.4rem}
label{display:block; font-size:.8rem; letter-spacing:.04em; color:var(--bone-2);
  margin:0 0 .35rem; text-transform:uppercase}
input[type=text],input[type=password],input[type=file],select,textarea{
  width:100%; padding:.7rem .8rem; margin-bottom:1.1rem;
  background:var(--ink); border:1px solid var(--line); color:var(--bone);
  border-radius:var(--radius); font-size:.95rem; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--brass); color:var(--ink); border:0; cursor:pointer;
  padding:.7rem 1.3rem; border-radius:var(--radius); font-weight:600;
  font-size:.92rem; font-family:inherit; transition:background .2s;
}
.btn:hover{background:var(--brass-2)}
.btn-ghost{background:transparent; color:var(--bone-2); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brass); background:transparent; color:var(--bone)}
.btn-sm{padding:.4rem .8rem; font-size:.8rem}
.btn-danger{background:transparent; border:1px solid var(--bad); color:#d98a82}
.btn-danger:hover{background:var(--bad); color:#fff}
.alert{padding:.8rem 1rem; border-radius:var(--radius); margin-bottom:1.2rem; font-size:.9rem}
.alert-bad{background:rgba(180,85,75,.12); border:1px solid var(--bad); color:#e0a59e}
.alert-ok{background:rgba(90,125,90,.12); border:1px solid var(--ok); color:#a9c9a9}

/* ---------- admin ---------- */
.adm-head{display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem; margin-bottom:2rem}
.adm-head h1{font-family:'Fraunces',serif; font-weight:500; font-size:1.9rem; margin:0}
.adm-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.adm-grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.adm-card{background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden}
.adm-card .thumb{aspect-ratio:4/3; background:var(--ink); overflow:hidden}
.adm-card .thumb img{width:100%; height:100%; object-fit:cover}
.adm-card .body{padding:1rem}
.adm-card h3{font-family:'Fraunces',serif; font-weight:500; margin:0 0 .3rem; font-size:1.1rem}
.adm-card .meta{font-size:.78rem; color:var(--slate); margin-bottom:.8rem}
.adm-card .row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.pill{font-size:.7rem; padding:.2rem .55rem; border-radius:2px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600}
.pill-live{background:rgba(90,125,90,.18); color:#9cc49c; border:1px solid #3d5a3d}
.pill-int{background:rgba(176,141,87,.16); color:var(--brass-2); border:1px solid #5a4a30}
.section-h{font-family:'Fraunces',serif; font-weight:500; font-size:1.3rem;
  margin:2.5rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line)}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--line)}
th{color:var(--slate); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em}

/* upload preview grid */
.up-grid{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); margin-top:1.2rem}
.up-grid figure{margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative}
.up-grid img{aspect-ratio:1; object-fit:cover; width:100%}
.up-grid .del{position:absolute; top:4px; right:4px}

/* ---------- footer ---------- */
.foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  max-width:var(--maxw); margin:3rem auto 0; padding:1.5rem clamp(1rem,4vw,2.5rem);
  border-top:1px solid var(--line); color:var(--slate); font-size:.8rem}

/* ---------- image protection (visual) ---------- */
.gallery img,.proj-card img,.lb img{
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}

/* =====================================================================
   MOBILE OPTIMIZATION  ▸  ফোনে যেন সবকিছু টাচ-ফ্রেন্ডলি ও ঝরঝরে দেখায়
   ===================================================================== */
@media (max-width: 600px){
  body{font-size:15px}

  /* topbar: brand + nav দুই লাইনে সুন্দরভাবে বসবে, চাপাচাপি হবে না */
  .topbar{
    flex-wrap:wrap; padding:.85rem 1rem;
    gap:.6rem .9rem;
  }
  .brand-mark{font-size:1.12rem}
  .brand-sub{font-size:.6rem; letter-spacing:.14em; margin-top:.15rem}
  .topnav{
    width:100%; gap:.9rem; font-size:.85rem;
    flex-wrap:wrap;
  }
  .nav-name{display:none} /* ছোট স্ক্রিনে জায়গা বাঁচাতে নাম লুকানো, লগ-আউট থাকবেই */
  .nav-login,.nav-out{padding:.5rem .9rem; font-size:.85rem} /* টাচ-ফ্রেন্ডলি সাইজ */

  .wrap{padding:1.25rem 1rem 2rem}

  .hero{margin-bottom:1.8rem}
  .hero h1{font-size:1.85rem; line-height:1.12}
  .hero p{font-size:.95rem}

  /* project grid: ছোট স্ক্রিনে ১ কলাম, কার্ড পুরো প্রস্থ */
  .proj-grid{grid-template-columns:1fr; gap:1rem}
  .proj-card .cap h3{font-size:1.05rem}

  /* gallery: ২ কলামে ভালো দেখায়, বড় ছবি দেখতে লাইটবক্স আছেই */
  .gallery{columns:2; column-gap:.6rem}
  .gallery figure{margin-bottom:.6rem}

  /* lightbox controls — বড় টাচ-টার্গেট */
  .lb{padding:1rem}
  .lb-close{top:0; right:0; font-size:1.8rem; padding:.9rem}
  .lb-nav{font-size:1.7rem; padding:.9rem}

  /* ফর্ম/কার্ড ফুল-উইথ, বাটন টাচ-ফ্রেন্ডলি */
  .auth-wrap{margin:4vh auto; padding:0 .9rem}
  .card{padding:1.4rem}
  .btn,.btn-ghost,.btn-danger{padding:.75rem 1.2rem; font-size:.9rem}
  input[type=text],input[type=password],input[type=file],select,textarea{
    padding:.75rem .85rem; font-size:1rem; /* 16px+ iOS zoom রোধ করে */
  }

  /* admin dashboard */
  .adm-head{gap:.8rem}
  .adm-head h1{font-size:1.5rem}
  .adm-actions{width:100%}
  .adm-actions .btn,.adm-actions .btn-ghost{flex:1; text-align:center}
  .adm-grid{grid-template-columns:1fr}
  table{font-size:.82rem}
  th,td{padding:.55rem .4rem}

  .up-grid{grid-template-columns:repeat(3,1fr); gap:.5rem}

  .foot{flex-direction:column; text-align:center; font-size:.75rem}
}

/* খুব ছোট ফোন (iPhone SE ইত্যাদি) */
@media (max-width: 360px){
  .gallery{columns:1}
  .up-grid{grid-template-columns:repeat(2,1fr)}
}

/* নচ/সেফ-এরিয়া থাকা ফোনের জন্য */
@supports (padding: max(0px)){
  .topbar{padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right))}
  .wrap{padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right))}
}