/* ========================================
   ABOUT PAGE STYLES
   ======================================== */

/* ========================================
   SHARED: SECTION HEADER
   ======================================== */

.about-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.about-star {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.about-section-title {
  font-family: 'Emilys Candy', cursive;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: #333333;
}

/* ========================================
   PORTRAIT
   ======================================== */

.about-portrait {
  display: flex;
  justify-content: center;
  padding-top: 160px;
  padding-bottom: 80px;
  background: var(--color-page-bg);
}

.about-portrait__img {
  width: 652px;
  height: 672px;
  border-radius: 32px;
  object-fit: cover;
  display: block;
}

/* ========================================
   ABOUT TEXT
   ======================================== */

.about-text {
  width: 1323px;
  margin: 0 auto;
  padding: 0 0 80px;
}

.about-text__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-text__body p {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: 0.02em;
  color: #333333;
}

/* ========================================
   SKILLS
   ======================================== */

.about-skills {
  width: 1323px;
  margin: 0 auto;
  padding: 0 0 80px;
}

.skills-container {
  background: #DCD5FF;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.skills-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.skill-badge {
  background: #4C25A7;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 48px;
}

.skill-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  flex-shrink: 0;
}

.skill-badge__text {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #FFFFFF;
  white-space: nowrap;
}

/* ========================================
   TOOL STACKS
   ======================================== */

.about-tools {
  width: 1323px;
  margin: 0 auto;
  padding: 0 0 80px;
}

.tools-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tools-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.tool-img {
  width: 166px;
  height: 203px;
  object-fit: contain;
  flex-shrink: 0;
}

.tool-img--wide {
  width: 176px;
}

/* ========================================
   FUN-IVITY
   ======================================== */

.about-funivity {
  padding-bottom: 80px;
}

.about-section-header--padded {
  width: 1323px;
  margin: 0 auto 32px;
}

.funivity-stack {
  position: relative;
  width: 100%;
  height: 1100px;
  cursor: pointer;
  outline: none;
}

.funivity-stack:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Each card centered in the container */
.funivity-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 393px;
  height: 489px;
  margin-left: -196.5px;
  margin-top: -244.5px;
  overflow: visible;
  transition: transform 0.6s ease, z-index 0s;
}

/* Stacked rotations — z-index 4 = top of stack */
.funivity-card:nth-child(1) { transform: rotate(-9.26deg);  z-index: 4; }
.funivity-card:nth-child(2) { transform: rotate(1.54deg);   z-index: 3; }
.funivity-card:nth-child(3) { transform: rotate(15.03deg);  z-index: 2; }
.funivity-card:nth-child(4) { transform: rotate(-7.79deg);  z-index: 1; }

/* Unstacked — 2×2 grid via translate */
.funivity-stack.unstacked .funivity-card:nth-child(1) {
  transform: translate(-210px, -255px) rotate(0deg);
  z-index: 1;
}
.funivity-stack.unstacked .funivity-card:nth-child(2) {
  transform: translate(210px, -255px) rotate(0deg);
  z-index: 1;
}
.funivity-stack.unstacked .funivity-card:nth-child(3) {
  transform: translate(210px, 255px) rotate(0deg);
  z-index: 1;
}
.funivity-stack.unstacked .funivity-card:nth-child(4) {
  transform: translate(-210px, 255px) rotate(0deg);
  z-index: 1;
}

.funivity-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}



/* ========================================
   RESUME DOWNLOAD
   ======================================== */

.about-resume {
  display: flex;
  justify-content: center;
  padding: 0 0 80px;
}

