/* components.css — one slice of the site stylesheet, split by concern.
   Load order is fixed in base.html and mirrors the old single-file
   source order; do not reorder the <link> tags. tokens.css holds
   every colour and must load first. */
/*********************************************************************


                                CONTENT


**********************************************************************/
img {
  max-width: 100%;
}
.btn {
  font-size: 19px;
  font-size: 1.1875rem;
  text-decoration: none;
  font-family: var(--font-hand-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  /* Same 6px as the cards, callout and timeline entries — a square-cornered
     button was the one element still shaped like the 2013 template. */
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  -ms-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border: 0 none;
  padding: 12px 35px;
  text-shadow: none;
}
.btn-primary {
  color: var(--bg);
  background-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: var(--bg);
  background-color: var(--accent-hover);
}
.btn-action {
  background: transparent!important;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  text-shadow: none;
}
.btn-action:hover,
.btn-action:focus,
.btn-action:active,
.btn-action.active {
  color: var(--bg)!important;
  background: var(--accent)!important;
  border-color: var(--accent);
}
.btn-lg {
  padding: 13px 60px;
  font-size: 22px;
  line-height: 1.33;
}
/* Section - Featured */
.featured {
  font-size: 17px;
  font-size: 1.0625rem;
}
/* Card titles keep the casing from content.py — no text-transform. These are
   product names, and forcing caps loses real information: "Dingi Map APIs"
   became "DINGI MAP APIS" and the PyPI package "stocksurferbd" shouted. */
.featured h3 {
  font-family: var(--font-hand-display);
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 1.2em;
  vertical-align: middle;
  margin: 0 0 10px 0;
}
/* Section - Services & Projects cards */
#services > .row > div,
#recent-works > .row > div {
  margin-bottom: 20px;
}
.service-card,
.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 22px 18px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.service-card:hover,
.project-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent-line);
  transform: translateY(-3px);
}
.service-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 12px;
}
.project-thumb {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg-inset);
}
.project-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card h3,
.project-card h3 {
  margin-top: 0;
}
/* Cards are a note pinned to a board, not a page of prose: the copy is short,
   so it gets tighter leading and a smaller gap to the "Read more" than the
   1.7em / 24px used for running text. */
.service-card p,
.project-card p {
  flex: 1 1 auto;
  line-height: 1.5em;
  margin-bottom: 14px;
}
.service-card p:last-of-type,
.project-card p:last-of-type {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.cards-more {
  margin-top: 20px;
}
/*********************************************************************


                       SECTION TITLES & PAGE HEADERS


**********************************************************************/
.section-title {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 0px 0 25px;
  text-align: center;
  font-weight: 700;
  font-size: 44px;
  font-size: 2.75rem;
}
.section-title a {
  color: var(--text-strong);
}
.section-title span {
  display: inline-block;
  position: relative;
}
.section-title span:before,
.section-title span:after {
  content: "";
  position: absolute;
  height: 4px;
  top: .53em;
  width: 400%;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.section-title span:before {
  right: 100%;
  margin-right: 45px;
}
.section-title span:after {
  left: 100%;
  margin-left: 45px;
}
.page-header {
  padding-bottom: 0;
  margin: 0;
  border-bottom: none;
  text-align: left;
}
.page-header .page-title {
  margin-top: 0;
  margin-bottom: 30px;
}
/*********************************************************************


                                FOOTER


**********************************************************************/
#footer {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 30px 0 0 0;
  font-size: 14px;
  color: var(--text-muted);
}
#footer a {
  color: var(--text);
}
#footer a:hover {
  color: var(--accent);
}
#footer h3.widget-title {
  font-size: 23px;
  font-size: 1.4375rem;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  margin: 0 0 20px;
}
#underfooter {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 15px 0;
  color: var(--text-faint);
  font-size: 14px;
}
#underfooter a {
  color: var(--text-muted);
}
#underfooter a:hover {
  color: var(--accent);
}
#underfooter p {
  margin: 0;
}
.follow-me-icons {
  font-size: 30px;
}
.follow-me-icons i {
  display: inline-block;
  margin: 0 10px;
}
/* Services — simple "Read more" text link + even card rows
/////////////////////////////////////////////////////////////////////*/
.read-more {
  font-family: var(--font-hand-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.read-more:hover {
  text-decoration: none;
}
@media (min-width: 768px) {
#services > .row,
#recent-works > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* Timeline — Experience & Education
/////////////////////////////////////////////////////////////////////*/
.timeline {
  position: relative;
  margin-top: 10px;
}
/* No rail and no marker column: each entry is a self-contained card, and its
   icon sits inside, against the company or institution name. The name is what
   you scan for, so the icon belongs next to it rather than out in a gutter. */
.timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.timeline-content {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
  padding: 22px 24px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.timeline-content:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent-line);
}
.timeline-header {
  display: flex;
  flex-wrap: wrap;
  /* Centre, not baseline: the title carries a 40px chip now, and baseline
     alignment would hang the date off the text's baseline instead of the
     row's middle. */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.timeline-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}
.timeline-title a {
  color: var(--text-strong);
  text-decoration: none;
}
.timeline-title a:hover {
  color: var(--accent);
}
.timeline-subtitle {
  flex: 0 0 100%;
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text-muted);
}
/* Dates read as something pencilled in the margin — the display hand, mixed
   case. Uppercase in a handwriting face is close to illegible at this size. */
.timeline-date {
  flex: 0 0 auto;
  font-family: var(--font-hand-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}
.timeline-body p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 12px;
}
.timeline-body p:last-child {
  margin-bottom: 0;
}
.timeline-media {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.timeline-media figure {
  flex: 1 1 220px;
  margin: 0;
}
.timeline-media img {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.timeline-media figcaption {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}
/* Publications list
/////////////////////////////////////////////////////////////////////*/
.publication-list {
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.publication-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}
.publication-item:hover {
  background: var(--bg-elev);
}
.publication-title {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
}
.publication-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.publication-meta span {
  font-family: var(--font-hand-display);
  font-weight: 700;
  font-size: 17px;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--bg-elev-2);
  color: var(--text);
}
.publication-body p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 12px;
}
/* Max page width
/////////////////////////////////////////////////////////////////////*/
@media (min-width: 1200px) {
.container {
    max-width: 1080px;
  }
}
/* Phones
/////////////////////////////////////////////////////////////////////*/
@media (max-width: 767px) {
  /* The title was set for a wide page, but it keeps its flanking rules — the
     section header should read the same on a phone as on a desktop. Only the
     45px gutter shrinks, which is what actually runs out of room at 390px. */
.section-title {
    font-size: 30px;
    font-size: 1.875rem;
    margin-bottom: 18px;
  }
.section-title span:before {
    margin-right: 16px;
  }
.section-title span:after {
    margin-left: 16px;
  }
.featured h3 {
    font-size: 26px;
    font-size: 1.625rem;
  }
.service-card,
  .project-card {
    padding: 20px 16px 16px;
  }
.timeline-item {
    padding-bottom: 16px;
  }
.timeline-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
.timeline-content {
    padding: 16px 16px 18px;
  }
.timeline-title {
    font-size: 22px;
    gap: 10px;
  }
.timeline-header {
    gap: 4px;
  }
.publication-title {
    font-size: 21px;
  }
  /* Full-bleed tap targets read better than a centred pill on a phone. */
.cards-more .btn,
  .intro-callout-cta .btn {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
#underfooter p.text-right {
    text-align: center;
  }
.follow-me-icons i {
    margin: 0 14px 0 0;
  }
}