/* ═══════════════════════════════════════════════════════════════════════════
   WORKSHOP REGISTRATION
   register.php · my-workshops.php · resend.php · admin-bookings.php

   Loaded after style.css, and only by these pages. Kept separate so editing
   either file can't disturb the other — the main site never loads this, and
   re-uploading style.css never touches registration styling.

   Colours are reused from style.css's :root. As in that file, states are never
   signalled by colour alone: full and clashing workshops also get a dashed
   border, a struck-through title, and wording that says so.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ok-bg:   #e6f2ea;
  --warn-bg: #f7eeda;
  --err-bg:  #f7e5e5;
  --info-bg: #e6eefa;
  /* Height of one 30-minute row in the schedule grid.
     This is what decides whether a card can hold its own content: a card is
     (duration / 30) rows tall, and the shortest workshop on the schedule is
     60 minutes — two rows — which must still fit a time, a wrapped title, a
     facilitator and a places count without clipping. Raised from 2.7rem when
     the titles were reworded and "Improvisation through Questions" stopped
     fitting. If a 30-minute workshop is ever added, this needs revisiting. */
  --ws-slot: 3.6rem;
}

/* ── PAGE FRAME ── */
.reg-main {
  padding: 7rem 0 4rem;   /* clears the fixed header */
  min-height: 70vh;
}

/* No header to clear when reg_header() is called with $chrome = false. */
.reg-body--no-chrome .reg-main {
  padding-top: 3rem;
}

.reg-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
}

.reg-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-style: italic;
  margin-bottom: 1rem;
}

.reg-intro {
  max-width: 640px;
  color: #333;
  margin-bottom: 1.5rem;
}

.reg-help {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--mid);
}

.reg-help a,
.reg-intro a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reg-help a:hover,
.reg-help a:focus {
  color: var(--accent-dark);
}

.reg-mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* ── NOTICES ── */
.reg-notice {
  border-left: 4px solid #555555;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: #ececec;
}

.reg-notice__msg {
  font-weight: bold;
  color: var(--black);
}

.reg-notice__detail {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: #444;
}

