/* ==================================================================
 * ESN Uni Wien – start page of the ticket shop (tickets.esnuniwien.com/)
 * ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[lang="en"] [lang="de"],
html[lang="de"] [lang="en"] { display: none; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 40rem at 0% -10%, rgba(0, 174, 239, 0.14), transparent 60%),
    var(--esn-surface-muted);
  background-attachment: fixed;
  color: var(--esn-ink);
  font-family: var(--esn-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  display: block;
  height: var(--esn-stripe-height);
  background: var(--esn-stripe);
}

a { color: var(--esn-dark-blue); }
a:hover { color: var(--esn-magenta-strong); }
:focus-visible { outline: 3px solid var(--esn-cyan); outline-offset: 3px; }

.page {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding:
    0
    max(16px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* Notice bar: this is only the ticket shop -------------------------- */
.main-site-bar {
  background: var(--esn-dark-blue);
  color: #fff;
  font-size: 0.9375rem;
}
.main-site-bar p {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  text-align: center;
}
.main-site-bar a {
  color: #fff;
  font-weight: 700;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.main-site-bar a:hover { color: var(--esn-cyan-tint); }

/* Header ------------------------------------------------------------ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--esn-dark-blue);
  text-decoration: none;
}
.logo { display: block; width: 150px; height: auto; }
.brand-label {
  padding-left: 16px;
  border-left: 2px solid var(--esn-line);
  font-family: var(--esn-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.main-site-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--esn-radius-pill);
  background: #fff;
  box-shadow: var(--esn-shadow-sm);
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 0.2s, color 0.2s;
}
.main-site-link:hover { box-shadow: var(--esn-shadow-md); color: var(--esn-magenta-strong); }
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--esn-radius-pill);
  background: #fff;
  box-shadow: var(--esn-shadow-sm);
}
.lang-switch button {
  padding: 4px 12px;
  border: 0;
  border-radius: var(--esn-radius-pill);
  background: transparent;
  color: var(--esn-muted);
  font: 700 0.8rem/1.4 var(--esn-font-body);
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--esn-dark-blue);
  color: #fff;
}

/* Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 6vw, 64px);
  border-radius: var(--esn-radius-2xl);
  background: #fff;
  box-shadow: var(--esn-shadow-lg);
  animation: rise 0.7s var(--esn-ease-out) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
/* The ESN star on the right of the hero, as in the page heroes of the website: the whole
   star in the ESN colours, cropped tightly to the star, fading in with
   the hero and then turning slowly like the website's star (one turn per minute).
   It sits in .hero-content before the headline and is placed against .hero, on the
   hero's padding: as far from the right edge as the text is from the left, its bottom
   in line with the bottom of the buttons. The star is round enough to stay inside its
   box while it turns. */
.hero-star {
  position: absolute;
  right: clamp(32px, 6vw, 64px);
  bottom: clamp(32px, 6vw, 64px);
  width: clamp(136px, 16vw, 178px);
  height: auto;
  pointer-events: none;
  animation:
    fade-in 0.8s var(--esn-ease-out) 0.3s both,
    star-spin 60s linear infinite;
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes star-spin { to { transform: rotate(360deg); } }

.hero-content { max-width: 600px; }
.eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: var(--esn-radius-pill);
  background: var(--esn-cyan-tint);
  color: #00668c;
  font: 700 0.8rem/1.4 var(--esn-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 {
  margin: 0 0 16px;
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
h1 .accent { color: var(--esn-magenta); white-space: nowrap; }
.lead { margin: 0 0 28px; color: var(--esn-ink-soft); font-size: 1.1875rem; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--esn-radius-pill);
  font-family: var(--esn-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s var(--esn-ease-out), box-shadow 0.2s, background-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.button--primary { background: var(--esn-dark-blue); box-shadow: var(--esn-shadow-md); color: #fff; }
.button--primary:hover { background: var(--esn-dark-blue-strong); color: #fff; }
.button--outline { box-shadow: inset 0 0 0 2px var(--esn-line); color: var(--esn-dark-blue); }
.button--outline:hover { box-shadow: inset 0 0 0 2px var(--esn-dark-blue); color: var(--esn-dark-blue); }
.button:active { transform: scale(0.98); }

/* Sections ------------------------------------------------------------- */
section { margin-top: 56px; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 20px;
}
h2 {
  margin: 0;
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: clamp(1.625rem, 4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
}
.more-link:hover { text-decoration: underline; }

/* Live events ------------------------------------------------------------ */
.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.event {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--esn-line);
  border-radius: var(--esn-radius-lg);
  background: #fff;
  color: var(--esn-ink);
  text-decoration: none;
  transition: transform 0.25s var(--esn-ease-out), box-shadow 0.25s var(--esn-ease-out), border-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.event:active { transform: scale(0.98); }
.event-title {
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
}
.event-meta { color: var(--esn-muted); font-size: 0.9375rem; }
.event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}
.event-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--esn-radius-pill);
  background: var(--esn-surface-muted);
  color: var(--esn-ink-soft);
  font-size: 0.8125rem;
  font-weight: 700;
}
.event-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Modifiers match pretix's availability colours. */
.event-status--green { background: var(--esn-green-tint); color: #3f6e1c; }
.event-status--orange { background: var(--esn-orange-tint); color: #a4480b; }
.event-status--red { background: var(--esn-magenta-tint); color: var(--esn-magenta-strong); }
.event-arrow { color: var(--esn-muted); transition: transform 0.25s var(--esn-ease-out), color 0.25s; }

.event--placeholder {
  min-height: 150px;
  border-color: transparent;
  background: linear-gradient(90deg, #fff 0%, var(--esn-surface-sunken) 50%, #fff 100%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.events-message {
  margin: 0;
  padding: 24px;
  border-radius: var(--esn-radius-lg);
  background: #fff;
  color: var(--esn-ink-soft);
}

/* Info cards ------------------------------------------------------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.info {
  padding: 24px;
  border-radius: var(--esn-radius-lg);
  background: #fff;
  box-shadow: var(--esn-shadow-sm);
}
.info-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: #fff;
}
.info-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info--mail .info-icon { background: var(--esn-cyan-strong); }
.info--resend .info-icon { background: var(--esn-magenta-strong); }
.info--help .info-icon { background: var(--esn-dark-blue); }
h3 {
  margin: 0 0 6px;
  color: var(--esn-dark-blue);
  font-family: var(--esn-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.info p { margin: 0; color: var(--esn-ink-soft); font-size: 0.9375rem; }

/* Pointer to the main website ------------------------------------------- */
.main-site-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(28px, 5vw, 44px);
  border-radius: var(--esn-radius-2xl);
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgba(0, 174, 239, 0.35), transparent 60%),
    radial-gradient(26rem 18rem at 0% 100%, rgba(236, 0, 140, 0.3), transparent 60%),
    var(--esn-dark-blue);
  box-shadow: var(--esn-shadow-lg);
  color: #fff;
}
.main-site-card h2 { color: #fff; }
.main-site-card p { max-width: 560px; margin: 10px 0 0; color: rgba(255, 255, 255, 0.85); }
.button--white { background: #fff; box-shadow: var(--esn-shadow-md); color: var(--esn-dark-blue); }
.button--white:hover { color: var(--esn-magenta-strong); }

/* Footer ------------------------------------------------------------------ */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--esn-line);
  color: var(--esn-muted);
  font-size: 0.875rem;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--esn-ink-soft); font-weight: 700; text-decoration: none; }
.site-footer a:hover { color: var(--esn-magenta-strong); text-decoration: underline; }

/* Hover lift only where a real pointer can hover; on touch it would stick after a tap. */
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .event:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--esn-shadow-lg); }
  .event:hover .event-arrow { transform: translateX(3px); color: var(--esn-ink); }
}

/* Touch screens: tap targets of at least 44px. */
@media (pointer: coarse) {
  .lang-switch button { min-width: 48px; min-height: 40px; }
  .site-footer a, .more-link { display: inline-block; padding: 10px 0; margin: -10px 0; }
}

/* Below the width where text and star fit side by side, the star floats right of the
   headline's first line. It takes the headline's font size, so it fits into that line
   (the star image is square, the line is font size × 1.05; the top margin centres it)
   and only that line makes room for it; the text flows around it at any length. */
@media (max-width: 960px) {
  .hero-content { max-width: none; }
  .lead { max-width: 600px; }
  /* As a block, the eyebrow ends its line, so the star starts at the headline, not beside the eyebrow. */
  .eyebrow { display: block; width: fit-content; }
  .hero-star {
    position: static;
    float: right;
    width: clamp(2.25rem, 6vw, 3.5rem);
    margin: calc(clamp(2.25rem, 6vw, 3.5rem) * 0.025) 0 0 12px;
  }
}
@media (max-width: 720px) {
  .main-site-link { display: none; }
}
@media (max-width: 560px) {
  .logo { width: 110px; }
  .brand { gap: 12px; }
  .brand-label { padding-left: 12px; font-size: 1.0625rem; }
  .main-site-card .button { flex: 1 1 100%; }
  .hero { border-radius: var(--esn-radius-xl); }
  .actions .button { flex: 1 1 100%; }
  section { margin-top: 44px; }
}

/* Very narrow phones: no room next to the logo; the bar above and the hero still say "ticket shop". */
@media (max-width: 360px) {
  .brand-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}