/* outer wrapper is just the tear-section container */
.updates-shell.tear-section.dark-section { 
  position: relative; 
  z-index: 5; 
  margin-bottom: 10px; /* reduced from inherited calc for tighter spacing */
  padding-block: 30px; /* reduced from inherited for tighter top and bottom */
  overflow: hidden; /* Prevent any content from causing scrollbars */
}



/* inner content owns the parchment; no top padding; bottom padding comes from global */
.updates-shell.dark-section .section-shell{
  position: relative;

  padding-block: 10px; /* further reduced to override inherited dark-section padding */
  z-index: 200;

}
/* Updates Header */
.updates-header {
  max-width: min(1152px, calc(100vw - 40px)); /* Responsive max-width */
  margin: 20px auto;
  box-sizing: border-box;
}

.updates-container {
  margin-top: 25px; /* Reduced from 50px to bring content closer to h2 */
  display: flex;
  flex-direction: column;
  gap: 6px;
}



.updates-section{
  position: relative;
  width: 100%;
  background-color: transparent;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Safety: ensure the updates section never exceeds the viewport width */
.updates-section,
.updates-content {
  box-sizing: border-box;
  max-width: 100vw; /* don't allow children to push it wider than viewport */
  overflow-x: hidden; /* hide any accidental horizontal overflow */
}

/* Content wrapper to center the updates content */
.updates-content {
  /* Use box-sizing and a max-width so child viewport-based widths don't cause parent overflow. */
  box-sizing: border-box;
  width: 100%;
  max-width: min(1152px, calc(100vw - 40px)); /* Responsive max-width */
  margin: 0 auto;
  /* Move the horizontal padding inside the content so the outer section doesn't add extra width */
  padding-inline: 20px;
}

.playlist-section,
.live-section,
.secondary-section {
  display: flex;
  flex-direction: column;
  /* Add a gap so stacked children (grid + button) have breathing room */
  gap: clamp(12px, 2vw, 28px);
}

.playlist-section .btn-more,
.secondary-section .btn-more {
  align-self: center;
  margin: 2px auto 8px auto;
  max-width: 200px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Ensure the secondary-section's action button keeps a clear distance from the grid above */
.secondary-section .btn-more { margin-top: -8px; }

.playlist-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
  
}

.playlist-grid .update-card {
  flex: 1;
  min-width: 0;
  max-width: 25%;
}

.playlist-carousel {
  position: relative;
  display: none; /* Hide by default, only show if there are more than 4 videos */
}

/* Secondary grid layout */
.secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
  align-items: stretch;
  height: 280px;
  padding-bottom: 20px;
  
}

.live-card-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.live-card-container .update-card {
  height: 280px;
  margin-bottom: 8px;
  width: 100%;
  max-width: none !important;
}

.live-card-container .carousel-bar {
  display: flex;
  justify-content: center;
  margin: 0;
  height: 32px;
}

.live-card-container .btn-more {
  width: 100%;
  max-width: none;
}

.recent-updates {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  grid-column: span 2;
}

.recent-updates .update-card {
  flex: 1;
  min-width: 0;
}

.social-media-grid {
  border-radius: 0;
  
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
  overflow: hidden;
  height: 283px;
  box-sizing: border-box;
}

.social-media-grid:hover {
  border-color: var(--gold);
}

.social-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  width: 100%;
  gap: 0;
  
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--dark-navy);
  border-radius: 0;
  background-color: var(--light-navy);
  transition: all 0.3s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.social-icon:hover {
  background-color: var(--gold);

}

.social-icon img {
  width: 36px;
  height: 36px;
  border: 2px solid var(--dark-navy);
  transition: filter 0.3s ease;
}

.social-icon svg {
  width: 24px;
  height: 24px;
  transition: fill 0.3s ease;

}





/* Keep the live card within the rail - responsive width */
.live-section .update-card{ width: 100%; max-width: min(320px, calc(100vw - 40px)); }
.live-section .card-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.live-section { display: flex; flex-direction: column; border: none; }
.live-section .btn-more { margin-top: auto; }




/* ---- Cards ---- */
.update-card{
  background: var(--secondary-color);
  border: 2px solid var(--light-navy);
  border-radius: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 280px;
  transition: border-color .2s ease, transform .2s ease;
}
.update-card:hover{ border-color: var(--gold); transform: translateY(-2px); }

