/* About page scoped styles */

/* Base resilience */
.page-about img,
.page-about video {
  max-width: 100%;
  height: auto;
  display: block;
}
.page-about *,
.page-about *::before,
.page-about *::after {
  box-sizing: border-box;
}

/* Container breathing on small/medium */
@media (max-width: 1024px) {
  .page-about .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 640px) {
  .page-about .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Header tweaks for small devices (navigation stays as-is on lg+) */
.page-about .main-header .header-upper .header-inner {
  width: 100%;
}
@media (max-width: 1024px) {
  .page-about .main-header .main-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
  }
}
@media (max-width: 640px) {
  .page-about .main-header .logo img {
    max-height: 40px;
    width: auto;
  }
}

/* Single page hero heading scales down only on <= lg */
.page-about .single-page-hero-area h2,
.page-about .section-title h2,
.page-about .resume-box h2,
.page-about h2.about-pre-title,
.page-about .skill-item h5 {
  color: var(--color-text);
}

.page-about .resume-date,
.page-about .single-about-content-part span {
  color: var(--color-label);
}

.page-about .skill-item img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

@media (max-width: 1024px) {
  .page-about .single-page-hero-area h2 {
    font-size: 48px;
    line-height: 1.05;
    word-break: break-word;
  }

  .page-about .resume-area {
    padding-bottom: 72px;
  }
}
@media (max-width: 640px) {
  .page-about .single-page-hero-area h2 {
    font-size: 36px;
  }
}

/* Resume grid stacks on SM/MD; lg+ layout untouched */
@media (max-width: 1024px) {
  .page-about .resume-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .page-about .resume-box {
    padding: 20px;
    border-radius: 12px;
  }
  .page-about .resume-box h2 {
    font-size: 22px;
    line-height: 1.2;
  }
  .page-about .resume-box p {
    font-size: 15px;
    line-height: 1.6;
  }
}
@media (max-width: 640px) {
  .page-about .resume-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-about .resume-box h2 {
    font-size: 20px;
  }
  .page-about .resume-box p,
  .page-about .resume-box li {
    font-size: 14.5px;
  }
  .page-about .resume-box .resume-date {
    font-size: 12px;
  }

  .page-about .resume-box {
    padding: 18px;
  }

  .page-about .resume-box ul {
    padding-left: 1rem;
  }
}

/* Skills section: improve spacing on small screens (cards already responsive via utility classes) */
@media (max-width: 1024px) {
  .page-about #skills .section-title {
    margin-bottom: 14px !important;
  }
  .page-about #skills .skill-item {
    padding: 16px;
    border-radius: 14px;
  }
  .page-about #skills .skill-item h5 {
    font-size: 14.5px;
  }
}

/* Center "Our Core Capabilities" on small screens */
@media (max-width: 768px) {
  .page-about #skills .section-title {
    text-align: center;
  }
  .page-about #skills .section-title h2 {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .page-about #skills .skill-item img {
    width: 44px;
    height: auto;
    margin: 0 auto 8px;
  }
  .page-about #skills .skill-item h5 {
    font-size: 14px;
  }

  .page-about #skills .grid {
    gap: 16px;
  }
}

/* Footer headline scales down only on SM/MD */
@media (max-width: 1024px) {
  .page-about .main-footer h2 {
    line-height: 0.95;
    font-size: clamp(56px, 12vw, 120px);
  }
}
@media (max-width: 480px) {
  .page-about .main-footer h2 {
    font-size: clamp(40px, 12vw, 84px);
  }
}