/* =============================================================
   KasieFM – Event Detail Page  (eventDetail.css)
   Page-specific only; shared tokens/utilities live in main.css
   ============================================================= */

/* ── Hero ──────────────────────────────────────────────────── */
.ed-hero {
  position: relative;
  height: 75vh;
  width: 100%;
  overflow: hidden;
}

.ed-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Horizontal gradient: background → transparent (left to right) */
.ed-hero__overlay-side {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--color-background),
    rgba(17, 20, 21, 0.4),
    transparent
  );
  z-index: 1;
}

/* Vertical gradient: solid at bottom → transparent at top */
.ed-hero__overlay-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 20, 21, 1) 0%,
    rgba(17, 20, 21, 0.7) 50%,
    rgba(17, 20, 21, 0) 100%
  );
  z-index: 1;
}

.ed-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ed-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-margin-mobile) var(--space-xl);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .ed-hero__content {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }
}

.ed-hero__inner {
  max-width: 672px;
}

/* Date badge */
.ed-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Event title */
.ed-hero__title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .ed-hero__title { font-size: 32px; }
}

/* Meta row: location / time / price */
.ed-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-on-surface-variant);
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 32px;
}

.ed-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hero action buttons */
.ed-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ed-btn-register {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary-container);
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ed-btn-register:hover { filter: brightness(1.1); }
.ed-btn-register:hover .ed-btn-register__arrow { transform: translateX(4px); }
.ed-btn-register__arrow { transition: transform 0.2s; display: flex; }

.ed-btn-calendar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(50, 53, 54, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-outline-variant);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.ed-btn-calendar:hover { background: var(--color-surface-container-highest); }

.ed-btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 53, 54, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-outline-variant);
  color: white;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.ed-btn-share:hover { background: var(--color-surface-container-highest); }

/* ── Page wrapper ──────────────────────────────────────────── */
.ed-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-margin-mobile);
}

@media (min-width: 768px) {
  .ed-page {
    padding-left: var(--space-margin-desktop);
    padding-right: var(--space-margin-desktop);
  }
}

/* ── Content grid ──────────────────────────────────────────── */
.ed-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .ed-content-grid {
    grid-template-columns: 1fr 380px;
  }
}

.ed-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.ed-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 1px solid rgba(67, 70, 86, 0.3);
}

/* ── Section titles with left border accent ────────────────── */
.ed-section-title {
  font-family: var(--font-headline);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: white;
  padding-left: 16px;
  margin: 0 0 24px;
}
.ed-section-title--primary  { border-left: 4px solid var(--color-primary); }
.ed-section-title--secondary { border-left: 4px solid var(--color-secondary); }
.ed-section-title--outline   { border-left: 4px solid var(--color-outline); }

/* ── About section ─────────────────────────────────────────── */
.ed-about-text {
  color: var(--color-on-surface-variant);
  font-size: 18px;
  line-height: 1.8;
}
.ed-about-text p { margin: 0 0 16px; }
.ed-about-text p:last-child { margin-bottom: 0; }
.ed-about-text strong { color: white; }

/* ── Lineup ────────────────────────────────────────────────── */
.ed-lineup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}
.ed-lineup-header h2 { margin: 0; }

.ed-lineup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .ed-lineup-grid { grid-template-columns: repeat(3, 1fr); }
}

.ed-artist-card {
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(67, 70, 86, 0.3);
  transition: border-color 0.2s;
}
.ed-artist-card:hover { border-color: rgba(182, 196, 255, 0.5); }

.ed-artist-card__img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.ed-artist-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
.ed-artist-card:hover .ed-artist-card__img { transform: scale(1.1); }

.ed-artist-card__body { padding: var(--space-md); }
.ed-artist-card__name {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0 0 4px;
}
.ed-artist-card__genre {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* ── Location ──────────────────────────────────────────────── */
.ed-map {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(67, 70, 86, 0.4);
  position: relative;
  margin-bottom: 16px;
}
.ed-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) brightness(0.75);
}
.ed-map__tint {
  position: absolute;
  inset: 0;
  background: rgba(182, 196, 255, 0.05);
  pointer-events: none;
}

