/**
* @file Styles red blocks (Callout with image)
*/

.paragraph--type--red-block {
  margin-bottom: 50px;
  background: linear-gradient(to top, var(--mit-bright-red) 200px, var(--mit-red) 200px);
  padding: 20px;
  display: flex;
  gap: 80px;
  flex-direction: column;
}
.paragraph--type--red-block .block__text .field--name-field-section-header,
.paragraph--type--red-block .block__text .field--name-field-section-content,
.paragraph--type--red-block h2,
.paragraph--type--red-block h3,
.paragraph--type--red-block h4,
.paragraph--type--red-block h5,
.paragraph--type--red-block h6 {
  color: var(--mit-white) !important;
}
.paragraph--type--red-block .block__text .field--name-field-section-header h2,
.paragraph--type--red-block .block__text .field--name-field-section-header h3,
.paragraph--type--red-block .block__text .field--name-field-section-header h4,
.paragraph--type--red-block .block__text .field--name-field-section-header h5,
.paragraph--type--red-block .block__text .field--name-field-section-header h6 {
  margin-top:0;
  margin-bottom:0;
  font-size:3.4rem;
}
.paragraph--type--red-block .block__text .field--name-field-section-header {
  font-size:3.4rem;
  font-weight: 700;
  line-height: normal;
  margin-bottom:.5rem;
}
.paragraph--type--red-block .block__text .field--name-field-section-content,
.paragraph--type--red-block .block__text .field--name-field-section-content p {
  font-family: var(--mit-default-font);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 20px;
}
#page-content .paragraph--type--red-block .block__text .field--name-field-section-content ul {
  margin-top:1rem;
}
#page-content .paragraph--type--red-block .block__text .field--name-field-section-content p + ul {
  margin-top:0rem;
}

#page-content .paragraph--type--red-block .block__text li::before {
  background-color: var(--mit-bright-red);
}

.paragraph--type--red-block .block__image {
  height: 100%;
  width: 100%;
  max-width: 274px;
  order:revert;
  margin-bottom: 2.5rem;
  position: relative;
}

.paragraph--type--red-block a.field_section_button {
  display: flex;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--mit-red) !important;
  background: var(--mit-white);
  font-family: var(--mit-default-font);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  width: fit-content;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.paragraph--type--red-block a.field_section_button::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.6874 9.88712L7.82768 3.02736L9.61719 1.23785L18.2665 9.88712L9.61719 18.5364L7.82768 16.7469L14.6874 9.88712Z" fill="%23FF1423"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7747 11.3783H1.26562V8.84753H16.7747V11.3783Z" fill="%23FF1423"/></svg>');
  background-size: contain;
  display: inline-block;
  width: 15px;
  height: 15px;
  content: '';
}

.paragraph--type--red-block a.field_section_button:hover {
  background-color: var(--mit-bright-red);
  color: var(--mit-white) !important;

}

.paragraph--type--red-block a.field_section_button:hover::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.6874 9.88712L7.82768 3.02736L9.61719 1.23785L18.2665 9.88712L9.61719 18.5364L7.82768 16.7469L14.6874 9.88712Z" fill="%23750014"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7747 11.3783H1.26562V8.84753H16.7747V11.3783Z" fill="%23750014"/></svg>');
}
@media (min-width: 1080px) {

  .flex-page__body:not(.flex-page__body--has-sidebar) .paragraph--type--red-block:not(.paragraph--type--tabs-full-screen .paragraph--type--red-block) {
    width: 100vw;
    margin-left: calc((((-100% + 0px) + 7 * 40px) / 8 * 2) - (2 * 4rem));
    max-width: calc(100% + (((100% - 0px) - 7 * 40px) / 8 * 4) + (4 * 4rem));
    margin-block: 8rem;
  }

  .paragraph--type--red-block .block__text {
    width: auto;
    flex: 0 1 auto;
    padding-left:0;
  }
}

@media (min-width: 992px) {
  .paragraph--type--red-block {
    flex-direction: row;
    background: linear-gradient(to left, var(--mit-bright-red) 200px, var(--mit-red) 200px);
    padding: 60px 80px;
  }
}