/* Override Global Styles */

/* Override Header Styles*/
header {
    display: contents;
}

.tape {
    grid-column: 1 / 3; /* place header logo container */
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    z-index: 1001;
    height: clamp(40vh, 40vh, 40vh);
    width: clamp(38vw, 38vw, 38vw);
    object-fit: cover;
}

/* Set Carousel Styles */
.carousel-container {
    grid-column: 1 / 9; /* place header logo container */
    grid-row: 2 / 6;
    display: flex;
    align-items: center;
    z-index: 1000;
    height: clamp(60vh, 60vh, 60vh);
    width: clamp(38vw, 38vw, 38vw);
}

.carousel-track {
  display: flex;
  animation: scroll 40s linear infinite;
}

.carousel-slide {
  flex: 0 0 auto;
  width: clamp(150px, 80vw, 300px);
  margin-right: 1rem;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.carousel-container:has(.carousel-slide img:hover) .carousel-track {
  animation-play-state: paused;
}

/* Fallback (less precise): entire container hover */
@supports not (selector(:has(*))) {
  .carousel-container:hover .carousel-track {
    animation-play-state: paused;
  }
}

.carousel-container::before,
.carousel-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.carousel-container::before {
  left: 0;
  background: linear-gradient(to right, var(--web-sand), transparent);
}

.carousel-container::after {
  right: 0;
  background: linear-gradient(to left, var(--web-sand), transparent);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



/* Override Footer Styles */
footer {
    display: contents;
}


.footer--logo {
    grid-column: 6 / 9;
    grid-row: 4 / 6;
    display: flex;
    align-items: center;
    z-index: 1000;
    height: clamp(40vh, 40vh, 40vh);
    width: clamp(38vw, 38vw, 38vw);
}

/* Override Mobile Responsiveness */
@media (max-width: 768px) {
  body {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 8 equal columns */
    grid-template-rows: repeat(4, 1fr);    /* 5 equal rows */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: none;
    z-index: 1000;
  }

.tape{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    height: clamp(25vh, 25vh, 25vh);
    width: 100%;
    z-index: 1001;
}


.carousel-container, .carousel-track, .carousel-slide {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
    height: clamp(50vh, 50vh, 50vh);
    width: 100%;
}


footer, .footer--logo, footer img {
    grid-column: 2 / 4;
    grid-row: 3 / 5;
    height: clamp(50vh, 50vh, 50vh);
    width: 100%;
}


img {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
 }