/* Event Item Redesign Styles */

.EventContainer { 
  padding-top: 24px; 
}

.EventBack { 
  margin-bottom: 24px; 
}

.EventBack a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brand-700);
  transition: color 0.2s ease;
}

.EventBack a:hover {
  color: var(--brand);
}

.EventHero { 
  position: relative; 
  margin: 0 0 32px; 
  border-radius: 20px; 
  overflow: hidden; 
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.05);
}

.EventHero--image .EventHero__media { 
  position: relative; 
  height: 320px; 
  background: #111827;
}

.EventHero__media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  background: #111827;
}

.EventHero__gradient { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.0) 60%); 
}

.EventHero__content { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  padding: 32px 24px; 
  z-index: 1; 
  color: #fff; 
}

.EventHero__content--split { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
}

.EventHero__left { 
  flex: 1; 
}

.EventHero__right { 
  margin-left: 16px; 
}

.EventTitle { 
  font-size: clamp(1.8rem, 4vw, 2.6rem); 
  line-height: 1.15; 
  margin: 8px 0 8px; 
  color: #fff; 
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(0,0,0,.35); 
}

.EventTitle--invert { 
  color: #fff; 
  text-shadow: 0 2px 16px rgba(0,0,0,.35); 
}

.EventHero__tags { 
  display: flex; 
  gap: 10px; 
  margin-bottom: 12px; 
  flex-wrap: wrap; 
}

.EventHero__meta { 
  margin: 12px 0; 
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.HeroMetaItem { 
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem; 
  margin-bottom: 4px; 
  color: rgba(255,255,255,0.9);
}

.HeroMetaItem svg {
  width: 18px;
  height: 18px;
}

.HeroPills { 
  display: flex; 
  gap: 12px; 
  margin-top: 12px; 
  flex-wrap: wrap; 
}

.NowLine { 
  padding: 10px 16px; 
  border-radius: 999px; 
  background: rgba(255,255,255,.15); 
  color: #fff; 
  font-size: .9rem; 
  backdrop-filter: blur(10px); 
  border: 1px solid rgba(255,255,255,.2); 
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.NowLine--live { 
  background: rgba(34, 197, 94, .2); 
  color: #fff; 
}

.NowLine__time {
  font-weight: 500;
  opacity: 0.9;
}

.StatusBadge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .02em;
  text-transform: capitalize; /* Capitalize first letter of each word */
  background: var(--surface);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.StatusBadge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-300);
}

.StatusBadge--planned {
  background: #e8f1ff;
  color: #11468f;
  border-color: #c8dcff;
}

.StatusBadge--ongoing {
  background: #d1fae3;
  color: #0c6d3a;
  border-color: #a1f0cc;
}

.StatusBadge--finished {
  background: #e5e7eb;
  color: #374151;
  border-color: #d1d5db;
}

.StatusBadge--canceled {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* Additional tag styling for type, category, age */
.Tag, .Tag--ghost, .Tag--inverted {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--brand-700);
  border: 1px solid var(--brand-200);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  text-decoration: none;
}

.Tag:hover, .Tag--ghost:hover, .Tag--inverted:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-300);
}

.Tag--ghost {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, .1);
}

.Tag--inverted {
  color: #fff;
  background: rgba(14, 42, 71, .7);
  border-color: rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
}

.Tag--accent {
  background: var(--accent);
  color: #161616;
  border-color: color-mix(in oklab, var(--accent) 50%, black);
}

