/*----------------------------------------------------------------------------------------*
  TempikLabs CSS Stylesheet - Grid Styles
  Created by: Bobby H.
  Contact: admin@tempiklabs.com
  Created: 11/11/2025

  Description: Core CSS styles for TempikLabs Website defining grid layout containers and
                navigation styles.

  Change Log:
  Version 1.0.0 - 11/11/2025
                > Initial creation of stylesheet.
          1.0.1 - 11/15/2024
                > Added footer grid layout with three sections: navigation, legal, and credits.
                > Created grid layout for TempikLabs main page including logo, header, nav-bar, and main content.
                > Developed master grid layout for listing labs with header and body sections.
                > Designed individual grid layout for each lab on the main labs page with title, icon, description, link, and guides sections.
                > Minor styling adjustments for grid elements to enhance visual appeal and usability.
                > Renamed grid classes for clarity and consistency.
          1.0.2 - 11/23/2025
                > Added media grid layout for educational media projects with description, media iframe, resources, and credits sections.
                > Improved responsiveness of grid layouts for various screen sizes.
                > Enhanced accessibility features within grid layouts.
          1.0.3 - 11/26/2025
                > Created creator grid layout for listing creators with cards including avatar, name, handle, and bio.
*-----------------------------------------------------------------------------------------*/ 
/* Footer Grid*/
.footer-grid {
    display: grid;
    grid-template-areas: 
        'footer-grid-nav footer-grid-legal footer-grid-credit';
    grid-template-columns: 1fr 1fr 1fr; 
    background-color: var(--grid-color-bg);
    padding: 10px;
    width: 100%;
    max-width: 100%;
    column-gap: 0;
}

.footer-grid-nav {
    grid-area: footer-grid-nav;
    border-right: thick solid yellow;
    display: flex;
    justify-content: flex-start;
}

.footer-grid-legal {
    grid-area: footer-grid-legal;
    border-right: 4px solid yellow;
    display: flex;
    justify-content: center;
}

.footer-grid-credit {
    grid-area: footer-grid-credit;
    display: flex;
    justify-content: flex-end;
}




/*Master Grid Layout to list our labs */
.master-grid{
    display: grid;
    grid-template-areas:
        'master-header'
        'master-body';
    grid-template-columns: auto;
    background-color: var(--main-bg-color);
    border: 1px solid black;
    color: var(--main-txt-color);
    padding: 10px;}

.master-header{
    border-bottom: 4px solid black;
    text-align: center;
    color: var(--main-txt-color);
}
.master-body{
    padding: 10px;
    color: var(--main-txt-color);
    border: 1px solid black;
}   





/* Grid layout for each of the labs on the main labs page */
.grid-index{
    display: grid;
    grid-template-areas:
        'grid-index-title grid-index-title grid-index-title'
        'grid-index-icon grid-index-desc grid-index-link'
        'grid-index-guides grid-index-guides grid-index-guides';
    grid-template-columns: 200px 1fr 200px;
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    border: 1px solid black;
    padding: 10px;
}

.grid-index-icon{
    grid-area: grid-index-icon;
    max-height: 150px;
    max-width: auto;
    color: var(--main-txt-color);

}
.grid-index-img{
    max-height: 150px;
    max-width: auto;

}
.grid-index-title{
    grid-area: grid-index-title;
    border-bottom: 1px solid var(--main-bg-color);
    color: var(--main-txt-color);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px;
}
.grid-index-desc{
    grid-area: grid-index-desc;
    color: var(--main-txt-color);
    padding: 10px;
}
.grid-index-link{
    grid-area: grid-index-link;
    color: var(--main-txt-color);
    padding: 10px;
    text-align: center;
}
.grid-index-guides{
    grid-area: grid-index-guides;
    color: var(--main-txt-color);
    border-top: 1px solid var(--main-bg-color);
    padding: 10px;
    text-align: center;
}

/*  Media layout for CIS195.  Non-production grid.*/
.media-grid {
    display: grid;
    grid-template-areas:
        "media-grid-desc media-grid-desc"
        "media-grid-iframe media-grid-resources"
        "media-grid-credits media-grid-credits";
    grid-template-columns: 1fr 1fr;   /* two equal columns */
    grid-template-rows: auto 1fr auto; /* desc auto, middle fills, credits auto */
    background-color: var(--main-bg-color);
    width: 100%;
    height: 100%;          /* fill the parent container */
    flex: 1;               /* if parent is flex, this ensures it grows */
    box-sizing: border-box;
}

/* Description spans both columns */
.media-grid-desc {
    grid-area: media-grid-desc;
    padding: 10px;
    background: var(--desc-bg-color, #f9f9f9);
}

/* Media (video/audio) on the left */
.media-grid-iframe {
    grid-area: media-grid-iframe;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--media-bg-color, #fff);
}

/* Resources/content on the right */
.media-grid-resources {
    grid-area: media-grid-resources;
    padding: 10px;
    background: var(--resources-bg-color, #f0f0f0);
}

.media-grid-credits {
    grid-area: media-grid-credits;
    padding: 10px;
    background: var(--credits-bg-color, #e9e9e9);
    text-align: center;
}



/* Creator Grid Layout */
    .creator-grid {
      list-style: none;
      margin: 2rem;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1rem;
    }

    .creator-card {
      background: var(--card-bg-color);
      border: 1px solid var(--card-brd-color);
      border-radius: 0.75rem;
      overflow: hidden;
    }

    .creator-card__link {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 1rem;
      text-decoration: none;
      color: var(--card-txt-color);
      padding: 1rem;
    }

    .creator-card__avatar {
      width: 88px;
      height: 88px;
      border-radius: 0.5rem;
      object-fit: cover;
      border: 1px solid var(--card-brd-color);
    }

    .creator-card__body { display: grid; gap: 0.5rem; }

    .creator-card__header {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      justify-content: space-between;
    }

    .creator-card__name {
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .creator-card__handle {
      color: var(--links-color);
      font-size: 0.9rem;
    }

    .creator-card__bio {
      color: var(--oob-txt-color);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
/*-----------------------------------------------------------------------------------------*
  End of TempikLabs CSS Stylesheet - Grid Styles