/* ========================================
   SINGLE PROJECT PAGE
   
   ======================================== */

@media (min-width: 992px) {
  .single-project .hero-section {
    min-height: 33.125rem;
  }
}

/* ========================
   Header Section
   ======================== */

.single-project-header {
  border-bottom: 1px solid rgba(var(--bs-primary-25-rgb), 0.5);
  padding-bottom: var(--space-21);
  margin-bottom: var(--space-13);
}

/* ========================
   Project Details Sidebar
   ======================== */

.project-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-17); /* 40px */
}

.project-detail-item {
  display: flex;
  flex-direction: column;
}

/* Client Logo */
.client-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* Deliverables List */
.deliverables-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7); /* 16px */
}

.deliverable-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4); /* 12px */
}

.checkmark-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkmark-icon svg {
  max-width: 100%;
  height: auto;
}
/* ========================
   Project Description Content
   ======================== */

.project-description-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20); /* 48px */
}

.project-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.project-description h1,
.project-description h2,
.project-description h3,
.project-description h4,
.project-description h5,
.project-description h6 {
  font-weight: 400;
  line-height: 1.3;
}

.project-description p:first-child {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  margin-bottom: var(--space-20);
}

.project-description p {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  margin-bottom: var(--space-7);
}

.project-description p:last-child {
  margin-bottom: 0;
}

/* Testimonial Quote */
.project-testimonial {
  margin-top: var(--space-20);
}