.about-resume__link {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.about-resume__wrapper {
  position: relative;
  width: 637px;
}

.about-resume__img {
  width: 637px;
  height: auto;
  display: block;
}

/* Overlay reserved for the paper area — no hover effect */
.about-resume__paper {
  position: absolute;
  left: 2%;
  top: 36%;
  width: 23%;
  height: 45%;
  border-radius: 16px;
  pointer-events: none;
}

/* Mobile tool card grid — hidden on desktop, revealed in mobile media query */
.tools-grid--mobile {
  display: none;
}

.tools-row--mobile {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.tool-card {
  display: none;
}

/* ========================================
   RESPONSIVE — TABLET (≤1024px)
   ======================================== */

@media (max-width: 1024px) {
  .about-portrait__img {
    width: 90%;
    height: auto;
  }

  .about-text,
  .about-skills,
  .about-tools {
    width: 90%;
  }

  .about-section-header--padded {
    width: 90%;
  }

  .skills-row {
    flex-wrap: wrap;
    gap: 12px !important;
  }

  .tools-row {
    flex-wrap: wrap;
    gap: 24px !important;
  }

  .funivity-stack {
    height: 1200px;
  }

  .funivity-stack.unstacked .funivity-card:nth-child(1) {
    transform: translate(-205px, -260px) rotate(0deg);
  }
  .funivity-stack.unstacked .funivity-card:nth-child(2) {
    transform: translate(205px, -260px) rotate(0deg);
  }
  .funivity-stack.unstacked .funivity-card:nth-child(3) {
    transform: translate(205px, 260px) rotate(0deg);
  }
  .funivity-stack.unstacked .funivity-card:nth-child(4) {
    transform: translate(-205px, 260px) rotate(0deg);
  }

  .about-resume__wrapper {
    width: 90%;
  }

  .about-resume__img,
  .about-resume__wrapper {
    width: 100%;
  }
}

/* ========================================
   RESPONSIVE — MOBILE (≤768px)
   ======================================== */

@media (max-width: 768px) {
  .about-portrait {
    padding-top: 120px;
    padding-bottom: 48px;
  }

  .about-portrait__img {
    width: calc(100% - 48px);
    height: auto;
    border-radius: 20px;
  }

  .about-text,
  .about-skills,
  .about-tools {
    width: calc(100% - 48px);
    padding: 0 0 48px;
  }

  .about-section-header--padded {
    width: calc(100% - 48px);
  }

  .about-text__body p {
    font-size: 16px;
  }

  .skill-badge__text {
    font-size: 16px;
  }

  .tool-card {
    width: 130px;
    height: auto;
    padding: 16px;
    gap: 16px;
  }

  .tool-card__icon {
    width: 60px;
    height: 60px;
  }

  .tool-card__label {
    font-size: 16px;
  }

  .funivity-stack {
    height: auto;
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 24px;
  }

  .funivity-card {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    transform: none !important;
    z-index: 1 !important;
    width: 100%;
    max-width: 340px;
    display: none;
  }

  .funivity-card:nth-child(1) {
    display: flex;
    transform: rotate(-3deg) !important;
  }

  .funivity-stack.unstacked .funivity-card {
    display: flex;
    position: relative;
    transform: none !important;
    margin-bottom: 24px;
  }

  .funivity-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .funivity-hint {
    margin-top: 16px;
  }
}

/* ========================================
   RESPONSIVE — MOBILE (≤480px / 393px target)
   ======================================== */

@media (max-width: 480px) {

  /* ── PAGE ──────────────────────────────── */
  body {
    background: #EBEBEB;
  }

  #main-content {
    padding: 32px 17px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* ── PORTRAIT ──────────────────────────── */
  .about-portrait {
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-self: stretch;
  }

  .about-portrait__img {
    width: 320px;
    height: 330px;
    border-radius: 15px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
  }

  /* ── SECTION HEADERS ───────────────────── */
  .about-section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }

  .about-star {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transform: rotate(46.51deg);
    object-fit: contain;
  }

  .about-section-title {
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 150%;
  }

  /* ── ABOUT TEXT ────────────────────────── */
  .about-text {
    width: 356px;
    margin: 0;
    padding: 0;
  }

  .about-text__body {
    gap: 16px;
  }

  .about-text__body p {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 150%;
    color: #333333;
  }

  /* ── SKILLS ────────────────────────────── */
  .about-skills {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .skills-container {
    width: 292px;
    height: 736px;
    background: #DCD5FF;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: visible;
  }

  /*
   * Group 1 — badges are absolutely positioned within a fixed-height
   * block so each sits at top: 0, 64, 128, 192, 256, 320px
   * (64px from top-edge to top-edge, badge height 40px → 24px visual gap)
   */
  .skills-row:nth-child(1) {
    display: block;
    position: relative;
    width: 100%;
    height: 360px;
    flex-shrink: 0;
    gap: 0 !important;
  }

  .skills-row:nth-child(1) .skill-badge {
    position: absolute;
    left: 0;
  }

  .skills-row:nth-child(1) .skill-badge:nth-child(1) { top: 0;    width: 116px; }
  .skills-row:nth-child(1) .skill-badge:nth-child(2) { top: 64px; width: 105px; }
  .skills-row:nth-child(1) .skill-badge:nth-child(3) { top: 128px; width: 183px; }
  .skills-row:nth-child(1) .skill-badge:nth-child(4) { top: 192px; width: 173px; }
  .skills-row:nth-child(1) .skill-badge:nth-child(5) { top: 256px; width: 116px; }
  .skills-row:nth-child(1) .skill-badge:nth-child(6) { top: 320px; width: 156px; }

  /* Group 2 — normal flex column with 24px gap */
  .skills-row:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 24px !important;
  }

  .skill-badge {
    height: 40px;
    flex-shrink: 0;
    background: #4C25A7;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .skill-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    flex-shrink: 0;
  }

  .skill-badge__text {
    font-family: 'Urbanist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 150%;
  }

  /* ── TOOL STACKS ───────────────────────── */
  .about-tools {
    width: 100%;
    align-self: stretch;
    margin: 0;
    padding: 0;
  }

  .tools-grid {
    display: none;
  }

  .tools-grid--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 280px;
    margin: 0 auto;
  }

  .tools-row--mobile {
    display: flex;
    flex-direction: row;
    gap: 12px;
  }

  .tool-img--mobile {
    width: 83px;
    height: 101px;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* ── FUN-IVITY ─────────────────────────── */
  .about-funivity {
    align-self: stretch;
    overflow: visible;
  }

  .about-section-header--padded {
    width: auto;
    margin: 0 0 16px;
  }

  .funivity-stack {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    cursor: default;
    padding: 0 !important;
  }

  .funivity-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    flex-shrink: 0;
    width: 222px;
    height: 277px;
    background: transparent;
    border: none !important;
    overflow: visible;
    margin: 0 !important;
    transition: none;
    z-index: auto !important;
  }

  .funivity-card:nth-child(1) { transform: rotate(-9.26deg) !important; }
  .funivity-card:nth-child(2) { transform: rotate(11.9deg) !important; }
  .funivity-card:nth-child(3) { transform: rotate(-8.75deg) !important; }
  .funivity-card:nth-child(4) { transform: rotate(10.82deg) !important; }

  .funivity-stack.unstacked .funivity-card {
    transform: none !important;
  }

  .funivity-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ── RESUME ────────────────────────────── */
  .about-resume {
    padding: 0;
    justify-content: center;
    align-self: stretch;
  }

  .about-resume__wrapper {
    width: 334px;
    margin: 0 auto;
  }

  .about-resume__img {
    width: 100%;
    height: auto;
  }
}