/**
 * About Section Overlay
 * ======================
 * Fixed overlay that slides under the main scroll container.
 * Triggered by header "About" button.
 * 
 * Component structure:
 * - #fixed-about-section (fixed underlay)
 *   - .about-container
 *     - .about-grid
 *       - .about-image-col
 *       - .about-text-col
 */

/* ========================================
   FIXED ABOUT SECTION (UNDERLAY)
   ======================================== */

#fixed-about-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--locked-vh, 1vh) * 100);
  z-index: 0;
  background-color: #F5F3EE;
  display: block;
  pointer-events: none;
  visibility: hidden;
}

body.about-open #fixed-about-section {
  visibility: visible;
  pointer-events: auto;
  /* z-index stays at 0 - scroll-container (z-index:1) overlaps on top */
}

#fixed-about-section .about-container {
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
}

#fixed-about-section .about-grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1fr 2fr 1.4fr;
  grid-template-rows: 13.2vh minmax(0, 1fr) 28vh;
  gap: 0;
  align-items: end;
  width: 100%;
  height: 100%;
}

/* Image: Column 2, Row 2 */
#fixed-about-section .about-image-col {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  overflow: hidden;
}

#fixed-about-section .about-image-wrapper {
  margin: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  display: flex;
  align-items: flex-end;
}

#fixed-about-section .about-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Text: Column 4, Row 2 */
#fixed-about-section .about-text-col {
  grid-column: 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
  padding-bottom: 0.5rem;
}

#fixed-about-section .about-micro-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-primary);
  font-size: max(0.9rem, 0.9vw);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(43, 43, 43, 0.7);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.5rem;
}

#fixed-about-section .about-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#fixed-about-section .about-body p {
  margin: 0;
  font-family: var(--font-primary);
  font-size: max(0.9rem, 0.9vw);
  line-height: 1.4;
  text-align: left;
  font-weight: 300;
  color: var(--color-text);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  #fixed-about-section .about-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 13.2vh var(--layout-margin) 15vh var(--layout-margin);
    gap: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  #fixed-about-section .about-image-col {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    text-align: center;
    order: 1;
    min-height: 0;
  }

  #fixed-about-section .about-image-wrapper {
    max-height: 40vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }

  #fixed-about-section .about-image-wrapper img {
    max-height: 40vh;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }

  #fixed-about-section .about-text-col {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    padding: 0;
    order: 2;
  }

  #fixed-about-section .about-micro-header {
    display: none;
  }

  #fixed-about-section .about-body p {
    text-align: left;
    font-size: 1rem;
  }
}

/* Mobile About Closing Phase - Disables native scroll during gesture-driven close */
@media (max-width: 768px) {
  body.about-closing #fixed-about-section .about-grid {
    overflow-y: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
  }
}

/* ========================================
   MOBILE CLOSE BUTTON
   ======================================== */

#fixed-about-section .about-mobile-close-wrapper {
  display: none;
}

@media (max-width: 767px) {
  #fixed-about-section .about-mobile-close-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    width: 100%;
  }

  #fixed-about-section .about-mobile-close-wrapper.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  #fixed-about-section button.mobile-close-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 0 0 4px 0;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: rgba(43, 43, 43, 0.7);
    cursor: pointer;
  }

  #fixed-about-section .close-icon-svg {
    display: block;
    width: 10px;
    height: 10px;
    overflow: visible;
  }

  #fixed-about-section .close-icon-svg path {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 1s ease-out;
  }

  #fixed-about-section .close-icon-svg path:nth-child(2) {
    transition-delay: 0.2s;
  }

  #fixed-about-section .about-mobile-close-wrapper.is-revealed .close-icon-svg path {
    stroke-dashoffset: 0;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATION
   ======================================== */

/* Will-change for scroll container during about transitions */
body.about-open #scroll-container,
body.about-closing #scroll-container {
  will-change: transform;
}

body:not(.about-open):not(.about-closing) #scroll-container {
  will-change: auto;
}

/* Border reveal when about is open */
body.about-open #landing-page #loader-screen {
  border-top-color: #000;
}

/* Force header to stay pinned when About is open (mobile) */
@media (max-width: 767px) {
  body.about-open header {
    position: fixed !important;
    top: 0 !important;
    transform: none !important;
  }
}