/* Overview section */
.EventOverview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.InfoCard { 
  background: var(--surface); 
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px; 
  padding: 20px; 
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.InfoCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.InfoCard h3 { 
  font-size: .9rem; 
  font-weight: 600; 
  color: var(--muted); 
  margin: 0 0 10px; 
  text-transform: uppercase; 
  letter-spacing: .02em; 
  display: flex;
  align-items: center;
  gap: 8px;
}

.InfoCard__content { 
  font-weight: 500; 
  color: var(--text);
  line-height: 1.5;
}

.InfoCard__content .muted {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
}

/* Section styling */
.EventSection { 
  margin-bottom: 40px; 
}

.EventSection__head { 
  margin-bottom: 20px; 
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.EventSection__head h2 { 
  font-size: 1.4rem; 
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.EventSection__head h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}

/* Timeline */
.Timeline { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
}

.TimelineRow { 
  display: flex; 
  gap: 20px; 
}

.TimelineDate { 
  min-width: 120px; 
  padding: 16px; 
  background: var(--brand); 
  color: white;
  border-radius: 12px; 
  font-weight: 600; 
  align-self: flex-start; 
  text-align: center;
}

.TimelineItems { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.TimelineItem { 
  display: flex; 
  gap: 16px; 
  padding: 16px; 
  background: var(--surface); 
  border-radius: 12px; 
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}

.TimelineItem:hover {
  transform: translateX(4px);
}

.TimelineTime { 
  min-width: 80px; 
  font-weight: 600; 
  align-self: flex-start; 
  color: var(--brand-700);
}

.TimelineText { 
  flex: 1; 
  color: var(--text);
}

/* Weights section */
.WeightsContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.WeightCategoryContainer {
  margin-bottom: 0;
}

.WeightDivision {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.WeightDivision h4 {
  font-size: 1.1rem;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.WeightDivision h4 svg {
  width: 20px;
  height: 20px;
}

.WeightCategoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.TeamCompositionText {
  padding: 12px 0;
  line-height: 1.6;
  color: var(--text);
}

.TeamCompositionText p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.WeightCategoryItem {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--brand-50);
  border-radius: 12px;
  border: 1px solid var(--brand-200);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  text-align: center;
  min-height: 50px;
  font-weight: 600;
  color: var(--brand-700);
  min-width: 0; /* Allows flex item to shrink below content size */
  overflow: hidden;
}

.WeightCategoryItem:hover {
  background: var(--brand-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--brand-300);
}

.WeightCategoryLabel {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-700);
  margin: 0;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
  line-height: 1.3;
  width: 100%;
}

/* Fallback for single weight categories (if not using JSON structure) */
.WeightCategoryContainer:not(.has-division) {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.WeightCategoryContainer:not(.has-division) .WeightCategoryItem {
  padding: 12px 18px;
  background: var(--brand-50);
  border-radius: 12px;
  border: 1px solid var(--brand-200);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  color: var(--text);
  text-align: left;
  min-height: auto;
  min-width: 0;
  overflow: hidden;
}

.WeightCategoryContainer:not(.has-division) .WeightCategoryItem:hover {
  background: var(--brand-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--brand-300);
}

.WeightCategoryContainer:not(.has-division) .WeightCategoryLabel {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
  line-height: 1.3;
}

.Tag--inverted { 
  color: #fff; 
  background: rgba(255,255,255,.15); 
  border-color: rgba(255,255,255,.2); 
  backdrop-filter: blur(10px); 
}

/* Streams section */
.StreamGrid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 20px; 
  margin-bottom: 16px; 
}
.StreamCard { 
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px; 
  overflow: hidden; 
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.StreamCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.Video iframe { 
  width: 100%; 
  aspect-ratio: 16/9; 
  display: block; 
}
.VideoMeta { 
  padding: 16px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.VideoTitle { 
  font-weight: 500; 
  margin-right: 8px; 
  color: var(--text);
}
.VideoOpenBtn { 
  white-space: nowrap; 
  font-weight: 600;
  color: var(--brand-700);
}

.StreamList { 
  padding-left: 20px; 
}
.StreamList a { 
  display: block; 
  margin-bottom: 12px; 
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.StreamList a:hover {
  background: #f8fafc;
  border-color: var(--brand-200);
  color: var(--brand-700);
}

/* Cards */
.Card { 
  background: var(--surface); 
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px; 
  padding: 24px; 
  box-shadow: var(--shadow-sm);
}
.Card h3 { 
  font-size: 1.1rem; 
  margin: 0 0 16px; 
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pills */
.Pill { 
  display: inline-block; 
  padding: 7px 14px; 
  border-radius: 999px; 
  font-size: .85rem; 
  font-weight: 600;
  border: 1px solid transparent;
}
.Pill--ok { 
  background: #d1fae3; 
  color: #0c6d3a; 
}
.Pill--muted { 
  background: #f3f4f6; 
  color: #6b7280; 
}

/* Map container styles */
.MapContainer { 
  position: relative; 
  border: 1px solid #e0e0e0; 
  border-radius: 12px; 
  overflow: hidden; 
  width: 100%; 
  height: 320px; 
  margin-top: 16px; 
  box-shadow: var(--shadow-sm);
}
.MapPlaceholder { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  background-color: #f5f5f5; 
  border: 1px dashed #ccc; 
  color: #666; 
}
.MapLoader { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(255, 255, 255, 0.9); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 10; 
  color: #333; 
  font-size: 16px; 
}
.MapError { 
  color: #d32f2f; 
  padding: 1.5rem; 
  text-align: center; 
  background: rgba(255, 0, 0, 0.1); 
  border-radius: 8px; 
  margin-top: 1rem; 
}

/* Notes section */
.NotesContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.NoteItem {
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid var(--brand);
}

.NoteItem h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1.1rem;
}

.NoteItem p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* No details banner */
.NoDetailsBanner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 32px 32px; /* Reduced top/bottom padding */
  margin: 32px auto; /* Centered with auto margins and limited width */
  color: #b91c1c;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  width: min(var(--container), 100% - 2 * var(--gutter));
  text-align: center;
}

.NoDetailsBanner svg {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #ef4444;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .EventOverview { 
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 768px) {
  .EventOverview { 
    grid-template-columns: 1fr; 
  }
  .EventHero__content--split { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 16px; 
  }
  .EventHero__right { 
    margin-left: 0; 
  }
  .TimelineRow { 
    flex-direction: column; 
  }
  .TimelineDate { 
    min-width: auto; 
  }
  .EventTitle { 
    font-size: clamp(1.6rem, 5vw, 2rem); 
  }
  .EventSection__head h2 {
    font-size: 1.3rem;
  }
  .EventSection { 
    margin-bottom: 32px; 
  }
}

@media (max-width: 480px) {
  .EventHero__content { 
    padding: 24px 16px; 
  }
  .EventHero__media { 
    height: 240px; 
  }
  .EventBack { 
    margin-bottom: 20px; 
  }
  .EventSection { 
    margin-bottom: 28px; 
  }
}