/* ---------------------------------------------------------------------------
   Projects page — alternating publications-style flow.
   Most styles inherit from src/sass/_projects.scss (.projects, .project,
   .project-left/right, .project__image-container, .publications__container,
   .publication__filter-btn). Only additions/overrides live here.
   --------------------------------------------------------------------------- */

/* Course chip above each title — mirrors the project-detail header */
.project__course {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4b979;
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .project__course {
    margin-bottom: 1rem;
  }
}

/* Cluster of action buttons (preview / live / github) */
.project__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .project__actions {
    justify-content: flex-start;
  }
}

/* "Details →" text link (replaces the eye icon button) */
.project__details-link {
  font-size: 1.4rem;
  font-weight: 600;
  color: #d4b979;
  text-decoration: none;
  transition: letter-spacing 0.3s ease;
}

.project__details-link:hover {
  letter-spacing: 1px;
}

/* Linked titles keep the card's text color */
.project__title a {
  color: inherit;
  text-decoration: none;
}

.project__title a:hover {
  color: #d4b979;
}

/* Inline-grow for the publications-style preview button */
.project__preview-btn {
  margin-top: 0;
}

.project__preview-btn--play svg {
  stroke: rgba(178, 151, 88, 0.9);
  fill: rgba(178, 151, 88, 0.9);
}

.project__preview-btn--play:hover svg {
  stroke: rgba(178, 151, 88, 1);
  fill: rgba(178, 151, 88, 1);
}

.project__preview-btn--git {
  text-decoration: none;
  color: rgba(178, 151, 88, 0.9);
}

.project__preview-btn--git svg {
  stroke: none;
  fill: rgba(178, 151, 88, 0.9);
}

.project__preview-btn--git:hover svg {
  fill: rgba(178, 151, 88, 1);
}

/* Section-level layout — match publications spacing on subpages */
.projects-flow {
  padding-top: 2rem;
  padding-bottom: 6rem;
  overflow-x: clip; /* reveal transforms must not widen the phone viewport */
}

.projects-flow .projects__heading {
  margin-bottom: 2rem;
}

.projects-flow__empty {
  font-size: 1.6rem;
  color: #a9a7b8;
  text-align: center;
  padding: 4rem 0;
  width: 100%;
}

/* Filter buttons can wrap on narrow screens */
.projects-flow ~ * .publications__filters,
.projects-flow .publications__filters {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* Description: allow inline HTML accents (strong, em) without disrupting flow */
.project__description strong {
  color: #ffffff;
  font-weight: 600;
}

.project__description code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.92em;
  background: rgba(178, 151, 88, 0.1);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  color: #d4b979;
}

/* Scrapbook-style overlay image that extends beyond the card boundary.
   Used by setting `overlayImage` on a project entry. The parent
   .project__image-container needs overflow:visible so the overlay can
   hang past the edge into the surrounding page. */
.project:has(.project__image-overlay) .project__image-container {
  overflow: visible;
}

.project__image-overlay {
  position: absolute;
  bottom: -50px;
  left: -55px;
  width: 38%;
  max-width: 240px;
  height: auto;
  transform: rotate(-7deg);
  border: 8px solid #f8f5e8;
  border-bottom-width: 28px; /* polaroid-style bottom margin */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  background: #f8f5e8;
  z-index: 5;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.project:hover .project__image-overlay {
  transform: rotate(-4deg) translateY(-4px);
}

@media (max-width: 768px) {
  .project__image-overlay {
    bottom: -28px;
    left: -22px;
    width: 32%;
    border-width: 5px;
    border-bottom-width: 18px;
  }
}


/*# sourceMappingURL=research.05c7f027302af028657e.css.map*/