/* Experience layout overrides — 10 Sep 2026
   Scoped to Experience only. No animation/runtime behaviour changes. */

body[data-page="experience"] .experience-groups{
  display:grid;
  gap:64px;
}

body[data-page="experience"] .experience-group-head{
  margin-bottom:24px;
}

/* Match the reference: Roles and Structured DevOps learning use the same scale. */
body[data-page="experience"] .experience-group-head h2{
  margin:8px 0 0 !important;
  font-size:clamp(36px,3.6vw,44px) !important;
  line-height:1.04 !important;
  letter-spacing:-.035em;
}

body[data-page="experience"] .experience-role-list{
  display:grid;
  gap:18px;
}

/* Keep the role/programme label and company visually separate. */
body[data-page="experience"] .experience-label-row{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  column-gap:10px !important;
  row-gap:6px;
  margin-bottom:8px;
}

body[data-page="experience"] .experience-type{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  color:var(--muted-2) !important;
  font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap;
}

body[data-page="experience"] .experience-type::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 9px color-mix(in srgb,var(--green) 42%,transparent);
}

body[data-page="experience"] .experience-company{
  display:inline-block !important;
  margin:0 !important;
  color:var(--orange) !important;
  font:900 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap;
}

@media(max-width:820px){
  body[data-page="experience"] .experience-groups{gap:52px}
  body[data-page="experience"] .experience-group-head h2{font-size:36px !important}
}

@media(max-width:520px){
  body[data-page="experience"] .experience-label-row{column-gap:8px !important}
  body[data-page="experience"] .experience-group-head h2{font-size:32px !important}
}