/* ========================
   Example Project Section
   Project showcase with left text and right gallery
   ======================== */

.example-project-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-22);
}

.project-details-card {
  display: flex;
  background-color: var(--bs-primary-25);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  align-items: center;
}

.project-details-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  flex: 1;
  padding: var(--space-23);
}

.delivered-for {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  margin-top: var(--space-3);
}

.client-name {
  font-size: var(--font-size-16);
  font-family: var(--font-family-mono);
  text-transform: uppercase;
  color: var(--neutral-700);
}
.client-logo {
  width: 80%;
  max-width: 22.5rem;
}
.client-logo img {
  max-width: 100%;
  height: auto;
  max-height: 3.125rem;
}

.project-details-card-image {
  max-width: 100%;
  display: flex;
  width: 100%;
  height: 12.5rem;
}

.project-details-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

/* Video Container - Maintains aspect ratio and cover sizing */
.project-details-video-container {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-details-video-container .video-wrapper {
  width: 100%;
  height: 100%;
  transform: scale(1.5);
}

.project-details-video-container .video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--bs-black);
  transform: scale(1.5);
}

.example-project-deliverable {
  display: flex;
  gap: var(--gap-60);
}

.example-project-deliverable-content {
  max-width: 22.875rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.requirements-and-deliverables-button {
  margin-top: var(--space-9);
}

.example-project-deliverables-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  list-style: none;
  margin-bottom: var(--space-9);
}

.example-project-deliverables-list li {
  margin: 0;
  padding: 0;
  color: var(--bs-primary-25);
  font-size: 1rem;
  line-height: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-9);
  border-bottom: 0.0625rem solid rgba(154, 245, 222, 0.5);
}

/* Custom checkmark bullet point */
.example-project-deliverables-list li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='11' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M7.5 12L10.5 15L16.5 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='11' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M7.5 12L10.5 15L16.5 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--bs-primary-25);
}

.example-project-deliverable-item .checkmark-icon {
  margin-top: 0.125rem;
}

.example-project-deliverable-gallery {
  display: grid;
  gap: var(--space-1);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  width: 100%;
  min-height: 25rem;
}

.example-project-deliverable-gallery .gallery-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.example-project-deliverable-gallery .gallery-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Gallery Style 1: Vertical Left Image & 3 Images Vertical at Right */
.example-project-deliverable-gallery.gallery-style-1 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 2 / 1.5;
}

.example-project-deliverable-gallery.gallery-style-1
  .gallery-image:first-child {
  grid-row: 1 / 4;
  grid-column: 1 / 2;
}

/* Gallery Style 2: 2 Rows Images (1 Big Horizontal Image & 2/3 small images) */
.example-project-deliverable-gallery.gallery-style-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 3 / 1.5;
}

.example-project-deliverable-gallery.gallery-style-2
  .gallery-image:first-child {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

/* When there are 3 images total (1 big + 2 small) - Equal 50/50 split */
.example-project-deliverable-gallery.gallery-style-2
  .gallery-image:nth-child(2):nth-last-child(2) {
  grid-column: 1 / 2;
}

.example-project-deliverable-gallery.gallery-style-2
  .gallery-image:nth-child(3):last-child {
  grid-column: 2 / 3;
}

/* When there are 4 images total (1 big + 3 small) - Switch to 3 columns */
.example-project-deliverable-gallery.gallery-style-2:has(
    .gallery-image:nth-child(4)
  ) {
  grid-template-columns: repeat(3, 1fr);
}

.example-project-deliverable-gallery.gallery-style-2:has(
    .gallery-image:nth-child(4)
  )
  .gallery-image:first-child {
  grid-column: 1 / 4;
}

.example-project-deliverable-gallery.gallery-style-2
  .gallery-image:nth-child(2):nth-last-child(3) {
  grid-column: 1 / 2;
}

.example-project-deliverable-gallery.gallery-style-2
  .gallery-image:nth-child(3):nth-last-child(2) {
  grid-column: 2 / 3;
}

.example-project-deliverable-gallery.gallery-style-2
  .gallery-image:nth-child(4):last-child {
  grid-column: 3 / 4;
}

/* Gallery Style 3: 2 Rows Images (Left Big & Right Small) - Alternating Pattern */
.example-project-deliverable-gallery.gallery-style-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 3 / 2;
}