.ed-location-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--space-md);
  background: var(--color-surface-container-low);
  border-radius: 12px;
  border: 1px solid rgba(67, 70, 86, 0.2);
}
.ed-location-name {
  font-weight: 700;
  color: white;
  margin: 0 0 4px;
}
.ed-location-address {
  font-size: 14px;
  color: var(--color-on-surface-variant);
  margin: 0;
}
.ed-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0;
  text-transform: uppercase;
}
.ed-directions-btn:hover { text-decoration: underline; }

/* ── Sidebar widgets ───────────────────────────────────────── */
.ed-widget {
  background: var(--color-surface-container);
  padding: var(--space-md);
  border-radius: 16px;
  border: 1px solid rgba(67, 70, 86, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.ed-widget__title {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Urban dot-grid background */
.urban-grid-pattern {
  background-image: radial-gradient(var(--color-outline-variant) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* Upcoming shows */
.ed-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ed-upcoming-item {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}
.ed-upcoming-item:hover .ed-upcoming-item__name { color: var(--color-primary); }

.ed-upcoming-item__thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--color-surface-variant);
  overflow: hidden;
  flex-shrink: 0;
}
.ed-upcoming-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-upcoming-item__label {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.ed-upcoming-item__label--next { color: var(--color-secondary); }
.ed-upcoming-item__label--following { color: var(--color-on-surface-variant); }
.ed-upcoming-item__name {
  color: white;
  font-weight: 700;
  margin: 0 0 2px;
  transition: color 0.2s;
}
.ed-upcoming-item__host {
  font-size: 12px;
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* Top shows */
.ed-top-shows-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ed-top-show-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.ed-top-show-item:hover { background: var(--color-surface-variant); }
.ed-top-show-item__num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.5;
  min-width: 32px;
}
.ed-top-show-item__name {
  font-weight: 700;
  color: white;
}

/* Action links */
/* Podcast card */
.ed-podcast-card {
  background: var(--color-surface-container-high);
  padding: var(--space-md);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ed-podcast-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.ed-podcast-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.ed-podcast-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
}
.ed-podcast-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s;
}
.ed-podcast-thumb:hover img { transform: scale(1.05); }
.ed-podcast-thumb__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.ed-podcast-thumb:hover .ed-podcast-thumb__overlay { opacity: 1; }
.ed-podcast-thumb__play {
  font-size: 48px;
  color: white;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ed-podcast-name {
  color: white;
  font-weight: 700;
  margin: 0 0 4px;
}
.ed-podcast-ep {
  font-size: 14px;
  color: var(--color-on-surface-variant);
  margin: 0 0 16px;
}
.ed-podcast-progress {
  display: flex;
  gap: 8px;
}
.ed-podcast-progress__bar {
  flex: 1;
  height: 4px;
  border-radius: 9999px;
}
.ed-podcast-progress__bar--active   { background: var(--color-primary); }
.ed-podcast-progress__bar--inactive { background: var(--color-outline-variant); }

/* =================================================================
   EVENT DETAIL — Responsive Overrides
   ================================================================= */
@media (max-width: 767px) {
  .ed-page {
    padding-left: var(--space-margin-mobile);
    padding-right: var(--space-margin-mobile);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* Hero */
  .ed-hero { height: 60vh; min-height: 360px; }
  /* Replace horizontal side gradient with a lighter overlay on mobile */
  .ed-hero__overlay-side {
    background: linear-gradient(
      to bottom,
      rgba(17, 20, 21, 0.2) 0%,
      rgba(17, 20, 21, 0.6) 100%
    );
  }
  .ed-hero__title { font-size: 26px; }
  .ed-hero__meta  { font-size: 14px; gap: var(--space-sm); }
  .ed-hero__actions { flex-wrap: wrap; gap: 10px; }
  .ed-btn-register { font-size: 16px; padding: 12px 20px; }

  /* Section titles */
  .ed-section-title { font-size: 22px; line-height: 30px; margin-bottom: 16px; }

  /* Hero description */
  .ed-hero__desc { font-size: 15px; line-height: 24px; }

  /* Artist / lineup cards */
  .ed-artist-card__body { padding: 10px var(--space-md); }
  .ed-artist-card__name { font-size: 16px; }

  /* Sidebar widget titles */
  .ed-widget__title { font-size: 16px; }

  /* Lineup — 2 col on very small screens stays, ok */
  .ed-lineup-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}