/* Custom styles for Bee Marketing */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    background-color: #FAF8F5;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Portfolio Editorial Grid Hover Effects */
.group:hover img {
  transform: scale(1.02);
}

.group img {
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mix Blend Mode for Full-Bleed Text Overlay */
.mix-blend-difference {
  mix-blend-mode: difference;
}

/* Smooth transitions for buttons and links */
.hover\:\-translate-y-1 {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portfolio card hover states */
.cursor-pointer:hover .group-hover\:scale-\[1\.02\] {
  transform: scale(1.02);
}

/* Enhanced image container overflow */
.overflow-hidden {
  overflow: hidden;
}

/* Sticky hero section for browsers without position: sticky support */
@supports not (position: sticky) {
  .sticky {
    position: relative;
  }
}

/* Mobile-specific adjustments for portfolio grid */
@media (max-width: 768px) {
  .flex.md\:flex-row {
    flex-direction: column;
  }
  
  .md\:mt-\[200px\] {
    margin-top: 0;
  }
  
  .md\:mt-\[120px\] {
    margin-top: 0;
  }
  
  .md\:mt-\[40px\] {
    margin-top: 0;
  }
}

/* Full-bleed cinematic text contrast enhancement */
.absolute.inset-0 .text-pure-surface {
  filter: contrast(1.1);
}

/* Hero section gradient overlay for better text contrast */
.md\:w-1\/2.z-10 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Masonry grid break-inside fix for cross-browser compatibility */
.break-inside-avoid {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Typography overflow safety for very small screens */
@media (max-width: 480px) {
  h1.text-\[48px\],
  h1.font-display-h1.text-\[48px\] {
    font-size: 36px !important;
    line-height: 0.9;
  }
}