/* --------------------------------------------------------------------
               	DEVLILLE 2022
               		Media Queries
          				Ge Ricci, 2022
-------------------------------------------------------------------- */

@media (prefers-reduced-motion) {
  * {
    animation-name: none;
    animation-duration: unset;
    transition: unset;
  }
}

@media screen and (min-width: 300px) {
  section.member div.hgroup {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  section.member p.illustration {
    background-size: contain;
  }

  blockquote {
    position: relative;
    padding-top: 2rem;
    padding-left: 4rem;
  }
  
  blockquote::before {
    position: absolute;
    width: 1em;
    top: -1rem;
    left: 0;
    font-size: 7em;
  }
}

@media screen and (min-width: 600px) {
  div.stats ul {
    display: flex;
    justify-content: space-around;
    gap: 5%;
  }

  h1 > span {font-size: 1.5rem; margin-left: 133px;}
  .main-nav li:last-child {
    display: block;
  }
  
  div.footer-links {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 2rem;
    align-items: baseline;
  }
  footer ul.editions {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
  }

  footer ul.links-list:not(.editions) {
    padding-top: 1.5rem;
    padding-right: 2rem;
    border-right: 1px solid var(--footer-border);
  }

  div.footer-links {margin-top: 0;}

  div.related {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }

  ul.thumbs {flex-flow: row wrap;}
  ul.thumbs li {
    display: flex;
    justify-content: center;
    flex: 0 0 42%;
  }
  ul.thumbs figure {display: flex; flex-direction: column;}
  ul.thumbs figcaption {display: block; margin-top: auto; }

  div.team {flex-direction: row; flex-wrap: wrap;}
  section.member {flex: 1 1 35%; max-width: 400px;}

  div.highlight {
    display: flex;
    gap: 2rem;
  }

  div.cfp a {margin-bottom: 0.5rem;}
  
  #mc_embed_signup_scroll h2 {
    margin-bottom: 0 !important;
  }
}


@media screen and (min-width: 600px) and (max-width: 1000px) {
  div.speaker-data-block {
    display: flex;
    justify-content: space-between;
  }
  div.speaker-data {
    flex: 1 1 45%;
  }
}


@media screen and (min-width: 800px) {  
  div.talk-links h4 {font-size: 1.4em;}

  footer .p-name::before {top: 2.35rem;}

  section.news {margin-bottom: 4rem;}

  footer .p-name {font-size: 2em;}

  dl.h-event {
    margin-bottom: 2rem;
  }

  div.decor {position: relative;}
  div.decor .content {
    position: static;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr 1fr;
  }

  div.decor p.illustration {
    margin-bottom: 0;
  }

  div.decor h2 strong {color: var(--hot-light);}

  div.decor::after {
    bottom: auto;
    top: 0;
  }

  p.cfp {font-size: 0.95em;}
  div.stats {margin-bottom: 8rem;}
}


@media screen and (min-width: 1000px) {
  header {gap: calc(7rem + 1vw);}
  header p {
    font-size: calc(1.5em + 1vw);
  }

  aside div.be-partner {
    display: grid;
  	grid-template-columns: 1.5fr 2fr;
  	grid-template-rows: auto auto;
  	gap: 2rem;
  }
    aside div.be-partner p.read-more {
      grid-column-start: 2;
      margin-top: 2rem;
    }
  
  div.speaker-sheet .h-group {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: auto auto;
    gap: 0 3rem;

    & h2 {align-self: center;}

    & p.s-photo {
      grid-row: 1/-1;
      margin-bottom: 0;
    }
    & p:not(.s-photo) {
      grid-column: 2/-1;
    }
  }

  div.speaker {order: 1;}
  div.speaker-data-block {
    order: 2;
    grid-column-start: 2;
    grid-column-end: -1;
    grid-row-start: 1;
    grid-row-end: -1;
  }
  div.talk {order: 3;}
  
  div.optionalParent {
    position: absolute;
    right: 0;
    bottom: 1rem;
  }
}

@media screen and (min-width: 1200px) {
  div.group:has(div.cfp) {
    position: relative;
  }
  div.cfp {
    position: absolute;
    width: 14em;
    top: 1rem;
    right: 101px;
    transform: rotate(5deg);
  }
  div.presentation {max-width: 100%;}
  div.presentation p {
    max-width: 50rem;
  }
}

@media screen and (min-width: 1300px) {
  body {background-size: cover;}
  #wrapper {width: 85%;}

  header .register {
    display: block;
  }

  .presentation .register {
    display: none;
  }

  header.active div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  nav {
  	position: fixed;
  	width: 7em;
  	bottom: auto;
  	left: auto;
    top: 10vw;
    right: 0;
    background-color: rgba(0,0,0,0);
    box-shadow: none;
  }

  nav svg {transform: scale(1.5);}

  nav ul {
    display: flex;
    flex-direction: column;
  }
  nav li {
    font-size: 1.2em;
    text-align: right;
    padding: 0;
  }

  nav a, nav a:visited {
    width: 100%;
    padding: 1.2rem 0;
    transition: all 0.5s;
  }
  nav a:hover {
    transform: translateX(-100px);
    padding-right: 100px;
  }
  nav a[aria-current=page] {
    position: relative;
  }
  nav a[aria-current=page]::after {
    display: block;
    position: absolute;
    content: "";
    width: 4px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--link-color);
  }

  footer {
    padding: 2rem 10% 0 5%;
    margin-right: 211px;
  }
  footer div.content {margin-left: 2.5rem;}

  div.related {
    margin-top: 2rem;
    margin-left: 2.5rem;
  }

  div.decor {
    margin: 0 0 7rem;
    border: none;
  }
  .page-body {margin-bottom: 6rem;}
    .page-body h2 {font-size: 3em; margin-bottom: 4rem;}

  div.stats li {
    font-size: calc(1.2em + 0.5vw);
  }

  ul.social {
    margin-top: auto;
  }
  ul.social li {
    font-size: 0.95em;
  }

  section.hour {
    display: flex;
    margin-top: 4rem;
  }
    section.hour h3 {
      flex: 0 0 4.5em;
      white-space: nowrap;
      text-align: right;
      margin: 1rem 0;
    }

  section.hour dd {
    margin-left: 2.5rem;
  }
  section.hour div.content {
    flex: 1;
  }
  
  section.hour dd.talk-session {
    box-sizing: border-box;
    padding-right: 65px;
  }

  section.hour div.content a:hover:after {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 45px 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z' fill='%23EF7918' /%3E%3C/svg%3E");
  }

  div.modal div.content {height: 50vh;}
  div.modal h4 {
    font-size: 1.4em;
    margin-right: 4.5rem;
  }
  section.hour dt::before {content: none;}

}

@media screen and (min-width: 1500px) {
  .page-body {
    margin-left: calc(265px + 7rem + 1vw);
    margin-top: 5rem;
  }
}

@media screen and (min-width: 1600px) {
  div.cfp {
    height: 22em;
    right: 50px;
    transform: rotate(0);
  }
}

@media screen and (min-width: 1700px) {
  div.all-speakers ul {flex-flow: row wrap;}  
  div.all-speakers li {flex: 1 1 45%;}
}