/* 
  These are style configurations for the homepage.
  Specifically, these configs deal with the appearance and behavior of the interactive conveyor belt diagram in the
  "What is EDU?" Section.
*/

/* This configuration swaps what is shown as the diagram
    - If the screensize is more than 600px (usually phone screen size) then show the interactive conveyor belt diagram.
    - If the screensize is less than 600px, show a long version of the diagram that is static and mobile friendly.
*/
  @media (min-width: 600px) { 
    .panel .desktop-only { display: block; }
    .panel .mobile-only { display: none; }
  }
  @media (max-width: 600px) { 
    .md-typeset .panel .desktop-only { display: none; }
    .md-typeset .panel .mobile-only  { display: block; }
  }

  /* 
    These are additional configurations to ensure the diagram file is displaying correctly.
      - It scales up the image when hovering over certain sections.
      It ensures the text is the right color and nothing is awkwardly displayed.
  */
  /* Desktop: give the svg container more width and scale the svg responsively */
  @media (min-width: 600px) {
    #svg-container svg {
      width: 1000px;
      height: auto;
    }
    #svg-container png {
      display:block;
      max-width: 100%;
      height: auto;
    }
    #svg-container img {
      display:block;
      max-width: 100%;
      height: auto;
    }
  }
  
  /* generic rule for all hover-scale elements */
  #svg-container svg .hover-scale {
    transform-box: fill-box;      /* use the element's bbox */
    transform-origin: 50% 50%;    /* center */
    transition: transform 160ms ease-out, opacity 160ms ease-out;
  }
  
  #svg-container text,
  #svg-container tspan { fill: #2b2b2b !important; mix-blend-mode: normal !important; }


  /* Explainer card above the diagram that introduces "What is EDU?" */
  .diagram-explainer {
    margin: 0 auto 1rem auto;
    max-width: 900px;
    max-height: auto;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 2px solid #2b2b2b;
    border-radius: 8px;
    box-shadow: -10px 10px 0 #2b2b2b;
    align-content: center;
  }

  /* Mobile Version Configurations: images with interleaved explainer cards */
  /* This configuration ensures there is no margin between the card and the image */
  .mobile-edu-steps .mobile-step > img { display: block; margin: 0 auto; }
  .mobile-edu-steps .mobile-step-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 0.5px solid #2b2b2b;
    border-radius: 8px;
    max-width: 90%;
    max-height: auto;
  }
  .mobile-edu-steps .mobile-step-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: #4d4d4f;
  }