.example-project-deliverable-gallery.gallery-style-3
  .gallery-image:nth-child(1) {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

.example-project-deliverable-gallery.gallery-style-3
  .gallery-image:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

.example-project-deliverable-gallery.gallery-style-3
  .gallery-image:nth-child(3) {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.example-project-deliverable-gallery.gallery-style-3
  .gallery-image:nth-child(4) {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

/* Gallery Style 4: 2 Rows Images (Left Small & Right Big) - Alternating Pattern */
.example-project-deliverable-gallery.gallery-style-4 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 3 / 2;
}

.example-project-deliverable-gallery.gallery-style-4
  .gallery-image:nth-child(1) {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.example-project-deliverable-gallery.gallery-style-4
  .gallery-image:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

.example-project-deliverable-gallery.gallery-style-4
  .gallery-image:nth-child(3) {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

.example-project-deliverable-gallery.gallery-style-4
  .gallery-image:nth-child(4) {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

/* ========================
   RESPONSIVE DESIGN
   ======================== */

/* X-Small devices (portrait phones, less than 576px) - Base Styles */
.example-project-content {
  gap: var(--space-12);
}

.project-details-card {
  flex-direction: column;
}

.project-details-card-content {
  gap: var(--space-14);
  padding: var(--space-9) var(--space-13);
}

.example-project-deliverable {
  flex-direction: column;
  gap: var(--space-12);
}

.example-project-deliverable-content {
  max-width: 100%;
  gap: var(--space-12);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .example-project-content {
    gap: var(--space-14);
  }

  .project-details-card-content {
    gap: var(--space-14);
    padding: var(--space-10) var(--space-14);
  }

  .project-details-card-image {
    max-width: 100%;
  }

  .example-project-deliverable {
    gap: var(--space-14);
  }

  .example-project-deliverable-content {
    gap: var(--space-14);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .example-project-content {
    gap: var(--space-16);
  }

  .project-details-card {
    flex-direction: column;
  }

  .project-details-card-content {
    gap: var(--space-14);
    padding: var(--space-11) var(--space-15);
  }

  .project-details-card-image {
    max-width: 100%;
    align-self: stretch;
  }

  .example-project-deliverable {
    flex-direction: column;
    gap: var(--space-16);
  }

  .example-project-deliverable-content {
    max-width: 100%;
    gap: var(--space-14);
  }
  .client-logo {
    max-width: 100%;
  }
  .client-logo img {
    max-height: 4.375rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .example-project-content {
    gap: var(--space-18);
  }

  .project-details-card {
    flex-direction: row;
  }

  .project-details-card-content {
    gap: var(--space-14);
    padding: var(--space-12) 6.25rem;
  }

  .project-details-card-image {
    max-width: 26.25rem;
    height: 100%;
  }

  .example-project-deliverable {
    flex-direction: row;
    gap: var(--gap-40);
  }

  .example-project-deliverable-content {
    max-width: 22.875rem;
  }

  .example-project-deliverable-gallery {
    flex: 1;
  }

  .example-project-deliverable-gallery .gallery-image {
    height: 100%;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .example-project-content {
    gap: var(--space-20);
  }
  .project-details-card {
    height: 27.875rem;
  }

  .project-details-card-content {
    padding: var(--space-13) 6.25rem;
  }

  .project-details-card-image {
    max-width: 28.125rem;
  }

  .example-project-deliverable-gallery {
    flex: 1;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .example-project-content {
    gap: var(--space-22);
  }

  .project-details-card-content {
    gap: var(--space-14);
    padding: var(--space-18) 6.25rem;
  }

  .project-details-card-image {
    max-width: 30rem;
  }

  .example-project-deliverable {
    gap: var(--gap-60);
  }

  .example-project-deliverable-content {
    max-width: 22.875rem;
  }

  .example-project-deliverable-gallery {
    flex: 1;
  }
}

/* XXX-Large devices (1600px and up) */
@media (min-width: 1600px) {
  /* Inherits from 1400px and up */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .project-details-card {
    transition: none;
  }
}