/* ========================================
   LAYOUT STYLES
   File: css/layout.css
   ======================================== */

/* ========================================
   Z-INDEX UPDATE
   ======================================== */
:root {
  /* ... existing variables ... */

  /* 🔥 UPDATED Z-INDEX */
  --z-base: 1;
  --z-section: 10;
  --z-section-active: 150; /* 🔥 NEW - Active section ABOVE backdrop */
  --z-overlay-level-1: 100;
  --z-overlay-level-2: 200;
  --z-close-button: 300;
  --z-backdrop: 50;
}

/* ========================================
   DESKTOP LAYOUT (3 Sections)
   ======================================== */
/* Main Container */
.portfolio-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* Section Base */
.section {
  flex: 2;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--spacing-md);
  border-right: 1px solid var(--color-border);
  background-color: var(--color-white);
  position: relative;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
  /* filter var(--transition-normal),
    opacity var(--transition-normal); */
}

.section:last-child {
  border-right: none;
}

/* Section Modifiers */
.section--left {
  /* Specific styles untuk left section jika perlu */
  flex: 0 0 30%;
}

.section--middle {
  /* Specific styles untuk middle section jika perlu */
  /* overflow-y: auto; */
  /* overflow-x: hidden; */
}

.section--right {
  /* Specific styles untuk right section jika perlu */
  flex: 0 0 30%;
}

.desktop-layout .section.is-blurred {
  filter: blur(0.5px) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

#section-left.is-blurred,
#section-middle.is-blurred,
#section-right.is-blurred {
  filter: blur(0.5px) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.section.is-blurred {
  filter: blur(0.5px) !important;
  opacity: 0.6 !important;
  pointer-events: none !important; /* Prevent clicks on blurred sections */
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

.section.is-active {
  filter: blur(0);
  opacity: 1;
  pointer-events: auto;
}

/* Section Header */
.section__header {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
}

.section__title {
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
}

/* Section Content */
.section__content {
  min-height: 200px;
  position: relative;
  z-index: 1;
  transition:
    visibility 0.2s ease,
    opacity 0.2s ease;
}
.section__content[style*="visibility: hidden"] {
  opacity: 0;
}

.section__content[style*="visibility: visible"] {
  opacity: 1;
}
/* Desktop Nested Overlay (Level 2 - Within Section) */
.section__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-color: var(--color-white);
  z-index: var(--z-overlay-level-2);
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  padding: var(--spacing-lg);
  /* padding-top: calc(var(--spacing-lg) + 60px); */
}

.section__overlay.is-active {
  transform: translateY(0);
  /* background-color: red; */
  display: block;
  z-index: 999;
}

.section.has-nested-overlay {
  overflow-y: hidden !important;
}

.section__overlay-content {
  height: 100%;
  /* background-color: black; */
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* Section Backdrop (Blur Effect) */
.section-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.3); /* 30% white */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-backdrop);
  /* z-index: 150; */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
  pointer-events: none;
}

.section-backdrop.is-active {
  opacity: 0;
  background-color: green;
  visibility: visible;
  pointer-events: auto;
}

/* Section yang aktif TIDAK ter-blur */
.section.is-active {
  z-index: var(--z-section-active); /* 150 > 50 (backdrop) */
  position: relative;
  filter: blur(0) !important;
  opacity: 1 !important;
  z-index: var(--z-overlay-level-1);
  pointer-events: auto;
  background-color: var(--color-white);
  /* background-color: blue; */
  /* z-index: var(--z-section); */
}

/* Section lain yang blur */
.section.is-blurred {
  filter: blur(0.5px);
  opacity: 0.5;
  pointer-events: none;
}
/* ========================================
   MOBILE LANDING LAYOUT
   ======================================== */
.mobile-landing {
  display: none;
  min-height: 100vh;
  padding: var(--spacing-md);
  background-color: var(--color-white);
}

.mobile-landing__content {
  max-width: 400px;
  margin: 0 auto;
  padding-top: var(--spacing-lg);
}

.mobile-landing__header {
  margin-bottom: var(--spacing-xl);
}

.mobile-landing__title {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--color-primary);
  text-align: center;
}

.mobile-landing__quote {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.mobile-landing__quote-text {
  font-size: 20px;
  font-style: italic;
  line-height: 1.8;
  color: var(--color-secondary);
}

.mobile-landing__nav {
  margin-bottom: var(--spacing-xl);
}

.mobile-landing__menu {
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.mobile-landing__menu-item {
  border-bottom: 1px solid var(--color-border);
}

.mobile-landing__menu-link {
  display: block;
  width: 100%;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition-fast);
}

.mobile-landing__menu-link:hover {
  /* color: var(--color-secondary); */
}

.mobile-landing__menu-link--trigger {
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.mobile-landing__illustration {
  margin-top: var(--spacing-lg);
  text-align: center;
}

.mobile-landing__image-wrapper {
  width: 150px;
  height: 220px;
  margin: 0 auto;
  border: 2px dashed var(--color-primary);
  padding: var(--spacing-xs);
}

.mobile-landing__image {
  width: 100%;
  height: 100%;
}

/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
  .section {
    /* padding: var(--spacing-md); */
  }

  .section__title {
    font-size: 20px;
  }
}

/* Mobile - Show Mobile Landing, Hide Desktop */
@media (max-width: 768px) {
  .portfolio-container {
    display: none;
  }

  .mobile-landing {
    display: block;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .mobile-landing__title {
    font-size: 28px;
  }

  .mobile-landing__quote-text {
    font-size: 18px;
  }

  .mobile-landing__image-wrapper {
    width: 120px;
    height: 180px;
  }
}

/* Desktop - Hide Mobile Landing */
@media (min-width: 769px) {
  .mobile-landing {
    display: none !important;
  }

  .portfolio-container {
    /* display: flex !important; */
  }
}
/* Custom Scrollbar */
.section::-webkit-scrollbar {
  width: 0px;
}

.section::-webkit-scrollbar-track {
  /* background: var(--color-background); */
}

.section::-webkit-scrollbar-thumb {
  /* background: var(--color-secondary); */
  /* border-radius: 4px; */
}

.section::-webkit-scrollbar-thumb:hover {
  /* background: var(--color-primary); */
}

.columns {
  display: flex;
  width: 100%;
  gap: 0.5rem; /* ini sama kayak gutter */
}

.column {
  flex: 1; /* biar kolom bagi rata */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* hyphens: auto; */
  max-width: 50%;
  /* text-align: justify !important; */
}

/* ========================================
   NESTED OVERLAY - ENSURE VISIBILITY
   ======================================== */

/* Nested overlay container - MUST be above everything */
.section [data-nested-overlay] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: 9999 !important; /* 🔥 HIGHER than section content */
  transform: translateY(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  display: none; /* Default hidden */
  padding: var(--spacing-lg);
  /* padding-top: calc(var(--spacing-lg) + 60px); */
}

/* When active: show it */
.section [data-nested-overlay].is-active {
  transform: translateY(0);
  display: block !important; /* 🔥 Force display */
}

/* Nested content inside */
.section [data-nested-overlay] [data-nested-content] {
  min-height: 100%;
  /* padding-top: 20px; */
}

/* Close button for nested */