/* ================================
   Component Styles
   ================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.75rem;
  background-color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-book);
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  background-color: var(--color-gray-lighter);
}

.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Filter Tab Buttons */
.filter-tab {
  padding: 0.75rem;
  min-width: 18.375rem; /* 294px */
  background-color: var(--color-gray-light);
  color: var(--color-gray-dark);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.filter-tab--active {
  background-color: var(--color-black);
  color: var(--color-white);
}

.filter-subtab {
  padding: 0.75rem;
  min-width: auto;
  background-color: var(--color-gray-light);
  color: var(--color-gray-dark);
}

.filter-subtab--active {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Project/Document Cards */
.card {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__icon svg {
  width: 100%;
  height: 100%;
}

.card__content {
  flex: 1;
  min-width: 0;
}

.card__title {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-medium);
  color: var(--color-black);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Filter Boxes */
.filter-box {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 23px */
}

.filter-box:not(:last-child) {
  margin-bottom: 0.625rem;
}

.filter-box__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.filter-box__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-book);
  color: var(--color-primary);
  flex: 1;
}

.filter-box__toggle {
  width: 0.775rem; /* 12.397px */
  height: 0.125rem; /* 2px */
  background-color: var(--color-primary);
  position: relative;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.filter-box__toggle::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  transform: rotate(90deg);
  transition: opacity var(--transition-base);
}

.filter-box--collapsed .filter-box__toggle::after {
  opacity: 0;
}

.filter-box__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.filter-box--collapsed .filter-box__content {
  display: none;
}

/* Checkboxes */
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox__box {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-black);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.checkbox__input:checked + .checkbox__box {
  background-color: var(--color-black);
}

.checkbox__input:checked + .checkbox__box::after {
  content: '✓';
  color: var(--color-white);
  font-size: 0.75rem;
}

.checkbox__input:focus + .checkbox__box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.checkbox__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-book);
  color: var(--color-black);
}

/* Dropdown/Select */
.dropdown {
  position: relative;
}

.dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1875rem; /* 19px */
  padding: 0.625rem;
  background-color: var(--color-gray-lighter);
  border: none;
  border-radius: 0.625rem; /* 10px */
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-book);
  color: var(--color-black);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.dropdown__trigger:hover {
  background-color: var(--color-gray-light);
}

.dropdown__arrow {
  width: 0.75rem;
  height: 0.5625rem;
  transition: transform var(--transition-fast);
}

.dropdown--open .dropdown__arrow {
  transform: rotate(180deg);
}

.dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-radius: 0.625rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 15rem;
  overflow-y: auto;
  z-index: 10;
}

.dropdown--open .dropdown__menu {
  display: block;
}

.dropdown__option {
  padding: 0.625rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.dropdown__option:hover {
  background-color: var(--color-gray-lighter);
}

/* Search Input */
.search-input {
  width: 100%;
  padding: 0.625rem;
  background-color: var(--color-gray-lighter);
  border: none;
  border-radius: 0.625rem;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-book);
  color: var(--color-black);
  transition: background-color var(--transition-fast);
}

.search-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background-color: var(--color-white);
}

.search-input::placeholder {
  color: var(--color-black);
  opacity: 1;
}

/* Scrollable List */
.scrollable-list {
  display: flex;
  gap: 3.1875rem; /* 51px */
}

.scrollable-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.scrollable-list__scrollbar {
  width: 0.627rem; /* 10.035px */
  height: 3.75rem; /* 60px */
  background-color: var(--color-gray-light);
  border-radius: 0.375rem; /* 6px */
  flex-shrink: 0;
}

/* Range Slider */
.range-slider {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.range-slider__values {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.range-slider__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-book);
  color: var(--color-black);
  line-height: 1.2;
}

.range-slider__track-container {
  position: relative;
  width: 100%;
  height: 1.25rem; /* 20px */
}

.range-slider__track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-light);
}

.range-slider__track-active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background-color: var(--color-black);
}

.range-slider__handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 50%;
  cursor: grab;
  transition: transform var(--transition-fast);
}

.range-slider__handle:hover,
.range-slider__handle:active {
  transform: translate(-50%, -50%) scale(1.15);
}

.range-slider__handle:active {
  cursor: grabbing;
}

/* Link Styles */
.link {
  color: var(--color-gray-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link:hover {
  color: var(--color-black);
}

/* Social Icons */
.social-icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity var(--transition-fast);
}

.social-icon:hover {
  opacity: 0.7;
}

main {
  padding-top: calc(var(--header-height) + var(--spacing-lg) + 2rem) ;
}

/* ================================
   Projects Archive Page
   ================================ */

.projects-page {
  min-height: 100vh;
  background-color: var(--color-bg);
}

.projects-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0.875rem 0 0;
}

