/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- IMPORTED STYLES --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


@import "../../universal_styles/variables.css?v=20261101-1600";



/* ---------------------------------------------- vv SITE-SPECIFIC STYLES vv ---------------------------------------------- */

/* Figma: About (2649:4142), built 2026-11-01. Content widths / margins / text styles are the home page's
   (--page-padding, --column-gap, .textTitle, .textBody, detail rows, footer). Values below are 1920 x 1080 Figma px.
   Responsive: no About frames yet, the home page's rules are used (one column below 1000px, see RESPONSIVE).

   Stacking + parallax (parallax.js, like home): every section slides over the one before it, which moves at half
   speed while it's being covered (.parallaxOut / .parallaxInner). Later sections are drawn on top (DOM order). */

#aboutMain {
  position: relative;
  z-index: 3;   /* over the footer (index.css: #footer z-index 2), which sits 28px under the last section */
}

.aboutSection {
  position: relative;
}

/* a section that is being covered only shows inside its own box: its moving content (half speed, parallax.js) must not
   reach past the next section (the location section is shorter than that move and the footer showed underneath) */
.aboutSection.parallaxOut {
  overflow: hidden;
}

/* thin divider line (0.64px, 50%, in the text color) */
.aboutLine {
  width: 100%;
  height: var(--line-weight);
  background-color: currentColor;
  opacity: var(--line-opacity);
}



/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- HERO --------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* The first member section (rounded top) peeks in above the nav: as far above the nav as the nav is above the
   screen's bottom (Justus, 2026-11-02; 44px -> 940px at 1080px screen height). Title + text in the two columns
   (bottom aligned), line 40px below, all centered vertically. Two diagonal boxes (600 x 375, cut by the hero's
   edges): top left + bottom right. Intro animation: about.js */
#aboutHero {
  height: calc(100vh - 2 * var(--nav-bottom) - var(--nav-height));
}

@supports (height: 100svh) {
  #aboutHero {
    height: calc(100svh - 2 * var(--nav-bottom) - var(--nav-height));
  }
}

.aboutHeroInner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--page-padding);
  overflow: hidden;
  background-color: var(--color-dark);
  color: var(--color-white);
  will-change: transform;
}

.aboutHeroContent {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.aboutDiagonals {
  position: absolute;
  width: 600px;
  height: 375px;
  overflow: hidden;
}

.aboutDiagonalsTop {
  left: var(--page-padding);
  top: -97px;
}

.aboutDiagonalsBottom {
  right: var(--page-padding);
  bottom: -98px;
}



/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ MEMBERS ------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: white, 620px high, 40px dark gap between the two (part of the second one, so it moves with it).
   Text block left (detail row "member", title, handles; 30px apart), as far from the photo as from the screen
   edge (680px wide at 1920). Photo = the right half of the screen, full height */
.aboutMemberInner {
  position: relative;
  display: flex;
  align-items: center;
  height: 620px;
  padding-left: var(--page-padding);
  background-color: var(--color-white);
  color: var(--color-dark);
  will-change: transform;
}

/* the first one slides over the hero with a rounded top, like home's sections (the photo is cut by it too) */
#aboutDayeon .aboutMemberInner {
  overflow: hidden;
  border-radius: var(--section-radius) var(--section-radius) 0 0;
}

.aboutMember + .aboutMember .aboutMemberInner {
  height: 660px;
  border-top: 40px solid var(--color-dark);
}

.aboutMemberText {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  width: calc(50vw - 2 * var(--page-padding));
}

/* the 2-line titles keep their lines (in Figma they are wider than the 680px column) */
.aboutMemberText .textTitle {
  white-space: nowrap;
}

.aboutPhoto {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-light);   /* until the photo is there */
}

.aboutPhoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* handles: short label ("ig", "yt", "sptfy", 13px) + 8px + name, 40px apart (Figma updated 2026-11-02: text instead
   of icons; the label renders bold in Figma, as the title font) */
.aboutHandles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aboutHandle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  white-space: nowrap;
}

.aboutHandleLabel {
  font-family: var(--font-display);
  font-weight: var(--semi-bold-weight);
  font-size: 13px;
  letter-spacing: -0.05em;   /* Figma: -0.65px */
}



/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------- JOIN / COLLAB / CONTACT ----------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: dark, 1150px high = 209px above + below the content. Three blocks (title + 30px + text / buttons), 80px apart,
   full-width lines between them. join + contact in the left column, collab in the right one */
.aboutJoinInner {
  padding: var(--about-join-pad) var(--page-padding);
  background-color: var(--color-dark);
  color: var(--color-white);
  will-change: transform;
}

.aboutJoinContent {
  display: flex;
  flex-direction: column;
  gap: var(--about-block-gap);
}

.aboutBlock {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  width: calc((100% - var(--column-gap)) / 2);
}

.aboutBlockRight {
  align-self: flex-end;
}

.aboutButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* outlined button (Figma: 150 x 30, 0.5px border, Cutive Mono 14px, +1.4px letter-spacing) */
.btnOutline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 30px;
  border: 0.5px solid currentColor;
  font-family: var(--font-body);
  font-size: var(--s-text);
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: inherit;
}



/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ LOCATION -----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* Figma: white, rounded top (28px), 422px high (+ the 28px the footer sits under, like home's last section).
   Left column: line, text, line (50px apart); right column: the drawn map (800 x 200) */
.aboutLocationInner {
  display: flex;
  align-items: center;
  gap: var(--column-gap);
  height: calc(var(--about-location-height) + var(--section-overlap));
  padding: 0 var(--page-padding) var(--section-overlap);
  border-radius: var(--section-radius) var(--section-radius) 0 0;
  background-color: var(--color-white);
  color: var(--color-dark);
}

.aboutLocationText {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: calc((100% - var(--column-gap)) / 2);
}

.aboutMap {
  width: calc((100% - var(--column-gap)) / 2);
  aspect-ratio: 4 / 1;
}

.aboutMap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* -----------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------- RESPONSIVE -----------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* No About frames yet: the home page's rules (page padding + title sizes from variables.css, one column below 1000px).
   Section heights / spacings below are my own until Justus designs them */
#aboutMain {
  --about-join-pad: 209px;
  --about-block-gap: 80px;
  --about-location-height: 422px;
}

@media (max-width: 1000px) {
  #aboutMain {
    --about-join-pad: 140px;
    --about-block-gap: 60px;
  }

  /* members: text on top, photo below over the full width */
  .aboutMemberInner,
  .aboutMember + .aboutMember .aboutMemberInner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 100px 0 0;
  }

  .aboutMemberText {
    width: auto;
    padding: 0 var(--page-padding);
  }

  .aboutPhoto {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 620;
    margin-top: 60px;
  }

  .aboutBlock {
    width: 100%;
  }

  .aboutLocationInner {
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
    height: auto;
    padding: 100px var(--page-padding) calc(100px + var(--section-overlap));
  }

  .aboutLocationText,
  .aboutMap {
    width: 100%;
  }
}

@media (max-width: 550px) {
  #aboutMain {
    --about-join-pad: 100px;
    --about-block-gap: 50px;
  }

  .aboutDiagonals {
    width: 320px;
    height: 200px;
  }
}