/* Portfolio Page Styles - Full Dark Theme */

.portfolio-hero {
  padding: 18rem 0 14rem;
  background: #0A0A0A;
  position: relative;
  z-index: 20;
}

.portfolio-hero-content {
  text-align: center;
}

.portfolio-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.1;
  margin-top: 1.5rem;
  background: linear-gradient(to bottom, #ffffff 60%, #a0a0a5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Filter Section */
.portfolio-filter-section {
  padding: 4rem 0;
  background: #0A0A0A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio-filter {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  position: relative;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #ffffff;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.filter-btn:hover::after {
  width: 100%;
}

.filter-btn.active {
  color: #ffffff;
}

.filter-btn.active::after {
  width: 100%;
}

/* Portfolio Section */
.portfolio-section {
  padding: 8rem 0 16rem;
  background: #0A0A0A;
  position: relative;
  z-index: 20;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  align-items: start;
}

.project-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}

.project-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
}

/* Cover image — fills the .project-image container's 1:1 aspect-ratio
   grid. The container's overflow:hidden + border-radius:20px + aspect-ratio
   give the placeholder grid; object-fit:cover crops the image to fit so
   every project's cover sits in the same visual frame regardless of the
   source image's native dimensions. */
.project-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.project-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a4a4a;
  opacity: 0.5;
}

