/* --- DESIGN SYSTEM (FROM settings_data.json) --- */
:root {
  --bg-deep: #050505;
  --neon-cyan: #0ff0fc;
  --text-main: #ffffff;
  --text-dim: #888888;
  --border-color: rgba(15, 240, 252, 0.3); /* Cyan with alpha */
  --font-head: "Orbitron", sans-serif;
  --font-body: "Rajdhani", sans-serif;
}

/* --- GLOBAL RESET & EFFECTS (FROM theme.liquid) --- */
* {
  box-sizing: border-box;
}
body {
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: inherit;
}

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(255, 255, 255, 0.03) 50%,
    rgba(0, 0, 0, 0.05) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 9999;
}

/* --- HUD HEADER (GRID SYSTEM) --- */
.hud-header {
  display: grid;
  /* FIX: minmax(0, 1fr) forces the center to shrink if space runs out */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 20px; /* Outer spacing */
  height: 70px;
  background: #000;
  border-bottom: 1px solid rgba(15, 240, 252, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* LEFT: Menu & Back Button */
.hud-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* CENTER: Logo */
.hud-center {
  justify-self: stretch; /* Allow it to fill the 1fr space */
  text-align: center; /* Center the h1 text inside */
  padding: 0 20px; /* The padding you asked for */
  white-space: nowrap;
  overflow: hidden; /* Add overflow protection */
}

.hud-center h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* RIGHT: Cart */
.hud-right {
  justify-self: end;
}

/* --- BUTTON STYLES --- */

/* 1. BACK BUTTON (Desktop) */
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px; /* Horizontal padding only */
  height: 32px; /* Fixed height matches cart button feel */
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition: all 0.3s ease;
}

.back-btn:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(15, 240, 252, 0.15);
}

.back-arrow {
  font-size: 1rem;
  line-height: 1;
  margin-top: -2px;
}

/* 2. CART BUTTON */
.shopify-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  transition: all 0.3s ease;
}

.shopify-cart-btn:hover {
  background: rgba(15, 240, 252, 0.1);
  box-shadow: 0 0 15px rgba(15, 240, 252, 0.2);
  color: #fff;
}

