/* ============================================
   VIDEOHOUSE.IO - Responsive Styles
   Mobile-first breakpoints: 480px, 768px, 1024px
   ============================================ */

/* ========== BASE (Mobile < 480px) ========== */

/* Nav */
.navbar__links {
  display: none;
}

.navbar__hamburger {
  display: flex;
}

/* Hero */
.hero {
  min-height: 70vh;
  padding: var(--space-3xl) var(--content-padding);
}

.hero__heading {
  font-size: var(--text-3xl);
}

.hero__rotating-word {
  font-size: var(--text-xl);
}

.hero__rotating-wrapper {
  min-height: 36px;
}

.hero__subheading {
  font-size: var(--text-base);
}

.hero__ctas {
  flex-direction: column;
  align-items: center;
}

.hero__ctas .btn {
  width: 100%;
  max-width: 320px;
}

/* Section headers */
h2 {
  font-size: var(--text-2xl);
}

.section__header {
  margin-bottom: var(--space-xl);
}

.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* Grids to single column */
.services-grid,
.portfolio-grid,
.testimonials-grid,
.case-studies-grid,
.production-grid,
.how-it-works-grid,
.team-grid,
.locations-grid,
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* How it works connector hidden on mobile */
.how-it-works-grid::before {
  display: none;
}

/* Portfolio wide/tall resets */
.portfolio-item--wide,
.portfolio-item--tall {
  grid-column: span 1;
  grid-row: span 1;
}

/* Carousel items smaller */
.carousel__item {
  width: 260px;
}

/* Welcome section stack */
.welcome-content {
  grid-template-columns: 1fr;
}

/* Contact info stack */
.contact-info-grid {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Footer stacking */
.footer__top {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer__links {
  justify-content: center;
  text-align: center;
}

.footer__bottom {
  flex-direction: column;
  text-align: center;
}

.footer__legal {
  justify-content: center;
}

/* Filter bar scroll on mobile */
.filter-bar {
  justify-content: flex-start;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: var(--space-sm);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  flex-shrink: 0;
}

/* About hero */
.about-hero__heading {
  font-size: var(--text-3xl);
}

.contact-hero__heading {
  font-size: var(--text-3xl);
}

/* Buttons */
.btn {
  padding: 12px 24px;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 14px 28px;
  font-size: var(--text-sm);
}

/* ========== SMALL PHONES UP (480px) ========== */

@media (min-width: 480px) {
  .hero__heading {
    font-size: var(--text-4xl);
  }

  .hero__rotating-word {
    font-size: var(--text-2xl);
  }

  .hero__rotating-wrapper {
    min-height: 44px;
  }

  .hero__ctas {
    flex-direction: row;
  }

  .hero__ctas .btn {
    width: auto;
    max-width: none;
  }

  .carousel__item {
    width: 280px;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-item--wide {
    grid-column: span 2;
  }

  .about-hero__heading {
    font-size: var(--text-4xl);
  }

  .contact-hero__heading {
    font-size: var(--text-4xl);
  }
}

/* ========== TABLETS (768px) ========== */

@media (min-width: 768px) {
  h2 {
    font-size: var(--text-3xl);
  }

  .section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

  .hero {
    min-height: 80vh;
    padding: var(--space-4xl) var(--content-padding);
  }

  .hero__heading {
    font-size: var(--text-5xl);
  }

  .hero__rotating-word {
    font-size: var(--text-3xl);
  }

  .hero__rotating-wrapper {
    min-height: 50px;
  }

  .hero__subheading {
    font-size: var(--text-md);
  }

  /* 2-column grids on tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-studies-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .production-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-it-works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .welcome-content {
    grid-template-columns: 1fr 1fr;
  }

  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-item--wide {
    grid-column: span 2;
  }

  .portfolio-item--tall {
    grid-row: span 2;
  }

  .carousel__item {
    width: 300px;
  }

  .footer__top {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .footer__links {
    text-align: left;
  }

  .footer__bottom {
    flex-direction: row;
    text-align: left;
  }

  .about-hero__heading {
    font-size: var(--text-5xl);
  }

  .contact-hero__heading {
    font-size: var(--text-5xl);
  }

  .btn {
    padding: 14px 32px;
    font-size: var(--text-sm);
  }

  .btn--lg {
    padding: 18px 40px;
    font-size: var(--text-base);
  }

  .filter-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ========== DESKTOP (1024px) ========== */

@media (min-width: 1024px) {
  /* Show desktop nav, hide hamburger */
  .navbar__links {
    display: flex;
  }

  .navbar__hamburger {
    display: none;
  }

  h2 {
    font-size: var(--text-4xl);
  }

  .section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  .section__header {
    margin-bottom: var(--space-3xl);
  }

  .hero {
    min-height: 90vh;
    padding: var(--space-5xl) var(--content-padding);
  }

  .hero__heading {
    font-size: var(--text-hero);
  }

  .hero__rotating-word {
    font-size: var(--text-4xl);
  }

  .hero__rotating-wrapper {
    min-height: 60px;
  }

  .hero__subheading {
    font-size: var(--text-lg);
  }

  /* Full grids */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio-item--wide {
    grid-column: span 2;
  }

  .portfolio-item--tall {
    grid-row: span 2;
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .case-studies-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .production-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .how-it-works-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .how-it-works-grid::before {
    display: block;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .carousel__item {
    width: 320px;
  }

  .about-hero__heading {
    font-size: var(--text-6xl);
  }

  .contact-hero__heading {
    font-size: var(--text-6xl);
  }
}