.trafford-culturehosts-page {
  --ch-border: #d6dbe1;
  --ch-surface: #f8fafc;
  --ch-primary: #005ea5;
  --ch-primary-hover: #003f70;
  --ch-focus: #ffbf47;
  display: grid;
  gap: 1.5rem;
  margin-block: 1rem 2rem;
}

/* Guidance section: title left, body right (~50/50), bottom-aligned so a
 * longer body pushes the title further down. No card chrome — guidance sits
 * directly on the page background. Collapses to a single column on mobile. */
.trafford-culturehosts-page__guidance {
  display: grid;
  gap: 1rem;
}

@media (min-width: 64rem) {
  .trafford-culturehosts-page__guidance {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 2rem;
  }
}

/* Title matches the hero `localgov-title` styling: --font-size-banner-title
 * desktop (4rem) / --font-size-banner-title-m mobile (2.5rem), with the
 * shared 1.235 line-height giving the 79px line-box Figma measures.
 *
 * The margin-block-start carries the diagonal "Trafford is" corner-logo
 * clearance. Bottom alignment plus this margin makes the title's outer
 * (margin + content) height the minimum row height — so when the body is
 * short, the row grows to keep the title content below the logo's
 * protrusion; when the body is long, the body sets the row height and the
 * title naturally sits clear of the overlap zone at its bottom alignment. */
.trafford-culturehosts-page__guidance-title {
  margin: 0;
  font-size: var(--font-size-banner-title-m);
  font-weight: var(--heading-font-weight, 500);
  line-height: var(--banner-title-line-height);
  margin-block-start: calc(var(--header-logo-height-mobile) - var(--header-block-size-mobile));
}

@media (min-width: 64rem) {
  .trafford-culturehosts-page__guidance-title {
    font-size: var(--font-size-banner-title);
    margin-block-start: calc(var(--header-logo-height) - var(--header-block-size));
  }
}

/* Body text matches the .empty-state__message scale: --font-size-h5-m
 * (1.266rem ≈ 20px) at ≥40rem, --font-size-h6 (1rem = 16px) below — i.e.
 * the same step-down used elsewhere on the site for prominent intro /
 * messaging text alongside a heading. */
.trafford-culturehosts-page__guidance-body {
  margin: 0;
  font-size: var(--font-size-h5-m);
  white-space: pre-line;
}

@media (max-width: 40rem) {
  .trafford-culturehosts-page__guidance-body {
    font-size: var(--font-size-h6);
  }
}

/* Embed sits below the guidance. The iframe stays within the page
 * container, but the white background spans the full viewport width — a
 * ::before pseudo paints the white band edge-to-edge using
 * `inset-inline: calc(50% - 50vw)`, sitting behind the section content
 * (via z-index: -1 inside an isolated stacking context). */
.trafford-culturehosts-page__embed {
  position: relative;
  isolation: isolate;
  padding: 1rem;
  background: #fff;
}

.trafford-culturehosts-page__embed::before {
  content: "";
  position: absolute;
  inset: 0;
  inset-inline: calc(50% - 50vw);
  background: #fff;
  z-index: -1;
}

.trafford-culturehosts-page__iframe-wrapper {
  position: relative;
  min-height: 20rem;
}

.trafford-culturehosts-page__iframe {
  width: 100%;
  min-height: 20rem;
  border: 0;
  border-radius: 0.25rem;
  background: #fff;
}

.trafford-culturehosts-page__loading,
.trafford-culturehosts-page__fallback {
  border: 1px solid var(--ch-border);
  border-radius: 0.25rem;
  padding: 1rem;
  background: var(--ch-surface);
}

.trafford-culturehosts-page__status,
.trafford-culturehosts-page__fallback-message {
  margin: 0;
}

.trafford-culturehosts-page__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.trafford-culturehosts-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0.625rem 1rem;
}

.trafford-culturehosts-page__cta--primary {
  background: var(--ch-primary);
  color: #fff;
}

.trafford-culturehosts-page__cta--primary:hover {
  background: var(--ch-primary-hover);
}

.trafford-culturehosts-page__cta--secondary {
  background: #fff;
  color: var(--ch-primary);
  border-color: var(--ch-primary);
}

.trafford-culturehosts-page__cta:focus-visible {
  outline: 3px solid var(--ch-focus);
  outline-offset: 2px;
}

.trafford-culturehosts-page.is-fallback .trafford-culturehosts-page__iframe {
  display: none;
}