/* =============== Tokens =============== */
:root{
  --surface:#232321;
  --card:#2C2F33;
  --card-ink:#F5F7FA;
  --text:#E6EDF2;
  --muted:rgba(230,237,242,.8);
  --border:#2A2F31;
  --brand:#00AFCB;
  --brand-ink:#FFFFFF;
}

html,body{margin:0;padding:0;background:var(--surface);color:var(--text);overflow-x:hidden;}
*{box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* Shared section frame */
.section-title{font-size:2.1rem;font-weight:800;text-align:center;margin:0 0 28px;}
section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

/* =============== About: Hero =============== */
.about-hero{padding:64px 20px;background:var(--surface);}
.about-title{font-size:2.6rem;font-weight:900;margin:0;text-align:center;}
.about-tagline{margin:10px 0 0;text-align:center;opacity:.9;}

/* ===== Gallery (hero + thumbs, no crop) ===== */
.about-gallery{ padding:28px 0; background:var(--surface); }

.gallery{ display:grid; gap:14px; }
.gallery-main{
  background:#111;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  display:grid; place-items:center;
  padding:8px;             /* small frame around image */
}
#galleryMain{
  width:100%;
  height: clamp(220px, 40vw, 520px); /* responsive height */
  object-fit: contain;               /* 🚫 no cropping */
  object-position: center;           /* center by default */
  border-radius:12px;
  background:#000;                   /* letterbox fill */
}

/* Thumbs row */
.gallery-thumbs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: minmax(74px, 1fr);
  gap:10px;
  overflow-x:auto;
  padding:2px;
  scrollbar-width:thin;
}
.gallery-thumbs::-webkit-scrollbar{ height:6px; }
.gallery-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:999px; }

.gallery-thumbs .thumb{
  display:block;
  padding:0;
  border:1px solid var(--border);
  background:#1a1a1a;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.gallery-thumbs .thumb:hover{ border-color:var(--brand); transform:translateY(-2px); }
.gallery-thumbs .thumb.active{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,175,203,.22);
}

.gallery-thumbs .thumb img{
  width:100%; height:56px;   /* compact strip height */
  object-fit: cover;         /* thumbs can crop, it's fine */
  object-position: center top; /* bias to top for portraits */
  display:block;
}

/* =============== About: Story =============== */
.about-story{padding:40px 0;background:var(--surface);}
.copy{max-width:900px;margin:0 auto;}
.copy p{line-height:1.85;margin:0 0 14px;color:var(--text);}
.copy p:last-child{margin-bottom:0;}

/* =============== Skills =============== */
.skills-section{padding:56px 20px;background:var(--surface);text-align:center;}
.skills-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:22px;max-width:1100px;margin:0 auto;
}
.skill-card{
  background:linear-gradient(145deg,#2d2f33,#232321);
  border:1px solid rgba(0,175,203,.16);
  border-radius:14px;padding:24px 18px;
  box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.05);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease;
}
.skill-card i{font-size:2.2rem;color:var(--brand);filter:drop-shadow(0 2px 8px rgba(0,175,203,.35));}
.skill-card span{font-size:1rem;font-weight:600;color:#F5F7FA;letter-spacing:.3px;}
.skill-card:hover{
  transform:translateY(-6px) scale(1.03);
  border-color:var(--brand);
  box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 12px rgba(0,175,203,.22);
}

/* =============== Education =============== */
.education-section{padding:56px 20px;background:var(--surface);}
.edu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;max-width:1100px;margin:0 auto;text-align:left;
}
.edu-card{
  background:var(--card);color:var(--card-ink);
  border:1px solid var(--border);border-radius:14px;
  padding:22px 18px;box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease;
}
.edu-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.35);border-color:var(--brand);}
.edu-title{
  font-size:1.08rem;font-weight:800;color:#fff;margin:0 0 6px;
  display:flex;align-items:center;gap:8px;
}
.edu-title[data-type="degree"]::before{content:"🎓";}
.edu-title[data-type="cert"]::before{content:"📜";}
.edu-meta{font-size:.95rem;color:var(--muted);margin:0;}

/* =============== Experience (simple cards) =============== */
.experience-section{padding:56px 20px;background:var(--surface);}
.xp-list{display:grid;gap:18px;max-width:1100px;margin:0 auto;text-align:left;}
.xp-card{
  background:var(--card);color:var(--card-ink);
  border:1px solid var(--border);border-radius:14px;
  padding:20px 18px;box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease;
}
.xp-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.35);border-color:var(--brand);}
.xp-head{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
.xp-role{margin:0;font-size:1.12rem;font-weight:800;color:#fff;}
.xp-meta{font-size:.95rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.xp-company{opacity:.95;}
.xp-dates{opacity:.85;}
.xp-desc{margin:10px 0 0;line-height:1.7;color:var(--card-ink);}
.xp-tags{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.xp-tags li{
  font-size:.85rem;padding:6px 10px;border-radius:999px;
  background:rgba(0,175,203,.12);color:var(--brand);
  border:1px solid rgba(0,175,203,.25);
}

/* =============== Responsive tweaks =============== */
@media (max-width:560px){
  .about-title{font-size:2.2rem;}
  .snap-strip{grid-auto-columns:90%;}
}