/* =========================================================
   BOLD SPORTS GROUP
   MAIN STYLESHEET
   ========================================================= */


/* =========================================================
   1. COLORS / GLOBAL SETTINGS
   Change your main website colors here
   ========================================================= */

:root {
  --bg: #090909;
  --panel: #11110f;
  --cream: #f2edd9;
  --muted: #a9a69b;
  --line: #2b2a26;
  --brown: #4b3a34;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: #f7f4ea;
  font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   2. NAVIGATION
   ========================================================= */

.nav {
  height: 84px;
  padding: 0 5vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: sticky;
  top: 0;
  z-index: 20;

  background: rgba(9, 9, 9, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #1d1d1b;
}


/* Logo + Bold Sports Group */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;

  color: var(--cream);
  text-decoration: none;

  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 800;
}

.brand img {
  width: 112px;
  height: 70px;
  object-fit: contain;
}


/* Navigation Links */

.nav nav {
  display: flex;
  gap: 28px;
}

.nav nav a {
  color: #aaa79e;
  text-decoration: none;
  font-size: 13px;
}

.nav nav a:hover,
.nav nav a.active {
  color: var(--cream);
}


/* =========================================================
   3. HOMEPAGE HERO
   Main NJIT background image
   ========================================================= */

.hero {
  height: calc(100vh - 84px);
  min-height: 680px;

  position: relative;
  overflow: hidden;
}


/* MAIN NJIT IMAGE
   Change object-position to move the image.

   0%   = image moved toward top
   25%  = current position
   50%  = centered
   100% = image moved toward bottom
*/

.hero-img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 35%;
}


/* Dark overlay on main image */

.hero-shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.57) 43%,
      rgba(0, 0, 0, 0.08) 76%
    ),
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.65),
      transparent 40%
    );
}


/* Main Homepage Text */

.hero-copy {
  position: absolute;
  left: 7vw;
  top: 50%;

  transform: translateY(-50%);
  max-width: 720px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 800;
  color: #cfc9b3;
}

.hero h1,
.page-head h1 {
  font-size: clamp(50px, 7vw, 104px);
  line-height: 0.94;
  letter-spacing: -4px;

  margin: 20px 0 26px;
}

.hero h1 em,
.page-head h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--cream);
}

.hero-copy > p:not(.eyebrow) {
  max-width: 610px;

  color: #d1cec5;
  font-size: 17px;
  line-height: 1.7;
}


/* Homepage Buttons */

.actions {
  display: flex;
  align-items: center;
  gap: 28px;

  margin-top: 34px;
}

.btn {
  display: inline-block;

  padding: 15px 22px;

  background: var(--cream);
  color: #111;

  text-decoration: none;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.textlink {
  color: var(--cream);
  text-decoration: none;

  font-size: 13px;
  font-weight: 700;
}


/* Large faded BOLD word */

.wordmark {
  position: absolute;
  right: 4vw;
  bottom: -30px;

  font-size: 17vw;
  font-weight: 900;
  letter-spacing: -14px;

  color: rgba(242, 237, 217, 0.06);
}


/* =========================================================
   4. GENERAL SECTIONS
   ========================================================= */

.section {
  padding: 110px 7vw;
}

h2 {
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.03;
  letter-spacing: -2px;

  margin: 12px 0;
}

.bodycopy {
  font-size: 18px;
  line-height: 1.75;

  color: #bbb7ac;
}

.subtle {
  font-family: Georgia, serif;
  font-style: italic;

  color: var(--cream);
}


/* =========================================================
   5. ABOUT SECTION
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;

  border-bottom: 1px solid var(--line);
}


/* =========================================================
   6. BOLD MEANING
   Brotherhood • Opportunity • Leadership • Development
   ========================================================= */

.pillars {
  background: #0d0d0c;
}

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

  margin-top: 38px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pillar-grid article {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
}

.pillar-grid article:last-child {
  border-right: 0;
}

.pillar-grid span {
  font-family: Georgia, serif;
  font-size: 56px;

  color: var(--cream);
}

.pillar-grid h3 {
  font-size: 20px;
  margin: 15px 0 8px;
}

.pillar-grid p {
  color: #8f8c84;
  line-height: 1.5;
}


/* =========================================================
   7. WHAT WE DO / SERVICES
   ========================================================= */

.services {
  background: #0b0b0a;
  border-bottom: 1px solid var(--line);
}

.services-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  column-gap: 8vw;

  align-items: end;
}

