/* Global Styles */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #264653;
  background-color: #fff;
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}
h1, h2, h3 {
  margin: 0 0 10px;
  font-weight: 600;
}
p {
  margin: 0 0 20px;
}
section {
  padding: 60px 20px;
}
/* Headings for each section */
section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  border-bottom: 2px solid #e76f51;
  display: inline-block;
  padding-bottom: 10px;
}

/* Container for content sections (except hero) */
.container {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* Hero Section */
#hero {
  position: relative;
  width: 100vw;
  height: 80vh;
  overflow: hidden;
}
#hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: #e9c46a;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}
.hero-text h2 {
  font-size: 1.5rem;
}

/* The Life Cycle Timeline */
.infographic {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 40px auto;
}
.timeline {
  border-left: 2px solid #e76f51;
  padding-left: 20px;
}
.timeline-item {
  position: relative;
  margin-bottom: 40px;
}
.timeline-content {
  padding-left: 10px;
}
.timeline-content h3 {
  margin-top: 0;
  color: #264653;
}
.timeline-content p {
  margin: 5px 0;
  color: #264653;
}

/* Case Study: the Chum Salmon */
.case-study-wrapper {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20px;
}
.case-study-content p {
  padding: 10px;
  margin-bottom: 15px;
  color: #264653;
}
.case-study-video {
  position: sticky;
  top: calc(50vh - 200px); /* approximate offset for a ~400px tall video */
  align-self: center;
}
.case-study-video iframe {
  width: 100%;
  display: block;
}

/* Filming Location (map) */
.map-container {
  margin: 20px auto;
}

/* Types of Salmon Found in BC */
.types-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.type-row {
  display: flex;
  align-items: flex-start; /* ensure the image’s 16:9 ratio is preserved */
  gap: 20px;
}
.type-row .type-image {
  flex: 0 0 66%;
  /* Use modern aspect-ratio to lock the container to 16:9 */
  aspect-ratio: 16 / 9; 
  overflow: hidden;
  border-radius: 14px; /* keep your corner rounding */
  position: relative;  /* so child absolutely positions if needed */
}

.type-row .type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No need for absolute positioning if aspect-ratio is used. */
}
.type-row .type-info {
  flex: 0 0 34%;
  color: black;
  padding: 15px;
  border-radius: 14px;
  box-sizing: border-box;
}
.type-row .type-info ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.type-row.reverse {
  flex-direction: row-reverse;
}

/* The Significance Section */
.significance-list {
  list-style-type: disc;
  padding-left: 20px;
  margin: 20px 0;
}
.significance-list li {
  margin-bottom: 10px;
  color: #264653;
}

/* Sources Section */
#sources a {
  color: #2a9d8f;
  text-decoration: none;
  word-break: break-all; /* if you want to handle long URLs gracefully */
}
#sources a:hover {
  text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2.5rem;
  }
  .hero-text h2 {
    font-size: 1.25rem;
  }
  .case-study-wrapper {
    grid-template-columns: 1fr;
  }
  .case-study-video {
    position: static;
    top: auto;
    margin-top: 20px;
  }
  .type-row {
    flex-direction: column;
  }
  .type-row .type-image,
  .type-row .type-info {
    flex: 1 1 100%;
  }
}