/* Enhanced Disney+ Brand Tiles CSS - Fixed Spacing & Large Screen Sizing */

/* Disney+ Authentic Variables */
.enhanced-disney-brand-tiles {
  --disney-black: #0e0e13;
  --disney-text: #f9f9f9;
  --disney-border: rgba(249, 249, 249, 0.2);
  --disney-hover-scale: 1.05;
  --disney-animation-duration: 0.3s;
  --disney-animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Fixed Spacing Variables */
  --disney-tile-columns: 7;
  --tile-border-radius: 16px;
  --selection-ring-width: 3px;
  --glow-blur-radius: 20px;
  
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: transparent;
}

.enhanced-disney-brand-tiles.enhanced-disney-brand-tiles--disney_entertainment {
  --disney-primary: #113ccf;
  background: linear-gradient(135deg, rgba(17, 60, 207, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
}

/* Fixed Grid Container - Better Spacing */
.enhanced-brand-tiles-container {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(var(--disney-tile-columns), minmax(0, 1fr));
  gap: 1rem; /* Proper gap instead of negative margins */
  justify-content: center;
  padding-bottom: 1rem;
}

/* Disney+ Authentic Aspect Ratio Control */
.enhanced-brand-tile-image-container {
  aspect-ratio: var(--tile-aspect-ratio);
  --tile-aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--tile-border-radius) - 2px);
  background: radial-gradient(circle at center, #2a2a2a 0%, #1a1a1a 100%);
}

.enhanced-brand-tile-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--tile-border-radius) - 2px);
}

/* Responsive Grid with Proper Spacing */
@media (max-width: 450px) {
  .enhanced-disney-brand-tiles {
    --disney-tile-columns: 4;
  }
  
  .enhanced-brand-tiles-container {
    gap: 0.5rem; /* Tighter but not too tight */
  }
  
  .enhanced-brand-tile {
    --tile-border-radius: 8px;
  }
}

@media (min-width: 451px) and (max-width: 639px) {
  .enhanced-disney-brand-tiles {
    --disney-tile-columns: 4;
  }
  
  .enhanced-brand-tiles-container {
    gap: 0.75rem;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .enhanced-disney-brand-tiles {
    --disney-tile-columns: 5;
  }
  
  .enhanced-brand-tiles-container {
    gap: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .enhanced-disney-brand-tiles {
    --disney-tile-columns: 6;
  }
  
  .enhanced-brand-tiles-container {
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .enhanced-disney-brand-tiles {
    --disney-tile-columns: 7;
  }
  
  .enhanced-brand-tiles-container {
    gap: 1.5rem;
    max-width: 1200px; /* Limit container width to prevent oversized tiles */
    margin: 0 auto;
  }
}

/* Fixed Tile Structure - Constrained Size */
.enhanced-brand-tile {
  position: relative;
  width: 100%;
  max-width: 200px; /* Prevent tiles from getting too large */
  border-radius: var(--tile-border-radius);
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  transition: all var(--disney-animation-duration) var(--disney-animation-easing);
  cursor: pointer;
  transform-origin: center;
  border: 2px solid transparent;
  justify-self: center; /* Center tiles in grid cells */
}

/* Mobile size constraints */
@media (max-width: 767px) {
  .enhanced-brand-tile {
    max-width: 150px; /* Smaller on mobile */
  }
}

/* Tablet size constraints */
@media (min-width: 768px) and (max-width: 1023px) {
  .enhanced-brand-tile {
    max-width: 180px; /* Medium on tablets */
  }
}

/* Disney+ Hover Effects */
.enhanced-brand-tile:hover {
  transform: scale(var(--disney-hover-scale));
  z-index: 10;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 
              0 8px 32px rgba(0, 0, 0, 0.3);
}

.enhanced-brand-tile:hover .enhanced-brand-tile-image--static {
  opacity: 1;
  z-index: 3;
}

.enhanced-brand-tile:hover .enhanced-brand-tile-image--animated {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.enhanced-brand-tile:hover .enhanced-brand-tile-glow {
  opacity: 0.6;
  transform: scale(1.1);
}

/* Mobile hover adjustments */
@media (max-width: 767px) {
  .enhanced-brand-tile:hover {
    --disney-hover-scale: 1.03;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 
                0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

/* Image positioning - Proper centering */
.enhanced-brand-tile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Ensure logos stay centered */
  transition: all var(--disney-animation-duration) var(--disney-animation-easing);
  border-radius: calc(var(--tile-border-radius) - 2px);
}

/* Static Image (Logo) - Always visible, top layer */
.enhanced-brand-tile-image--static {
  opacity: 1;
  z-index: 3;
  transform: scale(1);
}

/* Animated Image/Video - Background layer, hidden by default */
.enhanced-brand-tile-image--animated {
  opacity: 0;
  z-index: 1;
  transform: scale(1.05);
}

/* Glow effect */
.enhanced-brand-tile-glow {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  opacity: 0;
  border-radius: var(--tile-border-radius);
  transition: all var(--disney-animation-duration) var(--disney-animation-easing);
  filter: blur(var(--glow-blur-radius));
  z-index: -1;
  pointer-events: none;
}

/* Selection ring */
.enhanced-brand-tile-selection-ring {
  position: absolute;
  top: calc(-1 * var(--selection-ring-width));
  left: calc(-1 * var(--selection-ring-width));
  right: calc(-1 * var(--selection-ring-width));
  bottom: calc(-1 * var(--selection-ring-width));
  border: var(--selection-ring-width) solid transparent;
  border-radius: calc(var(--tile-border-radius) + var(--selection-ring-width));
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}

.enhanced-brand-tile.enhanced-brand-tile--selected .enhanced-brand-tile-selection-ring {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.9);
  animation: selection-pulse 2s ease-in-out infinite;
}

/* Focus state */
.enhanced-brand-tile:focus-within {
  outline: none;
  border-color: rgba(255, 255, 255, 0.9);
  transform: scale(var(--disney-hover-scale));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6),
              0 8px 32px rgba(0, 0, 0, 0.3);
}

.enhanced-brand-tile:focus-within .enhanced-brand-tile-image--static {
  opacity: 1;
  z-index: 3;
}

.enhanced-brand-tile:focus-within .enhanced-brand-tile-image--animated {
  opacity: 1;
  z-index: 1;
}

/* Animations */
@keyframes selection-pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.02);
    filter: brightness(1.2);
  }
}

