/* ================================
   Projects Table Layout & Structure
   ================================ */

.projects-table {
  width: 100%;
  max-width: 100vw;
  background: none;
}

.projects-table table {
  width: 100%;
    max-width: 100vw;
  margin: 0;
  border-collapse: collapse;
}

.project-cover-row td {
  max-width: 85vw;
  padding-right: 2.5rem;
  overflow-x: hidden;
}

/* ================================
   Table Headers
   ================================ */

.project-table-header,
.project-table-header-right {
  font-family: 'Gambetta-Variable', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 18pt;
  color: #222;
  border-bottom: 2px solid #222;
  padding-bottom: 0.1em;
  display: none;
}

.project-table-header {
  text-align: left;
}

.project-table-header-right {
  text-align: right;
}

.project-table-year {
  text-align: left;
  white-space: nowrap;
  text-indent: 0.3em;
}

/* ================================
   Table Row Styling
   ================================ */

.project-table-row{
  margin-left: 2vw;
  margin-right:2vw;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  background: none;
  max-width: 100%;
  opacity: 1;
}

.project-table-row td {
  border-top: none;
  border-bottom: none;
  padding: 0.8em 0;
  vertical-align: middle;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}

/* Remove top border from first row */
.project-table-row:first-child td {
  border-top: none;
}

/* Add bottom border only to the last row */
.project-table-row:last-child td {
  border-bottom: none;
}



/* ================================
   Hover & Focus Effects
   ================================ */

 Fade all rows on table hover 

.project-table:hover .project-table-row td {
  opacity: 0.3;
  border-bottom: none;
}

Restore opacity and top border on hovered row 
.project-table:hover .project-table-row:hover:not(.no-hover-effect) td {
  opacity: 1 !important;
  border-top: 1px solid rgba(34, 34, 34, 1) !important;
  border-bottom: 1px solid rgba(34, 34, 34, 1) !important;
}

.project-row-inner {
  transition: transform 0.4s cubic-bezier(.4, 2, .6, 1);
  transform-origin: center;
}

.project-table-row:hover:not(.no-hover-effect) .project-row-inner {
  transform: scale(1.06) translateY(-1px);
  transition: transform 0.22s cubic-bezier(.4, 2, .6, 1);
}

.project-table-row.bounce .project-row-inner {
  animation: bounce-pop 0.68s cubic-bezier(.17,.67,.83,.67);
}

@keyframes bounce-pop {
  0%   { transform: scale(1.06) translateY(-1px); }
  40%  { transform: scale(1.12) translateY(-6%); }
  60%  { transform: scale(0.98) translateY(3%); }
  100% { transform: scale(1.0) translateY(-1px); }
}




/* Restore bottom border only for last row */
.project-table:hover .project-table-row:hover:last-child td {
  border-bottom: 1px solid rgba(34, 34, 34, 1) !important;
}

/* ================================
   Expanded Row Highlighting
   ================================ */

/* Remove bottom border from the row above an expanded row */
.project-table-row.expanded-above td {
  border-bottom: none !important;
  opacity: 1 !important;
}


/* ================================
   Expandable Cover Row
   ================================ */
.project-table:hover .project-table-row td {
    opacity: 0.3;
  }

 .project-table:hover .project-table-row:hover td {
    opacity: 1 !important;
  }

.project-cover-row.expanded {
  display: table-row !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.project-cover-row.expanded td {
  opacity: 1 !important;
  border-top: none !important; /* Remove top border */
  border-bottom: 1px solid rgb(129, 129, 129) !important;
  background: none;
}

.project-table-row.is-expanded,
.project-table-row.is-expanded td{
  opacity: 1 !important;
  border-top: 1px solid rgb(129, 129, 129) !important;
   
}

/* Ensure expanded rows stay visible on hover */
.project-table:hover .project-cover-row.expanded td {
  opacity: 1 !important;
}

/* Apply full opacity to both the row and its expanded cover row when hovered */
.project-table-row.hovered td,
.project-cover-row.hovered td {
  opacity: 1 !important;
}


.project-table-row.is-expanded td {
  opacity: 1 !important;
}


/* ================================
   Table Columns Styling
   ================================ */

.col-margin{
   padding: 0;
  margin: 0;
  border: none;
}
.col-project,
.project-description 
 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;            /* Regular */
  font-size: 16px; 
  color: #222222;
}