.card-media{ position: relative; display:block; }
.card-media img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.card-body{ padding:12px; display:flex; flex-direction:column; gap:.35rem; flex: 1; background-color: var(--secondary-color); }
.card-meta{ margin:0; font-size:.85rem; color: var(--off-white); opacity: 0.7; text-transform: uppercase; letter-spacing:.03em; }
.card-title{ margin:0; font-size:1.05rem; font-weight:600; color: var(--off-white); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.card-title a{ color: var(--off-white); text-decoration: none; }
.card-title a:hover{ color: var(--gold); }

/* LIVE badge when JS adds .is-live */
.update-card.is-live .card-media::after{
  content: "LIVE";
  position: absolute; top: 8px; left: 8px;
  padding: .25em .5em; font-weight: 800; font-size: .75rem; line-height: 1;
  color: #fff; background: #e53935; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ---- Carousel ---- */
.carousel { position: relative; }

.carousel-track {
  flex: none;
}

/* Top bar with arrows */
.carousel-bar{
  display:flex; justify-content: flex-end; align-items: stretch;
  margin: .5rem 0 0;
  height: 32px;
}

/* Constrain live carousel bar to match card width - responsive */
.live-section .carousel-bar {
  max-width: min(320px, calc(100vw - 40px));
}
.carousel-nav { display:flex; gap:.4rem; margin: 0 10px 0 10px; height: 100%; }
.car-btn{
  width:28px; height: 100%; border:1px solid var(--secondary-color); border-radius:0;
  background: var(--secondary-color); color: transparent; font-weight:800;
  cursor:pointer; line-height:1; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.car-btn:disabled{ opacity:.45; cursor:default; }

/* Arrow styles for carousel buttons */
.car-btn::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--off-white);
  border-right: 2px solid var(--off-white);
  transition: all 0.3s ease;
}

.car-btn.prev::after {
  transform: rotate(-135deg);
}

.car-btn.next::after {
  transform: rotate(45deg);
}

.car-btn:hover::after {
  border-color: var(--gold);
}

.car-btn:disabled::after {
  border-color: rgba(255, 241, 217, 0.45);
}

/* Let the rail fill its column */
.carousel-track{
  max-width: 100%;         /* was 1162px – remove that cap */
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, calc(100vw - 40px));  /* Responsive width that respects viewport */
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Ensure proper containment to prevent page-wide overflow */
  contain: layout;
}
.carousel-track::-webkit-scrollbar{ display:none; }


/* Cards snap to start */
.carousel-track .update-card{ scroll-snap-align: start; }

/* Edge fades */

.carousel::after{ right:0; transform: scaleX(-1); }
.carousel::before{ left:0; }

/* ---- Responsive ---- */
/* Large Tablet/Small Desktop and below */
@media (max-width: 1024px){
  .updates-container{ gap: 30px; }
  .playlist-grid{ flex-wrap: wrap; }
  .playlist-grid .update-card { max-width: 48%; }
  
  .secondary-grid { 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto; /* Remove fixed height at tablet sizes */
    align-items: stretch; /* Make both bottom cards the same height */
  }
  /* Top row: Blog posts/Recent updates span full width */
  .recent-updates { 
    grid-column: 1 / -1; 
    grid-row: 1;
    /* Ensure proper text display */
    flex-direction: row; /* Keep horizontal layout */
    gap: clamp(16px, 3vw, 32px); /* Maintain proper spacing */
  }
  .recent-updates .update-card {
    flex: 1; /* Equal width distribution */
    height: auto; /* Allow natural height */
    min-height: auto; /* Remove minimum height constraint */
  }
  /* Bottom row: Live stream (left) and Social media (right) */
  .live-card-container { 
    grid-column: 1; 
    grid-row: 2; 
    display: flex;
    flex-direction: column;
  }
  .social-media-grid { 
    grid-column: 2; 
    grid-row: 2; 
    height: 100%; /* Fill the full grid cell height */
    display: flex;
    flex-direction: column;
  }
  
  .live-card-container .update-card {
    height: 100%; /* Fill the container height */
    flex: 1; /* Expand to fill available space */
  }
  
  /* Ensure social media icons maintain proper grid layout at tablet sizes */
  .social-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: 100%;
    min-height: 240px; /* Ensure enough space for 3 rows of icons within the card */
    gap: 10px; /* Add some spacing between icons */
  }
}

