/* ============================================================
   KAMO. G ARTIST WEBSITE — PAGE-SPECIFIC STYLES
   Campaign refinement
   ============================================================ */

/* ============================================================
   PAGE HERO
   ============================================================ */

.page-hero {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xl);
}

.page-hero__tag {
  font-family: var(--font-heading);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.page-hero__title {
  font-size: var(--h2-size);
  font-weight: 900;
  color: var(--white);
}

.page-hero__subtitle {
  font-size: 15px;
  color: var(--muted);
  margin-top: var(--space-sm);
  max-width: 600px;
}

@media (max-width: 768px) {
  .page-hero__title {
    font-size: var(--h2-size-mobile);
  }
}


/* ============================================================
   MUSIC PAGE
   ============================================================ */

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.filter-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-base);
}

.filter-tab:hover {
  color: var(--white);
  border-color: var(--border-light);
}

.filter-tab--active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.filter-tab--active:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--black);
}

/* Music Grid */
.music-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 992px) {
  .music-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .music-grid {
    grid-template-columns: 1fr;
  }
}

/* EP Spotlight */
.ep-spotlight {
  background: var(--dark);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.spotify-embed {
  width: 100%;
  min-height: 352px;
  border: 0;
  border-radius: var(--radius-md);
}

.release-facts {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.release-card__art {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: linear-gradient(145deg, var(--dark-mid), #151515);
}

.track-card__description { font-size: 13px; }
.spotify-profile-link { margin-top: var(--space-xl); text-align: center; }

.ep-spotlight__cover {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--dark-mid);
}

.ep-spotlight__info {
  flex: 1;
}

.ep-spotlight__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--black);
  margin-bottom: var(--space-sm);
}

.ep-spotlight__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.ep-spotlight__countdown {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.ep-spotlight__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .ep-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-lg);
  }

  .ep-spotlight__cover {
    margin: 0 auto;
  }

  .ep-spotlight__countdown {
    justify-content: center;
  }

  .ep-spotlight__actions {
    justify-content: center;
  }
}

/* Countdown Block */
.countdown-block {
  background: var(--dark-mid);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: center;
  min-width: 80px;
}

.countdown-block__label {
  color: var(--gold);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 4px;
}

.countdown-block__number {
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1;
}

.countdown-block__unit {
  color: var(--muted);
  font-size: 9px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ============================================================
   BOOKINGS PAGE
   ============================================================ */

.bookings-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-xl);
}

.bookings-form {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  min-height: 500px;
}

.bookings-form__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  color: var(--muted);
}

.bookings-form__placeholder-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.3;
}

.bookings-form__placeholder-text {
  font-size: 14px;
  max-width: 300px;
  line-height: 1.6;
}

.booking-fallback {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 620px;
}

.booking-fallback > svg { color: var(--gold); margin-bottom: var(--space-md); }
.booking-fallback h2 { margin-bottom: var(--space-sm); }
.booking-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.booking-checklist { display: grid; gap: var(--space-sm); }
.booking-checklist li { color: var(--muted-light); font-size: 13px; }
.booking-checklist li::before { content: '•'; color: var(--gold); margin-right: var(--space-sm); }
.status-note { color: var(--muted); font-size: 13px; }

.bookings-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bookings-sidebar__card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.bookings-sidebar__card-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.bookings-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bookings-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--muted-light);
}

.bookings-sidebar__item-icon {
  color: var(--gold);
  font-size: 14px;
  width: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .bookings-layout {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   MEDIA PAGE
   ============================================================ */

.media-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.media-gallery__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  background: var(--dark-mid);
  border: 1px solid var(--border);
  padding: 0;
  color: inherit;
  text-align: left;
}

.media-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.media-gallery__item:hover img {
  transform: scale(1.05);
}

.media-gallery__item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.media-gallery__item:hover .media-gallery__item-overlay {
  opacity: 1;
}

.media-gallery__item:focus-visible .media-gallery__item-overlay { opacity: 1; }

.media-gallery__item-caption {
  font-size: 12px;
  color: var(--white);
}

@media (max-width: 768px) {
  .media-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .media-gallery {
    grid-template-columns: 1fr;
  }
}

/* Video Section */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.video-card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-card__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--dark-mid);
}

.video-card__embed iframe,
.video-card__embed-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-card__embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}

.video-card__info {
  padding: var(--space-md);
}

.video-card__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.platform-card {
  display: block;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--white);
}

.platform-card:hover { border-color: var(--gold); color: var(--white); }
.platform-card__icon { color: var(--gold); font-size: 28px; }
.platform-card h2 { font-size: 16px; margin: var(--space-sm) 0; }
.platform-card p { font-size: 13px; }
.platform-card__action { color: var(--gold); font-size: 12px; font-weight: 700; }

.lightbox {
  width: min(90vw, 760px);
  max-height: 90vh;
  padding: var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--white);
  background: var(--dark);
}

.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox img { max-height: 74vh; margin: 0 auto var(--space-sm); object-fit: contain; }
.lightbox p { margin: 0; text-align: center; }
.lightbox__close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-light); background: var(--black); color: var(--white); font-size: 24px; cursor: pointer; }

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   RADIO PACK PAGE
   ============================================================ */

