/* about.mobile.css */
/* Mobile & small-tablet tweaks for ABOUT page only */


@media (max-width: 40rem) {
  /* Always safe on mobile */
    
  * ,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* ========== OUTER LAYOUT ========== */

  .about-container {
    padding: 2.5rem 0 2.75rem;
    display: flex;
    justify-content: center;
    background-color: #ffffff; /* keep your white outer background */
  }

  /* Make the main dark card use the mobile width nicely */
  .about-content {
    width: 100%;
    max-width: 100%;              /* <-- no 58rem cap on mobile */
    margin: 0 4vw;                /* small side space, symmetrical */
    padding: 1.75rem 1.4rem 2.1rem;
    border-radius: 1.25rem;
  }

  /* ========== HEADER / PHOTO ========== */

  .about-header {
    display: grid;
    grid-template-columns: 1fr;   /* stack photo + text vertically */
    gap: 1.2rem;
    align-items: flex-start;
  }

  .about-profile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
  }

  .about-profile-photo {
    display: block;
    width: 4.9rem;
    height: 4.9rem;
    border-radius: 999rem;
    object-fit: cover;            /* avoids crop / stretch inside the circle */
    flex-shrink: 0;
  }

  .about-title {
    margin-top: 0.3rem;
    font-size: clamp(1.8rem, 7vw, 2.1rem);
  }

  .about-intro {
    font-size: 0.98rem;
  }

  .about-summary-list {
    font-size: 0.9rem;
  }

  /* ========== STATS GRID ========== */

  .about-stats {
    margin-top: 1.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
  }

  .stat-card {
    padding: 0.85rem 0.9rem;
  }

  /* ========== GENERIC SECTION SPACING ========== */

  .about-section {
    margin-top: 1.9rem;
  }

  /* ========== FINAL CTA BOX ========== */

  .about-cta-box {
    margin-top: 2.4rem;
    padding: 1.7rem 1.5rem;
    border-radius: 1.2rem;
  }

  .about-cta-main {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .about-cta-text-block {
    max-width: 100%;
  }

  .about-cta-title {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  .about-cta-text {
    font-size: 0.9rem;
  }

  .about-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 0.9rem;
  }

  .about-cta-button {
    width: 100%;
    text-align: center;
  }

  .about-cta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
  }

  .about-cta-tags li {
    font-size: 0.8rem;
  }
  .about-profile-photo {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 0.1rem solid hsl(48, 100%, 50%);
    object-fit: cover;
  }
  .about-highlights {
    grid-template-columns: 1fr;
    margin-top: 1.75rem;
  }

  .about-highlights::before {
    display: none;
  }

  .highlight-card {
    padding: 1.15rem 1.1rem 1.1rem;
  }

  .highlight-title {
    font-size: 0.88rem;
    letter-spacing: 0.11rem;
  }

  .highlight-pill-grid {
    gap: 0.4rem;
  }

  .highlight-pill {
    font-size: 0.76rem;
  }
}