.projects-header {
  display: flex;
  gap: 3.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Projects Title */
.projects-title {
  transform: translateY(0.75rem);
  font-family: var(--font-family);
  font-size: 2.0625rem; /* 33px */
  font-weight: var(--font-weight-medium);
  line-height: 2.0625rem; /* 33px */
  letter-spacing: -0.33px;
  color: var(--color-gray);
  margin-bottom: 2rem;
}

/* Projects Tabs */
.projects-tabs {
  display: flex;
  gap: 1.5rem; /* 24px */
}

.projects-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem; /* 12px */
  width: 18.75rem; /* 294px */
  height: 3.25rem; /* 52px */
  background-color: var(--color-white);
  border: none;
  border-radius: 1rem; /* 16px */
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.projects-tab--active {
  background-color: var(--color-black);
  color: var(--color-white);
}

.projects-tab--disabled {
  background-color: var(--color-gray-light);
  color: var(--color-gray-dark);
  cursor: not-allowed;
  opacity: 0.7;
}

.projects-tab:not(.projects-tab--disabled):hover {
  transform: translateY(-2px);
}

/* Projects Search */
.projects-search {
  margin-left: auto;
  margin-bottom: 3.5rem;
  padding-left: 4rem;
}

.projects-search-input {
  width: 59.25rem; /* 930px */
  height: 3rem; /* 48px */
  padding: 0 0.8375rem; /* ~13.44px */
  background-color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm); /* 12px */
  font-family: var(--font-family);
  font-size: var(--font-size-medium); /* 18px */
  font-weight: var(--font-weight-book);
  line-height: 1.5rem; /* 24px */
  color: var(--color-black);
}

.projects-search-input::placeholder {
  color: #b4b4b4;
}

.projects-search-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Projects Layout */
.projects-layout {
  display: grid;
  grid-template-columns: 15.75rem 1fr; /* 252px sidebar + rest */
  gap: 3rem; /* ~48px */
  align-items: start;
}

/* Projects Sidebar */
.projects-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

/* Filter Box */
.filter-box {
  background-color: var(--color-white);
  border-radius: 1.25rem; /* 20px */
  padding: 1.25rem; /* 20px */
  overflow: hidden;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.filter-title {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-primary);
  text-align: left;
}

.filter-icon {
  width: 0.775rem; /* ~12.397px */
  color: var(--color-primary);
  transition: transform var(--transition-fast);
  transform-origin: center;
}

.filter-box.collapsed .filter-icon {
  transform: rotate(-90deg);
}

.filter-box.collapsed .filter-content {
  display: none;
}

/* Filter Content */
.filter-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
}

/* Filter Checkbox */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
  width: 1rem; /* 16px */
  height: 1rem; /* 16px */
  border: 1px solid var(--color-black);
  border-radius: 0.125rem; /* 2px */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-white);
  flex-shrink: 0;
}

.filter-checkbox input[type="checkbox"]:checked {
  background-color: var(--color-black);
  position: relative;
}

.filter-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.0625rem;
  width: 0.375rem;
  height: 0.625rem;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filter-checkbox span {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
}

/* Range Slider */
.range-slider-wrapper {
  padding-top: 0.5rem;
}

.range-track {
  position: relative;
  width: 100%;
  height: 0.125rem; /* 2px */
  background-color: var(--color-gray-light);
  margin-bottom: 1rem;
}

.range-fill {
  position: absolute;
  height: 100%;
  background-color: var(--color-black);
  left: 25%;
  right: 25%;
}

.range-handle {
  position: absolute;
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
}

.range-handle--min {
  left: 25%;
  transform: translate(-50%, -50%);
}

.range-handle--max {
  right: 25%;
  transform: translate(50%, -50%);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.125rem; /* 18px */
  color: var(--color-black);
}

/* Filter Dropdown */
.filter-dropdown {
  width: 100%;
}

.dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.625rem; /* 10px */
  background-color: var(--color-gray-lighter);
  border: none;
  border-radius: 0.625rem; /* 10px */
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
  cursor: pointer;
}

/* Filter Search */
.filter-search {
  margin-bottom: 1rem;
}

.filter-search input {
  width: 100%;
  padding: 0.625rem; /* 10px */
  background-color: var(--color-gray-lighter);
  border: none;
  border-radius: 0.625rem; /* 10px */
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
}

.filter-search input::placeholder {
  color: var(--color-black);
}