.radio-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-xl);
}

.radio-main {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.radio-main__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.radio-main__description {
  font-size: 14px;
  color: var(--muted-light);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.radio-contents {
  margin-bottom: var(--space-lg);
}

.radio-contents__title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.radio-contents__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-contents__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--muted-light);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.radio-contents__item:last-child {
  border-bottom: none;
}

.radio-contents__item::before {
  content: '▸';
  color: var(--gold);
  font-size: 12px;
}

.radio-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.download-group { margin-top: var(--space-xl); }
.download-group > h3 { margin-bottom: var(--space-md); color: var(--gold); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.download-grid { display: grid; gap: var(--space-md); }
.download-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-md); align-items: center; padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--dark-mid); }
.download-card__icon { color: var(--gold); }
.download-card h4 { font-size: 14px; margin-bottom: 2px; }
.download-card p { margin: 0; font-size: 12px; }
.download-card__meta { color: var(--muted); }
.download-card__status { display: inline-block; margin-top: 6px; padding: 2px 7px; border: 1px solid var(--gold-dark); border-radius: 999px; color: var(--gold-light); font-size: 9px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; }
.radio-updated { margin-top: var(--space-xl); color: var(--muted); font-size: 12px; }
.official-link-list { display: grid; gap: var(--space-sm); text-align: left; }
.empty-state { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg); border: 1px dashed var(--border-light); border-radius: var(--radius-md); color: var(--muted-light); }
.empty-state p { margin: 0; }

.radio-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.radio-sidebar__card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.radio-sidebar__card-icon {
  font-size: 32px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.radio-sidebar__card-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.radio-sidebar__card-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  .radio-layout {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-hero {
  position: relative;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  background: var(--dark-mid);
}

.about-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.about-hero__title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 900;
  color: var(--white);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.about-content__text {
  font-size: 15px;
  color: var(--muted-light);
  line-height: 1.8;
}

.about-content__text { max-width: 780px; }
.timeline { border-left: 2px solid var(--gold); padding-left: var(--space-lg); }
.timeline-item { position: relative; padding: var(--space-md) 0; }
.timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--space-lg) - 7px); top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--black); }
.timeline-item__label { color: var(--gold); font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.timeline-item p { margin: 2px 0 0; font-size: 13px; }

.about-content__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--dark-mid);
}

.about-content__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.about-stat {
  text-align: center;
  padding: var(--space-lg);
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.about-stat__value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
}

.about-stat__label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-xs);
}

@media (max-width: 768px) {
  .about-hero {
    height: 280px;
  }

  .about-hero__title {
    font-size: 24px;
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-grid { grid-template-columns: 1fr; }
  .download-card { grid-template-columns: 1fr; align-items: start; }
}


/* ============================================================
   CTA STRIP
   ============================================================ */

.cta-strip {
  background: var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.cta-strip__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
}

.cta-strip__subtitle {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  margin-top: var(--space-xs);
}

@media (max-width: 768px) {
  .cta-strip {
    flex-direction: column;
    text-align: center;
  }
}

/* Refined page presentation */
.page-hero {
  padding: clamp(56px, 8vw, 96px) 0;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.page-hero__title { font-size: clamp(38px, 6vw, 72px); letter-spacing: -2px; }
.page-hero__subtitle { max-width: 720px; color: var(--muted-light); font-size: 16px; }

.ep-spotlight {
  border-width: 1px;
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, #17130a, var(--dark) 48%);
}

.ep-spotlight__title { font-size: clamp(30px, 4vw, 48px); }
.spotify-embed { max-height: 352px; }

.bookings-form,
.bookings-sidebar__card,
.radio-main,
.radio-sidebar__card,
.platform-card {
  background: var(--dark);
  border-color: var(--border);
}

.booking-fallback { min-height: 330px; }
.booking-fallback .btn { margin-top: var(--space-lg); }

.media-gallery__entry { display: grid; gap: 10px; }
.media-gallery__item { width: 100%; aspect-ratio: 4 / 5; }
.media-gallery__download {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--muted-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.media-gallery__download:hover { border-color: var(--gold-dark); }

.download-card--audio { align-items: start; }
.download-card__audio {
  display: block;
  width: min(100%, 560px);
  height: 44px;
  margin-top: var(--space-md);
  color-scheme: dark;
}

.about-hero { height: min(68vh, 680px); }
.about-hero__image { object-position: center 32%; }
.about-hero__eyebrow,
.about-release__label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-hero__title { font-size: clamp(38px, 6vw, 72px); }
.about-content { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr); align-items: start; }
.about-content__text h2 { margin-bottom: var(--space-lg); color: var(--white); }
.about-content__text p + p { margin-top: var(--space-md); }
.about-release { padding: var(--space-xl); background: #17130a; border: 1px solid var(--gold-dark); border-radius: var(--radius-lg); }
.about-release h2 { margin-bottom: var(--space-md); font-size: 28px; }
.about-release p { color: var(--muted-light); }
.about-release .btn { margin-top: var(--space-lg); }
.about-destinations { display: flex; margin-bottom: var(--space-xl); padding: var(--space-lg) 0; align-items: center; justify-content: space-between; gap: var(--space-lg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-destinations__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.about-destinations__links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }