/* Small finishing corrections; preserve the existing artwork and page layouts. */
:root { --content-gutter: 48px; }
@media (max-width: 1000px) { :root { --content-gutter: 28px; } }
@media (max-width: 650px) { :root { --content-gutter: 22px; } }

/* Match the activity introduction to the shared content edges below it. */
.activity-hero.wrap {
  padding-inline: max(var(--content-gutter), calc((100% - 1280px) / 2 + var(--content-gutter)));
}

/* Keep card actions aligned when titles or descriptions wrap. */
.activity-card { display: flex; flex-direction: column; }
.activity-card[hidden] { display: none; }
.activity-cover { flex-shrink: 0; }
.activity-card-copy { display: flex; flex-direction: column; flex: 1; }
.activity-card-copy > .activity-preview-link { margin-top: auto; }
.activity-card-copy > .activity-download-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 8px;
}

/* Consistent text endings without changing section padding or type sizes. */
.grownups-grid article > p:last-child,
.grownups-section > p:last-child,
.catalogue-card > div > p:last-child { margin-bottom: 0; }
.activity-card h3,
.grownups-grid h3 { text-wrap: balance; }
.grownups-section a:not(.button),
.activity-download-link { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Make the existing FAQ rows comfortable to tap and keyboard focus. */
.family-notes summary { min-height: 44px; padding-block: 8px; cursor: pointer; }
.family-notes details > p { margin-top: 12px; margin-bottom: 12px; }
.family-notes details[open] > summary { color: var(--blue); }

/* Allow long button labels and form text to fit small screens. */
.button { max-width: 100%; white-space: normal; }
input, select, textarea { font: inherit; }
.catalogue-tools input { min-width: 0; max-width: 100%; }
.activity-filter-bar, .catalogue-tools { min-width: 0; }
@media (hover: none) {
  .button:hover, .activity-card:hover { transform: none; }
}

/* Banner sizing pass: retain artwork, colours, fades and character overlaps. */
@media (min-width: 651px) {
  .banner-inner, .crew-welcome-inner.banner-inner, .rd-field-inner { min-height: 590px; }
  .rd-field-inner { align-items: flex-start; }
  .banner-inner > .banner-copy, .crew-welcome-inner.banner-inner > .banner-copy,
  .rd-field-copy { padding-top: 70px; padding-bottom: 48px; }
  .activity-hero.wrap { min-height: 596px; align-items: start; padding-top: 70px; padding-bottom: 48px; }
  .activity-hero h1 { font-size: clamp(48px,5.3vw,78px); margin: 18px 0 25px; }
  .activity-hero .lead { font-size: 25px; line-height: 1.65; margin: 0 0 20px; }
  .activity-hero-copy { align-self: start; }
  .home-world .dimensional-hero { min-height: 596px; padding-top: 70px; padding-bottom: 0; border-bottom-width: 6px; }
  .home-world .hero-copy { align-self: start; padding-bottom: 48px; }
  .home-world .dimensional-hero { padding-inline: var(--content-gutter); }
  .construction.wrap { min-height: 596px; padding-top: 70px; padding-bottom: 48px; padding-inline: max(var(--content-gutter), calc((100% - 1280px)/2 + var(--content-gutter))); }
  .construction > div { align-self: start; }
  .construction h1 { font-size: clamp(48px,5.3vw,78px); line-height: 1.03; margin: 18px 0 25px; }
  .construction figure { max-height: 470px; align-self: end; }
  .construction figure img { max-height: 470px; object-fit: contain; }
}
@media (min-width: 1100px) {
  .seasonal-merch-grid { height: 590px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
  .banner-inner, .crew-welcome-inner.banner-inner, .rd-field-inner { min-height: 560px; }
  .banner-inner > .banner-copy, .crew-welcome-inner.banner-inner > .banner-copy,
  .rd-field-copy { padding-top: 52px; }
  .activity-hero.wrap { min-height: 566px; padding-top: 52px; }
  .home-world .dimensional-hero, .construction.wrap { min-height: 566px; padding-top: 52px; }
}
/* Let copy determine mobile height, with a deliberate space for the artwork. */
@media (max-width: 650px) {
  .banner-inner, .crew-welcome-inner.banner-inner, .rd-field-inner { min-height: 0; padding-bottom: 350px; }
  .banner-inner > .banner-copy, .crew-welcome-inner.banner-inner > .banner-copy,
  .rd-field-copy { padding: 36px 0 24px; }
  .activity-hero.wrap { padding-top: 36px; padding-bottom: 374px; min-height: 0; }
  .activity-hero h1 { font-size: 49px; margin: 13px 0 19px; }
  .activity-hero .lead { font-size: 22px; line-height: 1.65; margin-bottom: 20px; }
  .banner-inner > .watch-dan { height: 390px; width: 100%; bottom: -25px; }
  .banner-inner > .grownups-gus { height: 390px; bottom: -21px; }
  .rd-field-maya { height: 430px; width: auto; max-width: 100%; max-height: none; bottom: -86px; right: 0; }
  .activity-hero-art > img { height: 410px; bottom: -55px; }
  .crew-welcome-inner.banner-inner { padding-bottom: 250px; }
  .crew-welcome-inner.banner-inner > .hero-team { width: 100%; height: clamp(190px,52vw,300px); aspect-ratio: auto; }
  .crew-welcome .hero-team .intro-group { height: 96%; left: 65%; }
  .crew-welcome .hero-team .intro-lucy { left: 29%; }
}
/* Use the same centred content edges on Home as the other banners. */
@media (min-width: 651px) {
  .home-world .dimensional-hero { padding-inline: max(var(--content-gutter), calc((100% - 1280px)/2 + var(--content-gutter))); }
}