.testimonial-quote {
  border-left: 2px solid var(--bs-success) !important;
  padding-left: var(--space-11) !important;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* ========================
   Video/Image Banner
   ======================== */

.project-banner-section {
  margin-top: var(--space-23); /* 100px - Desktop */
}

.project-video-wrapper,
.project-image-wrapper {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background-color: #000;
  height: clamp(250px, 47.06vw, 810px);
  width: 100%;
  display: block;
}

.video-embed {
  width: 100%;
  height: 100%;
}

.video-embed iframe,
.video-embed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-overlay {
  pointer-events: none;
  z-index: 10;
}

.play-button-circle {
  width: 112px;
  height: 112px;
  background-color: var(--bs-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.play-button-circle:hover {
  transform: scale(1.1);
}

/* ========================
   Gallery Grid
   ======================== */

.single-project-gallery {
  margin-top: var(--space-23);
}

.single-project-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.single-project-gallery-row {
  display: flex;
  gap: 5px;
}

.single-project-gallery-image {
  flex: 1;
  overflow: hidden;
}

.single-project-gallery-image img {
  width: 100%;
  height: 470px;
  object-fit: cover;
  display: block;
}

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

/* Tablet (768px and below) */
@media (max-width: 767px) {
  /* Main Section */
  .single-project-page {
    padding: var(--space-22) 0; /* 80px */
  }

  /* Header */
  .single-project-header {
    padding-bottom: var(--space-14);
    margin-bottom: var(--space-11);
  }

  /* Layout */
  .single-project-content .row {
    flex-direction: column;
  }

  /* Sidebar */
  .project-details-sidebar {
    gap: var(--space-14); /* 32px */
  }

  .project-detail-item {
    margin-bottom: var(--space-7);
  }

  /* Typography */
  .project-description p:first-child {
    font-size: var(--font-size-28);
    margin-bottom: var(--space-14);
  }

  .project-description p {
    font-size: var(--font-size-16);
  }

  /* Video/Banner - Tablet */
  .project-banner-section {
    margin-top: var(--space-22); /* 80px */
  }

  .play-button-circle {
    width: 100px;
    height: 100px;
  }

  .play-button-circle svg {
    width: 44px;
    height: 44px;
  }

  /* Gallery - Responsive Grid */
  .single-project-gallery {
    margin-top: var(--space-22);
  }

  .single-project-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  /* First Row - 2 columns on tablet */
  .single-project-gallery-row:first-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  /* Second Row - 2 columns on tablet */
  .single-project-gallery-row:last-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .single-project-gallery-image {
    width: 100%;
  }

  .single-project-gallery-image img {
    height: 300px;
    width: 100%;
  }

  /* Testimonial */
  .testimonial-quote {
    padding-left: var(--space-9) !important;
  }
}

/* Mobile (575px and below) */
@media (max-width: 575px) {
  /* Main Section */
  .single-project-page {
    padding: var(--space-20) 0; /* 48px */
  }

  /* Header */
  .single-project-header {
    padding-bottom: var(--space-11);
    margin-bottom: var(--space-9);
    border-bottom: 1px solid rgba(var(--bs-primary-25-rgb), 0.3);
  }

  .single-project-header .h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .single-project-header .btn {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-12);
  }

  /* Layout */
  .single-project-content .row {
    flex-direction: column;
    gap: var(--space-14) !important;
  }

  /* Sidebar */
  .project-details-sidebar {
    gap: var(--space-11); /* 24px */
  }

  .project-detail-item {
    margin-bottom: 0;
  }

  .project-detail-item .preheader {
    font-size: var(--font-size-14);
    margin-bottom: var(--space-3);
  }

  .project-detail-item .title-xl {
    font-size: var(--font-size-20);
  }

  /* Typography */
  .project-description-content {
    gap: var(--space-14); /* 32px */
  }

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

  .project-description p:first-child {
    font-size: var(--font-size-24);
    line-height: 1.2;
    margin-bottom: var(--space-11);
  }

  .project-description p {
    font-size: var(--font-size-14);
    line-height: 1.5;
    margin-bottom: var(--space-5);
  }

  /* Video/Banner */
  .project-banner-section {
    margin-top: var(--space-20);
  }

  .play-button-circle {
    width: 80px;
    height: 80px;
  }

  .play-button-circle svg {
    width: 32px;
    height: 32px;
  }

  /* Gallery - Stacked vertically on mobile */
  .single-project-gallery {
    margin-top: var(--space-20);
  }

  .single-project-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  /* Both rows stack vertically */
  .single-project-gallery-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .single-project-gallery-row:first-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .single-project-gallery-row:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .single-project-gallery-image {
    width: 100%;
  }

  .single-project-gallery-image img {
    height: 250px;
    width: 100%;
  }

  /* Testimonial */
  .project-testimonial {
    margin-top: var(--space-14);
  }

  .testimonial-quote {
    border-left: 2px solid var(--bs-success) !important;
    padding-left: var(--space-7) !important;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .testimonial-quote .text-primary-100 {
    font-size: var(--font-size-14);
    line-height: 1.5;
  }

  /* Deliverables */
  .deliverables-list {
    gap: var(--space-5); /* 12px */
  }

  .deliverable-item {
    gap: var(--space-3); /* 8px */
  }

  .checkmark-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
  }

  .deliverable-item .title-xl {
    font-size: var(--font-size-16);
  }

  /* Client Logo */
  .client-logo img {
    max-height: 32px;
  }
}

/* Extra Small (360px and below) */
@media (max-width: 360px) {
  /* Main Section */
  .single-project-page {
    padding: var(--space-14) 0; /* 32px */
  }

  /* Header */
  .single-project-header {
    padding-bottom: var(--space-9);
    margin-bottom: var(--space-7);
  }

  .single-project-header .h1 {
    font-size: 1.5rem;
  }

  /* Typography */
  .project-description p:first-child {
    font-size: var(--font-size-20);
  }

  .project-description p {
    font-size: var(--font-size-12);
  }

  /* Video/Banner */
  /* Height uses fluid clamp() - no override needed */

  /* Gallery */
  .single-project-gallery-image img {
    height: 200px;
  }
}

/* ========================
   Utility Classes
   ======================== */

.lh-150 {
  line-height: 1.5;
}

.object-fit-cover {
  object-fit: cover;
}

/* Border utilities for primary colors */
.border-primary-100 {
  border-color: var(--bs-primary-100) !important;
}

.border-opacity-50 {
  opacity: 0.5;
}