.services-intro .eyebrow {
  grid-column: 1 / -1;
}

.services-intro h2 {
  margin-bottom: 0;
}

.services-intro > p:last-child {
  max-width: 650px;

  color: #aaa69d;
  font-size: 17px;
  line-height: 1.7;
}


/* Service Cards */

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

  margin-top: 55px;

  border-top: 1px solid var(--line);
}

.service-grid article {
  padding: 34px 28px 28px 0;
  margin-right: 28px;

  border-right: 1px solid var(--line);
}

.service-grid article:last-child {
  margin-right: 0;
  border-right: 0;
}

.service-grid span {
  font-size: 11px;
  letter-spacing: 2px;

  color: #77736a;
}

.service-grid h3 {
  font-size: 20px;
  margin: 18px 0 10px;
}

.service-grid p {
  color: #8f8c84;

  line-height: 1.6;
  font-size: 14px;
}


/* =========================================================
   8. FEATURE SECTION
   ========================================================= */

.feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 8vw;

  align-items: center;
}

.feature-img {
  height: 600px;
  overflow: hidden;
}

.feature-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  /* CHANGE THIS TO MOVE FEATURE IMAGE */
  object-position: center 20%;
}

.feature p:not(.eyebrow) {
  color: #aaa69d;

  line-height: 1.7;
  font-size: 17px;
}


/* =========================================================
   9. CALL TO ACTION
   ========================================================= */

.cta {
  text-align: center;

  background:
    linear-gradient(
      135deg,
      #16130f,
      #0b0b0a
    );
}

.cta h2 {
  margin-bottom: 36px;
}


/* =========================================================
   10. PAGE HEADERS
   Athletes / Team pages
   ========================================================= */

.page-head {
  padding-top: 120px;
  padding-bottom: 70px;

  max-width: 1300px;

  border-bottom: 1px solid var(--line);
}

.page-head p:last-child {
  max-width: 650px;

  color: #aaa69d;
  font-size: 17px;
  line-height: 1.7;
}


/* =========================================================
   11. ATHLETES — ROTATING CAROUSEL
   ========================================================= */

.athlete-showcase {
  padding-top: 55px;
  overflow: hidden;
}


/* Heading above carousel */

.showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-width: 1180px;

  margin: 0 auto 25px;
}

.showcase-note {
  font-family: Georgia, serif;
  font-style: italic;

  color: #77736a;
  font-size: 14px;
}


/* Entire Carousel Area */

.athlete-carousel {
  position: relative;

  max-width: 1250px;
  height: 650px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* 3D Stage */

.carousel-stage {
  position: relative;

  width: min(100%, 1050px);
  height: 100%;

  perspective: 1400px;
}


/* =========================================================
   ATHLETE CARD SIZE

   width  = how wide each athlete is
   height = how tall each athlete is

   Example:
   width: 350px;
   height: 570px;
   ========================================================= */

.carousel-card {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 350px;
  height: 570px;

  overflow: hidden;

  background: #111;
  border: 1px solid #2b2a26;
  border-radius: 14px;

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);

  transform:
    translate(-50%, -50%)
    scale(0.72);

  opacity: 0;

  transition:
    transform 0.65s cubic-bezier(0.22, 0.8, 0.22, 1),
    opacity 0.5s ease,
    filter 0.5s ease;

  pointer-events: none;
}


/* Athlete Images */

.carousel-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  /* Default image positioning */
  object-position: center top;

  display: block;
}


/* =========================================================
   NJIT ATHLETE IMAGE POSITION

   CHANGE THIS if you need to move the NJIT photo.

   Example:
   center 5%  = higher
   center 15% = current
   center 30% = lower
   ========================================================= */

