/* --------------------------------------------------------------------
               	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;
  }

  p.cfp {font-size: 0.95em;}

  div.fixed {
    gap: 2em;
    margin: 10vw 5vw;
  }

  div.decor {
    background-color: rgb(255,255,255,0.05);
    padding: 2em;
    margin: 0;
  }

  div.decor p.illustration.secondary {
    display: none;
  }

  div.decor div.content {
    background-color: var(--body-bg-dark);
    text-align: left;
    padding: 5vw;
    margin: 0;
  }
 
  div.decor h2 strong {color: var(--hot-light);}

  div.venue {
    position: relative;

    & div.content {
      text-align: left;
      background-color: rgb(0, 70,91, 0.8);
      padding: 10vw 15vw 10vw 35vw;
      margin: 0 5vw;
    }

    & p.illustration img {
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.8);
    }

    & p.illustration:not(.secondary) {
      position: absolute;
      width: 20vw;
      top: calc(50% - 20vw);
      left: 5vw;
      transform: rotate(5deg);
      z-index: 2;
    }

    & p.illustration.secondary {
      display: block;
      position: absolute;
      width: 20vw;
      top: 50%;
      left: 6vw;
      z-index: 1;
      transform: rotate(-10deg);
    }
  }
  
  /* div.venue::before, div.venue::after {  
    display: block;
    position: absolute;
    content: "";
    background-color: rgb(255,255,255,0.1);
  }
  div.venue::before {
    width: 90vw;
    height: 80%;
    left: 5vw;
  }
  div.venue::after {
    width: 10vw;
    height: 10vw;
    top: 0;
    right: 16vw;
    transform: rotate(10deg);
    z-index: 2;
  } */
}


@media screen and (min-width: 800px) and (max-width: 1299px) {
  div.decor {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    gap: 0 5vw;
  }
}


@media screen and (min-width: 1000px) {
  header {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      justify-content: space-between;
      align-items: center;
      gap: 3rem;
  }
  header p {
    font-size: calc(1.5em + 1vw);
  }

  h1 {z-index: 1001;}

  nav {
  	position: static;
    justify-self: center;
    background-color: var(--body-bg);
    box-shadow: none;
  }

  nav svg {transform: scale(1.5);}

  nav ul {
    gap: 1rem;
  }
  nav li {
    font-size: 1.3em;
    text-align: right;
    padding: 0;
  }

  nav a[aria-current=page] {
    position: relative;
    background-color: var(--body-bg);
  }
  nav a[aria-current=page]::after {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--link-color);
  }

  p.register {
    position: static;
    animation: none;
  }

  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 {
      position: relative;
      left: 4rem;
      grid-column-start: 2;
      margin-top: 2rem;
      box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
    }
  
  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;
  }

  div.hero {
    background-image: url(../img/hero-bg.svg), url(../img/hero-bg2.svg), linear-gradient(var(--body-bg), rgba(0, 0, 0, 0.3) 30%, var(--body-bg));
    background-repeat: no-repeat;
    background-position-x: right 77vw, left 77vw, center;
  }

  .youtube-videos {padding-top: 0;}
}

@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) {
  main {
    background-image: url(../img/hero-bg2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    background-blend-mode: soft-light;
  }

  #home main {    
    background-position: bottom center;
  }

  .page-body {
    margin-right: auto;
    margin-left: auto;
    background-color: rgba(0, 0, 0, 0.23);
    backdrop-filter: blur(40px);
  }

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

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

  div.related {
    margin-top: 2rem;
    margin-left: 2.5rem;
  }
  .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;}

  div.fixed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3vw;
  }

  div.hero p:not(.where-n-when) {margin: 0;}
}

@media screen and (min-width: 1500px) {
  .page-body {
    margin-top: 5rem;
  }

  div.hero {
    display: flex;
    align-items: center;
    gap: 4vw;
    padding-left: 25%;

    & p.where-n-when {text-align: left;}
  }
}

@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%;}
}