/* 
  These are style configurations for the homepage.
  Specifically, these configs deal with the appearance and behavior of the flipping cards in the
  "Why EDU?" Section.
*/

  /* This defines from which point the cards should be pulled from */
  .away {
    transform-origin: bottom left;
  }
  /* 
    This defines the section where the cards are stacked in. 
    When we call this in the HTML, we define where the stacked cards behavior should start 
  */
  .stack-viewport {
    /* Set to 300vh so that the cards have time to go away before the next section beings.*/
    height: 300vh;
    /* This justifies any content inside the cards to the center. */
    display: flex;
    justify-content: center;
  }   
  .stack-area {
    height: 100vh;
    width: 100vw;
    position: sticky;
    top: 0;
    gap: 1rem;   
  } 
  .sticky-section-header {
    /* This makes the "Why edu?" title stick even when you scroll */
    position: sticky;
    top: 5%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color:#fff;
  }

  .card {
    /* make the declared width/height include padding and border */
    box-sizing: border-box;
    /* Round the corners of the cards */
    border-radius: 12px;
    /* Make the card flipping a smooth transition */
    transition: 0.5s ease-in-out;
    /* 
      Stack cards on top of each other by making the position absolute. 
      This means the position of the cards is determined by the stack-area.
     */
    position: absolute;
    top: clamp(6rem, 10vh, 8rem);
    /* Add a soft shadow to each card */
    box-shadow: -10px 10px 0 #2b2b2b;
    /* Adds a margin around each content of the cards */
    padding: clamp(5%, 16%, 20%);
    /* padding: 35% 10%;  */
    /* Sets the width/height of the cards relative to .stack-area */
    left: 4%;
    width: 90%;  
    height: 75%; 
    min-height: 30%;  
    max-height: 75%;      
    /* 
      This configures the organization behavior of the items inside the cards.
      Flex allow us to be flexible in the way the images and text in the cards are organized.
      Flex-direction says that the text and items should be stacked on top of each other.
      Justify-content centers the content in the middle of the cards
     */   
    display: flex;
    flex-direction: column;        
    justify-content: center;
    align-items: center; 
    text-align: center;
    background: #fff;
    border: 1px solid #4d4d4f;
  }
 
  .card-content {
    box-sizing: border-box;
  }

  .card .sub {
    font-size: clamp(1rem, 1vw, 2rem);
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    color: #4d4d4f;
  }
  .content-bullets {
    font-size: clamp(0.5rem, 1vw, 1.5rem);
    padding-left: 1rem;     
    text-align: left; 
    line-height: 1.5;
    color: #4d4d4f;
  }    
  .card img {  
    display: block;
    /* Make the image responsive to card width */
    width: 100%;
    min-width: 120px;
    /* Prevent distortion */
    height: auto;
    align-self: center; /* centers image horizontally inside the card */
  }


  /* When viewport is too narrow, hide image */
  @media (max-width: 600px) {
    .card img {
      display: none;
    }
    .content-bullets {
      display: none !important;
    }
    /* Scale text down on small screens */
    .card .sub {
      font-size: clamp(0.9rem, 3vw, 1.1rem);
      text-align: center;
    }
    .card .description-small {
      font-size: clamp(0.75rem, 1vw, 0.9rem);
      text-align: center;
      line-height: 1.3;
    }
  }