.carousel-card .njit-img {
  object-position: center 15%;
}


/* Dark gradient over bottom of cards */

.carousel-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      transparent 45%,
      rgba(0, 0, 0, 0.92) 100%
    );
}


/* Athlete Name / School */

.carousel-overlay {
  position: absolute;
  z-index: 2;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 28px 26px;
}

.carousel-overlay p {
  margin: 0 0 9px;

  font-size: 10px;
  letter-spacing: 1.8px;

  color: #d0cbb9;
}

.carousel-overlay h2 {
  margin: 0 0 8px;

  font-size: 30px;
  letter-spacing: -1px;
}

.carousel-overlay span {
  font-size: 12px;
  color: #aaa69d;
}


/* =========================================================
   CENTER ATHLETE
   ========================================================= */

.carousel-card.is-active {
  z-index: 4;

  opacity: 1;

  transform:
    translate(-50%, -50%)
    translateZ(80px)
    scale(1);

  pointer-events: auto;
}


/* =========================================================
   LEFT ATHLETE
   Change translateX to move card farther/closer
   ========================================================= */

.carousel-card.is-left {
  z-index: 3;

  opacity: 0.62;
  filter: brightness(0.58);

  transform:
    translate(-50%, -50%)
    translateX(-310px)
    rotateY(18deg)
    scale(0.82);
}


/* =========================================================
   RIGHT ATHLETE
   ========================================================= */

.carousel-card.is-right {
  z-index: 3;

  opacity: 0.62;
  filter: brightness(0.58);

  transform:
    translate(-50%, -50%)
    translateX(310px)
    rotateY(-18deg)
    scale(0.82);
}


/* Athlete hidden in back */

.carousel-card.is-back {
  z-index: 1;

  opacity: 0.15;
  filter: brightness(0.35);

  transform:
    translate(-50%, -50%)
    scale(0.66);
}


/* =========================================================
   CAROUSEL ARROWS
   ========================================================= */

.carousel-btn {
  position: absolute;
  z-index: 8;

  top: 50%;
  transform: translateY(-50%);

  width: 52px;
  height: 52px;

  border-radius: 50%;
  border: 1px solid #4a483f;

  background: rgba(9, 9, 9, 0.72);
  color: var(--cream);

  font-size: 22px;

  cursor: pointer;

  backdrop-filter: blur(10px);

  transition: 0.25s;
}

.carousel-btn:hover {
  background: var(--cream);
  color: #111;
}

.carousel-btn.prev {
  left: 0;
}

.carousel-btn.next {
  right: 0;
}


/* Carousel indicators */

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;

  margin-top: 8px;
}

.carousel-dots button {
  width: 28px;
  height: 3px;

  padding: 0;
  border: 0;

  background: #34332f;

  cursor: pointer;

  transition: 0.3s;
}

.carousel-dots button.active {
  width: 48px;
  background: var(--cream);
}


/* =========================================================
   12. TEAM / FOUNDER PAGE
   ========================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 280px);
  gap: 28px;

  padding-top: 60px;justify-content: center;
}


/* =========================================================
   TEAM IMAGE BOX

   Change height if you want taller/shorter team pictures.
   ========================================================= */

.portrait {
  height: 460px;

  background: #121210;
  border: 1px solid #292824;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* =========================================================
   FOUNDER / TEAM IMAGE

   object-fit: cover = fills entire box but crops photo
   object-fit: contain = shows entire photo

   object-position changes where crop happens.
   ========================================================= */

.portrait img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 20%;
}


/* =========================================================
   OPTIONAL — FOUNDER PHOTO ONLY

   Add class="founder-photo" to your founder <img>.

   Example:
   <img src="assets/founder.jpg" class="founder-photo">

   Then change the settings below without affecting coworkers.
   ========================================================= */

.founder-photo {
  object-fit: cover !important;

  /* Change this to move your picture up/down */
  object-position: center 20% !important;
}


/* Empty coworker cards */

.placeholder .portrait span {
  color: #4f4d47;

  font-size: 12px;
  letter-spacing: 2px;
}


/* Team member information */

