* {
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
}

body, p, li {
  font-family: 'Lato', sans-serif;
}

code, pre {
  font-family: 'Fira Code', monospace;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    background: linear-gradient(135deg, #ffffff, #c3c3f3, #0046f6);
    background-size: 400% 400%;
}

header {
    top: 20px;
    background-color: #15256d;
    display: flex;
    justify-content: center;
    border-bottom: silver 5px solid;
}

.nav-bar {
    height: 3rem;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 1rem;
}

.nav-bar ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-bar li {
    display: inline-flex;
    flex-direction: column;
    padding: 0rem 1rem;
    color: white;
}

.nav-bar a {
    color: white;
    text-decoration: none;
}

.page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}
 
.page-header h1, .page-header h2, .page-header h3 {
    padding-bottom: 1rem;
}

/* --- Video Container --- */

.video-container {
  display: grid;
  /* Automatically columns up to 3 across, scaling down gracefully */
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem;
  padding: 0 2rem 2rem 2rem;
  margin-bottom: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.video-item-master {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.video-item-master h4 {
  padding: 1rem;
}

/* --- Responsive Video Item Card --- */
.video-item {
  width: 100%;
  text-align: center;
  border: slateblue 5px solid;
  padding: 1rem; /* Reduced padding slightly to give the video more room */
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  box-sizing: border-box;
}

/* 16:9 Aspect Ratio Wrapper for the Iframe */
.video-item video {
  width: 100%;
  aspect-ratio: 16 / 9; /* Maintains a clean 16:9 widescreen layout */
  height: auto;
  border: 0;
  border-radius: 0.25rem;
  background: #000;     /* Shows black background before poster/video loads */
}

.project-statistics-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 0 2rem 2rem 2rem;
    margin-bottom: 2rem;
}

.project-statistics-item {
    text-align: center;
}

.project-info-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 0 2rem 2rem 2rem;
    margin-bottom: 2rem;
}

.project-info-item {
    text-align: center;
    margin: 0 2rem;
}

.project-info-item h2 {
    padding-bottom: 1rem;
}

.project-info-item p {
    padding-bottom: 1rem;
}

.section-item-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
    padding: 0 2rem 2rem 2rem;
    margin-bottom: 2rem;
}

.section-item-master {
    display: flex;
    justify-content: space-evenly;
}

.section-link-wrapper {
    display: flex;
    max-width: 20rem;
    height: auto;
    width: 100%
}

.section-item {
    width: 100%;
    text-align: center;
    border: slateblue 5px solid;
    padding: 3rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
}

.prd-embed-container, .user-journey-embed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem;
    padding: 2rem;
    background-color: white; /* Solid white background for document readability against the page gradient */
    border: #0046f6 5px solid;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.prd-embed-container h3, .user-journey-embed-container h3 {
    margin-bottom: 1.5rem;
    color: #15256d; /* Matches your header nav color */
    text-align: center;
}

.iframe-wrapper {
    width: 100%;
    max-width: 900px; /* Constrains the width so it doesn't stretch awkwardly on ultra-wide monitors */
    height: 65vh; /* Responsive height based on viewport */
    min-height: 500px; /* Fallback for smaller screens */
    border: 2px solid silver;
    border-radius: 0.25rem;
    overflow: hidden; /* Ensures the iframe respects the border radius */
}

.iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none; /* Removes default browser iframe borders */
}

.footer {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 4em;
    background-color: #15256d;
    position: relative;
    border-top: silver 5px solid;
}

