/* ==========================================================================
   PROJECT EXPERIENCE DETAIL PAGES - MOBILE & RESPONSIVE STANDARDS
   ========================================================================== */

/* 2 Columns Grid for Portfolio Feeds on Mobile & Tablet */
@media (max-width: 991.98px) {
  .portfolio-masonry-grid {
    column-count: 2 !important;
    column-gap: 16px !important;
  }
  .portfolio-masonry-item {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .portfolio-masonry-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
  }
  .portfolio-masonry-item {
    margin-bottom: 20px !important;
  }
}

/* Mobile Font Sizing & Spacing Adaptations */
@media (max-width: 575.98px) {
  body {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }
  
  /* Sizing down the project titles to standard mobile headers */
  .project-title {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .content-title, .video-showcase-title {
    font-size: clamp(1.15rem, 4.5vw, 1.35rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .lead {
    font-size: 0.925rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Section Spacing adjustment for mobile */
  .section-spacing {
    padding: clamp(30px, 6vw, 50px) 0 !important;
  }
  
  /* Metadata Panel */
  .metadata-panel {
    padding: 16px !important;
    margin-top: 20px !important;
  }
  .metadata-label {
    font-size: 0.72rem !important;
    margin-bottom: 4px !important;
  }
  .metadata-value {
    font-size: 0.825rem !important;
    margin-bottom: 12px !important;
  }
  
  /* Card Text sizes */
  .video-card-content, .design-card-content, .freelance-card-content {
    padding: 10px !important;
  }
  .video-title, .design-title, .freelance-title {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }
  .video-desc, .design-desc, .freelance-desc {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }
  .btn-video-source, .btn-design-source, .btn-freelance-source {
    font-size: 0.7rem !important;
    padding: 6px 8px !important;
  }
  
  /* Adjust custom video modal body */
  .custom-video-modal-content {
    width: 95% !important;
  }
}

/* Fixed Navbar wrapped Layout for narrow mobile screens */
@media (max-width: 767.98px) {
  .navbar-custom {
    padding: 8px 0 !important;
  }
  .navbar-custom .container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important; /* Stacked items gap */
  }
  .navbar-custom .container > div {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* Shift content down so it does not get hidden under the wrapped fixed header (guest defaults to 80px) */
  body {
    padding-top: 80px !important;
  }
}