/* Home Layout */
.section--hero {
  padding: .512821rem .512821rem 0;
}

.section--pick,
.section--ad {
  padding: .820513rem .512821rem 0;
}

.section--berlin {
  padding: .820513rem 0 0;
}

.section--pick-merged {
  padding-top: .307692rem;
}

.section--berlin-merged {
  padding-top: .307692rem;
}

.section--combined-empty {
  padding: .820513rem .512821rem 0;
}

.section--top-events {
  padding-top: .820513rem;
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .307692rem;
}

.section__header--padded {
  padding: 0 .512821rem;
}

.section-title {
  margin: 0;
  color: var(--text);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .512821rem;
  font-weight: 600;
  line-height: .692308rem;
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: .153846rem;
  color: var(--accent);
  font-size: .358974rem;
  font-weight: 600;
  line-height: .461538rem;
}

.link-button__icon {
  display: block;
  width: .358974rem;
  height: .358974rem;
  transform: rotate(-90deg);
}

[dir="rtl"] .link-button__icon {
  transform: rotate(90deg);
}

.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .205128rem;
  padding: .717949rem .512821rem;
  border-radius: .410256rem;
  background: var(--surface);
  text-align: center;
}

.home-empty--pick,
.home-empty--top-events,
.home-empty--city-events {
  margin-top: .512821rem;
}

.home-empty--top-events {
  margin: .512821rem .512821rem 0;
}

.home-empty--city-events {
  margin: .512821rem .512821rem 0;
}

.home-empty--top-events,
.home-empty--city-events {
  gap: .307692rem;
  padding: .923077rem .615385rem .820513rem;
  border-radius: .512821rem;
}

.home-empty__icon {
  display: block;
  width: 1.6111rem;
  height: auto;
  max-width: 100%;
  flex: 0 0 auto;
}

.home-empty__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.home-empty__title {
  margin: 0;
  color: var(--text);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .3889rem;
  font-weight: 700;
  line-height: .4444rem;
}

.home-empty__description {
  margin: 0;
  color: var(--subtle);
  font-size: .2778rem;
  line-height: .2778rem;
  text-align: center;
}

.home-empty__cta {
  text-decoration: none;
}

/* Hero Section */
.hero-card__image-shell {
  position: relative;
  overflow: hidden;
  height: 4.307692rem;
  border-radius: .410256rem;
  background: #ebe6fb;
}

.hero-card__image-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .42) 50%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg, #ede8fb 0%, #e4def8 100%);
  background-size: 200% 100%, 100% 100%;
  animation: hero-image-skeleton 1.3s linear infinite;
  transition: opacity .24s ease;
}

.hero-card__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .24s ease;
}

.hero-card__image-shell.is-loaded::before {
  opacity: 0;
  animation: none;
}

.hero-card__image-shell.is-loaded .hero-card__image {
  opacity: 1;
}

.hero-card__copy {
  display: flex;
  flex-direction: column;
  gap: .25641rem;
  padding: .358974rem .205128rem 0;
}

.hero-card__title {
  margin: 0;
  color: var(--text);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .512821rem;
  font-weight: 600;
  line-height: .692308rem;
}

.hero-card__description {
  margin: 0;
  color: var(--subtle);
  font-size: .358974rem;
  line-height: .512821rem;
}

@keyframes hero-image-skeleton {
  from {
    background-position: 200% 0, 0 0;
  }

  to {
    background-position: -200% 0, 0 0;
  }
}

/* Pick Section */
.pick-card {
  position: relative;
  overflow: hidden;
  margin-top: .512821rem;
  min-height: 5.358974rem;
  border-radius: .410256rem;
  background: #ebe6fb;
}

.pick-card--merged {
  margin-top: 0;
}

.pick-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .42) 50%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg, #ede8fb 0%, #e4def8 100%);
  background-size: 200% 100%, 100% 100%;
  animation: hero-image-skeleton 1.3s linear infinite;
  transition: opacity .24s ease;
}

.pick-card.is-loaded::before {
  opacity: 0;
  animation: none;
}

.event-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.pick-card .event-card-link {
  z-index: 2;
}

.pick-card__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 5.358974rem;
  object-fit: cover;
  opacity: 0;
  transition: opacity .24s ease;
}

.pick-card.is-loaded .pick-card__image {
  opacity: 1;
}

.pick-card__topbar {
  position: absolute;
  top: .333333rem;
  right: .461538rem;
  left: .461538rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pick-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .153846rem;
  min-height: .564103rem;
  padding: .102564rem .25641rem;
  border-radius: .205128rem;
  background: var(--accent);
  color: #ffffff;
  font-size: .307692rem;
  font-weight: 500;
  line-height: .384615rem;
  text-transform: uppercase;
}

.pick-card__badge-icon {
  display: block;
  width: .358974rem;
  height: .358974rem;
}

.pick-card__likes,
.top-card__likes {
  z-index: 3;
}

.pick-card__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .102564rem;
  padding: 1.230769rem .358974rem .410256rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  pointer-events: none;
}

.pick-card__date,
.pick-card__venue {
  margin: 0;
  color: #ffffff;
  font-size: .307692rem;
  line-height: .384615rem;
}

.pick-card__title {
  margin: 0;
  color: #ffffff;
  font-size: .410256rem;
  font-weight: 600;
  line-height: .512821rem;
}

/* Top Events Section */
.horizontal-list {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: .512821rem;
  padding: .102564rem .512821rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  flex-wrap: nowrap;
  gap: .410256rem;
}

