/* CV Hero - Page Template Styles */
@import url('styles.css');

/* Page Hero */
.page-hero{padding:120px 0 60px;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 50%,#eff6ff 100%);text-align:center}
.page-hero h1{font-size:2.5rem;font-weight:800;color:#111827;margin-bottom:12px}
.page-hero p{font-size:1.125rem;color:#6b7280;max-width:600px;margin:0 auto}

/* Content */
.content-section{padding:80px 0}
.content-section h2{font-size:1.75rem;font-weight:700;color:#111827;margin-bottom:16px;margin-top:40px}
.content-section h2:first-child{margin-top:0}
.content-section h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:12px;margin-top:28px}
.content-section p{color:#4b5563;line-height:1.8;margin-bottom:16px}
.content-section ul{margin-bottom:16px;padding-left:24px}
.content-section li{color:#4b5563;line-height:1.8;margin-bottom:8px}
.content-section a{color:#2563eb;text-decoration:none;font-weight:500}
.content-section a:hover{text-decoration:underline}

/* Team Grid */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:32px;margin-top:40px}
.team-card{text-align:center;padding:32px 24px;background:#fff;border-radius:20px;border:1px solid #f3f4f6;transition:all .3s}
.team-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px)}
.team-card img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:4px solid #dbeafe}
.team-card h4{font-weight:700;color:#111827;margin-bottom:4px}
.team-card p{color:#6b7280;font-size:.875rem;margin:0}

/* Values Grid */
.values-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:32px}
.value-card{padding:28px;background:#fff;border-radius:16px;border:1px solid #f3f4f6;transition:all .3s}
.value-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.06);transform:translateY(-2px)}
.value-card .icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.value-card h4{font-weight:700;color:#111827;margin-bottom:8px}
.value-card p{color:#6b7280;font-size:.875rem;line-height:1.7;margin:0}

/* Timeline */
.timeline{position:relative;padding-left:32px;margin-top:32px}
.timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;background:#e5e7eb}
.timeline-item{position:relative;margin-bottom:40px}
.timeline-item::before{content:'';position:absolute;left:-26px;top:4px;width:14px;height:14px;background:#2563eb;border-radius:50%;border:3px solid #dbeafe}
.timeline-item h4{font-weight:700;color:#111827;margin-bottom:4px}
.timeline-item .date{font-size:.75rem;color:#2563eb;font-weight:600;margin-bottom:8px}
.timeline-item p{color:#6b7280;font-size:.875rem;margin:0}

/* Blog Cards */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-top:40px}
.blog-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid #f3f4f6;transition:all .3s}
.blog-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.08);transform:translateY(-4px)}
.blog-card .thumb{height:200px;display:flex;align-items:center;justify-content:center;position:relative}
.blog-card .thumb i{width:48px;height:48px;color:rgba(255,255,255,.7)}
.blog-card .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);color:#1e40af;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:9999px}
.blog-card .body{padding:24px}
.blog-card .meta{font-size:.75rem;color:#9ca3af;margin-bottom:8px}
.blog-card h3{font-weight:700;color:#111827;margin-bottom:8px;font-size:1.125rem}
.blog-card h3 a{color:inherit;text-decoration:none}
.blog-card h3 a:hover{color:#2563eb}
.blog-card p{color:#6b7280;font-size:.875rem;line-height:1.6;margin-bottom:12px}
.blog-card .read-more{color:#2563eb;font-weight:600;font-size:.875rem;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.blog-card .read-more:hover{text-decoration:underline}

/* Blog Post Content */
.post-content{max-width:720px;margin:0 auto}
.post-content h2{font-size:1.5rem;font-weight:700;color:#111827;margin:32px 0 12px}
.post-content h3{font-size:1.2rem;font-weight:600;color:#374151;margin:24px 0 10px}
.post-content p{color:#4b5563;line-height:1.85;margin-bottom:16px}
.post-content ul{margin-bottom:16px;padding-left:24px}
.post-content li{color:#4b5563;line-height:1.8;margin-bottom:8px}
.post-content blockquote{border-left:4px solid #2563eb;padding:16px 24px;background:#f8fafc;border-radius:0 12px 12px 0;margin:24px 0;font-style:italic;color:#475569}
.post-content .author-box{display:flex;align-items:center;gap:16px;padding:24px;background:#f8fafc;border-radius:16px;margin-top:40px}
.post-content .author-box img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.post-content .author-box h4{font-weight:700;color:#111827;margin-bottom:2px}
.post-content .author-box p{margin:0;font-size:.875rem;color:#6b7280}

/* Contact Grid */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:40px}
.contact-card{padding:32px;background:#fff;border-radius:16px;border:1px solid #f3f4f6;text-align:center;transition:all .3s}
.contact-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.06);transform:translateY(-2px)}
.contact-card .icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.contact-card h4{font-weight:700;color:#111827;margin-bottom:6px}
.contact-card p{color:#6b7280;font-size:.875rem;margin-bottom:12px}
.contact-card a{color:#2563eb;font-weight:600;text-decoration:none}
.contact-card a:hover{text-decoration:underline}

/* Contact Form */
.contact-form{max-width:560px;margin:40px auto 0}
.contact-form .form-group{margin-bottom:20px}
.contact-form label{display:block;font-size:.875rem;font-weight:600;color:#374151;margin-bottom:6px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:.9375rem;transition:all .2s;background:#fff;font-family:inherit}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form button{width:100%;padding:14px;background:#2563eb;color:#fff;font-weight:700;font-size:1rem;border:none;border-radius:12px;cursor:pointer;transition:all .2s}
.contact-form button:hover{background:#1d4ed8;box-shadow:0 4px 20px rgba(37,99,235,.3)}

@media(max-width:640px){
    .page-hero{padding:100px 16px 40px}
    .page-hero h1{font-size:1.875rem}
    .content-section{padding:48px 0}
}