/* Organization Filter List */
.filter-org-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
  max-height: 15rem;
  overflow-y: auto;
  padding-right: 0.625rem;
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Project Card */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem;
  background-color: var(--color-white);
  border-radius: var(--radius-xl); /* 24px */
  transition: all var(--transition-fast);
}

.project-card:hover .project-card-title {
  color: var(--color-primary);
}

.project-card-title {
  font-family: var(--font-family);
  font-size: 1.25rem; /* 20px */
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem; /* 24px */
  color: var(--color-black);
  margin: 0;
  min-height: 4.5rem; /* Space for 3 lines */
  transition: all var(--transition-fast);
}

.project-card-tags {
  display: flex;
  gap: 0.75rem; /* 12px */
  flex-wrap: wrap;
}

.project-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem; /* 8px */
  background-color: #fff4f4;
  border-radius: 0.25rem; /* 4px */
  font-family: var(--font-family);
  font-size: 0.75rem; /* 12px */
  font-weight: var(--font-weight-book);
  line-height: 0.875rem; /* 14px */
  color: var(--color-primary);
}

.project-card-image {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 4096 / 2731;
  border-radius: 0.25rem; /* 4px */
  overflow: hidden;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card a {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* ================================
   Single Project Page
   ================================ */

.single-project {
  min-height: 100vh;
  background-color: var(--color-bg);
}

.single-project-container {
  max-width: var(--container-max-width);
  margin: 3.75rem auto 0;
  padding: 0;
}

/* Single Project Layout */
.single-project-layout {
  display: grid;
  grid-template-columns: 10fr 2fr;
  gap: 1.5rem; /* 24px */
}

/* Main Project Info Box */
.project-info-box {
  flex: 0 0 66.25rem; /* 1060px */
  background-color: var(--color-white);
  border-radius: var(--radius-xl); /* 24px */
  padding: 1.5rem; /* 24px */
  display: flex;
  flex-direction: column;
  gap: 3.5rem; /* 56px */
}

/* Project Hero */
.project-hero {
  display: flex;
  gap: 1.5rem; /* 24px */
}

.project-hero-image {
  flex: 0 0 23.72rem; /* ~379.5px */
  height: 15.81rem; /* ~253px */
  border-radius: 0.25rem; /* 4px */
  overflow: hidden;
}

.project-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-hero-content {
  flex: 1;
  max-width: 38.25rem; /* 612px */
}

.project-hero-title {
  font-family: var(--font-family);
  font-size: 2rem; /* 32px */
  font-weight: var(--font-weight-book);
  line-height: 2.25rem; /* 36px */
  color: var(--color-black);
  margin: 0;
}

/* Project Meta Row */
.project-meta-row {
  display: grid;
  grid-template-columns: repeat(5, 2fr);
  gap: 1.5rem;
  padding-top: 0.5rem; /* 56px */
  border-top: 1px solid var(--color-gray-light);
  position: relative;
}

.project-meta-icon {
  grid-column-start: 1;
  grid-column-end: 3;
  flex: 0 0 2rem; /* 32px */
  height: 2rem;
  color: var(--color-black);
}

.project-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.project-meta-label {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: #a7a7a7;
}

.project-meta-value {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
}

/* Project Details Rows */
.project-details-row {
  display: grid;
  grid-template-columns: repeat(5, 2fr);
  gap: 1.5rem;
  padding-top: 0.5rem; /* 8px */
  border-top: 1px solid var(--color-gray-light);
}

.project-details-row--last {
  border-bottom: none;
}

.project-details-row a {
  color: var(--color-black);
}

.project-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  flex: 0 0 auto;
}

.project-detail-item--awards,
.project-detail-item--coord {
  grid-column: 1/3;
}

.project-detail-item--team,
.project-detail-item--events {
  grid-column: 3/5;
}

.project-detail-item--tiraj {
  grid-column: 5/6;
}

.project-detail-label {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: #a7a7a7;
}

.project-detail-value {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
}

.project-team-list p,
.project-awards-list p,
.project-events-list p {
  margin: 0;
  line-height: 1.0625rem; /* 17px */
}

/* Jury Report Button */
.project-jury-button {
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 0.625rem; /* 10px */
  background-color: var(--color-primary);
  border-radius: 0.625rem; /* 10px */
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.project-jury-button:hover {
  opacity: 0.9;
}

/* Project Sidebar */
.project-sidebar {
  flex: 0 0 10.9375rem; /* 175px */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

.project-sidebar-box {
  background-color: var(--color-white);
  border-radius: var(--radius-xl); /* 24px */
  padding: 1.25rem; /* 20px */
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30px */
}

.project-sidebar-title {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-primary);
  margin: 0;
}

/* Recurring Project Dropdown */
.project-recurring-dropdown {
  width: 100%;
}

select.filter-select,
.project-recurring-dropdown .dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.625rem; /* 10px */
  background-color: var(--color-gray-lighter);
  border: none;
  border-radius: 0.25rem; /* 4px */
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
  cursor: pointer;
}

.project-recurring-dropdown .dropdown-button svg {
  width: 0.75rem; /* 12px */
  height: 0.5625rem; /* 9px */
  transform: rotate(180deg);
}

/* Keywords List */
.project-keywords-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

.project-keyword-tag {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.625rem 0.75rem; /* 10px 12px */
  background-color: transparent;
  border: 1px solid var(--color-black);
  border-radius: var(--radius-sm); /* 12px */
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: var(--color-black);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: fit-content;
  text-decoration: none;
}

.project-keyword-tag:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Description Section */
.project-description-section {
  margin-right: calc(20% - 1.5rem);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(5, 2fr);
  gap: 1.5rem;
}

.project-section-label {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  line-height: 1.0625rem; /* 17px */
  color: #a7a7a7;
  margin-bottom: 1.875rem; /* 30px */
  padding-bottom: 1.875rem;
  border-bottom: 1px solid var(--color-gray-light);
}

.project-section-label.title {
  margin: 0;
  border: 0;
  float: left;
}

.project-description-content {
  grid-column: 3/6;
  word-break: break-word;
}

.project-description-content p {
  font-family: var(--font-family);
  font-size: var(--font-size-medium); /* 18px */
  font-weight: var(--font-weight-book);
  line-height: 1.5rem; /* 24px */
  color: var(--color-black);
  margin: 0;
  min-height: 1.5rem;
}

.project-description-content a {
  color: var(--color-black);
}

/* Links Section */
.project-links-section {
  border-top: 1px solid var(--color-gray-light);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-light);
  margin-bottom: 1.75rem;
  margin-right: calc(20% - 1.5rem);
}

