/* References layout guard: loaded only on the references page. */
body[data-app="site"] .ao-references-page{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body[data-app="site"] .ao-references-page .ref-page{
  width:min(100% - 32px,1500px);
  max-width:1500px;
  margin:0 auto;
}

body[data-app="site"] .ao-references-page .ref-tabs{
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px!important;
}

body[data-app="site"] .ao-references-page .ref-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
  width:100%;
  clear:both;
}

body[data-app="site"] .ao-references-page .ref-card{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  float:none!important;
  position:relative;
}

body[data-app="site"] .ao-references-page .ref-cover{
  display:block!important;
  width:100%!important;
  min-height:210px!important;
  aspect-ratio:16/10;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  flex:0 0 auto;
}

body[data-app="site"] .ao-references-page .ref-body{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto;
}

body[data-app="site"] .ao-references-page .ref-grid.is-filtered .ref-card{
  display:none!important;
}

body[data-app="site"] .ao-references-page .ref-grid.is-filtered .ref-card.is-visible{
  display:flex!important;
}

@media(max-width:1100px){
  body[data-app="site"] .ao-references-page .ref-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:680px){
  body[data-app="site"] .ao-references-page .ref-page{
    width:min(100% - 24px,1500px);
  }

  body[data-app="site"] .ao-references-page .ref-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  body[data-app="site"] .ao-references-page .ref-cover{
    min-height:180px!important;
  }
}