/* work-page.css */

.work-page-container {
  display: flex;
  flex-direction: row;
  /* padding: 20px; -> Removed as it was applying to both columns */
  align-items: flex-start;
  /* Align items to the top */
  min-height: calc(100vh - 64px - 72px);
  /* Ensure container has enough height to enable sticky */
  transition: all 0.5s ease-in-out;
}

.left-column {
  flex: 100%;
  flex-shrink: 0;
  padding: 20px;
  /* Add padding back to only the left column */
  padding-top: 0;
  /* Remove only the top padding */
  transition: all 0.5s ease-in-out;
  overflow-y: auto;
  /* Allow vertical scrolling */
  max-height: calc(100vh - var(--header-height));
  /* Set max height */
  /* Styles for the main masonry grid will be handled by the existing work.html script */
}

.right-column {
  flex: 0;
  flex-shrink: 0;
  position: sticky;
  top: var(--header-height);
  /* Stick right below the header */
  background-color: #f8f9fa;
  border-radius: 0;
  /* No rounded corners */
  border: none;
  /* No border */
  padding: 0;
  /* No padding */
  height: calc(100vh - var(--header-height));
  /* Fill remaining viewport height below header */
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
  width: 0;
}

.work-page-container.preview-visible .left-column {
  flex: 70%;
}

.work-page-container.preview-visible .right-column {
  flex: 30%;
  width: auto;
  transform: translateX(0);
}

.work-page-container.preview-expanded .left-column {
  flex: 0;
  width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.work-page-container.preview-expanded .right-column {
  flex: 100%;
}

#preview-pane {
  flex-grow: 1;
  /* Allow the iframe to take up all available space */
  width: 100%;
  height: 100%;
  border: none;
  /* Remove border */
  border-radius: 0;
  /* No rounded corners */
}

.expand-button {
  display: block;
  width: calc(100% - 40px);
  /* Adjust width to account for left/right margins */
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  /* Add bottom padding */
  padding: 12px;
  margin-top: 20px;
  background-color: #1F2937;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  /* Prevent button from shrinking */
}

.expand-button:hover {
  background-color: #34495e;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .work-page-container {
    flex-direction: column;
    /* Stack columns vertically on mobile */
  }

  .left-column {
    flex: 100%;
    /* Take full width */
  }

  .right-column {
    display: none;
    /* Hide right column on mobile */
  }
}

/* Color Swap for Work Page */
body.work-page-body {
  background-color: #F5F3EF !important;
  /* Page bg is now light grey-brown */
  --bg: #F5F3EF;
}

/* Header Background Swap */
body.work-page-body .nav {
  background: #87CEEB !important;
  /* Header bg is now Sky Blue */
  backdrop-filter: none;
  /* Remove blur for solid color, or keep if transparent desired */
}

/* Footer Background Swap */
body.work-page-body .footer {
  background-color: #87CEEB !important;
  /* Footer bg is now Sky Blue */
}

/* Ensure work section matches the new white background */
body.work-page-body .work-section {
  background: #F5F3EF !important;
}

/* Ensure right column matches if needed (it was #f8f9fa, close to white, making it pure white might be cleaner) */
body.work-page-body .right-column {
  background-color: #F5F3EF !important;
}