/* ============================================
   Alex Waltz Portfolio — contact.css
   Contact-page-only styles. Loaded AFTER the shared style.css.
   All selectors prefixed with `contact-` to avoid collisions with
   parallel work on home/photos pages. Reference width: 1920px, vw
   units — follows the same scaling rules as the rest of the site
   (see site/DESIGN-SYSTEM.md).
   ============================================ */

/* --- Social Row (overlaid on bottom of the contact cover photo) ---
   Layout: 4-column CSS grid filling the full cover width. Each column
   is 1fr so slot centers are equidistant (240/720/1200/1600 on 1920vw).
   Each .contact-social-item is flex-column-centered inside its slot,
   and holds a centered text stack (label + handle). The icon is
   position:absolute to the LEFT of the text stack — this keeps each
   label on its slot center regardless of how much wider the handle is
   than the label (e.g. short "e-mail" vs long "alexwaltz212@gmail.com").
   Without absolute-positioned icons, the icon sat in the flex flow and
   pushed the label ~34px right of slot center, which looked most wrong
   on the email item. */
.contact-social-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2vw;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
}

.contact-social-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-social-text {
  text-align: center;
}

.contact-social-icon {
  position: absolute;
  right: calc(100% + 0.6vw);
  top: 50%;
  transform: translateY(-50%);
  width: 2.9vw;
  height: 2.9vw;
  object-fit: contain;
}

/* Label/handle sizes were given by the user as 33.54pt and 15.92pt in
   the PSD, but those values rendered visually smaller than the mockup
   once converted at PSD=1920 ref. After iterating side-by-side against
   Mockups/CONTACT.jpg at matched 1920x1019 viewport, 2.9vw / 1.4vw
   ended up matching the mockup. Ratio preserves the designer's intent
   (handle ≈ 48% of label). */
.contact-social-label,
.contact-social-handle {
  /* Shrink-wrap each line to its visible text width and center it inside
     the social item, so the element's bounding box matches what you see
     (instead of stretching to the widest sibling's width). */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.contact-social-label {
  font-size: 2.9vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02vw;
}

.contact-social-handle {
  font-size: 1.4vw;
  font-weight: 800;
  line-height: 1;
  margin-top: 0.45vw;
  letter-spacing: 0.02vw;
}

/* ===== Per-item position tuning from the visual editor =====
   These override the base transforms above. Icons had
   translateY(-50%) in the base rule; these replace it with the
   editor's computed (centering-baked + nudge) offsets. */
.contact-social-item:nth-child(1) .contact-social-icon   { transform: translate(1.51vw,  -2.39vw); }
.contact-social-item:nth-child(2) .contact-social-icon   { transform: translate(1.94vw,  -2.53vw); }
.contact-social-item:nth-child(3) .contact-social-icon   { transform: translate(6.73vw,  -2.42vw); }
.contact-social-item:nth-child(4) .contact-social-icon   { transform: translate(1.85vw,  -2.42vw); }
.contact-social-item:nth-child(1) .contact-social-label  { transform: translate(1.41vw,  -0.11vw); }
.contact-social-item:nth-child(2) .contact-social-label  { transform: translate(1.75vw,  -0.11vw); }
.contact-social-item:nth-child(3) .contact-social-label  { transform: translate(2.62vw,  -0.29vw); }
.contact-social-item:nth-child(4) .contact-social-label  { transform: translate(1.65vw,  -0.14vw); }
.contact-social-item:nth-child(1) .contact-social-handle { transform: translate(1.41vw,  -0.11vw); }
.contact-social-item:nth-child(2) .contact-social-handle { transform: translate(1.65vw,  -0.11vw); }
.contact-social-item:nth-child(3) .contact-social-handle { transform: translate(1.36vw,  -0.1vw);  }
.contact-social-item:nth-child(4) .contact-social-handle { transform: translate(1.8vw,   -0.14vw); }