/* 
=====================================================
    TABLE OF CONTENTS - WORK.CSS
=====================================================
    1.  Filters & Navigation
    2.  Work Grid Layout (List View - Default)
    3.  Left Column (Year & Title)
    4.  Right Column (Details Table & Link)
    5.  Grid View Toggle (modifier class)
=====================================================
*/

/* 
=====================================================
    1. Filters & Navigation
=====================================================
*/
.btn-filter {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 4rem 8rem 4rem;
  white-space: nowrap;
}

/* Control spacing between buttons inside the groups */
.btn-filter > div {
  display: flex;
  gap: 0.5rem;
}

/* 
=====================================================
    2. Work Grid Layout (List View - Default)
=====================================================
*/
.work-grid-container {
  display: grid;
  grid-template-columns: 5fr 6fr;
  margin: 0 4rem;
  padding: 1rem 0 4rem 0;

  /* Link & Interactive styles */
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  /* Borders */
  border-top: 1px solid var(--My-gray-Stroke);

  /* Transitions */
  transition: background-color 100ms ease-in-out, color 100ms ease-in-out,
    border-color 100ms ease-in-out;
}

/* Persistent bottom border for the list end */
.work-list-closer {
  margin: 0 4rem;
  border-bottom: 1px solid var(--My-gray-Stroke);
}

/* Hover State: Inverted Colors */
.work-grid-container:hover {
  background-color: var(--My-black);
  color: var(--My-white);
  border-top-color: var(--My-gray-on-black);
}

.work-grid-container:hover * {
  color: var(--My-white);
  border-color: var(--My-gray-on-black);
}

/* By default images are hidden in list view */
.work-grid-image {
  display: none;
}

/* 
=====================================================
    3. Left Column (Year & Title)
=====================================================
*/
.work-col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0rem 0 0rem 1rem;
}

.year-label {
  font-family: var(--font-mono);
  font-size: var(--size-body);
}

.list-work-title {
  font-family: var(--font-geist);
  font-size: var(--size-subheading);
  font-weight: 500;
  letter-spacing: -1.68px;
  white-space: nowrap;
  transform: translateY(16px);
}

/* 
=====================================================
    4. Right Column (Details Table & Link)
=====================================================
*/
.work-col-right {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Table Structure */
.work-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.work-row {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

  /* Typography */
  text-transform: uppercase;
  color: var(--My-black);
  white-space: nowrap;

  transition: border-color 300ms ease;
}

/* Remove padding/border from the first row to align with container top */
.work-row:first-child {
  padding-top: 0;
  border-top: none;
}

.col-label {
  margin-right: 4rem;
}

.view-work-link {
  display: flex;
  align-items: center;
}

.view-work-link p {
  text-decoration: underline;
  text-underline-offset: 6px;
  font-size: var(--size-body);
  color: var(--My-gray-Text);
  transition: color 150ms ease-in-out;
}

.view-work-link p:hover {
  color: var(--My-orange);
}

/* 
=====================================================
    5. Grid View Toggle (modifier class)
=====================================================
*/
/* 
   When the parent container has .container-grid-toggle,
   the list updates to a 2-column grid card layout.
*/

.work-list-container.container-grid-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 4rem;
  row-gap: 8rem;
  column-gap: 4rem;
}

/* Reset the closer in grid mode */
.container-grid-toggle .work-list-closer {
  display: none;
}

/* Card Container Resets */
.container-grid-toggle .work-grid-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: none;
  margin: 0 0 4rem 0;
  padding: 0;
}

/* Enable Image */
.container-grid-toggle .work-grid-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: 4px;
}

/* Rearrange Left Column */
.container-grid-toggle .work-col-left {
  padding: 0;
  flex-direction: row-reverse;
  align-items: start;
  padding-bottom: 2rem;
}

.container-grid-toggle .list-work-title {
  transform: translateY(-16px);
  font-size: 3rem;
}

/* Hide Link Button */
.container-grid-toggle .view-work-link {
  display: none;
}

/* Adjust Rows borders */
.container-grid-toggle .work-row:first-child {
  padding-top: 1rem;
  border-top: 1px solid var(--My-gray-Stroke);
}

/* Disable Hover Inversion for Grid Mode */
.container-grid-toggle .work-grid-container:hover {
  background-color: transparent !important;
  color: inherit !important;
  border-top-color: var(--My-gray-Stroke) !important;
}

.container-grid-toggle .work-grid-container:hover * {
  color: var(--My-black);
  border-color: var(--My-gray-Stroke);
}