/* ========================================
   RESPONSIVE STYLES — CLEAN VERSION
   File: css/responsive.css
   ======================================== */

/* ========================================
   1. TABLET (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) {
  .section__title {
    font-size: 20px;
  }
}

/* ========================================
   2. MOBILE (≤768px) — LAYOUT SWITCH
   ======================================== */
@media (max-width: 768px) {
  /* --- Layout Switch --- */
  .portfolio-container {
    display: none;
  }

  .mobile-landing {
    display: block;
  }

  /* --- Typography Scale --- */
  .mobile-landing__title {
    font-size: 28px;
  }

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

  .section__title {
    font-size: 18px;
  }

  /* --- Overlay Base Adjustments --- */
  .overlay__content {
    padding: var(--spacing-md);
    padding-top: 0;
  }

  /* --- Header Columns Stack (Specific Only) --- */
  .columns--header {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }

  .columns--header > div,
  .columns--header > .column,
  .columns--header > button {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
  }

  .columns--header .overlay__close {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    margin-top: 0.5rem !important;
    margin-left: auto !important;
    display: block !important;
  }
}

/* ========================================
   3. MOBILE (≤768px) — OVERLAY ACTIVE STATES
   ======================================== */
@media (max-width: 768px) {
  /* --- Overlay Container --- */
  .overlay.is-active {
    /* position: fixed !important; */
    /* top: 0 !important; */
    /* left: 0 !important; */
    /* width: 100% !important; */
    /* height: 100vh !important; */
    height: 100dvh !important;
    min-height: -webkit-fill-available !important;
    overflow: hidden !important;
    z-index: 150 !important;
    background: var(--color-white) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* --- Overlay Header/Content --- */
  .overlay.is-active .overlay__content {
    /* flex: 0 0 auto !important; */
    width: 100% !important;
    /* padding: var(--spacing-lg, 2rem) !important; */
    /* padding-top: calc(var(--spacing-lg, 2rem) + 60px) !important; */
    overflow-y: visible !important; /* 🔥 CRITICAL: Allow scroll to render */
    position: relative !important;
    z-index: 10 !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
  }

  /* --- Overlay Scroll Area --- */
  .overlay.is-active .overlay__scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-right: var(--spacing-md, 1rem) !important;
    box-sizing: border-box !important;

    /* ✅ NO DEBUG STYLES - Clean layout */
    background: transparent !important;
    border: none !important;
  }

  /* --- Content Inside Scroll --- */
  .overlay.is-active .overlay__scroll > * {
    /* display: initial !important; */
    width: auto !important;
    max-width: 100% !important;
  }

  /* --- Images & Videos --- */
  .overlay.is-active .overlay__scroll img,
  .overlay.is-active .overlay__scroll video {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* --- Columns Layout Preservation --- */
  .overlay.is-active .overlay__scroll .columns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-md, 1rem) !important;
  }

  .overlay.is-active .overlay__scroll .column {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* --- Text Visibility --- */
  .overlay.is-active .overlay__scroll p,
  .overlay.is-active .overlay__scroll div,
  .overlay.is-active .overlay__scroll span,
  .overlay.is-active .overlay__scroll h1,
  .overlay.is-active .overlay__scroll h2,
  .overlay.is-active .overlay__scroll h3,
  .overlay.is-active .overlay__scroll h4,
  .overlay.is-active .overlay__scroll h5,
  .overlay.is-active .overlay__scroll h6,
  .overlay.is-active .overlay__scroll a {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    background: transparent !important;
  }

  /* --- Links --- */
  .overlay.is-active .overlay__scroll a {
    pointer-events: auto !important;
    /* text-decoration: underline !important; */
  }

  /* --- Hide Scrollbar --- */
  .overlay__scroll::-webkit-scrollbar {
    width: 0;
    display: none;
  }

  .overlay__scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

/* ========================================
   4. SMALL MOBILE (≤480px)
   ======================================== */
@media (max-width: 480px) {
  .mobile-landing__title {
    font-size: 24px;
  }

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

  .mobile-landing__image-wrapper {
    width: 100px;
    height: 150px;
  }

  .overlay__title {
    font-size: 18px;
  }

  .section {
    padding: var(--spacing-sm);
  }
}

/* ========================================
   5. DESKTOP (≥769px)
   ======================================== */
@media (min-width: 769px) {
  .mobile-landing {
    display: none !important;
  }
}

/* ========================================
   6. LARGE DESKTOP (≥1440px)
   ======================================== */
@media (min-width: 1440px) {
  .section {
    padding: 0 var(--spacing-xl);
  }

  .mobile-landing__content {
    max-width: 500px;
  }
}

/* ========================================
   7. PRINT STYLES
   ======================================== */
@media print {
  .portfolio-container {
    flex-direction: column;
    height: auto;
  }

  .section {
    height: auto;
    overflow: visible;
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .overlay,
  .mobile-landing,
  .section-backdrop,
  .section__overlay {
    display: none !important;
  }
}

/* ========================================
   MOBILE OVERLAY: NUCLEAR HR FIX
   Override inline styles dengan !important
   ======================================== */

@media screen and (max-width: 768px) {
  /* 🔥 NUKLIR: Override SEMUA inline styles */
  .overlay.is-active hr {
    display: block !important;
    width: 97% !important;
    /* margin: 1rem auto !important; */

    /* Height & visibility */
    height: 1px !important;
    min-height: 1px !important;
    /* max-height: 3px !important; */

    /* Background color - PAKSA! */
    background: rgba(0, 0, 0, 0.14) !important;
    background-color: #6666 !important;
    opacity: 1 !important;
    visibility: visible !important;

    /* Border - override inline */
    border: 0 !important;
    /* border-top: 1px solid gray !important; */
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;

    /* Positioning - ensure not overlapped */
    position: relative !important;
    z-index: 99999 !important; /* 🔥 SUPER HIGH! */

    /* Box model */
    padding: 0 !important;
    box-sizing: border-box !important;

    /* Ensure rendering */
    overflow: visible !important;
  }

  /* 🔥 Parent must not clip hr */
  .overlay.is-active .overlay__content {
    /* overflow: visible !important; */
    position: relative !important;
    z-index: 10 !important;
  }

  /* 🔥 Ensure hr is above siblings */
  .overlay.is-active .overlay__content > * {
    position: relative !important;
  }

  .overlay.is-active .overlay__content > hr {
    z-index: 99999 !important;
  }

  /* 🔥 SCROLL: Takes EXACT remaining space */
  .overlay.is-active .overlay__scroll {
    /* 🔥 KEY: flex-basis 0 = start from 0, grow to fill REMAINING */
    flex: 1 1 0 !important;

    /* 🔥 CRITICAL: Allow shrinking below content size */
    min-height: 0 !important;

    /* 🔥 Enable scroll */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;

    /* 🔥 Stay in flow */
    position: relative !important;
    z-index: 5 !important;

    /* 🔥 Ensure visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    /* 🔥 Constrain to parent */
    height: auto !important;
    max-height: 100% !important;
    box-sizing: border-box !important;

    padding-right: var(--spacing-md, 1rem) !important;

    /* Clean styles */
    background: transparent !important;
    border: none !important;
  }
}

/* Desktop: Hide title */
@media screen and (min-width: 769px) {
  .overlay__title {
    display: none !important;
  }
}

/* Mobile: Show title */
@media screen and (max-width: 768px) {
  .overlay__title {
    display: block !important;
    font-weight: normal;
    font-size: 16px;
  }
}

/* ========================================
   MOBILE: Block anchor navigation inside nested-trigger
   ======================================== */

@media screen and (max-width: 768px) {
  /* 🔥 Anchor inside nested-trigger: DISABLE CLICK */
  .nested-trigger a {
    pointer-events: none !important; /* ← Anchor tidak bisa diklik! */
    cursor: pointer !important;
    text-decoration: none !important; /* Optional: remove underline */
  }

  /* 🔥 Nested trigger itself: Ensure it's clickable */
  .nested-trigger {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important; /* Ensure click area */
  }
}

/* ========================================
   MOBILE OVERLAY: LEVEL 1 vs LEVEL 2 — FINAL FIX
   File: css/responsive.css (MUST BE LAST!)
   ======================================== */

@media screen and (max-width: 768px) {
  /* ========================================
     LEVEL 1: Slide-in animation (Project, Work, About)
     ======================================== */
  .overlay--mobile-layout:not(.is-active) {
    transform: translateX(100vw) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .overlay--mobile-layout.is-active {
    transform: translateX(0) !important;
  }

  /* Display fix for animation */
  .overlay:not(.is-active) {
    display: block !important;
  }

  /* ========================================
   MOBILE OVERLAY: LEVEL 2 NESTED — TRUE FULLSCREEN
   File: css/responsive.css (MUST BE LAST!)
   ======================================== */

  @media screen and (max-width: 768px) {
    /* 🔥 NESTED OVERLAY: FORCE TRUE FULLSCREEN */
    .overlay__nested,
    .overlay .overlay__nested,
    .overlay--mobile-layout .overlay__nested {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important; /* ← FORCE full width */
      bottom: 0 !important; /* ← FORCE full height */
      width: 100vw !important; /* ← VIEWPORT width, not parent! */
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      min-width: 100vw !important; /* ← FORCE minimum too */
      min-height: 100vh !important;

      transform: none !important;
      transition: none !important;
      animation: none !important;

      z-index: 10000 !important;
      display: none !important;

      /* 🔥 CRITICAL: Break out of parent context */
      contain: none !important;
      will-change: auto !important;
    }

    /* 🔥 ACTIVE: SHOW */
    .overlay__nested.is-active {
      display: block !important;
    }

    /* 🔥 NESTED CONTENT: Full height scroll */
    .overlay__nested .overlay__nested-content {
      height: 100% !important;
      max-height: 100% !important;
      overflow-y: auto !important;
    }
  }
}

/* ========================================
   MOBILE: NESTED OVERLAY - ROOT LEVEL FULLSCREEN
   ======================================== */

@media screen and (max-width: 768px) {
  .overlay__nested {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    transform: none !important;
    transition: none !important;

    z-index: 10000 !important;
    display: none !important;

    background: var(--color-white) !important;
    overflow: hidden !important;
  }

  .overlay__nested.is-active {
    display: block !important;
  }

  .overlay__nested .overlay__nested-content {
    height: 100% !important;
    overflow-y: auto !important;
    padding: 10px 5px 5px 5px !important; /* Space for close button */
  }
}