/* Work experience cards */
@layer components {
  .work-band{
    padding:clamp(2.2rem,5vw,3.1rem) 0;
  }

  .work-head{
    text-align:center;
    margin:0 0 clamp(1.1rem,3vw,1.6rem);
  }

  .work-subtitle{
    margin:10px auto 0;
    max-width:70ch;
    color:var(--text-muted);
    font-size:1.02rem;
  }

  .work-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    align-items:stretch;
  }

  .work-card{
    background:color-mix(in srgb,var(--surface) 94%, #010306 6%);
    border:1px solid color-mix(in srgb,var(--primary) 20%, transparent);
    border-radius:18px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    box-shadow:0 20px 38px rgba(0,0,0,.28);
  }

	  .work-logo-shell{
	    height:86px;
	    min-width:86px;
	    padding:0 18px;
	    border-radius:18px;
	    background:var(--logo-tile-bg-company);
	    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
	    display:inline-flex;
	    align-items:center;
	    justify-content:center;
	    box-shadow:0 8px 20px rgba(0,0,0,.3);
	    align-self:center;
	    max-width:100%;
	  }

  .work-logo-shell img{
    width:auto;
    height:auto;
    max-height:56px;
    max-width:240px;
    display:block;
  }

  .work-logo-link:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:4px;
  }

  .work-company{
    margin:4px 0 0;
    font-size:1.1rem;
    text-align:center;
  }

  .work-timeframe{
    margin:0;
    font-size:.95rem;
    color:var(--text-muted);
    text-align:center;
  }

  .work-role{
    margin:0;
    font-size:.82rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-align:center;
    color:color-mix(in srgb,var(--text-muted) 78%, #ffffff 22%);
  }

  .work-highlights{
    margin:10px 0 0;
    padding-left:20px;
    color:color-mix(in srgb,var(--text-muted) 92%, #ffffff 8%);
    line-height:1.55;
  }

  .work-highlights li{
    margin:0 0 10px;
    font-size:.95rem;
  }

  .work-highlights li:last-child{margin-bottom:0;}

  @media (max-width:980px){
    .work-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width:640px){
    .work-grid{
      grid-template-columns:1fr;
    }

    .work-card{
      padding:20px;
    }
  }
}