/* KPI247 — mobile.css (v12.1)
   Small-screen refinements
*/
@media (max-width:767px){

  /* Type + spacing */
  .h1{font-size:40px}
  .hero{padding:54px 0 26px}
  .card,.panel{padding:16px}

  /* Tables */
  .table thead{display:none}
  .table tr{display:block;border-bottom:1px solid var(--border)}
  .table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-bottom:none;
    padding:10px 12px
  }
  .table td:before{
    content:attr(data-label);
    font-weight:700;
    color:var(--ink)
  }

  /* =========================================================
     ABOUT PAGE — mobile overrides (profile photo scaling fix)
     ========================================================= */

  /* Force single column on mobile */
  .about-grid{
    grid-template-columns: 1fr !important;
    gap:16px;
  }

  .about-card{
    border-radius:16px;
  }

  /* ✅ Single source of truth for the image sizing on mobile */
  .about-card > img.about-photo{
    display:block;
    width: min(240px, 72vw) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 14px auto 0 !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
  }

  /* Caption: tighter */
  .about-caption{
    padding:12px 14px;
  }

  /* Contact line: wrap cleanly */
  .about-contact{
    gap:8px;
    row-gap:6px;
  }

  /* Hide the dot if it wraps awkwardly */
  .about-contact .dot{
    display:none;
  }

  /* Highlights: one column for readability */
  .about-highlights{
    grid-template-columns: 1fr;
    gap:10px;
  }
}