.copyright {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.copyright p {
    color: silver;
    font-size: 1.25rem;
}

/* --- Responsive Breakpoints for Re-gridding --- */
@media (max-width: 1024px) {
  .video-container {
    grid-template-columns: repeat(2, 1fr); /* Switches to 2 columns on tablets */
  }
}

@media (max-width: 600px) {
  .video-container {
    grid-template-columns: 1fr; /* Stacks into a single column on mobile */
  }
}

/* Footer at the bottom: on a short page it sits at the foot of the window, on a long page after the content */
body {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: calc(4em + 5px); /* room for the footer, which is 4em tall plus its 5px border */
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ---- atomix-changelog-styles (moved from inline <style>) ---- */
.cl-section { margin: 0 2rem 2rem; padding: 2rem; background: #ffffff; border: #0046f6 5px solid; border-radius: 0.5rem; box-sizing: border-box; color: #1b2a5a; }
.cl-section > h2 { text-align: center; color: #15256d; margin-bottom: 0.5rem; font-family: 'Poppins', sans-serif; }
.cl-sub { text-align: center; color: #2645c5; margin-bottom: 1.5rem; }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.cl-stat { text-align: center; padding: 1rem; background: #eef2ff; border-radius: 0.5rem; border-top: 4px solid #0046f6; }
.cl-stat span { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.25rem; }
.cl-stat strong { font-size: 1.8rem; color: #15256d; font-family: 'Poppins', sans-serif; }
.cl-stat.cl-green span { color: #1a7f37; } .cl-stat.cl-blue span { color: #0046f6; } .cl-stat.cl-red span { color: #c62828; }
.cl-blurb { max-width: 900px; margin: 0 auto 1.5rem; }
.cl-blurb h3 { text-align: center; color: #15256d; margin-bottom: 0.75rem; font-family: 'Poppins', sans-serif; }
.cl-blurb ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cl-blurb li { line-height: 1.55; }
.cl-team { text-align: center; margin-top: 1rem; font-weight: 700; color: #15256d; line-height: 1.6; }
.cl-log-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 0.75rem; }
.cl-log-head h3 { color: #15256d; font-family: 'Poppins', sans-serif; }
.cl-log-head a { color: #0056b3; font-weight: 700; }
.cl-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 34rem; overflow-y: auto; padding-right: 0.25rem; }
.cl-entry { border: 2px solid slateblue; border-radius: 0.4rem; background: #ffffff; }
.cl-entry summary { cursor: pointer; padding: 0.7rem 1rem; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; background: #eef2ff; border-radius: 0.35rem; font-family: 'Lato', sans-serif; }
.cl-entry[open] summary { border-bottom: 2px solid slateblue; border-radius: 0.35rem 0.35rem 0 0; }
.cl-range { font-weight: 700; color: #15256d; white-space: nowrap; }
.cl-title { color: #2645c5; font-size: 0.92rem; }
.cl-text { margin: 0; padding: 1rem; max-height: 24rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; line-height: 1.55; color: #1b2a5a; background: #f9faff; border-radius: 0 0 0.35rem 0.35rem; }
@media (max-width: 768px) { .cl-section { margin: 1rem 0.5rem; padding: 1rem 0.75rem; border-width: 3px; } .cl-list { max-height: 30rem; } .cl-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .cl-stat { padding: 0.75rem 0.25rem; } .cl-stat span { font-size: 0.72rem; } .cl-stat strong { font-size: 1.15rem; } }

/* ---- item-tag-styles (moved from inline <style>) ---- */
.item-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0.75rem 0; }
.item-tags span { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; font-family: 'Lato', sans-serif; line-height: 1.3; }
.item-tags span:nth-child(1) { background: #ede9fe; color: #5b21b6; }
.item-tags span:nth-child(2) { background: #dbeafe; color: #1e40af; }

/* Uniform card layout: same height, title slot, label slots, and Click to View position */
.section-item, .page-item { box-sizing: border-box; justify-content: flex-start !important; padding: 2rem 1.25rem !important; min-height: 15rem; font-size: 1rem; }
.section-item > :is(h2,h3,h4), .page-item > :is(h2,h3,h4) { display: flex; align-items: center; justify-content: center; min-height: 3.2rem; margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.35; }
.item-tags { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch; width: 100%; max-width: 12rem; gap: 0.5rem !important; margin: 0 0 1.25rem !important; }
.item-tags span { display: block; box-sizing: border-box; height: 1.9rem; line-height: 1.9rem !important; padding: 0 0.5rem !important; text-align: center; white-space: nowrap; }
.section-item > p, .page-item > p { margin: auto 0 0 !important; padding: 0 !important; font-size: 1rem !important; line-height: 1.4; }
.section-item > p::after, .page-item > p::after { content: ""; }
  .section-item { height: 15.75rem; min-height: 0; }
  /* Order: title, Click to View, labels */
.section-item > p, .page-item > p { order: 2; margin: 0 0 1rem !important; }
.item-tags { order: 3; margin: 0 !important; }

@media (max-width: 768px) {
  .section-item-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; padding: 0 0.75rem 1rem !important; margin-bottom: 1rem !important; }
  .section-item-master { min-width: 0; }
  .section-link-wrapper { max-width: none; }
  .section-item { height: 14rem !important; padding: 1rem 0.5rem !important; border-width: 3px !important; }
  .section-item > h4 { min-height: 4.1rem; font-size: 1rem !important; margin: 0 0 0.5rem !important; line-height: 1.25 !important; }
  .section-item > p { margin: 0 0 0.6rem !important; font-size: 0.9rem !important; }
  .item-tags { max-width: 100% !important; gap: 0.35rem !important; }
  .item-tags span { height: 1.65rem; line-height: 1.65rem !important; font-size: 0.7rem !important; padding: 0 0.3rem !important; overflow: hidden; text-overflow: ellipsis; }
}
.project-statistics-title { text-align: center; font-family: 'Poppins', sans-serif; color: #15256d; margin: 0 1rem 2.5rem; }