/* Styled Container Block - Custom UCLA styled container with gold borders */
.StyledContainer {
  width: 100%;
  position: relative;
  background-color: #f2f2f2; /* Light gray background */
  border-top: 8px solid #ffd100; /* UCLA gold top border */
  border-bottom: 8px solid #ffd100; /* UCLA gold bottom border */
  margin: var(--container-margin, 0) 0; /* Use CSS variable with fallback */
  overflow: hidden; /* Prevent margin collapse */
}

.StyledContainer .float-right {
  float: right;
}

.StyledContainer .float-left {
  float: left;
}

.editor-styles-wrapper .StyledContainer,
.block-editor-block-list__block.wp-block-acf-seis-styled-container {
  width: 100%;
  position: relative;
  background-color: #f2f2f2; /* Light gray background */
  border-top: 8px solid #ffd100; /* UCLA gold top border */
  border-bottom: 8px solid #ffd100; /* UCLA gold bottom border */
  margin: var(--container-margin, 0) 0; /* Use CSS variable with fallback */
  overflow: hidden; /* Prevent margin collapse */
}

.StyledContainer .ucla-card.BasicCard {
  margin-bottom: 2rem; /* Space between cards */
}

/* Full width in editor */
.block-editor-block-list__block.wp-block-acf-seis-styled-container {
  max-width: none !important;
  margin-left: -28px !important;
  margin-right: -28px !important;
  width: calc(100% + 56px) !important;
}

/* Container padding in editor to account for the negative margins */
.block-editor-block-list__block.wp-block-acf-seis-styled-container .StyledContainer-inner {
  padding-left: 28px;
  padding-right: 28px;
}

/* Inner container to hold content */
.StyledContainer-inner,
.editor-styles-wrapper .StyledContainer-inner {
  width: 100%;
}

/* Custom padding using CSS variables */
.StyledContainer-inner {
  padding: var(--container-padding, 2rem);
}

/* Placeholder styling for the editor */
.StyledContainer-placeholder {
  padding: 2rem;
  text-align: center;
  color: #777;
  font-style: italic;
}

.StyledContainer-placeholder p {
  margin: 0;
}

/* Responsive styles */
@media (max-width: 767px) {
  /* Mobile styles */
  .StyledContainer {
    border-top-width: 6px; /* Slightly thinner border on mobile */
    border-bottom-width: 6px;
  }

  /* Scale down padding slightly on mobile if it's large */
  .StyledContainer-inner {
    padding: calc(var(--container-padding, 2rem) * 0.75);
  }
}

/* Make sure nested blocks display properly */
.StyledContainer .wp-block {
  max-width: 100%;
}

/* Ensure proper spacing between blocks inside the container */
.StyledContainer-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.StyledContainer-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > *:first-child {
  margin-top: 0;
}

.StyledContainer-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > *:last-child {
  margin-bottom: 0;
}