/* Mathematica page styles for version 15

   @file        homepage.css
   @author      estevaot
   ========================================================================== */

/* ==========================================================================
   set variables
   ========================================================================== */
:root {
   --black: #000;
   --darkGray: #3d3d3d;
   --lightGray: #f2f2f2;
   --orange: #e9671e;
   --orange-secondary: #F77700;
   --red: #dd1100;
}

/* overriding */
#_product-header { background-color:#ba1c12eb }

/* ==========================================================================
   page styles
   ========================================================================== */
body { background: linear-gradient(#000 0, #fff 300px); }
main {
   color: #404040;
   font-family: 'Source Sans Pro', Arial, sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.25;
   line-height: 1.4;
   & a { color: var(--red); }
   & a:hover { color: var(--orange-secondary); }
   & h1 {
      font-size: clamp(20px, 8vh ,4rem);
      color: #fff;
      max-width: 830px;
      line-height: 1.1;
      font-weight: 600;
      margin-top: 1rem;
      margin-bottom: 2rem;
      margin-inline: auto;
   }
   & :is(h2,h3,h4) { 
      color: #404040;  
      margin-inline: auto;
      font-weight: 600;
   }
   & h2 { 
      font-size: 2.25rem; 
      margin-bottom: 2.5rem;
      text-align: center;
   }
   & h3 { font-size: 1.625rem; }
   & h3.highlight {
      font-size: 1.5rem;
      color: var(--orange);
   }
   & h4 { 
      font-size: 1.25rem; 
      font-weight: 600;
   }
   & hr {
      background: #eaeaea;
      border: none;
      height: 1px;
      margin: 3rem 0;
   }
   & .page-width {
      max-width: min(100vw,1200px);
      margin-inline: auto;
      margin-block: 3.125rem;
      padding-inline: 2rem;
   }
   & img { max-width:100%; }
}

/* ==========================================================================
   Misc
   ========================================================================== */

/* Colors */
.color-primary { color: var(--red); }
.color-secondary { color: var(--orange); }

/* Backgrounds */
.bg-primary { background: var(--red); }
.bg-secondary { background: var(--orange); }

/* Lists */
.links-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: .5rem;
   margin-bottom: 2rem;
   & li::after, & li::before {
      color: #979797;
      content: '\25AA';
      padding-inline: 0.375rem 0.5rem;
   }
   & li::before, & li:last-of-type::after { display:none; }
   & a { 
      font-size:1.24rem; 
      font-weight: 600;
      color: #404040;
      line-height: 2rem;
   }
   @media (max-width: 900px) {
      & li::after { display:none; } 
      & li::before { 
         display: inline; 
         padding-inline: 0 .5rem;
      }
   }
   @media (max-width: 600px) {
      & li::before, & li:last-of-type::after { display:none; } 
      & li::after { 
         display: inline; 
         padding-inline: 0.375rem 0.5rem;
      }
   }
}

/* Grids */
.default-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   text-align: left;
   align-items: flex-start;
   & > :is(a, div), & > :is(a, div) > div { 
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
   }
   & :is(h3,h4) { margin-inline:0; }
   & img { width:100%; }
   & .icon {
      grid-template-columns: auto 1fr;
      align-items: center;
      justify-items: flex-start;
   }
}

/* Buttons */
.btn {
   font-size: 1.125rem;
   padding: 0.5rem 1.2rem;
   text-align: center;
   border-radius: 6px;
}

.btn-primary,
.btn-primary-outline:hover {
   border: 2px solid var(--red);
   background: var(--red);
   color: #fff;
}

.btn-primary:hover,
.btn-primary-outline {
   border-radius: 6px;
   border: 2px solid var(--red);
   color: var(--red);
}

/* ==========================================================================
   Intro
   ========================================================================== */