.reg-notice--ok    { border-left-color: #1b6b3a; background: var(--ok-bg); }
.reg-notice--warn  { border-left-color: #8a5a00; background: var(--warn-bg); }
.reg-notice--error { border-left-color: #a32020; background: var(--err-bg); }
.reg-notice--info  { border-left-color: #0057b8; background: var(--info-bg); }

/* ── SUMMARY STRIP ── */
.reg-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.reg-summary dt {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.reg-summary dd {
  font-size: 1.05rem;
  margin-top: 0.15rem;
  word-break: break-word;
}

/* ── FORMS ── */
.reg-form {
  max-width: 420px;
  margin-top: 1.5rem;
}

.reg-field {
  display: block;
  margin-bottom: 0.75rem;
}

.reg-field__label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0.4rem;
}

.reg-field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--black);
  background: #fff;
  border: 1.5px solid #bbb;
  border-radius: var(--radius);
}

.reg-field input:focus {
  outline: 3px solid #0057b8;
  outline-offset: 1px;
  border-color: #0057b8;
}

.reg-field input[aria-invalid="true"] {
  border-color: #a32020;
}

.reg-field__hint {
  font-size: 0.85rem;
  color: var(--mid);
  margin-bottom: 1.25rem;
}

.reg-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid #111111;
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.reg-btn:hover,
.reg-btn:focus {
  background: var(--white);
  color: var(--black);
  outline: 3px solid #111111;
  outline-offset: 2px;
}

/* ── SCHEDULE / POSTER PANEL ──
   Shared by /programme (read-only) and /my-workshops (the booking picker):
   a CSS Grid with one column per room and one row per 30-minute slot —
   workshop height is literally its duration, so clashes are visible as cards
   at the same height — wrapped in a gradient "poster" panel.

   Room colour (--room-color, set per .ws-col in PHP) is decorative only.
   Every state a card can be in — selectable, chosen, full, clashing — is
   also carried by shape and wording, never by hue alone. */
.ws-poster {
  background: linear-gradient(150deg, #1eb4a0 0%, #7fd858 45%, #f4d842 100%);
  border-radius: 28px;
  padding: 2rem 1.25rem 2.25rem;
  margin-bottom: 2rem;
  font-family: 'Space Grotesk', sans-serif;
}

.ws-poster__top {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

.ws-poster__links {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.ws-poster__back {
  font-size: 0.85rem;
  font-weight: 600;
  color: #131313;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ws-poster__back:hover,
.ws-poster__back:focus-visible {
  color: #000;
}

.ws-poster__lang {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #131313;
  text-decoration: none;
  border: 1.5px solid #131313;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.ws-poster__lang:hover,
.ws-poster__lang:focus-visible {
  background: #131313;
  color: #fff;
}

.ws-poster__back:focus-visible,
.ws-poster__lang:focus-visible {
  outline: 3px solid #131313;
  outline-offset: 2px;
}

.ws-form {
  margin-top: 0;
}

.ws-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;             /* the gutter */
  /* One column per room. The minimum is what sets how narrow a card can get
     before the grid scrolls sideways instead, so it also decides how many
     lines a long title wraps to. */
  grid-auto-columns: minmax(170px, 1fr);
  gap: 0 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.ws-col,
.ws-gutter {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* .ws-col is a <section>, and style.css puts a blanket 5rem top/bottom
     padding on every <section> for the homepage's rhythm. Left unset here,
     that padding pushes each room's header and cards 80px below the time
     gutter (a plain <div>, which never gets it) — same row, different top. */
  padding: 0;
}

.ws-col__head {
  height: auto;
  margin-bottom: 0.6rem;
}

.ws-room-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  font-family: 'Archivo Black', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fdf9ef;
  background: #131313;
  border: none;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  cursor: default;
}

/* Only rendered as a <button> when a namesake bio exists to show. */
button.ws-room-chip {
  cursor: pointer;
}

button.ws-room-chip:hover,
button.ws-room-chip:focus-visible {
  outline: 2px solid #131313;
  outline-offset: 2px;
}

.ws-room-chip::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--room-color);
  flex: none;
}

.ws-col__slots,
.ws-gutter__marks {
  display: grid;
  grid-template-rows: repeat(var(--ws-rows), var(--ws-slot));
}

.ws-gutter__mark {
  font-size: 0.7rem;
  font-weight: 600;
  color: #17331f;
  text-align: right;
  padding-right: 0.5rem;
  transform: translateY(-0.5em);
  white-space: nowrap;
}

.ws-gutter__mark.is-hour {
  border-top: 1px solid rgba(19, 19, 19, 0.15);
}

/* ── WORKSHOP CARD ── */
.ws-card {
  position: relative;
  margin: 3px 0;
}

/* The coloured, bordered face of the card — a <label> around the checkbox
   on /my-workshops, a plain <button> on the read-only /programme page. */
.ws-card__select {
  display: block;
  width: 100%;
  /* .ws-card is the grid item and stretches to its grid-row span by default;
     without this the card would shrink to its content's height instead,
     leaving the rest of its time slot empty. */
  height: 100%;
  /* Left padding clears the .ws-card__info badge, which sits on top of this
     button rather than pushing it over, since it's a positioned sibling. */
  padding: 0.45rem 1.6rem 0.4rem 1.9rem;
  background: var(--room-color);
  border: 2px solid #131313;
  border-radius: 12px;
  box-shadow: 2px 2px 0 rgba(19, 19, 19, 0.2);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.1s;
}

.ws-card__select:hover {
  transform: translateY(-1px);
}

.ws-card__select:focus-within,
.ws-card__select:focus-visible {
  outline: 3px solid #131313;
  outline-offset: 2px;
}

/* No .ws-card__info badge on the read-only /programme page — the whole card
   is the trigger — so no left space needs reserving either. */
.ws-card.is-static .ws-card__select {
  padding-right: 0.65rem;
  padding-left: 0.65rem;
}

.ws-card__check {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #131313;
  cursor: pointer;
}

.ws-card__check:disabled {
  cursor: not-allowed;
}

/* Opens the detail modal without toggling the checkbox — a sibling of the
   label, not nested inside it, so there's no click-forwarding to sort out. */
.ws-card__info {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid #131313;
  background: #fdf9ef;
  color: #131313;
  font-family: 'Archivo Black', Georgia, serif;
  font-size: 0.68rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.ws-card__info:hover,
.ws-card__info:focus-visible {
  background: #131313;
  color: #fdf9ef;
}

.ws-card__body {
  display: block;
  line-height: 1.25;
}

.ws-card__time {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #131313;
  opacity: 0.75;
}

.ws-card__name {
  display: block;
  font-family: 'Archivo Black', Georgia, serif;
  text-transform: uppercase;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #131313;
  margin-top: 0.15rem;
}

.ws-card__by {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #131313;
  opacity: 0.75;
  margin-top: 0.1rem;
}

.ws-card__places {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #131313;
  opacity: 0.7;
  margin-top: 0.15rem;
}

/* The `hidden` attribute works through a UA rule of `display: none`, which any
   author `display` declaration silently beats. Without this guard the clash
   note below still occupies its full height while invisible, which is what once
   made the shortest card clip its own "places left" line. */
[hidden] {
  display: none !important;
}

.ws-card__clash {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #131313;
}

/* A clashing workshop can't be taken, so how many places it has left is noise —
   and dropping it leaves room for the explanation in a card of the same size. */
.ws-card.is-clash .ws-card__places {
  display: none;
}

/* Chosen: invert to a solid dark card with a checkmark on the title, so the
   state still reads with the room colour removed. */
.ws-card.is-chosen .ws-card__select {
  background: #131313;
  border-color: var(--room-color);
  border-width: 3px;
  box-shadow: none;
}

.ws-card.is-chosen .ws-card__time,
.ws-card.is-chosen .ws-card__name,
.ws-card.is-chosen .ws-card__by,
.ws-card.is-chosen .ws-card__places {
  color: #fdf9ef;
  opacity: 1;
}

.ws-card.is-chosen .ws-card__name::before {
  content: '\2713\0020';
}

/* Full and clashing both mean "you can't pick this", and both say why in
   words — the washed-out fill and dashed border repeat the message visually
   without leaning on the room colour to carry it. */
.ws-card.is-full .ws-card__select,
.ws-card.is-clash .ws-card__select {
  background: color-mix(in srgb, var(--room-color) 35%, #e9e5da);
  border-style: dashed;
  cursor: not-allowed;
  box-shadow: none;
}

.ws-card.is-full .ws-card__select:hover,
.ws-card.is-clash .ws-card__select:hover {
  transform: none;
}

.ws-card.is-full .ws-card__name,
.ws-card.is-clash .ws-card__name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ws-card.is-full .ws-card__places {
  font-weight: 700;
  opacity: 1;
}

.ws-poster .ws-actions {
  border-top: 2px solid rgba(19, 19, 19, 0.2);
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.ws-poster .ws-count {
  font-weight: 600;
  color: #131313;
}

.ws-poster .reg-btn {
  background: #131313;
  border-color: #131313;
  font-family: 'Archivo Black', Georgia, serif;
}

.ws-poster .reg-btn:hover,
.ws-poster .reg-btn:focus {
  background: #fdf9ef;
  color: #131313;
  outline-color: #131313;
}

/* ── ROOM / WORKSHOP INFO MODALS ──
   Shared markup contract, wired up by ws-modals.js: a room-chip button opens
   #roomModal, a card or its info button opens #workshopModal. */
.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.ws-modal[hidden] {
  display: none;
}

.ws-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 16, 0.55);
}

.ws-modal__card {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 88vh;
  overflow: auto;
  background: #fdf9ef;
  border-radius: 22px;
  border: 3px solid #131313;
  padding: 1.75rem 1.75rem 2rem;
  font-family: 'Space Grotesk', sans-serif;
}

.ws-modal__banner {
  height: 5.5rem;
  margin: -1.75rem -1.75rem 1.25rem;
  border-radius: 19px 19px 0 0;
}

.ws-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid #131313;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.ws-modal__card h2 {
  font-family: 'Archivo Black', Georgia, serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: #131313;
  margin: 0 0 0.6rem;
}

.ws-modal__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.ws-modal__head h2 {
  margin: 0 0 0.4rem;
}

.ws-modal__photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2.5px solid #131313;
  flex: none;
}

.ws-modal__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ws-modal__pill {
  background: #fff;
  border: 2px solid #131313;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #131313;
}

.ws-modal__by {
  font-weight: 700;
  color: #131313;
  margin: 0 0 0.75rem;
}

.ws-modal__desc p {
  margin: 0 0 0.85rem;
  color: #333;
  line-height: 1.5;
}

.ws-modal__desc p:last-child {
  margin-bottom: 0;
}

.ws-modal__places {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.75rem;
}

/* ── SAVE BAR ── */
.ws-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd;
}

.ws-count {
  font-size: 0.9rem;
  color: var(--mid);
}

/* ── ADMIN ── */
.adm-h {
  font-size: 1.1rem;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 2.5rem 0 0.75rem;
}

.adm-scroll {
  overflow-x: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.adm-table th,
.adm-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.adm-table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.adm-num    { text-align: right; white-space: nowrap; }
.adm-nowrap { white-space: nowrap; }
.adm-muted  { color: var(--mid); font-size: 0.85em; }

.adm-table tr.is-full  { background: var(--err-bg); }
.adm-table tr.is-tight { background: var(--warn-bg); }

.adm-roster {
  border-bottom: 1px solid #ddd;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.adm-roster summary {
  cursor: pointer;
}

.adm-list {
  margin: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.85rem;
  line-height: 1.7;
}

.adm-code {
  background: #1a1a1a;
  color: #e8e4dc;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

/* ── BLENDER PAGE ── */
.blender-hero {
  padding: 1rem 0.25rem 0.5rem;
}

.blender-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #131313;
}

.blender-h1 {
  font-family: 'Archivo Black', Georgia, serif;
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: #131313;
  margin: 0.3rem 0 0.5rem;
}

.blender-venue {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #131313;
  margin-bottom: 1rem;
}

.blender-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #131313;
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.show-time {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #131313;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.show-lineup-h {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #131313;
  opacity: 0.75;
  margin-bottom: 0.6rem;
}

.show-lineup {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.show-lineup__item {
  font-family: 'Archivo Black', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fdf9ef;
  background: #131313;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
}

.blender-cta {
  display: inline-block;
  background: #131313;
  color: #fdf9ef;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 2px solid #131313;
  transition: transform 0.1s ease, background 0.15s ease;
}

.blender-cta:hover,
.blender-cta:focus-visible {
  transform: translateY(-2px);
  background: #000;
}

.blender-cta:focus-visible {
  outline: 3px solid #131313;
  outline-offset: 3px;
}

/* ── ABOUT US PAGE ── */
.about-video {
  margin: 1.5rem 0 2rem;
}

.about-video video {
  display: block;
  width: 100%;
  max-width: 200px;
  border-radius: 16px;
  border: 2.5px solid #131313;
  box-shadow: 3px 3px 0 rgba(19, 19, 19, 0.2);
  background: #000;
}

.about-empty {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  color: #131313;
  opacity: 0.75;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.about-card {
  background: var(--room-color);
  border: 2.5px solid #131313;
  border-radius: 16px;
  box-shadow: 3px 3px 0 rgba(19, 19, 19, 0.2);
  padding: 1.5rem 1.25rem;
}

.about-card__name {
  font-family: 'Archivo Black', Georgia, serif;
  font-size: 1rem;
  text-transform: uppercase;
  color: #131313;
  margin-bottom: 0.2rem;
}

.about-card__role {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #131313;
  opacity: 0.8;
  margin-bottom: 0.75rem;
}

.about-card__bio {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #131313;
  margin-bottom: 0.75rem;
}

.about-card__email {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: #131313;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 0.4rem;
}

.about-card__email:hover,
.about-card__email:focus-visible {
  color: #000;
}

.about-bylaws {
  margin-top: 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
}

.about-bylaws a {
  color: #131313;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-bylaws a:hover,
.about-bylaws a:focus-visible {
  opacity: 1;
}

/* ── RESPONSIVE ──
   Below the breakpoint the schedule becomes a plain stack per room. The
   inline `grid-row` on each card is ignored once its parent stops being a
   grid, so nothing needs overriding. */
@media (max-width: 720px) {
  .ws-grid {
    display: block;
    overflow-x: visible;
  }

  .ws-gutter {
    display: none;
  }

  .ws-col {
    margin-bottom: 2rem;
  }

  .ws-col__slots {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .reg-container {
    padding: 0 1.25rem;
  }
}