/*
 * Shared Gutenberg component styles.
 *
 * This file is loaded after the public theme stylesheet and after the
 * editor-only stylesheet. Keep visual component rules here so the editor is
 * a reliable preview of the published page.
 */

/*
 * Layout foundation
 *
 * Gutenberg's regular text width and the site's editorial width are global
 * layout rules. Page components may define their internal grid, but they do
 * not define their own outer container.
 */
:root,
.wp-site-blocks,
.editor-styles-wrapper {
  --whkd-content-width: 1220px;
  --whkd-text-width: 820px;
  --whkd-page-gutter: clamp(18px, 3vw, 32px);
  --whkd-hero-text-width: 680px;
  --whkd-h1-size: clamp(42px, 4.8vw, 64px);
  --whkd-h2-size: clamp(32px, 3.3vw, 48px);
  --whkd-h3-size: clamp(23px, 2.2vw, 30px);
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) {
  --wp--style--global--content-size: var(--whkd-text-width);
  --wp--style--global--wide-size: var(--whkd-content-width);
}

/* Gutenberg's normal content blocks are centered by default. Full-width
   sections and the site hero deliberately opt out. */
:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) > :where(
  :not(.alignfull, .alignwide, .whkd-subpage-hero)
) {
  width: min(var(--whkd-text-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-text-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* A top-level structural block is wide by default. Plain text keeps the
   narrower reading width supplied by theme.json/Gutenberg. */
:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) > :is(
  .alignwide,
  .wp-block-group,
  .wp-block-columns,
  .wp-block-gallery,
  .whkd-calendar,
  .whkd-content,
  .whkd-native-editable,
  .whkd-steps,
  .whkd-content-split,
  .whkd-gallery-feature,
  .whkd-story-links,
  .whkd-training-band,
  .whkd-tree,
  .whkd-visit-planner
) {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Older content pages use a wide wrapper inside the post content. Keep the
   same Gutenberg semantics there without subtracting the page gutter twice. */
.wp-site-blocks :is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) > :is(
  .alignwide,
  .wp-block-group,
  .wp-block-columns,
  .wp-block-gallery,
  .whkd-calendar,
  .whkd-content,
  .whkd-native-editable,
  .whkd-steps,
  .whkd-content-split,
  .whkd-gallery-feature,
  .whkd-story-links,
  .whkd-training-band,
  .whkd-tree,
  .whkd-visit-planner
) {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

:is(.whkd-content, .whkd-native-editable) > :is(
  .alignwide,
  .wp-block-group,
  .wp-block-columns,
  .wp-block-gallery,
  .whkd-calendar,
  .whkd-steps,
  .whkd-content-split,
  .whkd-gallery-feature,
  .whkd-story-links,
  .whkd-training-band,
  .whkd-tree,
  .whkd-visit-planner
),
.wp-site-blocks :is(.whkd-content, .whkd-native-editable) > :is(
  .alignwide,
  .wp-block-group,
  .wp-block-columns,
  .wp-block-gallery,
  .whkd-calendar,
  .whkd-steps,
  .whkd-content-split,
  .whkd-gallery-feature,
  .whkd-story-links,
  .whkd-training-band,
  .whkd-tree,
  .whkd-visit-planner
) {
  width: 100% !important;
  max-width: var(--whkd-content-width) !important;
}

/* Explicit Gutenberg alignment always wins over the compatibility rules
   above. This is the single alignment bridge required by the classic PHP
   page template; components no longer manufacture viewport widths. */
:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) > .alignwide {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.wp-site-blocks :is(.wp-block-post-content, .entry-content) > .alignfull,
:is(.wp-block-post-content, .entry-content) > .alignfull {
  width: 100vw !important;
  max-width: none !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
}

:is(.whkd-content, .whkd-native-editable) > .alignfull {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Full alignment remains full-bleed when Gutenberg nests it inside another
   editable group. This is a layout primitive, not a component exception. */
.wp-site-blocks :is(.wp-block-post-content, .entry-content) .alignfull,
:is(.wp-block-post-content, .entry-content) .alignfull {
  position: relative;
  left: 50%;
  width: 100vw !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: translateX(-50%);
}

.editor-styles-wrapper .alignfull {
  position: static;
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: none;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .alignfull > .alignwide {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* School overview -------------------------------------------------------
   One editorial system shared by the frontend and Gutenberg. Content stays
   in native blocks; these classes define only layout, rhythm and colour. */
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-page {
  overflow: clip;
  background: var(--whkd-paper, #f4f1eb);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-page :is(h2, h3, p, figure) {
  margin-top: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-page .whkd-eyebrow {
  margin-bottom: 20px;
  color: var(--whkd-red, #b52c27);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-page p {
  color: var(--whkd-muted, #68645f);
  font-size: 18px;
  line-height: 1.7;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  min-height: 620px;
  margin-block: clamp(64px, 8vw, 112px) !important;
  background: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__image {
  min-height: 620px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__image img {
  width: 100%;
  height: 100% !important;
  min-height: 620px;
  object-fit: cover;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__copy {
  align-self: center;
  padding: clamp(42px, 6vw, 82px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__copy h2 {
  margin-bottom: 28px !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-facts {
  padding-block: clamp(44px, 5vw, 70px);
  background: #d9d5cd;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-facts__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact {
  padding: 12px clamp(26px, 4vw, 54px);
  border-right: 1px solid rgba(36,35,33,.18);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact:first-child {
  padding-left: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact:last-child {
  padding-right: 0;
  border-right: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact h3 {
  margin-bottom: 8px !important;
  color: var(--whkd-dark, #242321);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact p {
  margin-bottom: 0;
  color: #4e4a45;
  font-size: 16px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms {
  padding-block: clamp(72px, 8vw, 118px);
  background: #2c2b29;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__inner {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(50px, 7vw, 104px);
  align-items: center;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__copy :is(h2, p) {
  color: #f7f4ef;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__copy p {
  color: #c8c3bc;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__copy a {
  color: #f4be32;
  font-weight: 800;
  text-underline-offset: 5px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__media {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(190px, .65fr);
  gap: 18px;
  align-items: end;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__media figure {
  overflow: hidden;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__large img {
  width: 100%;
  height: 520px !important;
  object-fit: cover;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__small img {
  width: 100%;
  height: 350px !important;
  object-fit: cover;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-person {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
  margin-block: clamp(72px, 9vw, 126px) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-person__media {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(170px, .75fr);
  gap: 18px;
  align-items: end;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-person__portrait img {
  width: 100%;
  height: 540px !important;
  object-fit: cover;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-person__detail img {
  width: 100%;
  height: 390px !important;
  object-fit: cover;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-person figcaption {
  color: var(--whkd-muted, #68645f);
  font-size: 13px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths {
  margin-block: clamp(70px, 8vw, 112px) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths__header {
  max-width: 720px;
  margin-bottom: 40px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths .whkd-story-card {
  display: grid;
  grid-template-rows: 270px 1fr;
  margin: 0;
  background: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths .whkd-story-card img {
  height: 270px !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths .whkd-story-card h3 {
  margin-bottom: 18px !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-video {
  padding-block: clamp(72px, 8vw, 112px);
  background: #dedbd4;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-video__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
  gap: clamp(44px, 7vw, 96px);
  align-items: center;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-video__media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #181817;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  align-items: end;
  margin-block: clamp(72px, 8vw, 110px) !important;
  padding-top: clamp(42px, 5vw, 70px);
  border-top: 1px solid var(--whkd-line, #d7d1c7);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-visit__copy {
  max-width: 760px;
}

@media (max-width: 900px) {
  :is(.wp-site-blocks, .editor-styles-wrapper) :is(.whkd-school-opening, .whkd-school-rooms__inner, .whkd-school-person, .whkd-school-video__inner, .whkd-school-visit) {
    grid-template-columns: 1fr;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening {
    min-height: 0;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__image,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__image img {
    min-height: 0;
    height: min(68vw, 560px) !important;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-facts__inner,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-paths__grid {
    grid-template-columns: 1fr;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(36,35,33,.18);
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-fact:last-child {
    border-bottom: 0;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-rooms__media,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-person__media {
    grid-template-columns: 1fr;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) :is(.whkd-school-rooms__large, .whkd-school-rooms__small, .whkd-school-person__portrait, .whkd-school-person__detail) img {
    height: auto !important;
    max-height: none;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-school-opening__copy {
    padding: 34px 24px 42px;
  }
}

/* One Gutenberg typography scale for editable page content. Components may
   change colour and spacing, but not invent a different heading size. */
:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) h1 {
  font-size: var(--whkd-h1-size) !important;
  line-height: 1.02 !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) h2 {
  font-size: var(--whkd-h2-size) !important;
  line-height: 1.10 !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) h3 {
  font-size: var(--whkd-h3-size) !important;
  line-height: 1.18 !important;
}

/* Home and subpage heroes share one text column. This keeps headings,
   introductions and actions aligned regardless of the page. */
:is(.whkd-home-slider__copy, .whkd-subpage-hero__copy) > :where(h1, p, .whkd-actions) {
  width: 100% !important;
  max-width: var(--whkd-hero-text-width) !important;
}

:is(.whkd-home-slider__copy, .whkd-subpage-hero__copy) > h1 {
  font-size: var(--whkd-h1-size) !important;
  line-height: 1.02 !important;
}

:is(.whkd-home-slider__copy, .whkd-subpage-hero__copy) > p:not(.whkd-eyebrow) {
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.6 !important;
}

/* Nested parts of a component use the component's available width. Do not
   reset every Gutenberg group globally: that would also stretch ordinary
   page sections to the viewport and make their borders appear cut off. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(
  .whkd-training-feature,
  .whkd-training-cards,
  .whkd-trial-page__steps,
  .whkd-trial-page__audiences,
  .whkd-trial-page__school,
  .whkd-schedule-page__intro,
  .whkd-schedule-page__plan,
  .whkd-schedule-page__closing,
  .whkd-schedule-offers__inner
) > :where(.wp-block-group, .wp-block-columns, .wp-block-gallery) {
  width: 100% !important;
  max-width: 100% !important;
}

.whkd-training-feature {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
  gap: clamp(62px, 9vw, 140px);
  align-items: center;
  width: min(var(--whkd-content-width), 100%);
  max-width: var(--whkd-content-width) !important;
  margin: 0 auto clamp(58px, 7vw, 92px);
}

.whkd-training-feature .whkd-training-image-stack {
  position: relative;
  min-height: 650px;
  margin: 0;
}

.whkd-training-feature .whkd-training-image-stack > .wp-block-image {
  margin: 0 !important;
  overflow: hidden;
}

.whkd-training-feature .whkd-training-image-stack > .wp-block-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.whkd-training-feature .whkd-training-image-stack__large {
  width: 82%;
  height: 590px;
}

.whkd-training-feature .whkd-training-image-stack__small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 51%;
  height: 300px;
  border: 14px solid #f4f2ed;
}

.whkd-training-feature .whkd-training-intro {
  display: block;
  max-width: 620px;
  margin: 0;
}

.whkd-training-feature .whkd-training-intro .whkd-eyebrow {
  margin: 0 0 20px;
  color: #a52b27;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.whkd-training-feature .whkd-training-intro h2 {
  margin: 0 0 28px !important;
}

.whkd-training-feature .whkd-training-intro > p:not(.whkd-eyebrow) {
  margin: 0;
  color: #55534e;
  font-size: 18px;
  line-height: 1.8;
}

.whkd-training-cards {
  background: #242321;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-training-cards__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #53504b;
  border-left: 1px solid #53504b;
}

.whkd-training-cards__inner > .whkd-training-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 220px;
  padding: 34px;
  border: 0;
  border-right: 1px solid #53504b;
  border-bottom: 1px solid #53504b;
  border-radius: 0;
}

/* This editable Gutenberg group is a visual grid. Older saved pages still
   carry the constrained-layout flow gap, which otherwise offsets every card
   after the first and breaks the shared top border. */
.whkd-training-practical__grid {
  gap: 0 !important;
}

.whkd-training-practical__grid > .whkd-training-practical__card {
  margin-block-start: 0 !important;
}

/* Gutenberg colour choices win when an editor deliberately sets them. */
.whkd-training-cards__inner > .whkd-training-card:not(.has-background) {
  background: #302f2c;
}

.whkd-training-cards__inner > .whkd-training-card:not(.has-text-color) {
  color: #fff;
}

.whkd-training-card h3 {
  margin: 0 0 10px;
  color: inherit !important;
}

.whkd-training-card p {
  margin: 0;
  color: inherit !important;
  opacity: .78;
}

.whkd-training-card.has-text-color :is(h3, p) {
  color: inherit !important;
}

.whkd-history-archive > .whkd-history-archive__header {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
  column-gap: clamp(48px, 7vw, 100px) !important;
}

@media (max-width: 800px) {
  .whkd-training-feature {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .whkd-training-feature .whkd-training-image-stack {
    min-height: 560px;
  }

  .whkd-training-cards__inner {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 580px) {
  .whkd-training-feature .whkd-training-image-stack {
    min-height: 420px;
  }

  .whkd-training-feature .whkd-training-image-stack__large {
    width: 88%;
    height: 375px;
  }

  .whkd-training-feature .whkd-training-image-stack__small {
    width: 56%;
    height: 190px;
    border-width: 8px;
  }

  .whkd-training-cards__inner {
    grid-template-columns: 1fr !important;
  }

  .whkd-training-cards__inner > .whkd-training-card {
    min-height: 0;
    padding: 28px;
  }
}

/* Knowledge hub and long-form guides. The page title comes from WordPress;
   article content therefore starts directly with the lead instead of a
   second eyebrow or decorative heading. */
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-hub {
  display: grid;
  gap: clamp(34px, 4vw, 58px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-hub__lead {
  width: min(100%, 980px);
  margin: 0;
  color: var(--whkd-muted, #68645f);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.6;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-card {
  position: relative;
  min-height: 215px;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--whkd-line, #d9d4ca);
  border-top: 5px solid var(--whkd-yellow, #f4be32);
  background: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-card h3 {
  margin: 0 0 14px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-card p {
  margin: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-card .whkd-knowledge-card__link {
  margin-top: 24px;
  font-weight: 700;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-list {
  display: grid;
  gap: 10px;
  padding-left: 1.3em;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-cta {
  padding: clamp(34px, 5vw, 68px);
  background: #eeece6;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-cta h2 {
  margin-top: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-page {
  padding-bottom: clamp(68px, 8vw, 112px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: start;
  margin-bottom: clamp(52px, 7vw, 92px);
  padding-bottom: clamp(44px, 6vw, 72px);
  border-bottom: 1px solid var(--whkd-line, #d9d4ca);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-intro p {
  margin: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-lead {
  color: var(--whkd-ink, #1f1f1d);
  font-family: var(--wp--preset--font-family--serif, Georgia, serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.2;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-summary {
  padding-top: 10px;
  color: var(--whkd-muted, #68645f);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.7;
}

.wp-site-blocks .whkd-native-editable > .whkd-article-prose,
.editor-styles-wrapper .whkd-native-editable > .whkd-article-prose {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-right: auto;
  margin-left: auto;
  color: var(--whkd-ink, #1f1f1d);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.78;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-prose > h2 {
  margin: clamp(54px, 7vw, 84px) 0 20px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-prose > h2:first-child {
  margin-top: 0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-prose > :where(h2, p, ul) {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-cta {
  margin-top: clamp(64px, 8vw, 96px);
  padding: clamp(34px, 5vw, 62px);
  background: var(--whkd-charcoal, #252522);
  color: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-cta :where(h2, p) {
  color: inherit;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-cta h2 {
  margin-top: 0;
}

@media (max-width: 720px) {
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-grid {
    grid-template-columns: 1fr;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-knowledge-card {
    min-height: 0;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-article-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Probetraining: native Gutenberg sections, identical in editor and frontend. */
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page {
  display: grid;
  gap: clamp(58px, 7vw, 96px);
  padding-top: clamp(54px, 7vw, 92px);
  padding-bottom: clamp(70px, 9vw, 118px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page > .whkd-lead {
  max-width: var(--whkd-text-width) !important;
  margin: 0 !important;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.7;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page .whkd-trial-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

:is(.wp-site-blocks, .editor-styles-wrapper) :is(
  .whkd-trial-page__steps,
  .whkd-trial-page__audiences,
  .whkd-trial-page__school
) {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__step {
  min-height: 100%;
  padding: clamp(24px, 3vw, 38px);
  border-left: 1px solid var(--whkd-line, #d9d4ca);
  background: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__step:last-child {
  border-right: 1px solid var(--whkd-line, #d9d4ca);
}

/* Gutenberg stores a button style class on the outer block. It must not
   paint a second rectangle behind the actual link. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-button.whkd-button--dark {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Component groups use their grid cell as the available width. Gutenberg's
   global prose constraint must not be applied again inside each card. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(
  .whkd-trial-page__step,
  .whkd-trial-page__step-copy,
  .whkd-trial-info-card,
  .whkd-trial-page__school-copy,
  .whkd-trial-page__location,
  .whkd-schedule-day,
  .whkd-schedule-day__sessions,
  .whkd-schedule-session,
  .whkd-schedule-page__plan,
  .whkd-schedule-page__closing-card
) > * {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-step-number {
  margin: 0 0 32px !important;
  color: var(--wp--preset--color--red, #a52b27);
  font-size: clamp(28px, 3vw, 44px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__step h3,
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-info-card h2,
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__school h2 {
  margin-top: 0 !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__audiences,
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__school {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 54px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-info-card,
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__school > .wp-block-group {
  padding: clamp(28px, 4vw, 48px);
  border-top: 3px solid var(--wp--preset--color--yellow, #f4be32);
  background: #fff;
}

/* Timetable: editorial copy is Gutenberg; the weekly data remains TablePress. */
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page {
  display: grid;
  gap: clamp(44px, 5vw, 72px);
  padding-top: clamp(42px, 5vw, 68px);
  padding-bottom: clamp(56px, 7vw, 88px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__intro {
  max-width: var(--whkd-text-width);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__plan > h2 {
  margin-bottom: 8px !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__hint {
  margin-top: 0 !important;
  color: #66645f;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__plan {
  overflow-x: auto;
}

:is(.wp-site-blocks, .editor-styles-wrapper) :is(
  .whkd-schedule-page__intro,
  .whkd-schedule-page__plan,
  .whkd-schedule-page__closing
) {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* This is the one intentionally full-bleed section on the schedule page.
   The page grid already supplies its vertical rhythm, so legacy margins must
   not add a second large gap above and below it. */
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page > .whkd-schedule-offers {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: clamp(62px, 8vw, 104px) var(--whkd-page-gutter) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-offers__inner {
  width: 100% !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.page-id-7 .whkd-schedule-page__plan .tablepress {
  width: 100% !important;
  min-width: 960px;
  max-width: none !important;
  margin: 34px 0 0 !important;
  border: 1px solid var(--whkd-line, #d9d4ca) !important;
  border-collapse: collapse !important;
  table-layout: fixed;
  background: #fff !important;
  box-shadow: none !important;
}

.page-id-7 .whkd-schedule-page__plan .tablepress thead th {
  padding: 18px 16px !important;
  border: 1px solid #d8aa2c !important;
  background: var(--wp--preset--color--yellow, #f4be32) !important;
  color: #242321 !important;
  font-size: 16px;
  text-align: center;
}

.page-id-7 .whkd-schedule-page__plan .tablepress tbody td {
  padding: 20px 18px !important;
  border: 1px solid var(--whkd-line, #d9d4ca) !important;
  background: #f7f5f0 !important;
  color: #242321 !important;
  vertical-align: top;
}

.page-id-7 .whkd-schedule-page__plan .tablepress tbody td:empty {
  background: #edeae3 !important;
}

.page-id-7 .whkd-schedule-page__plan .tablepress tbody td.whkd-schedule-cell--trial {
  border-left: 4px solid #5b8465 !important;
  background: #e4eee7 !important;
}

.page-id-7 .whkd-schedule-page__plan .tablepress tbody td strong {
  display: block;
  margin-bottom: 8px;
  color: inherit !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-week {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: 34px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-day {
  overflow: hidden;
  border: 1px solid var(--whkd-line, #d9d4ca);
  background: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-day > h3 {
  margin: 0 !important;
  padding: 18px 22px;
  background: var(--wp--preset--color--yellow, #f4be32);
  font-family: inherit !important;
  font-size: 18px !important;
  text-align: center;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-day__sessions {
  display: grid;
  gap: 1px;
  background: var(--whkd-line, #d9d4ca);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-session {
  min-height: 118px;
  padding: 20px 22px;
  border-left: 4px solid transparent;
  background: #f7f5f0;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-session--trial {
  border-left-color: #5b8465;
  background: #e4eee7;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-session h4 {
  margin: 0 0 10px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.35;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-session p {
  margin: 0 !important;
  font-size: 14px;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-session__note {
  color: #66645f;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page .whkd-note {
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid var(--whkd-line, #d9d4ca);
  background: #fff;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__closing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 54px);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__closing-card {
  padding-top: 28px;
  border-top: 3px solid var(--wp--preset--color--yellow, #f4be32);
}

@media (max-width: 900px) {
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page .whkd-trial-steps,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__audiences,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__school,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-week,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-schedule-page__closing {
    grid-template-columns: 1fr;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__step {
    border-right: 1px solid var(--whkd-line, #d9d4ca);
    border-bottom: 1px solid var(--whkd-line, #d9d4ca);
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-trial-page__step:first-child {
    border-top: 1px solid var(--whkd-line, #d9d4ca);
  }
}

/* Contact directions use the same compact editorial rhythm in Gutenberg and
   on the public page. Fix the media height at wide breakpoints so a square
   source image cannot make the whole row unnecessarily tall. */
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-planner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(16px, 2vw, 24px) !important;
  margin-top: clamp(40px, 5vw, 64px) !important;
  margin-bottom: clamp(56px, 7vw, 88px) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card,
:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card--reverse {
  display: grid !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
  min-height: 0 !important;
  overflow: hidden;
  border: 1px solid var(--whkd-line, #d8d4cb);
  background: #fff !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card > .wp-block-image {
  width: 100% !important;
  max-width: none !important;
  height: clamp(340px, 32vw, 430px) !important;
  min-height: 0 !important;
  margin: 0 !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card > .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card--reverse > .wp-block-image {
  order: 2;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card__copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4vw, 52px) !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card__copy > * {
  width: 100% !important;
  max-width: 500px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card__copy h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-address {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  color: var(--whkd-ink, #1f1f1d) !important;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  line-height: 1.45 !important;
}

@media (max-width: 800px) {
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card,
  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card--reverse {
    grid-template-columns: 1fr !important;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card--reverse > .wp-block-image {
    order: 0;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card > .wp-block-image {
    height: min(72vw, 360px) !important;
  }

  :is(.wp-site-blocks, .editor-styles-wrapper) .whkd-visit-card__copy {
    padding: 28px var(--whkd-page-gutter) 32px !important;
  }
}

/*
 * Shared Gutenberg media, table and quotation components
 *
 * Gutenberg controls the actual content. These selectors are intentionally
 * shared by the editor and public page instead of being tied to page IDs.
 */
:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) > .wp-block-media-text,
.editor-styles-wrapper .wp-block-media-text {
  width: min(var(--whkd-content-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-content-width) !important;
  min-height: 0 !important;
  margin: clamp(36px, 5vw, 64px) auto !important;
  overflow: hidden;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr) !important;
  border: 1px solid var(--whkd-line, #d9d4ca) !important;
  border-top: 3px solid var(--whkd-yellow, #f2ba28) !important;
  border-radius: 0 !important;
  background: #f8f6f1 !important;
  color: var(--whkd-ink, #242321) !important;
  box-shadow: none !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__media {
  display: block !important;
  align-self: stretch;
  min-height: 340px !important;
  background-size: cover;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__media img {
  display: block !important;
  width: 100%;
  height: 100% !important;
  min-height: 340px;
  object-fit: cover;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__content {
  padding: clamp(28px, 4vw, 52px) !important;
  color: inherit !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__content :is(h2, h3, h4, p, li) {
  color: inherit !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-table {
  width: min(var(--whkd-text-width), calc(100% - var(--whkd-page-gutter) - var(--whkd-page-gutter))) !important;
  max-width: var(--whkd-text-width) !important;
  margin: clamp(30px, 4vw, 48px) auto !important;
  overflow-x: auto;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__content .wp-block-table {
  width: 100% !important;
  max-width: none !important;
  margin: 28px 0 0 !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-table table {
  width: 100%;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-table :is(th, td) {
  padding: 14px 16px;
  border: 0 !important;
  border-bottom: 1px solid var(--whkd-line, #d9d4ca) !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-table tr:first-child :is(th, td) {
  border-top: 1px solid var(--whkd-line, #d9d4ca) !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: rgba(220, 215, 205, .28) !important;
}

:is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-quote {
  padding: clamp(24px, 4vw, 40px) !important;
  border: 1px solid var(--whkd-line, #d9d4ca) !important;
  border-left: 4px solid var(--whkd-red, #ad2e29) !important;
  background: #fff !important;
  color: inherit !important;
}

@media (max-width: 780px) {
  :is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable) > .wp-block-media-text,
  .editor-styles-wrapper .wp-block-media-text {
    grid-template-columns: 1fr !important;
  }

  :is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__media,
  :is(.wp-block-post-content, .entry-content, .whkd-content, .whkd-native-editable, .editor-styles-wrapper) .wp-block-media-text__media img {
    min-height: 280px !important;
  }
}

/* Shared finishing rules: full-bleed gallery bands, aligned CTAs and a clean tree grid. */
.wp-site-blocks .whkd-content > .whkd-actions {
  margin-right: auto !important;
  margin-left: auto !important;
}

.wp-site-blocks .whkd-gallery-content > .whkd-gallery-section {
  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: clamp(62px, 8vw, 104px) var(--whkd-page-gutter) !important;
}

.wp-site-blocks .whkd-gallery-content > .whkd-gallery-section > :is(
  .whkd-gallery-section__header,
  header,
  .whkd-gallery-editorial-grid,
  .whkd-gallery-link
) {
  width: 100% !important;
  max-width: var(--whkd-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.wp-site-blocks .whkd-gallery-tile figcaption {
  margin: 0 !important;
}

.wp-site-blocks .whkd-tree :is(.whkd-tree-level, .whkd-tree-node)::before,
.wp-site-blocks .whkd-tree :is(.whkd-tree-level, .whkd-tree-node)::after {
  content: none !important;
}

.wp-site-blocks .whkd-tree .whkd-tree-depth-1 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  margin-top: 46px !important;
  padding-top: 46px !important;
  border-top: 1px solid var(--whkd-line, #d9d4ca);
}

.wp-site-blocks .whkd-tree .whkd-tree-depth-2 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  margin: 30px 0 14px !important;
  padding-top: 30px !important;
  border-top: 1px solid var(--whkd-line, #d9d4ca);
}

@media (max-width: 800px) {
  .wp-site-blocks .whkd-tree .whkd-tree-depth-1,
  .wp-site-blocks .whkd-tree .whkd-tree-depth-2 {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 580px) {
  .wp-site-blocks .whkd-gallery-content > .whkd-gallery-section {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .wp-site-blocks .whkd-tree .whkd-tree-depth-1,
  .wp-site-blocks .whkd-tree .whkd-tree-depth-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 30px !important;
    padding-top: 30px !important;
  }
}