/* --- MOBILE RESPONSIVE LOGIC --- */
@media (max-width: 768px) {
  .hud-header {
    padding: 0 10px;
    height: 60px;
  }

  .hud-left {
    gap: 8px; /* Slightly tighter gap to save space */
  }

  /* Hide the text "RETURN" */
  .back-text {
    display: none;
  }

  /* Turn button into a square icon */
  .back-btn {
    padding: 0;
    width: 32px; /* Square */
    height: 32px; /* Square */
    gap: 0;
  }

  .back-arrow {
    font-size: 1.2rem;
    margin: 0;
  }

  .hud-center {
    justify-self: stretch; /* Must stretch to fill the gap between buttons */
    text-align: center; /* Center the text within that gap */
    padding: 0 5px; /* Reduced padding to save space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shopify-cart-btn {
    padding: 0 10px;
    font-size: 0.7rem;
  }
}

.menu-icon {
  width: 24px;
  height: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  border-radius: 2px;
}

/* CENTER: Logo */
.hud-center {
  justify-self: center;
}

.hud-center h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem; /* Smaller, cleaner size */
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* RIGHT: Cart Button */
.hud-right {
  justify-self: end;
}

/* The Shopify-style Cart Button */
.shopify-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  /* The angled corner effect */
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  transition: all 0.3s ease;
}

.shopify-cart-btn:hover {
  background: rgba(15, 240, 252, 0.1);
  box-shadow: 0 0 15px rgba(15, 240, 252, 0.2);
  color: #fff;
}

/* Back Link (for Details Page) */
.back-nav-link {
  font-family: var(--font-body);
  color: var(--text-dim);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.back-nav-link:hover {
  color: var(--neon-cyan);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
  .hud-header {
    /* This sets 10px padding for top/bottom, but 0 for left/right */
    padding: 10px 0;
    height: 60px;
  }
  .hud-center h1 {
    font-size: 1rem;
  }
  .shopify-cart-btn {
    padding: 6px 12px;
    font-size: 0.7rem;
  }
}

/* --- NAV OVERLAY (FROM header-midnight.liquid) --- */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(rgba(15, 240, 252, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 240, 252, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 9998;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-overlay.open {
  transform: translateY(0);
}
.nav-content {
  width: 100%;
  max-width: 500px;
  padding: 40px;
  text-align: left;
}
.nav-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--neon-cyan);
  padding-bottom: 15px;
}
.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links li {
  margin-bottom: 20px;
}
.nav-links a {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  color: #aaa;
  text-transform: uppercase;
  transition: 0.3s;
  letter-spacing: 1px;
  border-left: 2px solid transparent;
  padding-left: 0;
  cursor: pointer;
}
.nav-links a:hover {
  color: #fff;
  border-left: 5px solid var(--neon-cyan);
  padding-left: 20px;
  text-shadow: 0 0 20px var(--neon-cyan);
  background: linear-gradient(90deg, rgba(15, 240, 252, 0.1), transparent);
}
.nav-num {
  color: var(--neon-cyan);
  font-size: 1rem;
  margin-right: 15px;
  font-family: var(--font-body);
}
.close-btn {
  background: transparent;
  border: 1px solid #333;
  color: #888;
  padding: 5px 10px;
  font-family: var(--font-body);
  cursor: pointer;
}
.close-btn:hover {
  border-color: #ff0055;
  color: #ff0055;
}

/* --- AXIS FEED STYLES (OPTIMIZED) --- */
.axis-header {
  text-align: center;
  padding: 60px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.axis-title-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}
.axis-title-wrapper::before,
.axis-title-wrapper::after {
  content: "///";
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--border-color);
  opacity: 0.5;
}
.axis-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--neon-cyan);
  text-shadow: 0 0 15px rgba(15, 240, 252, 0.4);
  margin: 0;
  letter-spacing: 5px;
}
.axis-subtitle {
  color: var(--text-dim);
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* --- NEW: FILTER CONTROLS STYLES (FUTURISTIC & MOBILE-FIRST) --- */
.filter-controls {
  display: flex;
  flex-direction: column; /* Mobile-first: stack main groups */
  gap: 15px;
  margin-top: 30px;
  padding: 15px;
  width: 100%;
  max-width: 1200px;
  border: 1px solid var(--border-color);
  background: rgba(15, 240, 252, 0.02);
  backdrop-filter: blur(2px);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-family: var(--font-head);
  font-size: 0.75rem;
  color: var(--neon-cyan);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(15, 240, 252, 0.5);
  text-align: left;
}

.input-wrapper {
  position: relative;
  background: linear-gradient(to right, var(--border-color), #333);
  padding: 1px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
}

.filter-controls input,
.filter-controls select {
  width: 100%;
  background-color: rgba(5, 5, 5, 0.9);
  border: none;
  color: var(--text-main);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: all 0.3s;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
  -webkit-appearance: none;
  appearance: none;
}

.filter-controls input:focus,
.filter-controls select:focus {
  outline: none;
  background-color: #000;
  color: var(--neon-cyan);
}

.input-wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230ff0fc'%3E%3Cpath d='M6 8.825L.175 3 1.175 2 6 6.825 10.825 2 11.825 3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

/* --- FINAL VERSION: DATE PLACEHOLDERS & CUSTOM ICON --- */
input[type="date"] {
  color-scheme: dark;
  position: relative;
}

/* This class is added by JS when the input is empty */
input[type="date"].date-empty {
  color: transparent;
}

/* Create the fake placeholder */
input[type="date"].date-empty::before {
  content: attr(placeholder);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Hide placeholder on focus */
input[type="date"].date-empty:focus::before {
  opacity: 0;
}

/* --- FIX: RESTORE TEXT COLOR ON FOCUS --- */
/* When the user clicks into the empty input, override the 'transparent' color
   so they can see what they are typing in the desired neon color. */
input[type="date"].date-empty:focus {
  color: var(--neon-cyan);
}

/* --- CUSTOM CALENDAR ICON --- */
/* First, completely hide the original browser-default icon */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  cursor: pointer;
  z-index: 2;
}

/* Then, draw our new custom icon in its place */
.input-wrapper input[type="date"]::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 9H21M7 3V5M17 3V5M6 13H8M6 17H8M11 13H13M11 17H13M16 13H18M16 17H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z' stroke='%230ff0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Add the hover glow effect to our new custom icon */
.input-wrapper:hover input[type="date"]::after {
  filter: drop-shadow(0 0 4px var(--neon-cyan));
}

.secondary-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.date-range-group {
  grid-column: 1 / -1;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-inputs span {
  font-family: var(--font-head);
  color: var(--neon-cyan);
}
.date-inputs .input-wrapper {
  flex: 1;
  min-width: 0;
}

#reset-filters {
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
  padding: 10px 16px;
  font-family: var(--font-head);
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 5px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
#reset-filters:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(15, 240, 252, 0.1);
  box-shadow: 0 0 15px rgba(15, 240, 252, 0.3);
}

#loading {
  margin-top: 20px;
  color: var(--neon-cyan);
  animation: blink 1.5s infinite;
}
@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

.timeline-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 0;
  position: relative;
}
.timeline-axis-line {
  position: absolute;
  left: 140px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--neon-cyan) 0%, transparent 100%);
  box-shadow: 0 0 8px var(--neon-cyan);
  z-index: 0;
  opacity: 0.5;
}
.date-group {
  display: flex;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.date-column {
  width: 120px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 40px;
  position: sticky;
  top: 120px;
  height: fit-content;
}
.date-day {
  font-size: 1rem;
  color: var(--neon-cyan);
  font-weight: bold;
}
.date-num {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-family: var(--font-head);
}
.date-month {
  font-size: 1rem;
  color: var(--text-dim);
  letter-spacing: 3px;
}

.events-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: #0a0a0a;
  border: 1px solid #222;
  position: relative;
  transition: all 0.3s ease;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%
  );
}

