/*
 * Ulaznice / Tickets pages — structured legacy content with mixed
 * <strong>/<b>, multiple <h3> sections (festival periods), venue blocks.
 * Styling is light: typographic hierarchy + venue cards.
 */

.tickets {
  padding: var(--sf-space-12) 0 var(--sf-space-20);
}

.tickets__body {
  max-width: 820px;
  margin: 0 auto;
  font-size: var(--sf-text-md, 1rem);
  line-height: var(--sf-leading-normal, 1.6);
}

/* ---------- Section heading (festival period) ---------- */

.tickets__body h3 {
  margin: var(--sf-space-12) 0 var(--sf-space-5);
  padding-bottom: var(--sf-space-3);
  font-family: var(--sf-font-display, inherit);
  font-size: var(--sf-text-2xl, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--sf-color-accent, currentColor);
}

.tickets__body h3:first-child {
  margin-top: 0;
}

/* Sometimes the h3 contains a redundant <strong>/<b>; flatten it */
.tickets__body h3 strong,
.tickets__body h3 b {
  font-weight: inherit;
}

/* ---------- Venue / event blocks ---------- */

.tickets__body p {
  margin: 0 0 var(--sf-space-3);
}

/* The first <strong> in a paragraph acts as the venue/event title.
   Visually lift it by adding spacing above and a subtle accent.    */
.tickets__body p strong:first-child {
  display: block;
  margin-top: var(--sf-space-5);
  margin-bottom: var(--sf-space-1);
  font-family: var(--sf-font-display, inherit);
  font-size: var(--sf-text-lg, 1.15rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sf-color-accent, currentColor);
}

/* Mid-paragraph <strong> (dates etc.) keep inline weight */
.tickets__body p strong:not(:first-child) {
  font-weight: 600;
}

/* ---------- Links ---------- */

.tickets__body a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--sf-color-accent, currentColor);
  transition: color 0.2s ease, background 0.2s ease;
  word-break: break-word;
}

.tickets__body a:hover {
  color: var(--sf-color-accent, inherit);
  background: rgba(0, 0, 0, 0.04);
}

/* Strip default <u> emphasis (some links have <u><a>...</a></u>) */
.tickets__body u {
  text-decoration: none;
}

/* ---------- Empty paragraphs / nbsp spacers ---------- */

.tickets__body p:empty,
.tickets__body p:has(> br:only-child) {
  display: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
  .tickets__body {
    font-size: var(--sf-text-sm, 0.95rem);
  }
  .tickets__body h3 {
    font-size: var(--sf-text-xl, 1.3rem);
  }
}