/* =========================================================
   Case Study: Rider Cards — Page-specific overrides
   Base styles: assets/css/caseStudy.css
   ========================================================= */

/* Campaign section for Rider Cards uses a full-bleed image
   + 3-column equal card grid (no video tile) */
.section-campaign-cards .campaign-fullbleed {
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1345 / 716;
  object-fit: cover;
}

.section-campaign-cards .campaign-card-tile {
  border-radius: 18px;
  overflow: hidden;
  height: 400px;
}

.section-campaign-cards .campaign-card-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-left-inner .arrow-logo {
    position: absolute;
    bottom: 194px;
    right: -137px;
    width: 400px;
    height: 175px;
    opacity: 1.35;
    pointer-events: none;
    z-index: 0;
}

.sa-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.campaign-card-tile {
  background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-campaign-cards .campaign-card-tile img {
    width: 80%;
    height: 80%;
    object-fit: scale-down;
}

.photo-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px; /* adjust as needed */
  background: #000;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Desktop */
.photo-frame-main,
.photo-frame-side {
  height: 640px; /* pick the visual height you want */
}


@media (min-width: 992px) {
  .section-campaign-cards .campaign-card-tile {
    height: 480px;
  }
      .photo-tile {
        height: 560px;
    }
}

/* =========================================
   Responsive: Tablet/Mobile (<= 991.98px)
========================================= */
@media (max-width: 991.98px) {
  .hero-left-inner .arrow-logo {
    position: absolute;
    bottom: -35px;
    right: 280px;
    width: 200px;
    height: 75px;
    opacity: 1.35;
    pointer-events: none;
    z-index: 0;
  }

  .section-padding {
    padding: 30px 0;
  }

  /* Header / nav */
  .site-header .container {
    min-height: auto;
  }

  .navbar-collapse {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .navbar-nav {
    gap: 10px;
  }

  .nav-link-accent {
    padding: 10px 0;
  }

  /* Hero */
  .hero-left-inner {
    min-height: auto;
  }

  .hero-left-inner .x-logo {
    display: none;
  }

  .hero-divider {
    margin-top: 20px;
  }

  .hero-right {
    min-height: 320px;
  }

  .hero-img-tag {
    height: 320px;
    min-height: 320px;
  }

  /* Science & Art */
  .sa-copy {
    max-width: 100%;
  }

  /* Campaign */
  .media-tile--xl { height: auto; }

  /* Photography */
  .photo-carousel,
  .photo-tile {
    height: auto;
  }

  /* Footer */
  .footer-office { height: auto; }
  .fuse-logo-footer { max-width: 100%; }

  .footer-arrow {
    right: -70px;
    top: 20px;
  }

  .photo-frame-main,
  .photo-frame-side {
    height: 360px;
  }
}

/* =========================================
   Responsive: Small (<= 768px)
========================================= */
@media (max-width: 768px) {
  .carousel-chevron {
    width: 56px;
    height: 56px;
  }

      .hero-left-inner .arrow-logo {
        right: 150px;
    }
}

@media (max-width: 514px) {
  
}