/* =========================================================
   components.css — page sections & UI components
   ========================================================= */

/* ---------- header ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: hsl(var(--background) / 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
header.site-header .wrap { padding-block: 1.5rem; }
nav.main-nav { display: flex; align-items: center; justify-content: space-between; }
nav.main-nav ul { display: flex; gap: 1rem; }
@media (min-width: 640px) { nav.main-nav ul { gap: 2rem; } }
.nav-actions { display: flex; gap: 0.5rem; }
@media (min-width: 640px) { .nav-actions { gap: 1rem; } }

.link { color: hsl(var(--muted-foreground)); transition: color .15s ease; }
.link:hover { color: hsl(var(--foreground)); }
nav.main-nav a.active { color: hsl(var(--foreground)); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; border-radius: calc(var(--radius) - 2px);
  font-size: .875rem; font-weight: 500; height: 2.25rem; padding: 0 1rem;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
  border: 1px solid transparent; cursor: pointer; background: none;
}
.btn:disabled { pointer-events: none; opacity: .5; }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn-default:hover { background: hsl(var(--primary) / .9); }
.btn-outline { border-color: hsl(var(--input)); background: hsl(var(--background)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-icon { height: 2.25rem; width: 2.25rem; padding: 0; }
.btn-sm { height: 2rem; border-radius: calc(var(--radius) - 2px); padding: 0 .75rem; font-size: .75rem; }
.btn-full { width: 100%; }

/* ---------- hero ---------- */
.hero {
  margin-top: 2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;
}
@media (min-width: 768px) {
  .hero { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
}
.hero-copy { display: flex; flex-direction: column; max-width: 320px; }
@media (min-width: 640px) { .hero-copy { max-width: none; } }
.hero-copy .title { font-size: 2.25rem; }
@media (min-width: 640px) { .hero-copy .title { font-size: 3rem; } }
.hero-age { margin-top: .5rem; white-space: nowrap; font-size: .875rem; font-weight: 500; }
@media (min-width: 640px) { .hero-age { font-size: 1rem; } }
.hero-desc { margin-top: 1rem; max-width: 24rem; font-size: .875rem; text-wrap: balance; }
@media (min-width: 640px) { .hero-desc { font-size: 1rem; } }
.hero-chat-prompt { margin-top: 1.5rem; display: flex; align-items: center; gap: .25rem; }
.hero-chat-prompt p { font-size: .875rem; font-weight: 600; text-wrap: balance; }
@media (min-width: 640px) { .hero-chat-prompt p { font-size: 1rem; } }
.hero-chat-prompt svg { width: 1.25rem; height: 1.25rem; animation: bounce 1s infinite; }
.hero-chat-prompt .arrow-dr { display: none; }
@media (min-width: 640px) { .hero-chat-prompt .arrow-dr { display: block; } .hero-chat-prompt .arrow-d { display: none; } }
.hero-escalation { margin-top: .25rem; font-size: .75rem; font-weight: 300; }
.hero-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* "Ankit's Assistant" — hover underline + click opens the chat widget */
.chat-open-link {
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.chat-open-link:hover,
.chat-open-link:focus-visible {
  text-decoration: underline;
}

/* swipe cards */
.swipe-cards { position: relative; display: grid; place-items: center; height: 233px; width: 175px; }
@media (min-width: 768px) { .swipe-cards { margin-right: 2rem; } }
.swipe-card {
  grid-row: 1; grid-column: 1;
  position: absolute; height: 233px; width: 175px; transform-origin: bottom;
  overflow: hidden; border-radius: .5rem; background: #fff;
  cursor: grab; touch-action: pan-y;
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.swipe-card:active { cursor: grabbing; }
.swipe-card img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.swipe-card.front { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3); }
.swipe-again { grid-row: 1; grid-column: 1; z-index: 20; display: none; }
.swipe-again.show { display: block; }

.skeleton {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: hsl(var(--primary) / .1); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* ---------- socials ---------- */
.socials { display: flex; gap: 1.5rem; }
.socials a { color: hsl(var(--muted-foreground)); }
.socials a:hover { color: hsl(var(--foreground)); }
.socials svg { width: 1.25rem; height: 1.25rem; }

/* ---------- tabs (experience) ---------- */
.tabs-list {
  display: grid; grid-template-columns: 1fr 1fr; height: 2.25rem;
  align-items: center; border-radius: .5rem; background: hsl(var(--muted));
  padding: .25rem; margin-bottom: .5rem; color: hsl(var(--muted-foreground));
}
.tabs-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; border-radius: calc(var(--radius) - 2px);
  padding: .25rem .75rem; font-size: .875rem; font-weight: 500;
  border: none; background: transparent; cursor: pointer; transition: all .15s ease;
}
.tabs-trigger[data-state="active"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.tabs-content { margin-top: .5rem; display: none; }
.tabs-content[data-state="active"] { display: block; }

/* ---------- card ---------- */
.card { border-radius: .75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }

/* ---------- timeline ---------- */
.timeline-list { margin-left: 2.5rem; border-left: 1px solid hsl(var(--border)); }
.timeline-item { position: relative; margin-left: 2.5rem; padding-block: 1rem; }
.timeline-logo {
  position: absolute; left: -4rem; top: 1rem; display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #fff;
}
.avatar { position: relative; display: flex; height: 3rem; width: 3rem; flex-shrink: 0; overflow: hidden; border-radius: 9999px; border: 1px solid hsl(var(--border)); }
.avatar img { height: 100%; width: 100%; object-fit: contain; background: hsl(var(--background)); }
.timeline-body { display: flex; flex: 1 1 0%; flex-direction: column; gap: .5rem; }
.timeline-body h2 { font-size: 1rem; font-weight: 600; line-height: 1; }
.timeline-positions { display: flex; flex-direction: column; gap: .5rem; }
.timeline-position + .timeline-position { margin-top: .5rem; }
.pos-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.pos-title { font-size: .875rem; font-weight: 500; line-height: 1; color: hsl(var(--muted-foreground)); }
.pos-time { white-space: nowrap; padding-right: 2rem; font-size: .75rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.pos-desc { margin: .5rem 0 0 1rem; list-style: disc; list-style-position: outside; }
/* theme-aware bullet text: black in light mode, white in dark mode (was a hardcoded #ededed before) */
.pos-desc li { font-size: .875rem; padding-right: 2rem; margin-top: .25rem; color: hsl(var(--foreground) / .85); }
.pos-desc li::marker { color: hsl(var(--foreground) / .85); }
.pos-links { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .375rem; border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent; padding: .125rem .625rem; font-size: .75rem; font-weight: 600;
  transition: colors .15s ease;
}
.badge-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge-default:hover { background: hsl(var(--primary) / .8); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-secondary:hover { background: hsl(var(--secondary) / .8); }
.badge-tag { padding: 0 .25rem; font-size: 10px; }
.badge-link { display: flex; gap: .5rem; padding: .25rem .5rem; font-size: 10px; }
.badge svg { width: .75rem; height: .75rem; }
.badge .icon-brand { width: .75rem; height: .75rem; }

/* ---------- projects ---------- */
.section-heading { display: flex; justify-content: space-between; align-items: center; }
.section-heading .title { font-size: 1.5rem; }
@media (min-width: 640px) { .section-heading .title { font-size: 1.875rem; } }
.link-icon { display: flex; align-items: center; gap: .5rem; font-weight: 300; }
.link-icon svg { width: 1.25rem; height: 1.25rem; }

.projects-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: 1fr 1fr; } }

.project-card { display: flex; flex-direction: column; overflow: hidden; }
.project-image-wrap { position: relative; overflow: hidden; height: 10rem; width: 100%; padding: 1.5rem 1.5rem 0; }
.project-image-wrap .img-inner { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: calc(var(--radius) - 2px); }
.project-image-wrap img { height: 100%; width: 100%; object-fit: cover; object-position: top; }
.project-content { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; }
.project-content .card-title { font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.project-desc { font-size: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.project-footer { display: flex; height: 100%; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0 1.5rem 1.5rem; }
.project-tags { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.project-links { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ---------- footer ---------- */
footer.site-footer { width: 100%; padding-top: 3rem; }
footer.site-footer .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 8rem; }
@media (min-width: 640px) { footer.site-footer .wrap { flex-direction: row-reverse; justify-content: space-between; } }
.footer-copy { margin-top: 2rem; text-align: center; }
@media (min-width: 640px) { .footer-copy { margin-top: 0; text-align: left; } }
.footer-copy p { font-size: .75rem; color: hsl(var(--muted-foreground)); }

/* ---------- contact ---------- */
.article { margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem; padding-bottom: 4rem; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.field { height: 4rem; }
.field.field-message { height: auto; min-height: 8rem; grid-column: 1 / -1; }
.input, .textarea {
  display: flex; width: 100%; border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input)); background: transparent;
  padding: .25rem .75rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05);
  font: inherit; font-size: .875rem; color: hsl(var(--foreground));
}
.input { height: 2.25rem; }
.textarea { min-height: 60px; padding-block: .5rem; resize: none; }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus, .textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.input-error { margin-left: .25rem; margin-top: .5rem; font-size: .875rem; color: rgb(251 113 133); }
.contact-actions { margin-top: .5rem; }
.contact-note { margin-top: 1rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.contact-note .link { font-weight: 600; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- alert dialog ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .5);
  display: none; align-items: center; justify-content: center; padding: 1rem;
  animation: fadeIn .15s ease;
}
.overlay.show { display: flex; }
.dialog {
  width: 100%; max-width: 28rem; border-radius: .75rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); padding: 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3);
  animation: zoomIn .15s ease;
}
.dialog h2 { font-size: 1.125rem; font-weight: 600; }
.dialog p { margin-top: .5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.dialog .highlight { color: hsl(var(--foreground)); }
.dialog-footer { margin-top: 1.5rem; display: flex; flex-direction: column-reverse; gap: .5rem; }
@media (min-width: 640px) { .dialog-footer { flex-direction: row; justify-content: flex-end; } }

/* ---------- toast ---------- */
.toaster { position: fixed; bottom: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  min-width: 260px; max-width: 356px; border-radius: .5rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15);
  padding: .875rem 1rem; font-size: .875rem; display: flex; align-items: center; gap: .5rem;
  animation: toastIn .2s ease;
}
.toast.success { border-color: rgb(16 185 129 / .4); }
.toast.error { border-color: rgb(244 63 94 / .4); }
.toast svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.toast.success svg { color: rgb(16 185 129); }
.toast.error svg { color: rgb(244 63 94); }

/* ---------- 404 ---------- */
.notfound-wrap { min-height: 60vh; display: grid; place-items: center; padding: 4rem 0; }
.notfound-inner { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .notfound-inner { flex-direction: row; } }
.notfound-code { font-size: 3rem; color: hsl(var(--muted-foreground)); }
.notfound-right { }
@media (min-width: 640px) { .notfound-right { margin-left: 1.5rem; padding-left: 1.5rem; border-left: 1px solid hsl(var(--border)); } }
.notfound-right .title { font-size: 2.25rem; }
@media (min-width: 640px) { .notfound-right .title { font-size: 3rem; } }
.notfound-right p { margin-top: .25rem; color: hsl(var(--muted-foreground)); }
.notfound-actions { margin-top: 2.5rem; }
@media (min-width: 640px) { .notfound-actions { padding-left: 1.5rem; } }