main #intro {
   background: var(--black);
   padding-inline:2rem;
   display: grid;
   justify-content: center;
   grid-template-columns: 1fr;
   & .spikey {
      width: 100%;
      height: min(40vw,40vh);
      background: bottom center url(../../images/new-in-15/M15-spikey.png) no-repeat;
      background-size: min(80vw,700px);
      margin-bottom: 1.5rem;
   }
   & .info {
      text-align: center;
      color: #ccc;
      & p {
         max-width: 1100px;
         font-size: clamp(1rem, 4vh ,1.4rem);
         line-height: 1.5;
      }
   }
   & .pin {
      display: grid;
      height: 100vh;
      grid-template-columns: 1fr;
      grid-template-rows: min(300px,40vh) 1fr;
   }
   & .product-logo {
      display: flex;
      justify-content: center;
      font-size: 2.55rem;
      font-weight: 400;
      letter-spacing: 1px;
      line-height: 1.1;
      text-transform: uppercase;
      color: var(--lightGray);
      & span {
         color: var(--red); 
      }
   }
   & .page-width { margin-block:0; }
}

/*============================
* Notebook Animation
============================*/
main .pin-spacer:has(#nb) { z-index: 2; }
main #nb {
   position:relative;
   z-index: 2;
   max-width: 100vw;
   overflow: hidden;
   margin-top: 2rem;
   & .items-container {
      display: grid;
      align-content: flex-start;
      z-index: 2;
      position: relative;
      overflow: hidden;
   }
   & .items-container .items {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      height: 100%;
      gap: 3rem;
      align-items: flex-start;
      @media (width < 600px) { 
         align-items: center;
      }
      @media (height < 700px) {
         padding-top: 1rem;
      }
      & > div:not(:first-of-type) {
         opacity:0.2;
      }
   }
   & .items-container .items > div {
      transform-origin: center top 0px;
      & > video, & > img { 
         max-width: min(600px,80vw); 
         max-height: calc(90vh - (1rem + 382px));
         min-height: 80px;
         height:auto;
      }
   }
   & .items-container .items > div:last-of-type {
      display: grid; 
      grid-template-columns: 1fr;
      & > img {
         grid-column: 1;
         grid-row: 1;
         &:nth-child(2) {
           opacity: 0;
           position: absolute;
         }
      }
   }
}

/*============================
* Topics
============================*/
main #topics .text-columns {
   & div, & p { break-inside:avoid-column; }
   & div :is(h4,img) { 
      margin-top:1.75rem; 
      margin-bottom: .5rem;
   }
} 

/*============================
* WhatsNew
============================*/
main #whatsNew {
   & .default-grid > div { gap:0 }
   & h2 { font-size: 3rem; }
   & h3 { 
      font-size: 1.25rem; 
      margin-bottom: .5rem;
      margin-top: 1rem;
   }
   & a:hover > h3 { color: #ff7700; }
   & .links-list { grid-column: 1 / -1 }
}

/*============================
* Categories
============================*/
main #categories {
   & h3 { font-size:1.5rem }
   & .icon img { width:42px; }
   & .default-grid a:hover h4 { color: var(--orange-secondary);  }
}

/*============================
* Core
============================*/
main #core {
   & h3 { font-size:1.5rem }
   & .icon img { 
      width:50px; 
      border-radius: 6px;
   }
   & .default-grid a {
      font-size: 1.25rem; 
      font-weight: 600;
      color: #404040;
      &:hover { color: var(--orange-secondary);  }
   }
}

/*============================
* Trajectory
============================*/
main #trajectory {
   text-align: center;
   & .default-grid > div { gap:0 }
   & h2 + p {
      font-size: 1.625rem;
      line-height: 1.5;
      margin-bottom: 2.5rem;
      text-align: center;
   }
   & h3 { 
      font-size: 1.25rem; 
      margin-bottom: .5rem;
   }
   & img { 
      margin-inline:auto;
      max-width: min(700px,100%);
   }
}


/*============================
* Media Queries | Width
============================*/
@media (min-width: 1201px) {
   @media (max-height: 1200px) {
      main h1 { font-size: 3.25rem }
   }
   @media (max-height: 900px) {
      main h1 { font-size: 2.5rem }
   }
   @media (max-height: 600px) {
      main p { font-size: 1.25rem }
   }
}

