/* ==========================================================================
   Page Styles — Projects & Project Details (projects.html + /<slug>.html)
   Mobile-first | CSS Variables | BEM Naming | Zero inline styles | No important overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Project Poster Grid (.project-posters / live .certificates-section)
   -------------------------------------------------------------------------- */

.project-posters {
  position: relative;
  padding: var(--section-pad-sm) 0;
  background-color: var(--color-white);
}

.project-posters__header {
  margin-bottom: 20px;
  text-align: center;
}

.project-posters__list {
  display: inline-block;
  width: 100%;
}

.project-posters__grid {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter-inline) * -1);
}

.project-posters__col {
  width: 100%;
  padding-inline: var(--gutter-inline);
}

@media (min-width: 768px) {
  .project-posters__col {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .project-posters__header {
    margin-bottom: 50px;
  }
}

@media (min-width: 1200px) {
  .project-posters {
    padding: var(--section-pad-md);
  }

  .project-posters__col {
    width: 25%;
  }
}

/* --------------------------------------------------------------------------
   2. Project Detail Photo Gallery (.project-gallery / live .photo-gallery-section)
   -------------------------------------------------------------------------- */

.project-gallery {
  position: relative;
  padding: var(--section-pad-sm) 0;
  background-color: var(--color-white);
}

.project-gallery__header {
  margin-bottom: 20px;
  text-align: center;
}

.project-gallery__list {
  display: inline-block;
  width: 100%;
}

.project-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter-inline) * -1);
}

.project-gallery__col {
  width: 100%;
  padding-inline: var(--gutter-inline);
}

.project-gallery .media-card--gallery {
  box-shadow: var(--shadow-project-gallery);
}

@media (min-width: 768px) {
  .project-gallery__col {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .project-gallery__header {
    margin-bottom: 50px;
  }

  .project-gallery__col {
    width: 33.333333%;
  }
}

@media (min-width: 1200px) {
  .project-gallery {
    padding: var(--section-pad-md) 0;
  }

  .project-gallery__col {
    width: 25%;
  }
}

/* --------------------------------------------------------------------------
   3. Project Detail Video Grid (.project-videos / live .video-section)
   -------------------------------------------------------------------------- */

.project-videos {
  position: relative;
  padding: var(--section-pad-sm) 0;
  background-color: var(--color-white);
}

.project-videos__header {
  margin-bottom: 20px;
  text-align: center;
}

.project-videos__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-black);
}

.project-videos__list {
  display: inline-block;
  width: 100%;
}

.project-videos__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: calc(var(--gutter-inline) * -1);
}

.project-videos__col {
  width: 100%;
  padding-inline: var(--gutter-inline);
}

@media (min-width: 768px) {
  .project-videos__title {
    font-size: var(--fs-section-md);
  }

  .project-videos__col {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .project-videos__header {
    margin-bottom: 30px;
  }

  .project-videos__title {
    font-size: var(--fs-video);
  }
}

@media (min-width: 1200px) {
  .project-videos {
    padding: 49px 0;
  }

  .project-videos__col {
    width: 33.333333%;
  }
}