.col-year,
.col-field {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #505050;
  vertical-align: middle;
}

.project-tag {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  background: #e5e5e5;
  color: #505050;
  padding: 0.4em 1%;
  border-radius: 0.5em;
  margin-bottom: 0.1em;
  white-space: nowrap;
   vertical-align: middle;
}

.project-table-tags {
  text-align: right;
  justify-content: flex-end;
}

.expand-collapse-btn.project-tag {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  border: none;
  outline: none;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.expand-collapse-btn.project-tag:hover,
.expand-collapse-btn.project-tag:focus {
  background: #e0e0e0;
  color: #111;
}

.project-row-inner .expand-collapse-btn.project-tag,
.project-table-tags .expand-collapse-btn.project-tag {
  transform: none !important;
  transition: background 0.15s, color 0.15s;
}

/* ================================
   Responsive: Hide Year + Tags on Mobile
   ================================ */


/* Always hide mobile button on desktop, show desktop button */
.expand-collapse-mobile { display: none !important; }
.expand-collapse-desktop { display: inline-block !important; }



@media (max-width: 650px) {
  .col-year,
  .col-tags {
    display: none;
  }
  /* Force the mobile button in the special row's col-field to match col-tags exactly */
  .special-row .col-field .expand-collapse-btn.project-tag {
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 300 !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
    background: #eaeaea !important;
    color: #222 !important;
    padding: 0.4em 0.6em !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    letter-spacing: 0.03em !important;
    margin: 0 0.3em 0.1em 0.3em !important;
    transition: background 0.15s, color 0.15s !important;
    white-space: nowrap !important;
    text-align: right !important;
    display: inline-block !important;
    box-sizing: border-box !important;
  }
  .project-table-header:nth-child(2),
  .project-table-header-right,
  .project-table-year,
  .project-table-tags {
    display: none;
  }
 
  .special-row .col-field .field-text {
    display: none !important;
  }

  .project-table-header:nth-child(3),
  .project-table-field {
    text-align: right !important;
  }

  .project-cover-row {
    column-span: 2;
  }

  .col-project,
  .col-field {
    width: 50%;
  }

  .col-year,
  .col-tags {
    width: 0;
  }

  .expand-collapse-mobile { display: inline-block !important; }
  .expand-collapse-desktop { display: none !important; }

  
  .special-row .col-field .project-row-inner > :not(.expand-collapse-btn) {
    display: none;
  }
  .special-row .col-field .field-text {
    display: none !important;
  }
}

/* ================================
   Barba.js Fade Transition Container
   ================================ */

main[data-barba="container"] {
  transition: opacity 0.3s;
  min-height: 60vh;
}

/* ================================
   Dark Mode Handling
   ================================ */

@media (prefers-color-scheme: dark) {
 

  .project-table-row td {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .project-table-row:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .project-table:hover .project-table-row td {
    opacity: 0.3;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
    border-bottom: none;
  }

  .project-table:hover .project-table-row:last-child td {
    border-bottom: 1px solid rgba(120, 120, 120, 0.2);
  }

  .project-table:hover .project-table-row:hover td {
    opacity: 1 !important;
    border-top: 1px solid #fff !important;
  }

  .project-table:hover .project-table-row:hover:last-child td {
    border-bottom: 1px solid #fff !important;
  }

  .project-table-row.expanded-above td {
    border-bottom: none !important;
    opacity: 1 !important;
  }

  .project-table:hover .project-table-row.expanded-above td {
    opacity: 1 !important;
    border-top: 1px solid #fff !important;
    border-bottom: none !important;
  }

  .project-cover-row.expanded td {
    opacity: 1 !important;
    border-top: none !important;
    border-bottom: 1px solid #fff !important;
    background: none;
  }

  .projects-table .project-table .project-table-row.expanded-above td,
  .projects-table .project-table:hover .project-table-row.expanded-above td {
    opacity: 1 !important;
    border-bottom: none !important;
    border-top: 1px solid #fff !important;
  }
}