.project-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.project-name {
  font-size: 1.5rem;
  font-weight: 600;
  /* Subtle gradient to tie back to the hero banner without being overpowering */
  background: linear-gradient(to bottom, #ffffff 60%, #d0d0d5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.8px;
  /* Slightly tighter to match the bold banner feel */
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-desc {
  font-size: 0.9rem;
  /* Slightly smaller for a more editorial, refined look */
  color: rgba(160, 160, 165, 0.8);
  line-height: 1.6;
  /* More breathing room for readability */
  max-width: 260px;
  margin: 0 auto 1.5rem;
  opacity: 1;

  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: 4.8rem;
  /* Adjusted for 1.6 line-height */
}

.project-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: auto;
  /* Push actions to the bottom */
  padding-bottom: 1rem;
}

.btn-learn-more {
  position: relative;
  background: linear-gradient(135deg, var(--accent-brown), var(--accent-taupe));
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.6;
  transform: translateY(4px);
  z-index: 1;
  overflow: hidden;
}

.btn-learn-more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.project-card:hover .btn-learn-more {
  opacity: 1;
  transform: translateY(0);
}

.btn-learn-more:hover {
  color: var(--text-dark);
  transform: scale(1.05);
}

.btn-learn-more:hover::after {
  opacity: 1;
}

.btn-action {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .btn-action {
  color: rgba(255, 255, 255, 1);
}

.btn-action:hover {
  color: #ffffff;
  text-decoration: underline;
}

.project-category,
.project-tags {
  display: none;
}

/* CTA Section */
.portfolio-cta {
  padding: 10rem 0;
  background: #1a1a1a;
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}

.cta-text {
  font-size: 1.1rem;
  color: #a0a0a5;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Modal Styles */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  pointer-events: none;
}

.project-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.project-modal.active .modal-overlay {
  opacity: 1;
}

.modal-content {
  position: relative;
  width: 95%;
  max-width: 1200px;
  height: 85vh;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  overflow: hidden;
  z-index: 10;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out;
}

.project-modal.active .modal-content {
  transform: scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  line-height: 0;
  padding-bottom: 2px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Access Modal Specifics */
.access-modal-content {
  max-width: 500px;
  width: 90%;
  height: auto;
  padding: 4rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.access-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.access-lock-icon {
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
}

.access-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: white;
  margin: 0;
  letter-spacing: -0.5px;
}

.access-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  max-width: 350px;
  margin: 0 0 2.5rem 0;
}

.btn-action-solid {
  padding: 0.6rem 1.5rem;
  border-radius: 20px;
  background: white;
  color: black;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-action-solid:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.social-link:hover {
  opacity: 0.6;
}

.social-link svg {
  transition: transform 0.2s ease;
}

.social-link:hover svg {
  transform: translate(2px, -2px);
}

.access-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.modal-grid {
  /* Single column — the project's cover image is now the modal window's
     background-image (set on .modal-content via JS), so there is no
     longer a left-column image slot. The text content fills the full
     modal width, centered with a max-width so it reads as a centered
     editorial block over the bleeded cover image. */
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
}

/* Modal window background-image — set inline by JS at modal-open time
   via modalContent.style.backgroundImage = url(...). The cover image
   sits as a full bleed behind the modal-grid, with a dark scrim layered
   on top (see ::before below) so the text on modal-text-content stays
   legible regardless of which project's image is showing. The modal
   already has overflow:hidden + a max-height constraint, so background-
   size:cover crops the image to fit the modal box at any viewport. */
.modal-content {
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.modal-content::before {
  /* Dark scrim over the cover image — strong enough to keep the modal
     text legible but soft enough that the image still reads as a bg
     rather than a foreground flash. Layered between the bg image and
     the modal-grid so it doesn't compete with the close button's
     hover state. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(10, 10, 10, 0.65) 0%,
      rgba(10, 10, 10, 0.78) 50%,
      rgba(10, 10, 10, 0.85) 100%);
  pointer-events: none;
  z-index: 0;
}

.modal-content .modal-grid {
  /* Lift the grid above the ::before scrim. */
  position: relative;
  z-index: 1;
}

.modal-text-content {
  /* Full-width scroll container — owns the browser scrollbar so it sits
     at the modal's far-right inner edge (the popup's own wall), NOT at
     the edge of the centred text block. The .modal-text-inner child is
     what gets centred and styled — this container just provides the
     scroll surface and outer padding so the close button and scrollbar
     don't crowd the centred text. Vertical padding leaves breathing room
     above and below for the close button and the bottom edge. */
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  position: relative;
  width: 100%;
  /* Leave room on the left for the close button (which sits at left:2rem
     top:2rem of .modal-content). Without this the close button would
     overlap the title on small viewports. */
  padding-left: calc(2rem + 40px + 1.5rem);
}

.modal-text-inner {
  /* Centred text block over the full-bleed cover image. The max-width
     keeps the line length readable on wide viewports; the auto margins
     centre it horizontally. This sits inside .modal-text-content which
     owns the scrollbar — so the scrollbar lives at the modal's right
     edge while the text stays centred. */
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.modal-detail-section {
  margin-bottom: 3rem;
  animation: fadeUp 0.6s ease-out forwards;
}

.modal-detail-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.modal-project-origin {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 0;
}

.modal-project-title {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
  padding-right: 120px;
}

.modal-divider {
  width: 30px;
  height: 2px;
  background: var(--accent-brown, #a89a8e);
  margin-bottom: 1.5rem;
}

.modal-project-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 2rem;
}

#modal-request-access {
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  background: white;
  color: black;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

#modal-request-access:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .modal-grid {
    overflow-y: auto;
  }

  .modal-text-content {
    /* Drop the desktop's left-side room for the close button — at small
       viewports the close button moves naturally with padding and the
       scrollbar takes the right edge as usual. */
    padding: 2rem;
  }

  .modal-project-title {
    font-size: 1.8rem;
  }
}

/* Modal Project Details Styling */
.modal-overview {
  font-size: 1.1rem;
  /* Slightly larger than the bullets */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  text-align: left;
}

.modal-bullet-list {
  text-align: left;
  margin: 0 auto;
  padding-left: 1.2rem;
  /* Ensures bullets stay inside the window */
}

.modal-bullet-list li {
  font-size: 1rem;
  /* Increased size */
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.2rem;
  /* Space between each bullet point */
  line-height: 1.6;
}