/* ---------- Wellbeing Forum ---------- */

.forum {
  --f-space: clamp(72px, 10vw, 136px);
  --f-line: var(--color-line);
  --f-card: var(--color-card);
  --f-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.forum section {
  padding-block: calc(var(--f-space) / 2);
}

/* shared type */

.f-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.f-eyebrow--light {
  color: rgba(244, 237, 226, 0.8);
}

.f-title {
  margin: 0 0 24px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.f-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  text-wrap: pretty;
}

.f-text + .f-text {
  margin-top: 16px;
}

.f-text strong {
  font-weight: 600;
  color: var(--color-ink);
}

.f-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.f-head .f-title {
  margin-bottom: 0;
}

.f-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
}

.f-head__lead {
  max-width: 48ch;
  justify-self: end;
}

.f-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 540;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.f-link::after {
  content: "→";
  transition: transform 0.3s var(--f-ease);
}

.f-link:hover::after {
  transform: translateX(4px);
}

/* buttons */

.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 540;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.f-btn--light {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}

.f-btn--light:hover {
  background: var(--btn-solid-bg-hover);
}

.f-btn--ghost {
  border-color: rgba(244, 237, 226, 0.45);
  color: var(--color-invert-fg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.f-btn--ghost:hover {
  border-color: var(--color-invert-fg);
  background: rgba(244, 237, 226, 0.12);
}

/* reveal on scroll
   Driven by a keyframe animation, NOT a transition, on purpose: several
   revealed elements (.f-pillar, .f-expert) also have hover transitions, and
   `.js [data-reveal]` (0,2,0) outspecifies a component class (0,1,0) — a
   `transition` here silently replaced theirs and made those hovers snap.
   An animation cannot collide with the transition property that way.
   No fill mode either, so once the reveal has played the element is back on
   its own declared values and a later hover transform would still work. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    animation: f-reveal 0.9s var(--f-ease);
  }

  @keyframes f-reveal {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
  }
}

/* ---------- hero ---------- */

.forum .f-hero {
  padding-block: 0 calc(var(--f-space) / 2);
}

.f-hero__frame {
  position: relative;
  display: grid;
  min-height: min(78svh, 760px);
  border-radius: var(--card-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-photo-placeholder);
}

.f-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.f-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.72) 0%, rgb(var(--scrim-rgb) / 0.25) 45%, rgb(var(--scrim-rgb) / 0.05) 100%);
}

.f-hero__content {
  align-self: end;
  padding: clamp(28px, 5vw, 64px);
  color: var(--color-invert-fg);
}

/* the hero block is bottom-aligned, so widening this gap lifts the
   eyebrow rather than pushing the title down */
.f-hero__content .f-eyebrow {
  margin-bottom: 34px;
}

.f-hero__title {
  max-width: 14ch;
  margin: 0 0 28px;
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.f-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 32px;
}

.f-hero__date {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 540;
}

.f-hero__days {
  font-size: 14px;
  color: rgba(244, 237, 226, 0.7);
}

.f-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- manifest ---------- */

.f-manifest {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.f-manifest__quote {
  margin: 0 0 32px;
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 460;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.f-manifest__quote em {
  font-style: italic;
  font-weight: 380;
  color: var(--color-gold);
}

.f-manifest__text {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* ---------- split (image + text) ---------- */

.f-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.f-split + .f-split {
  margin-top: clamp(56px, 8vw, 112px);
}

.f-split--reverse .f-split__media {
  order: 2;
}

.f-split__media {
  margin: 0;
  aspect-ratio: 5 / 4;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--f-card);
}

.f-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-split__body {
  max-width: 520px;
}

/* pillars */

.f-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(56px, 8vw, 112px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.f-pillar {
  padding: 32px 28px 36px;
  border-radius: var(--card-radius);
  background: var(--f-card);
  transition: background 0.3s ease, transform 0.5s var(--f-ease);
}

.f-pillar:hover {
  background: var(--color-card-hover);
}

.f-pillar__title {
  margin: 0 0 8px;
  color: var(--color-gold);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.f-pillar__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---------- program ---------- */

.f-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.f-day__media {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 24px;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--f-card);
}

.f-day__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--f-ease);
}

.f-day:hover .f-day__media img {
  transform: scale(1.04);
}

.f-day__date {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-pill-bg);
  color: var(--color-pill-fg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.f-day__weekday {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.f-day__title {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.f-day__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--f-line);
}

.f-day__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--f-line);
  font-size: 15px;
  line-height: 1.55;
}

