/* University Template over-ride
   Launched: 2023-09-12
   Author: Notre Dame Web Team
   ----------------------------------------------------*/

.section { margin: 4rem 0; }

@media only screen {
  .card.card-dark { background: var(--brand-blue); border-color: var(--brand-blue-bright); }
  .card.card-dark:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-bright); }
  .card.card-dark .card-body,.card.card-dark .card-title,.card.card-dark .card-title a.card-link { color: #fff; }
  .card-title { line-height: 1.4; }
  
  .section--home-callout { background:var(--brand-blue); color:#fff;}
  .section--home-callout h2,.section--home-callout p { color:#fff; }
  .section--home-callout .section-body  { padding-bottom:2rem; }
  .section--offset-image .section-image { margin:0 var(--gutter-offset); position:relative; }
  .section--home-callout .btn { margin-left:.75rem; margin-right:.75rem; }
  
  .people-advisors .show-bio,.people-staff .btn-advisors {display:none;}

  .long-title { font-size:1.625rem; margin-bottom:.5em }
  .home-primary .page-title:after,.long-title:after {content:none;}

  
  /* Dialog Polyfill
  --------------------------------------*/
  dialog { background:var(--sky-blue); border:none; box-shadow:0 0 7px rgba(0,0,0,.7); display:block; height:-moz-fit-content; height:fit-content; left:0; margin:auto; max-height:90vh; max-width:90vw; padding:0; position:fixed; right:0; width:-moz-fit-content; width:fit-content; }
  dialog[open] { animation:dialogShow .25s ease-out;}
  dialog:not([open]) { display:none; }
  dialog.fixed { position:fixed; top:50%; transform:translateY(-50%); }
  dialog+.backdrop { bottom:0; left:0; position:fixed; right:0; top:0; }
  dialog+.backdrop,dialog::backdrop { background:rgba(0,0,0,.5); }
  ._dialog_overlay { bottom:0; left:0; position:fixed; right:0; top:0; }
  .has-open-dialog .page-main { z-index:auto; }
  .has-open-dialog .page-main:before { z-index:0; }
  .dialog-close,.dialog-close button {position:absolute; right:2rem; top:2rem; }
  .dialog-close button { animation: dialogEnter .3s; background:none; background:hsla(0,0%,100%,.5); border:0; border-radius:100%;color:var(--brand-blue); font-size:2em; height:1.25em; line-height:1.25; margin:0; padding:0; text-align:center; width:1.25em; }

  .dialog-frame { background:#fff; height:-moz-fit-content; height:fit-content; max-height:90vh; overflow-y:auto;}
  .dialog-body { padding:1rem; }
  .dialog-image img { width:100%; }

  @keyframes dialogEnter {
  0% {  opacity:0; transform:translate3d(0, -1em, 0); }
  to { opacity:1; transform:translateZ(0); }
  }

  @keyframes dialogShow {
  0% {opacity:0;}
  to {opacity:1;}
  }
}

/* 480px
----------------------------------------------------*/

/* 580px
----------------------------------------------------*/

@media only screen and (min-width:36.250em) {
  /* People Modal */
  .dialog-person { display:flex; flex-flow:row; max-width:80vw;overflow:visible; }
    .dialog-person .dialog-image {margin:-1rem 1rem 0 -1rem; width:40%; }
    .dialog-person .dialog-body { overflow-y:auto; padding:2rem 2rem 2rem 1rem; width:60%; }
  .dialog-person .dialog-frame { display:flex; flex-flow:row; height:auto; overflow:visible; padding:0; }
}

/* 768px
----------------------------------------------------*/

@media only screen and (min-width:48em) {
  /* People Modal */
  .dialog-person .dialog-image { width:33%; }
  .dialog-person .dialog-body { width:67%; }
  
  form label.inline { margin: 0 .5em 0 0; }
  form .inline { display: inline-block; }
  
  .long-title { font-size:1.75rem; }
  .section--offset-image .section-image { margin-right:0; }
  .section--offset-image .section-body { padding:1rem 1rem 2rem; }
}

/* 960px
----------------------------------------------------*/

@media only screen and (min-width:60em) {
  .page-image.full { max-height: 70vh; }
  .home-primary { background: #fff; margin: -9.5rem auto 0; padding: 3rem; }
  .section--offset-image .section-image { margin-bottom:-2rem; margin-top:-2rem; }
}

/* 1280px
----------------------------------------------------*/

@media only screen and (min-width:80em) {
  .long-title { font-size:2.125rem; }
}

/* 1600px
----------------------------------------------------*/

@media only screen and (min-width:100em) {
  .dialog-person {max-width:108rem; }
}

/* 1920px
----------------------------------------------------*/

/* Print
----------------------------------------------------*/