/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Theme */
:root{
	--green: #2bb673;           /* primary */
	--green-600:#1f9a60;        /* darker */
	--green-50:#eaf7f0;         /* subtle tint */
	--ink-900:#1f2937;          /* headings */
	--ink-700:#374151;          /* body */
	--ink-500:#6b7280;          /* muted */
	--bg:#f7f8f9;               /* page bg */
	--card:#ffffff;             /* surfaces */
	--border:#e5e7eb;
	--shadow: 0 6px 24px rgba(0,0,0,.08);
	--radius: 12px;

	--sidebar-width: 260px;
	--topbar-height: 64px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
	font-family:'Inter',system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background:var(--bg);
	color:var(--ink-700);
	display:flex;
	line-height:1.7;
}

/* Anchor offset so #hash links don’t hide under sticky bars */
[id]{scroll-margin-top: calc(var(--topbar-height) + 24px);}

/* Layout helpers */
.container{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Sidebar */
.sidebar{
	width: var(--sidebar-width);
	background: var(--card);
	border-right: 1px solid var(--border);
	position: fixed; inset: 0 auto 0 0;
	padding: 20px 16px;
	display:flex; flex-direction:column; gap:20px;
	z-index: 20;
}

.profile{display:flex; align-items:center; gap:14px; padding:8px 6px;}
.profile img{
	width:56px; height:56px; border-radius:50%;
	object-fit:cover; border:2px solid var(--green);
}
.profile-meta h2{font-size:1.1rem; color:var(--ink-900); font-weight:700; line-height:1.1;}
.tagline{font-size:.9rem; color:var(--ink-500);}

.nav-links{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.nav-links a{
	text-decoration:none; color:var(--ink-700); font-weight:600;
	padding:10px 12px; border-radius:8px; border:1px solid transparent;
	transition: all .2s ease;
}
.nav-links a:hover{color:var(--green-600); background:var(--green-50); border-color:var(--green);}

/* Main content */
.main-content{
	margin-left: var(--sidebar-width);
	width: 100%;
}

/* Header */
.header{
	border-bottom:1px solid var(--border);
	background: linear-gradient(180deg, #fff, #fff 60%, rgba(255,255,255,0.85));
}
.header .container{padding: 56px 24px;}
.main-header{
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
	font-weight: 800;
	color: var(--ink-900);
	letter-spacing: -.02em;
}
.header-p{
	margin-top:10px; color:var(--ink-500); font-size:1.075rem;
}

/* Hero */
.hero{padding: 40px 0;}
.hero .container{display:flex; flex-direction:column; align-items:center; gap:18px;}
.hero img{
	max-width: 100%; border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.hero-buttons{display:flex; gap:12px; flex-wrap:wrap;}

/* Buttons */
.btn{
	display:inline-block; text-decoration:none; cursor:pointer;
	background: var(--green);
	color:#fff; padding: 12px 20px; border-radius:10px;
	font-weight:700; border:2px solid var(--green);
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
	box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.btn:hover{background:var(--green-600); transform: translateY(-1px);}
.btn:active{transform: translateY(0);}
.btn-outline{
	background:transparent; color:var(--green); border-color:var(--green);
}
.btn-outline:hover{background:var(--green); color:#fff;}
.btn-full{width:100%;}

/* Section block */
.section-block{padding: 56px 0; border-top:1px solid var(--border); background: transparent;}
.h1{
	font-size: 1.75rem; text-align:center; color:var(--ink-900); font-weight:800; letter-spacing:-.01em;
}
.h1::after{
	content:""; display:block; width:56px; height:3px; border-radius:2px;
	background: var(--green); margin: 10px auto 0;
}
.section-desc{
	max-width: 760px; margin: 14px auto 0; text-align:center; color:var(--ink-500);
}

/* Cards */
.card-grid{
	margin-top: 28px;
	display:grid; gap:20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
	background:var(--card); border:1px solid var(--border);
	border-radius: var(--radius); padding: 20px;
	box-shadow: 0 2px 12px rgba(0,0,0,.04);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	will-change: transform;
}
.card:hover{
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0,0,0,.08);
	border-color: color-mix(in srgb, var(--green) 35%, var(--border));
}
.card h3{color:var(--ink-900); margin-bottom:8px; font-size:1.1rem;}
.card p{color:var(--ink-700);}

/* Skills */
.skills-list{
	list-style:none; max-width: 680px; margin: 18px auto 0; padding:0;
	display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px;
}
.skills-list li{
	background:var(--card); border:1px solid var(--border); border-radius:10px;
	padding:10px 12px; text-align:center; font-weight:600; color:var(--ink-700);
	transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.skills-list li:hover{
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--green) 30%, var(--border));
	box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

.article-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 28px;
}

/* Horizontal blog image container */
.blog-images {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 16px 0;
  scroll-behavior: smooth;
  position: relative;
}

/* Gradient fade on the sides */
.blog-images::before,
.blog-images::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 5;
}

.blog-images::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}

.blog-images::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.blog-images img {
  flex: 0 0 auto;
  width: 280px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.blog-images img:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
  filter: brightness(1.05);
}

/* Hide scrollbar for cleaner look */
.blog-images::-webkit-scrollbar {
  display: none;
}
.blog-images {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

/* Responsive tweak */
@media (max-width: 600px) {
  .blog-images img {
    width: 220px;
  }
}

.blog-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    border-color: color-mix(in srgb, var(--green) 35%, var(--border));
}

.blog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-content {
    padding: 16px;
}

.blog-content h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--ink-900);
}

