@import url('https://fonts.googleapis.com/css2?family=Coustard:wght@400;900&family=Lilita+One&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* GLOBAL STYLES */
body {
    font-family: "SN Pro", sans-serif;
    line-height: 1.6;
    background-color: #f0f2f5;
    color: #021a3d;
    margin: 0; /* Removes default browser margin */
    padding: 20px; /* Adds a little breathing room around the whole page */
}

/* H1 TITLE STYLING */
.page-title {
    font-family: "Lilita One", sans-serif;
    text-align: center;
    color: #152847;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

/* STORYBOARD CONTAINER - VERTICAL STACK */
.storyboard-container {
    display: flex;
    flex-direction: column; /* Forces elements to stack vertically */
    gap: 30px; /* Space between the stacked panels */
    max-width: 800px; /* Narrower width for better reading in a single column */
    margin: 0 auto; /* Centers the whole container on the page */
}

/* SHARED PANEL CLASS (CSS BOX MODEL IMPLEMENTATION) */
.panel {
    /* Background and typography */
    background-color: #f2f6fc;
    border-radius: 15px;
    
    /* Box Model: Internal Space */
    padding: 25px;
    
    /* Box Model: External Space */
    margin: 10px;
    
    /* Box Model: Visible Borders */
    border: 3px solid #d1d6de;
    
    /* Box shadow for a polished "card" look */
    box-shadow: 0 4px 6px #cedaeb;
}

/* IMAGE STYLING WITHIN PANELS */
.panel img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* INDIVIDUAL ID OVERRIDES (Optional: Used for distinct colors) */
#values {
    border-top: 5px solid #8aa8d4;
}

#assets {
    border-top: 5px solid #678bbf;
}

#barriers {
    border-top: 5px solid #436dab;
}

#mindsets {
    border-top: 5px solid #245191;
}

#mood {
    border-top: 5px solid #103b78;
}

/* TYPOGRAPHY STYLING */
h2 {
    font-family: "Coustard", serif;
    font-weight: 400;
    margin-top: 0;
    color: #111827;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

/* Flexbox parent container */
  .gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw; 
    padding: 2vw;
  }

  /* Semantic child items using percentage widths */
  .gallery-item {
    width: 30%; 
    border-radius: 1vw; 
    overflow: hidden;
    background-color: #f3f4f6; 
    margin: 0; /* Reset default figure margins */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Ensure images fill their responsive containers naturally */
  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Style for the caption */
  .gallery-item figcaption {
    padding: 1vw;
    text-align: center;
    font-family: sans-serif;
    color: #333;
  }

  /* Mobile-responsive media queries adapting the percentages */
  @media (max-width: 768px) {
    .gallery-item {
      width: 45%; 
    }
  }

  @media (max-width: 480px) {
    .gallery-item {
      width: 90%; 
    }
  }