/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: #000;
  color: #fff;
  background-image: url('./images/bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #000;
}

h1, h2, h3, h4 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h5 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  font-style: normal;
  text-align: center;
}

header .logo img {
  max-height: 100px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

nav a {
  font-size: 24px;
  padding: 10px;
  color: white;
  transition: color 0.3s, background-color 0.3s;
}

nav a:hover {
  color: #f1f1f1;
  background-color: #444;
}

nav a.active {
  color: #f1f1f1;
  background-color: #666;
}

.nav-link {
  font-family: "Bebas Neue", sans-serif; font-weight: bold; /* Keep navigation clean and modern */
}

.neon-text {
  font-family: 'Sacramento', cursive;
  color: #ffd700; /* Yellow color */
  font-size: 48px;
  text-shadow: 
    0 0 2px #ffd700,
    0 0 4px #ffd700,
    0 0 8px #ffcc33,
    0 0 12px #ffcc33; /* Softer and shorter glow distances */
}


/* Style for the intro section */
.intro {
  width: 45%;        /* Set the width to 500px */
  margin: 0 auto;      /* Center it horizontally */
  text-align: center;  /* Align text in the center */
}


/* Container for the intro content */
.intro-container {
  display: block;
  background-color: rgba(240, 240, 240, 0.4); /* Light grey background with transparency */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}


/* Separator between the two sections */
.intro-separator {
  width: 90%; /* Adjust as needed */
  height: 2px; /* Thin black line */
  background-color: black;
  margin: 20px auto; /* Center the separator and add vertical spacing */
}

.intro-contact {
  margin-top: 20px; /* Add spacing above the contact section */
  text-align: center; /* Optional: Center-align text */
  line-height: 0.5;
}

/* Contact Table */
.contact-table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;
}

.contact-info {
  padding: 10px;
  font-size: 1.1em;
}

.contact-link {
  text-decoration: none;
  color: white; /* White email link */
  font-weight: bold;
}

.contact-link:hover {
  color: #ff6600; /* Hover effect */
  text-decoration: underline;
}

/* Responsive styling for mobile devices */
@media (max-width: 600px) {
  .intro-container {
    flex-direction: column; /* Stack the left and right sections on small screens */
  }

  .intro-left, .intro-right {
    width: 100%; /* Full width on mobile */
    padding: 10px 0;
  }
}

/* Video Gallery Section */
.media-samples {
  padding: 20px;
  margin: 0 auto; /* Ensure the grid is centered */
  padding: 0; /* Remove any extra padding */
}

.video-gallery {
  text-align: center;
}

.video-gallery h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #fff;
}

.video-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  flex-wrap: wrap;  /* Ensures videos wrap on smaller screens */
}

.video {
  flex: 1 1 23%;  /* Each video takes up about 23% of the container width */
  min-width: 250px;  /* Ensures videos don't get too small */
  background-color: #222;
  padding: 10px;
  border-radius: 10px;
}

iframe {
  width: 100%;
  height: 200px;  /* Fixed height, adjust if needed */
  border-radius: 10px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Four equal columns */
  gap: 20px; /* Space between columns */
  align-items: start; /* Ensures items align at the top of the grid */
  margin: 0 auto; /* Ensure the grid is centered */
  padding: 0; /* Remove any extra padding */
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  aspect-ratio: 16/9; /* Ensures consistent aspect ratio */
  padding-top: 56.25%; /* Maintain 16:9 aspect ratio */
  object-fit: cover; /* Ensures the video fits well within the container */
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video fits well within the container */
  aspect-ratio: 16/9; /* Ensures consistent aspect ratio */
}

.video-title {
  font-size: 1.0em; /* Slightly larger font size for the title */
  font-weight: bold; /* Ensures the title is bold */
  margin: 10px 0; /* Adds spacing around the title */
  text-align: center; /* Centers the title */
}

.video-description {
  font-size: 0.7em; /* Smaller font for the description */
  font-weight: normal; /* Ensures the description is not bold */
  text-align: center; /* Centers the description */
  margin: 5px 0 15px; /* Adds some spacing below the description */
}
*/

/* Common styles for all columns */
.column-header {
  color: #ffffff;
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
  font-family: 'Bebas Neue', sans-serif;
}

/* Title for each column */
.column-title {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px; /* Space between title and videos */
}

/* Unique background colors */
.pop-column {
  background-color: #FF6347; /* Tomato Red for Pop */
}

.rock-column {
  background-color: #4682B4; /* Steel Blue for Rock */
}

.soul-column {
  background-color: #9370DB; /* Medium Purple for R&B/Soul */
}

.funk-column {
  background-color: #D4AF37; /* Gold for Funk/Misc */
}

/* Main Content */
main {
  padding: 40px;
}

.samples-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;  /* Align text in the center */
}