.blog-content h3 a {
    text-decoration: none;
    color: inherit;
}

.blog-content h3 a:hover {
    color: var(--green-600);
}

.blog-content p {
    color: var(--ink-700);
    font-size: 0.95rem;
    line-height: 1.4;
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.article-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 16px 0;
  flex-wrap: nowrap;
}

.article-carousel::-webkit-scrollbar {
  display: none;
}

.article-carousel .blog-card {
  flex: 0 0 300px;
  min-width: 250px;
  max-width: 300px;
  transition: transform 0.2s ease;
}

.article-carousel .blog-card:hover {
  transform: translateY(-4px);
}

/* Carousel buttons */
.carousel-wrapper { position: relative; display: flex; align-items: center; }
.carousel-btn {
  background: var(--green); border: none; color: #fff;
  font-size: 1.5rem; padding: 8px 14px; border-radius: 8px; cursor: pointer; z-index: 10;
  transition: background .2s;
}
.carousel-btn:hover { background: var(--green-600); }
.carousel-btn.prev { margin-right: 8px; }
.carousel-btn.next { margin-left: 8px; }

/* Responsive */
@media (max-width: 1024px) { .article-carousel .blog-card { flex:0 0 260px; min-width:220px; } }
@media (max-width: 768px) { .article-carousel .blog-card { flex:0 0 220px; min-width:200px; } }
@media (max-width: 480px) { .carousel-btn { font-size:1rem; padding:5px 10px; } .article-carousel { gap:16px; padding:12px 0; } }

/* Contact Form */
.contact-form{
	background: var(--card);
	border:1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 24px;
	margin-top: 18px;
}
.form-row{
	display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-weight:700; color:var(--ink-900);}
.field .hint{font-size:.85rem; color:var(--ink-500);}

.contact-form input,
.contact-form textarea{
	appearance:none; width:100%; border-radius:10px;
	border:1px solid var(--border); padding:12px 14px;
	font: inherit; color:var(--ink-900); background:#fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#a0a6af;}

.contact-form input:focus,
.contact-form textarea:focus{
	outline:none; border-color: var(--green);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent);
}

/* Footer */
.footer{
	margin-top: 24px; border-top:1px solid var(--border);
	background: #fff;
}
.footer .container{padding: 32px 24px;}
.footer-grid{
	display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.h2{font-size:1.2rem; color:var(--ink-900); font-weight:800; margin-bottom:8px;}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.footer a{text-decoration:none; color:var(--ink-700); font-weight:600;}
.footer a:hover{color:var(--green-600);}
.footer-text{
	text-align:center; color:var(--ink-500); padding: 8px 16px 28px;
}

/* Scroll Animations */
.animate-on-scroll{
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s ease;
}
.animate-on-scroll.visible{
	opacity:1; transform: translateY(0);
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto}
	.animate-on-scroll{opacity:1; transform:none;}
	.btn, .card, .skills-list li{transition: none;}
}

/* Responsive: turn sidebar into top bar */
@media (max-width: 980px){
	.sidebar{
		width:100%; height:auto; position: sticky; top:0;
		flex-direction: row; align-items:center; justify-content: space-between;
		padding: 10px 14px; border-right:none; border-bottom:1px solid var(--border);
		background:#fff; z-index: 40;
	}
	.profile img{width:42px; height:42px;}
	.nav-links{flex-direction:row; flex-wrap: wrap; gap:8px;}
	.nav-links a{padding:8px 10px; font-weight:600;}

	.main-content{margin-left:0;}
	.header .container{padding: 28px 24px;}
	.hero{padding: 24px 0;}
	.section-block{padding: 40px 0;}
	.form-row{grid-template-columns: 1fr;}
}