/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

:root {
  --mvb-media-text-gutter: clamp(16px, 3vw, 48px);
}

body {
  position: relative !important;
}

/* =========================================================
   Gutenberg "Media & Text" block:
   - remove unwanted left/right space on the text side
   - keep a consistent gutter BETWEEN image and text
   - works for alternating layouts (image left/right)
   ========================================================= */

/* 1) Remove the default padding that WordPress adds to the text column */
.wp-block-media-text > .wp-block-media-text__content {
  padding: 0 !important;
}

/* 2) Prevent the inner "constrained" Group from re-adding side padding/max-width */
.wp-block-media-text
  > .wp-block-media-text__content
  > .wp-block-group.is-layout-constrained,
.wp-block-media-text
  > .wp-block-media-text__content
  > .wp-block-group.is-layout-constrained
  > .wp-block-group__inner-container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Alternating logic:
   - If image is LEFT (default), text is RIGHT -> add gutter on text LEFT only
   - If image is RIGHT, text is LEFT -> add gutter on text RIGHT only
*/
.wp-block-media-text:not(.has-media-on-the-right)
  > .wp-block-media-text__content {
  padding-inline-start: var(--mvb-media-text-gutter) !important;
  padding-inline-end: 0 !important;
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
  padding-inline-end: var(--mvb-media-text-gutter) !important;
  padding-inline-start: 0 !important;
}

/* 4) When stacked on mobile, give the text comfortable padding all around */
@media (max-width: 781px) {
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    padding: 16px !important;
  }
}

/* start screen full page hero */
.wp-block-group.home-hero {
  min-height: calc(100vh - var(--header-height));
}

/* rounded slider */
.smart-slider-rounded {
  border-radius: 10px !important;
  overflow: hidden !important;
}

@media only screen and (max-width: 781px) {
  /* home screen on mobile */
  .wp-block-group.home-hero {
    margin-bottom: 1rem;
  }

  /* reverse flex side by side on mobile */
  .wp-block-columns-is-layout-flex.reverse {
    display: flex;
    flex-flow: column-reverse;
  }

  /* center on mobile */
  .wp-block-group.m-center {
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .wp-block-group.m-text-center {
    text-align: center !important;
    margin-left: auto !important;
  }
}