.project-links-section .project-section-label {
  border-bottom: none;
  padding-bottom: 0;
}

.project-links-section + .project-related-section {
  padding-top: 0;
  border-top: 0;
}

.project-links-list {
  margin-left: calc(16.67% + 4.25rem); /* ~68px offset */
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.project-links-list a {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 15px */
  font-weight: var(--font-weight-book);
  color: var(--color-black);
  text-decoration: underline;
  text-underline-position: from-font;
}

.project-gallery-slider img {
  width: 100%;
  border-radius: 1.5rem;
}

.project-gallery-slider {
  width: 100%;
  margin-left: 0;
  position: relative;
}

.project-gallery-wrapper {
  margin-right: calc(20% - 1.5rem);
  display: grid;
  grid-template-columns: 8fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.project-gallery-nav-btn {
  width: 3.875rem;
  height: 4.75rem;
  border: none;
  border-radius: 1.5rem; /* 24px */
  padding: 1.5rem; /* 24px */
  color: var(--color-black);
  cursor: pointer;
  background: url('data:image/svg+xml,<svg width="62" height="76" viewBox="0 0 62 76" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="62" y="76" width="62" height="76" rx="24" transform="rotate(-180 62 76)" fill="white"/><path d="M24 52L38 38L24 24" stroke="black" stroke-width="2" stroke-linejoin="bevel"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  transition: all var(--transition-base);
}

.project-gallery-nav-btn:hover {
  background: url('data:image/svg+xml,<svg width="62" height="76" viewBox="0 0 62 76" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="62" y="76" width="62" height="76" rx="24" transform="rotate(-180 62 76)" fill="%23ff412c"/><path d="M24 52L38 38L24 24" stroke="%23FFFFFF" stroke-width="2" stroke-linejoin="bevel"/></svg>');
}

.project-gallery-slider figcaption {
  margin: 0.5rem 0 0 1.5rem;
}

.project-gallery-nav-btn--prev {
  transform-origin: center;
  transform: rotate(180deg);
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.project-gallery-nav-btn--next {
  transform: translateX(-1.5rem);
}

/* Related Projects Section */
.project-related-section {
  border-top: 1px solid var(--color-gray-light);
  padding-top: 0.75rem;
}

.project-related-section .project-section-label {
  border-bottom: 0;
  margin-bottom: 2.5rem;
  padding-bottom: 0;
}

.project-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 18.3125rem); /* 3 columns of ~293px */
  gap: 1.875rem; /* 30px */
}