.horizontal-list::-webkit-scrollbar {
  display: none;
}

.top-card {
  position: relative;
  display: flex;
  flex: 0 0 5.641026rem;
  flex-direction: column;
  gap: .205128rem;
  padding: .307692rem .307692rem .461538rem;
  border-radius: .410256rem;
  background: var(--surface);
  box-shadow: 0 0 .051282rem rgba(139, 139, 139, 0.3);
}

.top-card__media {
  position: relative;
  overflow: hidden;
  border-radius: .358974rem;
  background: #ebe6fb;
}

.top-card__image-shell {
  width: 100%;
  height: 3.282051rem;
  overflow: hidden;
  border-radius: .358974rem;
}

.top-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-card__date-badge {
  position: absolute;
  top: .25641rem;
  left: .25641rem;
  display: flex;
  min-width: .871795rem;
  min-height: 1.076923rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .102564rem;
  border-radius: .205128rem;
  background: #ffffff;
}

.top-card__month {
  font-size: .307692rem;
  line-height: .384615rem;
}

.top-card__day {
  font-size: .410256rem;
  font-weight: 700;
  line-height: .512821rem;
}

.top-card__likes {
  position: absolute;
  top: .25641rem;
  right: .205128rem;
}

.top-card__body {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  gap: .307692rem;
}

.top-card__copy {
  display: flex;
  flex-direction: column;
  gap: .205128rem;
  padding: 0 .102564rem;
}

.top-card__title,
.berlin-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text);
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.top-card__title {
  min-height: .923077rem;
  font-size: .358974rem;
  font-weight: 600;
  line-height: .461538rem;
}

.top-card__venue {
  display: flex;
  align-items: start;
  gap: .153846rem;
  margin: 0;
  color: var(--subtle);
  font-size: .307692rem;
  line-height: .384615rem;
}

.top-card__venue-icon {
  display: block;
  width: .358974rem;
  height: .333333rem;
}

.top-card__meta {
  padding: 0 .102564rem;
}

.top-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: .564103rem;
  padding: .076923rem .25641rem;
  border: .025641rem solid var(--accent);
  border-radius: .205128rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .307692rem;
  font-weight: 500;
  line-height: .384615rem;
  text-transform: capitalize;
}

/* Berlin Events Section */
.vertical-list {
  display: flex;
  flex-direction: column;
  gap: .25641rem;
  padding-top: .512821rem;
}

.vertical-list--merged {
  padding-top: 0;
}

.berlin-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .410256rem;
  margin: 0 .512821rem;
  padding: .358974rem;
  border-radius: .410256rem;
  background: var(--surface);
}

.berlin-card__image-shell {
  width: 2.307692rem;
  height: 2.307692rem;
  flex: 0 0 2.307692rem;
  overflow: hidden;
  border-radius: .25641rem;
  background: #ebe6fb;
}

.berlin-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.berlin-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: .153846rem;
}

.berlin-card__category {
  color: var(--accent);
  font-size: .307692rem;
  font-weight: 500;
  line-height: .384615rem;
  text-transform: uppercase;
}

.berlin-card__title {
  min-height: 1.025641rem;
  font-size: .358974rem;
  font-weight: 600;
  line-height: .512821rem;
}

.berlin-card__schedule {
  margin: 0;
  color: #424242;
  font-size: .307692rem;
  line-height: .384615rem;
}

.home-empty--top-events .home-empty__copy,
.home-empty--city-events .home-empty__copy,
.home-empty--module .home-empty__copy {
  gap: .102564rem;
}

.home-empty--top-events .home-empty__title,
.home-empty--city-events .home-empty__title {
  font-size: .3333rem;
  line-height: .4167rem;
  font-family: PlusJakartaSans;
  font-weight: normal;
  color: #9E9E9E;
}

.home-empty--top-events .home-empty__description,
.home-empty--city-events .home-empty__description {
  max-width: 5.846154rem;
  color: #9E9E9E;
  font-size: .3333rem;
  line-height: .4167rem;
  font-family: PlusJakartaSans;
  font-weight: normal;
}

.home-empty__cta .home-empty__cta-icon {
  display: block;
  color: currentColor;
  flex: 0 0 auto;
}

.home-empty--module {
  gap: .307692rem;
  padding: 1.6667rem .512821rem;
  background: transparent;
}

.home-empty--module .home-empty__icon {
  width: 1.974359rem;
  height: 2.025641rem;
}

.home-empty--module .home-empty__copy {
  max-width: 4.410256rem;
}

.home-empty--module .home-empty__title {
  margin: 0;
  font-size: .307692rem;
  line-height: .512821rem;
  font-family: PlusJakartaSans;
  font-weight: normal;
  color: #9E9E9E;
}

.home-empty--module .home-empty__description {
  margin: 0;
  font-size: .307692rem;
  line-height: .512821rem;
  font-family: PlusJakartaSans;
  font-weight: normal;
  color: #9E9E9E;
}

.home-empty--module .home-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .102564rem;
  padding: .25641rem .435897rem;
  border-radius: 5.794872rem;
  background: #FFFFFF;
  color: #424242;
  font-size: .307692rem;
  line-height: .512821rem;
  font-weight: 400;
  text-decoration: none;
}

.home-empty--module .home-empty__cta-icon {
  width: .358974rem;
  height: .358974rem;
  transform: rotate(-90deg);
}

[dir="rtl"] .home-empty--module .home-empty__cta-icon {
  transform: rotate(90deg);
}

.home-empty__cta .home-empty__cta-icon {
  margin-top: .0556rem;
}