/* 1200px (small pc) */
@media (max-width: 1200px) {
   /* 900px and height */
   @media (min-height: 901px) {
      main h1 { font-size: 3.25rem }
   }
   @media (max-height: 900px) {
      main {
         & h1 { font-size: 2.5rem }
         & p { font-size:1.25rem }
      }
   }
   @media (max-height: 600px) {
      main h1 { font-size: 2rem }
   }
}
/* 900px (tablet) */
@media (max-width: 900px) {

   main {
      & h1 { font-size: 2.75rem }
      & h2 { font-size: 2rem }
      & h3 { font-size: 1.5rem; }
   }

   /* images */
   main :is(#topics,#whatsNew) img { max-width:80%; }
   main #whatsNew .default-grid {
      & > div > a { display:grid; }
      & img { margin-inline: auto; }
   }
   main #topics div:has( > img) { text-align:center; }

   /* Misc */
   .links-list a { font-size:1.2rem }

   /* Intro */
   main #intro .product-logo { font-size: 2.25rem; }
   main #intro .info p { font-size:1.25rem }

   /* whats New */
   #whatsNew .default-grid .links-list { 
      grid-column: 2; 
      justify-content: flex-start;
      align-content: flex-start;
      margin-block: 0;
      & h2 { font-size:2.5rem; }
      & li { flex-basis: 100%; }
   }

   /* core 900px */
   main :is(#categories, #core) .default-grid :is(a,h4) { font-size: 1.125rem; }

   /* misc 900px */
   .default-grid { grid-template-columns: 1fr 1fr; }

   /* 900px and height */
   @media (max-height: 900px) {
      /*main h1 { font-size: 2.5rem }*/
   }
   @media (max-height: 600px) {
      /*main h1 { font-size: 2rem }*/
   }

}
/* 600px (mobile) */
@media (max-width: 600px) {

   main {
      & h1 { font-size: 2.5rem }
      & h2 { font-size: 1.313rem }
      & h3, 
      & :is(#trajectory) h3 { 
         font-size: 1.125rem; 
         margin-bottom: .25rem;
      }
      & h4 { 
         font-size: 1.125rem;
         margin-bottom: .25rem;
      }
      & p { font-size: 1.25rem; }
      & :is(#categories, #core) .default-grid :is(a, h4) { font-size: 1rem }
   }

   /* misc 600px */
   .links-list a { font-size: 1rem; }

   /* Intro 600px */
   main #intro {
      & .product-logo { font-size: 2rem; }
      & .info p { font-size:1.2rem }
   }

   /* Whats New */
   main #whatsNew {
      & h2 { font-size:2rem; }
      & h3 { font-size:1.125rem; }
      & .default-grid .links-list { 
         grid-column: 1; 
         justify-content: center;
         & li { flex-basis:unset }
      }
   }

   /* Topics */
   main #topics .text-columns div :is(h4,img) {
      margin-top: 1.25rem;
      margin-bottom: .25rem;
   }

   /* Categories 600px */
   main :is(#categories,#core) h3 {
      font-size: 1.5rem; 
      margin-bottom: .25rem;
   }

   /* core 600px  */
   main #core .icon img { width:40px }

   /* trajectory */
   main #trajectory {
      & h2 { font-size: 1.375rem; }
      & h2 + p { font-size: 1.125rem; }
   }

   /* misc 600px */
   .default-grid { 
      grid-template-columns: 1fr; 
      gap: 1.25rem;
   }
   .margin-b-1-1-2__600 { margin-bottom: 1.5rem !important}

   /* 600px and height */
   @media (max-height: 900px) {
      main {
         & #intro .page-width { padding-inline:0 }
      }
   }
   @media (max-height: 600px) {
      main {
         & h1 { font-size: 2rem }
         & #intro .info p { font-size:1rem }
      }
   }

}

/*============================
* Media Queries | Height
============================*/
@media (max-height: 1200px) {
   main #intro .pin { grid-template-rows: 320px 1fr; }
}
@media (max-height: 900px) {
   main #intro .pin { grid-template-rows: 280px 1fr; }
}
@media (max-height: 600px) {
   main #intro .pin { grid-template-rows: 250px 1fr; }
}
@media (max-height: 500px) {
   main #intro .pin { grid-template-rows: 180px 1fr; }
}
@media (max-height: 450px) {
   main #intro .pin { grid-template-rows: 150px 1fr; }
}