/* Mobile and below */
@media (max-width: 768px){
  .playlist-grid .update-card { 
    max-width: 100%; 
    min-width: 0; /* Allow shrinking */
  }
  
  .secondary-grid { 
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: clamp(8px, 2vw, 16px); /* Responsive gap */
  }
  .live-card-container { grid-column: 1; grid-row: 1; }
  .recent-updates { 
    grid-column: 1; 
    grid-row: 2; 
    flex-direction: column; 
  }
  .social-media-grid { grid-column: 1; grid-row: 3; }

  /* Mobile: show only the first playlist (YouTube) video to reduce vertical clutter */
  .playlist-grid .update-card { display: block; }
  
  /* Ensure carousel tracks don't cause overflow on mobile */
  .carousel-track {
    grid-auto-columns: min(280px, calc(100vw - 60px)); /* Smaller cards on mobile */
    gap: clamp(8px, 2vw, 16px); /* Responsive gap */
  }
  .playlist-grid .update-card:nth-child(n+2) { display: none; }

  /* Mobile: ensure only one live card is visible (keep first) */
  .live-card-container .update-card { display: block; }
  .live-card-container .update-card:nth-child(n+2) { display: none; }

  /* Mobile: show only the most recent update in the recent-updates area */
  .recent-updates .update-card { display: block; }
  .recent-updates .update-card:nth-child(n+2) { display: none; }

  /* Adjust secondary grid height to auto when items stack */
  .secondary-grid { height: auto; padding-bottom: 8px; }

  /* Constrain any carousel to single-item width on mobile */
  .carousel-track { grid-auto-columns: 100%; }

  /* Mobile-specific playlist section reordering */
  .playlist-section {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove space between items */
  }
  
  /* Move YouTube Updates button below the playlist card */
  .playlist-section .btn-more {
    order: 3; /* Move to bottom */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 2px;
    width: 100%; /* Make button same width as playlist card */
    max-width: none; /* Remove max-width constraint */
  }
  
  /* Move carousel navigation above the playlist card */
  .playlist-section .carousel-bar {
    order: 1; /* Move to top */
    margin-bottom: 12px;
    justify-content: center; /* Center the nav arrows */
  }
  
  /* Playlist carousel comes in the middle */
  .playlist-section .playlist-carousel {
    order: 2;
  }
  
  /* Make navigation arrows smaller on mobile */
  .playlist-section .car-btn {
    width: 20px; /* Reduced from 28px */
    height: 20px; /* Reduced height */
    border-width: 1px;
  }
  
  .playlist-section .car-btn::after {
    width: 6px; /* Reduced from 8px */
    height: 6px; /* Reduced from 8px */
    border-width: 1.5px; /* Slightly thinner borders */
  }
  
  /* Adjust carousel bar height for smaller buttons */
  .playlist-section .carousel-bar {
    height: 24px; /* Reduced from 32px */
    margin-bottom: 12px;
  }
  
  /* Adjust carousel nav spacing for smaller buttons */
  .playlist-section .carousel-nav {
    gap: 0.3rem; /* Slightly smaller gap */
    margin: 0 8px; /* Reduced margin */
  }
  
  /* Make "See all updates" button same width as content above */
  .secondary-section .btn-more {
    width: 100%; /* Make button same width as secondary grid */
    max-width: none; /* Remove max-width constraint */
  }
}

/* ---- Button Styles ---- */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: var(--off-white);
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  transition: all 0.3s ease;
  border: 2px solid #f39a4a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  padding: 6px 12px;
  width: 100%;
  max-width: 320px;
}
.btn-more:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 193, 118, 0.2), transparent);
  transition: left 0.7s ease;
}
.btn-more:hover {
  background-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 193, 118, 0.2);
}
.btn-more:hover:before {
  left: 100%;
}

/* torn edges as siblings so they do not affect text AA */
.updates-tear {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url('../assets/backgrounds/xJ2UjemaUO2.jpg');
  background-repeat: repeat;
  background-size: 200px;
  mask-image: url('../assets/images/tear.svg');
  mask-repeat: repeat-x;
  mask-size: auto 100%;
  mask-position: center;
  z-index: 0;
}

.updates-tear--bottom { 
  bottom: -40px; 
  transform: scaleY(-1);
}

/* Prevent any unwanted borders that might appear in dev tools */
.updates-container,
.playlist-section,
.live-section {
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
}