.f-day__list span {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
}

/* ---------- experts ---------- */

.f-experts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-expert {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 32px;
  border: 1px solid var(--f-line);
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.f-expert:hover {
  border-color: transparent;
  background: var(--f-card);
}

/* the name is the real button; its ::after stretches over the whole card so
   a click anywhere on it is a click on the button, for keyboards too */
.f-expert__open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.f-expert__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.f-expert__open:focus-visible {
  outline: none;
}

.f-expert:has(.f-expert__open:focus-visible) {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.f-expert__photo {
  width: 128px;
  height: 128px;
  margin-bottom: 28px;
  border-radius: 50%;
  object-fit: cover;
  /* shows while the portrait loads, and behind its transparent edges */
  background: var(--color-accent-soft-bg);
}

.f-expert__name {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 540;
  line-height: 1.3;
  text-wrap: balance;
}

.f-expert__role {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 540;
  line-height: 1.45;
  color: var(--color-gold);
}

.f-expert__bio {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-muted);
}

.f-expert__bio p,
.f-modal__bio p {
  margin: 0;
}

.f-expert__bio p + p {
  margin-top: 0.8em;
}

.f-expert__bio strong,
.f-modal__bio strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* On the card the bio is a six-line teaser fading out; the full text opens
   in the dialog. Only with JS, so without it the whole bio stays readable. */
.js .f-expert__bio {
  max-height: calc(1.65em * 6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.65em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.65em), transparent);
}

/* ---------- speaker dialog ---------- */

.f-modal {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  height: min(680px, calc(100svh - 32px));
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
}

.f-modal::backdrop {
  background: rgb(var(--scrim-rgb) / 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body:has(.f-modal[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .f-modal[open] {
    animation: f-modal-in 0.45s var(--f-ease);
  }

  .f-modal[open]::backdrop {
    animation: f-modal-fade 0.45s ease;
  }

  @keyframes f-modal-in {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
  }

  @keyframes f-modal-fade {
    from {
      opacity: 0;
    }
  }
}

.f-modal__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  height: 100%;
}

.f-modal__media {
  margin: 0;
  min-height: 0;
  background: var(--f-card);
}

.f-modal__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Windows draws a wide grey scrollbar with arrow buttons by default; a thin
   one in the page's own colours reads as part of the panel. Chromium and
   Firefox both take the standard properties. */
.f-modal__body,
.f-modal__inner {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-ink) 35%, transparent) transparent;
}

/* Chromium makes a scrollable box keyboard-focusable and showModal() puts
   focus there first, so Windows drew a focus ring around the text pane the
   moment the dialog opened. It still scrolls with the keyboard; it just
   doesn't need the ring. */
.f-modal:focus,
.f-modal__body:focus,
.f-modal__inner:focus {
  outline: none;
}

.f-modal__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px);
}

.f-modal__name {
  margin: 0 48px 8px 0;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.f-modal__role {
  margin: 0 0 28px;
  font-size: 15px;
  font-weight: 540;
  line-height: 1.45;
  color: var(--color-gold);
}

/* speaker's Instagram, filled from the card's data-instagram */
.f-modal__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -12px 0 28px;
  font-size: 14px;
  font-weight: 540;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--f-line);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease;
}

.f-modal__social:hover {
  text-decoration-color: currentColor;
}

.f-modal__social[hidden] {
  display: none;
}

.f-modal__social svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.f-modal__bio {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
}

.f-modal__bio p + p {
  margin-top: 1em;
}

.f-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--f-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.f-modal__close::before,
.f-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.f-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.f-modal__close:hover {
  border-color: transparent;
  background: var(--f-card);
}

@media (max-width: 760px) {
  .f-modal {
    height: calc(100svh - 32px);
  }

  /* stacked: the photo scrolls away with the text instead of pinning */
  .f-modal__inner {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .f-modal__media {
    height: min(52svh, 420px);
  }

  .f-modal__body {
    overflow: visible;
  }
}

/* grouped by programme day */

.f-experts__day + .f-experts__day {
  margin-top: clamp(40px, 5vw, 64px);
}

.f-experts__label {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.f-experts__label span {
  color: var(--color-muted);
}

/* ---------- tickets ---------- */

.f-tickets__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.f-tickets__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each row is a mailto link with the ticket in the subject line; boxed the
   same way as the speaker cards, filling on hover */
.f-ticket {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  height: 100%;
  padding: 26px 28px;
  border: 1px solid var(--f-line);
  border-radius: var(--card-radius);
  color: inherit;
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* only rows that are links react; while sales are closed they are plain divs */
a.f-ticket:hover {
  border-color: transparent;
  background: var(--f-card);
}

.f-ticket:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.f-ticket__when {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.f-ticket__name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.f-ticket__name span {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
}

.f-ticket__price {
  font-size: 22px;
  font-weight: 540;
  white-space: nowrap;
}

.f-pass {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--card-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-invert-bg);
  color: var(--color-invert-fg);
}

.f-pass::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--color-invert-glow), transparent 70%);
  transform: translate(30%, -30%);
}