/* Brand-specific glow colors */
.enhanced-brand-tile[data-brand="disney"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(0, 110, 183, 0.4);
}

.enhanced-brand-tile[data-brand="pixar"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(0, 99, 225, 0.4);
}

.enhanced-brand-tile[data-brand="marvel"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(196, 30, 58, 0.4);
}

.enhanced-brand-tile[data-brand="star-wars"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

.enhanced-brand-tile[data-brand="national-geographic"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(255, 199, 44, 0.4);
}

.enhanced-brand-tile[data-brand="hulu"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(28, 231, 131, 0.4);
}

.enhanced-brand-tile[data-brand="espn"]:hover .enhanced-brand-tile-glow {
  box-shadow: 0 0 40px rgba(255, 0, 0, 0.4);
}

/* Flicks-specific overrides */
.disney-flicks-page .enhanced-disney-brand-tiles {
  background: transparent;
  padding: 2rem 1rem;
}

.disney-flicks-page .enhanced-brand-tiles-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .enhanced-brand-tile,
  .enhanced-brand-tile-image,
  .enhanced-brand-tile-glow {
    transition: none !important;
    animation: none !important;
  }
  
  .enhanced-brand-tile:hover {
    transform: none;
  }
}

/* Touch devices */
@media (hover: none) {
  .enhanced-brand-tile:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }
  
  .enhanced-brand-tile:hover .enhanced-brand-tile-image--static {
    opacity: 1;
  }
  
  .enhanced-brand-tile:hover .enhanced-brand-tile-image--animated {
    opacity: 0;
  }
  
  .enhanced-brand-tile:hover .enhanced-brand-tile-glow {
    opacity: 0;
  }
  
  .enhanced-brand-tile:active {
    transform: scale(0.98);
    border-color: rgba(255, 255, 255, 0.6);
    transition: transform 0.1s ease;
  }
  
  .enhanced-brand-tile:focus {
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(var(--disney-hover-scale));
  }
  
  .enhanced-brand-tile:focus .enhanced-brand-tile-image--animated {
    opacity: 1;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  .enhanced-brand-tile {
    border-width: 3px;
  }
  
  .enhanced-brand-tile:hover {
    border-color: #ffffff;
  }
  
  .enhanced-brand-tile-glow {
    display: none;
  }
}