/* ─── Reset & Base ────────────────────────────────────────────── */

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

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  background: #0c0c0c;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ─── Background Slideshow ────────────────────────────────────── */

#slideshow {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
}

.slide.active {
  opacity: 1;
}

#bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.52);
}

/* ─── App Layout ──────────────────────────────────────────────── */

#app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#site-name {
  position: absolute;
  top: 2rem;
  left: 2.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  user-select: none;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7rem 8% 3.5rem;
  gap: 1.25rem;
}

/* ─── Category Filters ────────────────────────────────────────── */

#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.filter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.8rem;
  border-radius: 2px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.filter:hover {
  color: rgba(255, 255, 255, 0.72);
}

.filter.active {
  color: rgba(255, 255, 255, 0.92);
  background-color: rgba(255, 255, 255, 0.09);
}

/* ─── Grid Sections ───────────────────────────────────────────── */

.grid-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
}

.grid-section + .grid-section {
  margin-top: 2.5rem;
}

.section-label {
  width: 100%;
  max-width: 1400px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── Video Grid ──────────────────────────────────────────────── */

#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1400px;
  transition: opacity 0.2s ease;
}

/* 9:16 vertical grid */
#grid-vertical {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1400px;
  transition: opacity 0.2s ease;
}

/* ─── Video Items ─────────────────────────────────────────────── */

.video-item {
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.video-item:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.85);
  z-index: 1;
}

/* 16:9 aspect ratio */
.thumb-wrapper {
  position: relative;
  padding-top: 56.25%;
  background: #181818;
}

/* 9:16 aspect ratio */
.thumb-wrapper.vertical {
  padding-top: 177.78%;
}

.thumb-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* Subtle darkening overlay on hover */
.video-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.22s ease;
  pointer-events: none;
}

.video-item:hover::after {
  background: rgba(0, 0, 0, 0.12);
}

/* ─── Footer ──────────────────────────────────────────────────── */

footer {
  padding-top: 0.75rem;
}

footer a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* ─── Video Modal ─────────────────────────────────────────────── */

#modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal[hidden] {
  display: none;
}

#player {
  width: 100%;
  height: 100%;
  border: none;
}

/* Black bars to mask YouTube / Vimeo UI chrome */
#modal::before,
#modal::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 70px;
  background: #000;
  z-index: 1;
}

#modal::before { top: 0; }
#modal::after  { bottom: 0; }

#modal-cta {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  z-index: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  user-select: none;
}

#modal-cta.visible {
  opacity: 1;
}

/* Instagram embed container */
#ig-embed-container {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem;
}

/* Hide black bars for Instagram (not needed for card embed) */
#modal.instagram::before,
#modal.instagram::after {
  display: none;
}

/* Instagram placeholder thumbnail */
.ig-placeholder {
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

.ig-placeholder img {
  display: none;
}

/* Always visible on touch devices */
@media (hover: none) {
  #modal-cta {
    opacity: 1 !important;
  }
}

/* ─── Responsive: 4 → 3 → 2 → 1 columns ─────────────────── */

/* 3 cols / 5 vertical cols */
@media (max-width: 1100px) {
  #grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #grid-vertical {
    grid-template-columns: repeat(5, 1fr);
  }

  #content {
    justify-content: flex-start;
    padding-top: 5.5rem;
  }
}

/* 2 cols + compact UI / 4 vertical cols */
@media (max-width: 720px) {
  #grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  #grid-vertical {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  #content {
    padding: 4.5rem 3% 2.5rem;
    gap: 0.85rem;
  }

  #site-name {
    font-size: 0.6rem;
    left: 1rem;
    top: 1.25rem;
    letter-spacing: 0.12em;
  }

  #filters {
    gap: 0.15rem;
    margin-bottom: 0.25rem;
  }

  .filter {
    font-size: 0.55rem;
    padding: 0.3rem 0.6rem;
    letter-spacing: 0.1em;
  }

  footer {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }

  footer a {
    font-size: 0.58rem;
  }

  #modal-cta {
    bottom: 1.25rem;
    right: 1.25rem;
    font-size: 0.6rem;
    padding: 0.4rem 0.75rem;
  }
}

/* 1 col / 3 vertical cols */
@media (max-width: 380px) {
  #grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #grid-vertical {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  #content {
    padding: 4rem 4% 2rem;
  }
}