/* --- MODIFICATION START --- */

/* 1. REMOVE the old generic hover rule */
/* 
.card:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(15, 240, 252, 0.15);
  transform: translateY(-5px);
} 
*/

/* 2. NEW: Make the whole card lift up when EITHER part is hovered */
.card:has(:hover) {
  transform: translateY(-5px);
}

.card-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #111;
  cursor: pointer;
  transition: box-shadow 0.3s ease; /* Add transition for the glow */
}

/* 3. NEW: Add a specific glow to the image wrapper on hover */
.card-img-wrapper:hover {
  box-shadow: 
    /* Layer 1: The bright, solid inner core of the neon tube. */
    0 0 10px 4px rgba(15, 240, 252, 0.8),
    /* Layer 2: The huge, atmospheric outer haze. */ 0 0 50px 10px
      rgba(15, 240, 252, 0.6);
}

/* --- MODIFICATION END --- */

.card-img-wrapper::after {
  content: none;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* This now uses the parent :has(:hover) selector, so it works for both sections */
.card:has(:hover) .card-img {
  transform: scale(1.05);
}

.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #000;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: bold;
  z-index: 2;
}

.card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 7px 10px;
  z-index: 2;
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(15, 240, 252, 0.2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  cursor: pointer;
  transition: box-shadow 0.3s ease; /* Add transition for the glow */
}

.card-body:hover {
  box-shadow: 
    /* Layer 1: The bright, solid inner core of the neon tube. */
    0 0 10px 4px rgba(15, 240, 252, 0.8),
    /* Layer 2: The huge, atmospheric outer haze. */ 0 0 50px 10px
      rgba(15, 240, 252, 0.6);
}

.card-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-meta {
  color: #b5b5b5;
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 600;
}
.card-meta strong {
  color: var(--neon-cyan);
  opacity: 0.7;
}
.card-meta div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- DESKTOP OVERRIDES (for screens larger than mobile) --- */
@media (min-width: 900px) {
  .filter-controls {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
  }

  .search-group {
    flex: 1 1 300px;
  }

  .secondary-filters {
    display: flex;
    gap: 20px;
    align-items: flex-end;
  }

  .date-range-group {
    grid-column: auto;
  }

  #reset-filters {
    margin-left: auto;
  }

  .events-grid {
    padding-left: 40px;
  }
}

/* --- MOBILE OPTIMIZATIONS (UPDATED) --- */
@media (max-width: 768px) {
  :root {
    --card-body-padding: 6px 8px;
    --card-title-size: 0.85rem;
    --card-meta-size: 0.7rem;
  }

  .axis-header {
    padding: 30px 10px 20px;
  }
  .axis-title {
    font-size: clamp(2rem, 7.5vw, 2.5rem);
    letter-spacing: 3px;
  }

  .timeline-container {
    padding: 20px 0;
  }
  .hud-header {
    /* REPLACED: Use less horizontal padding to prevent overflow */
    padding: 0 15px;
  }
  .hud-center h1 {
    /* REPLACED: Reduce font size and spacing to fit mobile screens */
    font-size: 1rem;
    letter-spacing: 2px;
  }
  .timeline-axis-line {
    left: 10px;
  }
  .date-group {
    flex-direction: column;
    margin-bottom: 25px;
  }
  .date-column {
    width: 100%;
    position: relative;
    top: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-left: 25px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #222;
  }
  .date-num {
    font-size: 2.5rem;
  }

  .events-grid {
    padding: 0 10px 0 25px;
  }

  .card-body {
    padding: var(--card-body-padding);
  }
  .card-title {
    font-size: var(--card-title-size);
    margin-bottom: 3px;
  }
  .card-meta {
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
      sans-serif;
    font-weight: 400;
    font-size: var(--card-meta-size);
    line-height: 1.2;
  }
}