.person h2 {
  font-size: 28px;
  letter-spacing: -1px;
}

.person > p:last-child {
  color: #8f8c84;
}

.team-note {
  max-width: 1000px;

  border-top: 1px solid var(--line);
}

.team-note p {
  color: #a8a49a;

  font-size: 18px;
  line-height: 1.7;
}


/* =========================================================
   13. OLD ATHLETE GRID
   Keep this only if another page still uses it
   ========================================================= */

.athlete-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  padding-top: 55px;
}

.athlete-card {
  background: #111;

  border: 1px solid #20201e;

  overflow: hidden;
}

.athlete-card.featured {
  grid-column: span 2;
}

.athlete-card img {
  width: 100%;
  height: 510px;

  object-fit: cover;
  object-position: center 20%;

  display: block;
}

.athlete-card.featured img {
  height: 650px;
}

.athlete-card div {
  padding: 24px;
}

.athlete-card div p {
  font-size: 10px;
  letter-spacing: 1.7px;

  color: #9c988d;
}

.athlete-card h2 {
  font-size: 28px;
  letter-spacing: -1px;
}

.athlete-card span {
  font-size: 13px;
  color: #7f7d76;
}


/* =========================================================
   14. FOOTER
   ========================================================= */

footer {
  padding: 50px 7vw;

  border-top: 1px solid var(--line);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;

  color: #69675f;

  font-size: 11px;
  letter-spacing: 1px;
}

footer img {
  width: 110px;
}

footer p:nth-child(2) {
  text-align: center;
}

footer p:last-child {
  text-align: right;
}


/* =========================================================
   15. TABLET / MOBILE
   Screens smaller than 850px
   ========================================================= */

@media (max-width: 850px) {

  /* NAVIGATION */

  .nav {
    padding: 0 20px;
  }

  .brand span {
    display: none;
  }

  .nav nav {
    gap: 15px;
  }

  .nav nav a:nth-child(2),
  .nav nav a:nth-child(3) {
    display: none;
  }


  /* HOMEPAGE */

  .hero-copy {
    left: 24px;
    right: 24px;
  }

  .hero h1,
  .page-head h1 {
    letter-spacing: -2px;
  }


  /* SECTIONS */

  .section {
    padding: 75px 24px;
  }

  .split,
  .feature {
    grid-template-columns: 1fr;
  }

  .feature-img {
    height: 480px;
  }


  /* BOLD PILLARS */

  .pillar-grid {
    grid-template-columns: 1fr 1fr;
  }


  /* SERVICES */

  .services-intro {
    grid-template-columns: 1fr;
  }

  .service-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-grid article:nth-child(2) {
    border-right: 0;
  }


  /* TEAM */

  .team-grid {
    grid-template-columns: 1fr;
  }


  /* OLD ATHLETE GRID */

  .athlete-grid {
    grid-template-columns: 1fr;
  }

  .athlete-card.featured {
    grid-column: auto;
  }

  .athlete-card.featured img,
  .athlete-card img {
    height: 500px;
  }


  /* ATHLETE CAROUSEL */

  .showcase-heading {
    padding: 0;
  }

  .athlete-carousel {
    height: 590px;
  }

  .carousel-card {
    width: min(76vw, 340px);
    height: 535px;
  }

  .carousel-card.is-left {
    transform:
      translate(-50%, -50%)
      translateX(-62vw)
      scale(0.75);
  }

  .carousel-card.is-right {
    transform:
      translate(-50%, -50%)
      translateX(62vw)
      scale(0.75);
  }

  .carousel-btn {
    width: 44px;
    height: 44px;
  }

  .carousel-btn.prev {
    left: -10px;
  }

  .carousel-btn.next {
    right: -10px;
  }


  /* FOOTER */

  footer {
    grid-template-columns: 1fr;

    gap: 18px;

    text-align: left;
  }

  footer p:nth-child(2),
  footer p:last-child {
    text-align: left;
  }
}


/* =========================================================
   16. SMALL PHONES
   ========================================================= */

@media (max-width: 520px) {

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-grid article {
    margin-right: 0;

    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}