/**
 * Compatibility layer for Mild pattern styles on Twenty Twenty-Five.
 * Curated TT5 patterns need little help; imported Mild/InstaWP patterns keep
 * is-style-mild-* classes and Mild spacing slugs (registered by the plugin).
 */
body {
  overflow-x: clip;
}

.mild-curated-section,
.mild-legacy-section {
  box-sizing: border-box;
}

.mild-curated-section .wp-block-heading {
  text-wrap: balance;
}

.mild-curated-section p:not(.has-text-align-center) {
  max-width: 62ch;
}

.mild-curated-section .wp-block-column {
  min-width: 0;
}

.mild-curated-section .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Legacy marker only — spacing comes from Mild preset slugs, not forced padding */
.mild-legacy-section .wp-block-columns {
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.mild-legacy-section .wp-block-media-text__content {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* —— Mild block styles (kept on patterns; not registered by TT5) —— */

.is-style-mild-section {
  box-sizing: border-box;
}

.is-style-mild-card,
.is-style-mild-card-center,
.is-style-mild-media-card,
.is-style-mild-preset-group-natural-1-item-card-1 {
  background-color: var(--wp--preset--color--base, #fff);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 12%, transparent);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast, #111) 6%, transparent);
  overflow: hidden;
  /* Cards imported without their own padding (Extendify trust-badge/feature
     grids) otherwise render with text flush against the card edges. */
  padding: 1.5rem;
}

.is-style-mild-card > *:first-child,
.is-style-mild-card-center > *:first-child {
  margin-top: 0;
}

.is-style-mild-card > *:last-child,
.is-style-mild-card-center > *:last-child {
  margin-bottom: 0;
}

.is-style-mild-card-center {
  text-align: center;
}

.is-style-mild-cover {
  min-height: 20rem;
}

.is-style-mild-image,
.is-style-mild-preset-image-natural-1-image-1--content-bottom,
.is-style-mild-preset-image-natural-1-image-1--content-any {
  border-radius: 12px;
  overflow: hidden;
}

.is-style-mild-image img,
.is-style-mild-preset-image-natural-1-image-1--content-bottom img,
.is-style-mild-preset-image-natural-1-image-1--content-any img {
  display: block;
  width: 100%;
  height: auto;
}

/* core/button style variations (mild-primary/secondary/outline) are no longer
 * fixed CSS — they're per-template theme.json variations generated by the
 * compiler (see buildButtonVariations in html-to-twgb.ts) and registered
 * dynamically from the mild_appearance_button_variations option, so WP
 * generates the CSS itself from each site's real radius/colors. */

/* Never allow imported button geometry to force vertical text. */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  writing-mode: horizontal-tb !important;
  white-space: nowrap;
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

.wp-block-buttons {
  flex-wrap: wrap;
}

.wp-block-buttons > .wp-block-button {
  width: auto !important;
}

@media (max-width: 781px) {
  .mild-curated-section,
  .mild-legacy-section {
    overflow: hidden;
  }

  .mild-curated-section .wp-block-columns {
    gap: var(--wp--preset--spacing--50, 1.5rem);
  }
}

/*
 * Cover media + dim (core block-library rules are often missing in Playground).
 * Without absolute layers, the photo sits in-flow and dim spans never cover it.
 */
.wp-block-cover {
  position: relative;
  overflow: hidden;
}
.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.wp-block-cover > .wp-block-cover__image-background {
  z-index: 0;
}
.wp-block-cover > .wp-block-cover__background {
  z-index: 1;
}
.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/*
 * Cover content positions (core block-library rules are often missing in
 * Playground). Native compiles emit is-position-* on wp:cover.
 * Use margin-top/bottom:auto on the inner container — works for both flex and grid.
 */
.wp-block-cover.has-custom-content-position {
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-cover.has-custom-content-position.is-position-top-left,
.wp-block-cover.has-custom-content-position.is-position-top-center,
.wp-block-cover.has-custom-content-position.is-position-top-right {
  justify-content: flex-start !important;
}
.wp-block-cover.has-custom-content-position.is-position-center-left,
.wp-block-cover.has-custom-content-position.is-position-center-center,
.wp-block-cover.has-custom-content-position.is-position-center-right {
  justify-content: center !important;
}
.wp-block-cover.has-custom-content-position.is-position-bottom-left,
.wp-block-cover.has-custom-content-position.is-position-bottom-center,
.wp-block-cover.has-custom-content-position.is-position-bottom-right {
  justify-content: flex-end !important;
}
.wp-block-cover.has-custom-content-position.is-position-top-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-center-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container {
  margin-right: auto !important;
  margin-left: 0 !important;
  width: auto !important;
  max-width: 100%;
}
.wp-block-cover.has-custom-content-position.is-position-top-right > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-center-right > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-right > .wp-block-cover__inner-container {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100%;
}
.wp-block-cover.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-center > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-bottom-right > .wp-block-cover__inner-container {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
.wp-block-cover.has-custom-content-position.is-position-top-left > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-top-center > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.is-position-top-right > .wp-block-cover__inner-container {
  margin-bottom: auto !important;
  margin-top: 0 !important;
}