.f-pass__title {
  margin: 0 0 28px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 460;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.f-pass__prices {
  margin: 0 0 32px;
}

.f-pass__row {
  display: flex;
  /* the two-line label centres on the price instead of hanging off its baseline */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(244, 237, 226, 0.2);
}

.f-pass__row:first-child {
  border-top: 0;
}

.f-pass__row dt {
  font-size: 15px;
  font-weight: 540;
}

.f-pass__row dt span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(244, 237, 226, 0.7);
}

.f-pass__row dd {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.f-pass .f-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* stands in for the booking button until ticket sales open */
.f-pass__soon {
  align-self: flex-start;
  margin: auto 0 0;
  padding: 14px 22px;
  border: 1px solid rgba(244, 237, 226, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 540;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-invert-fg);
}

.f-tickets__note {
  margin-top: 16px;
}

/* the whole card books: the button's ::after covers it, so it stays one
   link for keyboards and screen readers */
.f-pass .f-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
}

.f-pass:hover .f-btn {
  background: var(--btn-solid-bg-hover);
}

.f-pass .f-btn:focus-visible {
  outline: none;
}

.f-pass:has(.f-btn:focus-visible) {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* ---------- audience ---------- */

/* two blocks side by side: the text on its own card, the photo next to it,
   same height and the same 16px gap as the other card rows */
.f-audience__split {
  align-items: stretch;
  gap: 16px;
}

.f-audience__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--card-radius);
  background: var(--f-card);
}

/* square photo instead of the split's usual 5:4 */
.f-audience__media {
  aspect-ratio: 1;
}

.f-audience__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-audience__list li {
  position: relative;
  padding: 14px 0 14px 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-muted);
}

.f-audience__list li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}

.f-audience__list strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- organizers ---------- */

.f-note {
  max-width: 760px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  text-align: center;
}

.f-note__quote {
  margin: 0 0 24px;
  font-size: clamp(28px, 3.6vw, 48px);
  font-style: italic;
  font-weight: 380;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.f-note__author {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.f-note__name {
  font-size: 17px;
  font-weight: 600;
  /* same accent as the .f-eyebrow labels (ORGANIZATOR) below */
  color: var(--color-gold);
}

.f-note__role {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-muted);
}

.f-orgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.f-org {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--card-radius);
  background: var(--f-card);
}

/* keeps the two card links on one line whatever the copy length does */
.f-org .f-link {
  margin-top: auto;
  padding-top: 20px;
}

.f-org__name {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* the tickets close the page now, so they carry the bottom spacing */

.forum .f-tickets {
  padding-bottom: var(--f-space);
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .f-experts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .forum section {
    padding-block: 36px;
  }

  .f-hero__frame {
    min-height: 560px;
  }

  .f-head--split,
  .f-split,
  .f-orgs,
  .f-tickets__grid {
    grid-template-columns: 1fr;
  }

  .f-head__lead {
    justify-self: start;
  }

  .f-split--reverse .f-split__media {
    order: 0;
  }

  .f-pillars {
    grid-template-columns: 1fr;
  }

  /* program becomes a swipeable row */
  .f-days {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    gap: 16px;
    margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad);
    scroll-padding-inline: var(--page-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .f-days::-webkit-scrollbar {
    display: none;
  }

  .f-day {
    scroll-snap-align: start;
  }

  .forum .f-tickets {
    padding-bottom: 56px;
  }
}

@media (max-width: 560px) {
  .f-experts__grid {
    grid-template-columns: 1fr;
  }

  .f-expert__photo {
    margin-bottom: 20px;
  }

  .f-ticket {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 20px 22px;
  }

  .f-ticket__when {
    grid-column: 1 / -1;
  }

  /* the Kultura / Wiedza / Ciało tags are dropped on phones */
  .f-ticket__name span {
    display: none;
  }

  .f-hero__actions .f-btn {
    flex: 1 1 100%;
  }
}