/* Gita event-card contract: shared by main web and Lite WebView. */
:root {
  --gita-card-radius: 1.5rem;
  --gita-card-text: #fff;
  --gita-card-muted: rgba(255,255,255,.78);
  --gita-card-faint: rgba(255,255,255,.55);
  --gita-card-gold: #fbbf24;
  --gita-card-button: #e11d48;
  --gita-card-content-pad: 1rem;
  --gita-card-grid-gap: .75rem;
  --gita-card-title-size: 1.25rem;
  --gita-card-meta-size: .78rem;
  --gita-card-price-size: .9rem;
  --gita-card-button-size: .76rem;
}

.gita-event-card,
.gita-event-card * { box-sizing: border-box; }
.gita-event-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border-radius: var(--gita-card-radius);
  cursor: pointer;
  isolation: isolate;
}
.gita-event-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 3.75;
  overflow: hidden;
  border-radius: inherit;
  background: #111118;
}
.gita-event-card__media,
.gita-event-card__media img,
.gita-event-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gita-event-card__media { overflow: hidden; }
.gita-event-card__media img,
.gita-event-card__image { display: block; object-fit: cover; }
.gita-event-card__image-shimmer { position: absolute; inset: 0; pointer-events: none; }
.gita-event-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3,3,5,.88) 0%, rgba(3,3,5,.4) 50%, rgba(3,3,5,.05) 100%);
}
.gita-event-card__badge-row {
  position: absolute;
  top: .75rem;
  left: .75rem;
  right: .75rem;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .4rem;
  pointer-events: none;
}
.gita-event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: .35rem .5rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .625rem;
  background: rgba(0,0,0,.72);
  text-align: center;
}
.gita-event-card__date .month {
  color: var(--gita-card-gold);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.gita-event-card__date .day { color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1; }
.gita-event-card__heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: rgba(0,0,0,.62);
  color: rgba(255,255,255,.7);
  pointer-events: auto;
}
.gita-event-card__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .25rem;
  padding: 3rem var(--gita-card-content-pad) .9rem;
  color: var(--gita-card-text);
  pointer-events: none;
}
.gita-event-card__title-wrap { min-height: 2.4em; max-height: 2.4em; display: flex; align-items: flex-end; }
.gita-event-card__title {
  width: 100%;
  overflow: hidden;
  color: var(--gita-card-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: Poppins, "Noto Sans Myanmar", sans-serif;
  font-size: var(--gita-card-title-size);
  font-weight: 700;
  line-height: 1.2;
}
.gita-event-card__meta,
.gita-event-card__venue-small {
  min-width: 0;
  overflow: hidden;
  color: var(--gita-card-muted);
  font-family: Poppins, "Noto Sans Myanmar", sans-serif;
  font-size: var(--gita-card-meta-size);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gita-event-card__meta i,
.gita-event-card__venue-small i { margin-right: .3rem; color: var(--gita-card-gold); }
.gita-event-card__footer { pointer-events: auto; }
.gita-event-card__footer--stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  margin-top: .75rem;
}
.gita-event-card__footer--compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  margin-top: .5rem;
}
.gita-event-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.gita-event-card__price {
  overflow: hidden;
  color: var(--gita-card-gold);
  font-family: "Space Grotesk", Poppins, sans-serif;
  font-size: var(--gita-card-price-size);
  font-weight: 700;
  font-feature-settings: "tnum";
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gita-event-card__price span,
.gita-event-card__price small { color: var(--gita-card-faint); font-size: .72rem; font-weight: 500; }
.gita-event-card__price span { margin-right: .2rem; }
.gita-event-card__btn {
  width: 100%;
  min-height: 32px;
  padding: .6rem 1rem;
  border: 1px solid rgba(225,29,72,.55);
  border-radius: 9999px;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #fff;
  font: 600 var(--gita-card-button-size)/1.2 Poppins, "Noto Sans Myanmar", sans-serif;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.gita-event-card__city-separator { display: inline-block; margin: 0 .35rem; opacity: .5; }

/* Script-aware typography. Myanmar glyphs have a taller vertical metric than
 * the Latin display fonts, so keep the font explicit and slightly reduce only
 * Myanmar strings. English event titles retain the established card scale. */
.gita-event-card .is-myanmar-text {
  font-family: var(--gita-font-myanmar, "Noto Sans Myanmar", "Pyidaungsu", sans-serif) !important;
  letter-spacing: 0 !important;
  font-kerning: normal;
}
.gita-event-card__title.is-myanmar-text {
  font-size: calc(var(--gita-card-title-size) * .92) !important;
  line-height: 1.34 !important;
}
.gita-event-card__meta.is-myanmar-text,
.gita-event-card__venue-small.is-myanmar-text,
.gita-event-card__btn.is-myanmar-text {
  line-height: 1.4 !important;
}
.gita-event-card__meta.is-myanmar-text,
.gita-event-card__venue-small.is-myanmar-text {
  font-size: calc(var(--gita-card-meta-size) * .94) !important;
}
.gita-event-card__btn.is-myanmar-text {
  font-size: calc(var(--gita-card-button-size) * .94) !important;
}

/* Main-site geometry: Featured is a 280px horizontal rail; Upcoming is a 2-column poster grid. */
.gita-rail .gita-event-card--spotlight:not(.gita-event-card--spotlight-compact),
.gita-event-card--featured {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  flex: 0 0 280px;
}
.gita-grid--poster .gita-event-card--spotlight,
.gita-event-card--upcoming {
  width: 100%;
  max-width: 100%;
}
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__frame,
.gita-event-card--upcoming .gita-event-card__frame { aspect-ratio: 3 / 4.6; }
.gita-event-card--upcoming .gita-event-card__content,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__content {
  padding: 2.2rem .55rem .55rem;
  gap: .18rem;
}
.gita-event-card--upcoming .gita-event-card__title,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__title { font-size: .82rem; line-height: 1.2; }
.gita-event-card--upcoming .gita-event-card__meta,
.gita-event-card--upcoming .gita-event-card__price,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__meta,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__price { font-size: .72rem; }
.gita-event-card--upcoming .gita-event-card__btn,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__btn { min-height: 28px; line-height: 1.2; }
.gita-event-card--upcoming .gita-event-card__badge-row,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__badge-row { left: .75rem; right: .75rem; }
.gita-event-card--upcoming .gita-event-card__date,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__date { min-width: 40px; padding: .22rem .38rem; border-radius: 6px; }
.gita-event-card--upcoming .gita-event-card__date .month,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__date .month { font-size: .52rem; letter-spacing: .05em; }
.gita-event-card--upcoming .gita-event-card__date .day,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__date .day { font-size: .88rem; }
.gita-event-card--upcoming .gita-event-card__heart,
.gita-grid--poster .gita-event-card--spotlight .gita-event-card__heart { width: 28px; height: 28px; flex-basis: 28px; font-size: .75rem; }

@media (min-width: 640px) {
  :root { --gita-card-grid-gap: .75rem; }
}

/* Lite compatibility layer: the old shell has a long history of card
 * overrides. Keep these final values in this shared file so its computed
 * geometry is the same as the main site's V3 card at every breakpoint. */
body.screen-home .gita-event-card {
  background: transparent !important;
  box-shadow: none !important;
}
body.screen-home .gita-event-card__frame {
  background: transparent !important;
}
body.screen-home .gita-event-card__content {
  position: absolute !important;
  inset: 0 !important;
  padding: 3rem 1rem .9rem !important;
  background: transparent !important;
  align-items: normal !important;
  gap: .25rem !important;
  line-height: 1.6 !important;
}
body.screen-home .gita-event-card--featured .gita-event-card__title {
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
}
body.screen-home .gita-event-card--featured .gita-event-card__meta {
  font-size: .78rem !important;
  line-height: 1.25 !important;
}
body.screen-home .gita-event-card--featured .gita-event-card__price { font-size: .9rem !important; line-height: 1.6 !important; }
body.screen-home .gita-event-card--featured .gita-event-card__price-row {
  display: flex !important;
  width: 100% !important;
}
body.screen-home .gita-event-card--featured .gita-event-card__footer {
  width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  gap: .55rem !important;
  margin-top: .75rem !important;
}
body.screen-home .gita-event-card--featured .gita-event-card__btn {
  min-height: 32px !important;
  padding: .6rem 1rem !important;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  background-image: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border: 1px solid rgba(225,29,72,.55) !important;
  box-shadow: 0 4px 14px rgba(225,29,72,.28) !important;
  font-size: .76rem !important;
  line-height: 1.2 !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__content {
  padding: 2.2rem .55rem .55rem !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__title {
  font-size: .82rem !important;
  line-height: 1.2 !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__meta {
  font-size: .72rem !important;
  line-height: 1.25 !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__price {
  font-size: .8rem !important;
  line-height: 1.6 !important;
}
body.screen-home .gita-event-card--featured .gita-event-card__price,
body.screen-home .gita-event-card--upcoming .gita-event-card__price {
  width: auto !important;
  max-width: 100% !important;
  font-family: "Space Grotesk", sans-serif !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__price-row {
  display: flex !important;
  width: 100% !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__footer {
  gap: .55rem !important;
  margin-top: .75rem !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__btn {
  min-height: 28px !important;
  padding: .38rem .65rem !important;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  background-image: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border: 1px solid rgba(225,29,72,.55) !important;
  box-shadow: 0 4px 14px rgba(225,29,72,.28) !important;
  font-size: .68rem !important;
}
body.screen-home .gita-event-card--upcoming .gita-event-card__footer {
  width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}

/* Shared Home grid geometry: Trending and Upcoming use one responsive contract. */
.gita-grid--poster,
.gita-event-grid,
body.screen-home .gita-event-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.gita-grid--poster > .gita-event-card--upcoming,
.gita-event-grid > .gita-event-card--upcoming,
#ev-grid > .gita-event-card--upcoming {
  width: 100% !important;
  max-width: 280px !important;
  max-height: 430px !important;
  height: auto !important;
  aspect-ratio: 3 / 4.6 !important;
  justify-self: center !important;
}

/* Shared horizontal poster carousel geometry. Detail pages can use this
 * modifier without creating a second card implementation or changing the
 * default Main/Lite poster ratio. */
.gita-event-carousel__track {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--gita-card-grid-gap) !important;
}

.gita-event-carousel__track > .gita-event-card--upcoming {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 337px !important;
  aspect-ratio: 3 / 4.6 !important;
}

@media (max-width: 639px) {
  .gita-grid--poster,
  .gita-event-grid,
  body.screen-home .gita-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gita-grid--poster > .gita-event-card--upcoming,
  .gita-event-grid > .gita-event-card--upcoming,
  #ev-grid > .gita-event-card--upcoming {
    max-width: 220px !important;
    max-height: 337px !important;
  }
}

@media (min-width: 640px) and (max-width: 1179px) {
  .gita-grid--poster,
  .gita-event-grid,
  body.screen-home .gita-event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .gita-grid--poster > .gita-event-card--upcoming,
  .gita-event-grid > .gita-event-card--upcoming,
  #ev-grid > .gita-event-card--upcoming {
    max-width: 260px !important;
    max-height: 399px !important;
  }

  .gita-event-carousel__track > .gita-event-card--upcoming {
    flex-basis: 260px !important;
    width: 260px !important;
    max-width: 260px !important;
    max-height: 399px !important;
  }
}

@media (min-width: 1180px) {
  .gita-grid--poster,
  .gita-event-grid,
  body.screen-home .gita-event-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .gita-event-carousel__track > .gita-event-card--upcoming {
    flex-basis: 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    max-height: 430px !important;
  }
}

/* Unified neutral loading contract for Main and Lite home cards. Keep all
 * placeholder color and sweep behavior here so neither surface reintroduces
 * its own branded gradient while data or images are loading. */
.gita-event-card-skeleton,
.event-card-skeleton,
.gita-event-card__media.rdm-card-fallback,
.gita-event-card__media.rdm-event-card-fallback {
  --gita-skeleton-base: #e5e7eb;
  --gita-skeleton-surface: #d7dbe1;
  --gita-skeleton-highlight: rgba(255, 255, 255, .72);
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, var(--gita-skeleton-base) 20%, var(--gita-skeleton-surface) 38%, var(--gita-skeleton-base) 56%) !important;
  background-size: 220% 100% !important;
  animation: gitaCardNeutralShimmer 1.25s linear infinite !important;
}

html[data-theme="dark"] .gita-event-card-skeleton,
html[data-theme="dark"] .event-card-skeleton,
html[data-theme="dark"] .gita-event-card__media.rdm-card-fallback,
html[data-theme="dark"] .gita-event-card__media.rdm-event-card-fallback {
  --gita-skeleton-base: #252a33;
  --gita-skeleton-surface: #343a49;
  --gita-skeleton-highlight: rgba(255, 255, 255, .12);
}

.gita-event-card-skeleton::after,
.event-card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 22%, var(--gita-skeleton-highlight) 42%, transparent 62%) !important;
  background-size: 240% 100% !important;
  animation: gitaCardNeutralShimmer 1.25s linear infinite !important;
}

@keyframes gitaCardNeutralShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gita-event-card-skeleton,
  .event-card-skeleton,
  .gita-event-card-skeleton::after,
  .event-card-skeleton::after,
  .gita-event-card__media.rdm-card-fallback,
  .gita-event-card__media.rdm-event-card-fallback {
    animation: none !important;
  }
}