@media (min-width: 375px) and (max-width: 768px) {
  :root {
    --card-body-padding: 1px 2px;
    --card-title-size: 0.65rem;
    --card-meta-size: 0.6rem;
  }
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* AFTER */

/* --- DETAILS PAGE SPECIFIC STYLES --- */

.details-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: 80vh;
}

#loading-details {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--neon-cyan);
  text-align: center;
  margin-top: 100px;
  animation: blink 1s infinite;
}

.back-link {
  font-family: var(--font-head);
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-right: 20px;
  transition: color 0.3s;
}
.back-link:hover {
  color: var(--neon-cyan);
}

.status-indicator {
  color: #0f0;
  font-size: 0.7rem;
  border: 1px solid #0f0;
  padding: 2px 6px;
  font-family: var(--font-head);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

/* --- DOSSIER GRID LAYOUT --- */
.dossier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

/* --- LEFT COLUMN: IMAGE --- */
.dossier-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.img-frame {
  position: relative;
  border: 1px solid #333;
  padding: 5px;
  background: rgba(255, 255, 255, 0.02);
  /* The cool frame corners */
  clip-path: polygon(
    20px 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0 100%,
    0 20px
  );
}

.img-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.action-btn {
  display: block;
  text-align: center;
  padding: 15px;
  background: var(--neon-cyan);
  color: #000;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: 1px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition: all 0.3s;
}
.action-btn:hover {
  background: #fff;
  box-shadow: 0 0 20px var(--neon-cyan);
}

/* --- RIGHT COLUMN: DATA --- */
.dossier-data {
  font-family: var(--font-body);
}

.dossier-data h1 {
  font-family: var(--font-head);
  font-size: 2.5rem;
  color: #fff;
  margin: 0 0 20px 0;
  line-height: 1.1;
  text-transform: uppercase;
  border-bottom: 2px solid var(--neon-cyan);
  padding-bottom: 15px;
}

.data-row,
.data-block {
  margin-bottom: 20px;
  border-bottom: 1px solid #222;
  padding-bottom: 15px;
}

.label {
  display: block;
  color: var(--neon-cyan);
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.value {
  font-size: 1.2rem;
  color: #ddd;
}

.highlight-row .value {
  font-size: 1.5rem;
  color: #fff;
  font-family: var(--font-head);
}

/* Tags for Organizers */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.org-tag {
  background: rgba(15, 240, 252, 0.1);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 5px 12px;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.org-tag:hover {
  background: var(--neon-cyan);
  color: #000;
}

/* Disclaimer Box */
.disclaimer-box {
  background: rgba(255, 200, 0, 0.1);
  border-left: 4px solid #ffc800;
  color: #ffc800;
  padding: 15px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.desc-text {
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap; /* Keeps formatting */
  color: #aaa;
}

/* --- RELATED SECTION --- */
.related-section {
  border-top: 1px dashed #333;
  padding-top: 40px;
}
.section-header {
  margin-bottom: 30px;
}
.section-header h3 {
  font-family: var(--font-head);
  color: var(--text-dim);
  font-size: 1.2rem;
  margin: 0;
}
.section-header p {
  color: #666;
  margin: 5px 0 0;
  font-size: 0.9rem;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
  .dossier-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 30px;
  }

  .dossier-data h1 {
    font-size: 1.8rem;
  }
}

.similar-section {
  border-top: 1px dashed #333;
  padding-top: 40px;
  margin-top: 60px; /* Space between Duplicates and Similar */
  margin-bottom: 60px;
}

/* Optional: Make the section headers distinct */
.similar-section h3 {
  color: var(--neon-cyan); /* Cyan for similar */
}

/* Duplicate section header styling (add to your CSS if not there) */
.related-section h3 {
  color: #ff0055; /* Red/Pink for duplicates to warn they are copies */
}

/* --- NEW: Force 2-column layout for details page cards ONLY ON MOBILE --- */
@media (max-width: 768px) {
  .events-grid.details-card-grid {
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns on mobile */
    padding: 0 10px; /* Add a little horizontal padding to prevent touching screen edges */
    gap: 10px; /* Use a smaller gap on mobile */
  }
}