.samples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 columns */
  gap: 20px;
  grid-template-rows: repeat(3, auto); /* 3 rows */
  padding: 20px;
}

.sample {
  background-color: #222;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

    .audio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      justify-items: center; /* Center audio samples */
    }

    .audio-row {
      background-color: var(--column-color);
      padding: 10px;
      border-radius: 8px;
    }
    .column-1 { --column-color: #FF6347; } /* Tomato Red for Pop */
    .column-2 { --column-color: #4682B4; } /* Steel Blue for Rock */
    .column-3 { --column-color: #9370DB; } /* Medium Purple for R&B/Soul */
    .column-4 { --column-color: #D4AF37; } /* Gold for Funk/Misc */
    .column-5 { --column-color: #355c7d; } /* Deep Blue */
    .column-6 { --column-color: #99b898; } /* Soft Green */
    .column-header {
      font-family: 'Bebas Neue', sans-serif;
      text-align: center;
    }

/* Ensure the parent container (sample) is consistent */
.sample {
  width: 200px; /* or use a fixed width like 300px, based on your needs */
  max-width: 200px;  /* Set a max width to avoid large screens pushing it out of view */
  margin: 10px auto; /* Center the content */
  padding: 10px;
  box-sizing: border-box; /* Ensure padding doesn't affect the width */
  text-align: center;
}

/* Ensure the iframe itself is responsive and fits its parent */
iframe {
  width: 100%; /* Make iframe full width of parent */
  height: 166px; /* Consistent height */
  max-width: 100%; /* Ensure it doesn't exceed parent width */
}

/* Optional: Add some responsiveness to prevent squeezing on small screens */
@media (max-width: 768px) {
  .sample {
    width: 100%; /* Allow the container to expand fully on smaller screens */
  }
}

    .sample p:first-of-type {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .sample p:last-of-type {
      font-size: 12px;
    }

audio {
  width: 100%;
  max-width: 300px;
  margin-bottom: 10px;
}

.sample-description {
  font-size: 16px;
  color: #bbb;
  text-align: center;
}

.sample-description h3 {
  font-size: 10px;
  margin-bottom: 10px;
  color: #fff;
}

.bio-container {
  display: flex;
  justify-content: center;
  align-items: top;
  max-width: 1200px;
  margin: 0 auto;
}

.bio-image {
  flex: 1;
  padding-right: 20px;
  text-align: center;
}

.bio-photo {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.bio-text {
  flex: 2;
  max-width: 700px;
}

.bio-text h1 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #f1f1f1;
}

/*
.bio-text p {
  font-size: 18px;
  color: #bbb;
  line-height: 1.6;
  margin-bottom: 15px;
}
*/

footer {
  background-color: #000;
  color: #888;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

/*
img, iframe {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
}
*/

.video-container, .audio-container {
  width: 100%;
}

.video-container {
  aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
}


/* For tablets (landscape or portrait) */
@media (max-width: 1024px) {
  .video-grid, .audio-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Reduce column size */
  }

  .video-container, .audio-container {
    padding: 10px; /* Add padding for better spacing */
  }

  iframe {
    height: 180px; /* Slightly smaller video player */
  }
}

/* For smaller tablets and large phones */
@media (max-width: 768px) {
  .video-grid, .audio-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Stack grids with smaller widths */
  }

  .video-container, .audio-container {
    padding: 5px;
  }

  .video-container {
    aspect-ratio: 4 / 3;
    min-height: 220px; /* Ensure play button remains accessible */
  }

  iframe {
    height: 220px; /* Further reduce iframe height */
  }

  .neon-text {
    font-size: 36px; /* Shrink large fonts */
  }
}

/* For mobile phones (portrait orientation) */
@media (max-width: 480px) {
  .video-grid, .audio-grid {
    grid-template-columns: 1fr; /* Single column */
  }

  .video-container, .audio-container {
    margin: 0 auto;
    padding: 0;    
  }

  .video-container {
    aspect-ratio: 3 / 2;
    min-height: 200px; /* Larger height for phones */
    margin: 0 auto;
  }

  iframe {
    height: 200px; /* Smallest iframe height */
  }

  .section-title a {
    font-size: 16px; /* Adjust clickable section title font size */
  }

  .intro {
    width: 90%; /* Allow intro text to span almost full width */
  }

  .neon-text {
    font-size: 28px; /* Further reduce large fonts */
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px; /* Reduce base font size */
  }

  h1, h2, h3 {
    font-size: 1.5rem; /* Shrink headings */
  }

  .nav-link {
    font-size: 18px; /* Adjust navigation link size */
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px; /* Further reduce base font size */
  }

  h1, h2, h3 {
    font-size: 1.25rem;
  }

  .intro {
    font-size: 14px; /* Adjust intro text size */
  }
  img {
    max-width: 75%;
    max-height: 75%;
    height: auto; /* Maintain aspect ratio */
  }

}