/**
 * @file
 * Styles for the Side-By-Side-Text-Only block.
 */

/* ==========================================================================
   Main Container
   ========================================================================== */

.mstc-side-by-side-text-only {
  --bl-padding-top: 4rem;
  --bl-padding-bottom: 4rem;
  --bl-padding-md-top: 1.5rem;
  --bl-padding-md-bottom: 1.5rem;
  --bl-padding-sm-top: 1rem;
  --bl-padding-sm-bottom: 1rem;

  padding-left: 0;
  padding-right: 0;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   Layout Container
   ========================================================================== */

.mstc-side-by-side-text-only__container {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

/* ==========================================================================
   Columns
   ========================================================================== */

.mstc-side-by-side-text-only__left {
  flex: 1;
  padding-right: 1rem;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.mstc-side-by-side-text-only__right {
  flex: 1;
  padding-left: 1rem;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* ==========================================================================
   Typography - Header
   ========================================================================== */

.mstc-side-by-side-text-only__header {
  font-family: 'Gelasio', serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #840029;
  margin: 0 0 1.5rem 0;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.mstc-side-by-side-text-only__header-placeholder {
  font-family: 'Gelasio', serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #840029;
  margin: 0 0 1.5rem 0;
  text-align: left;
  opacity: 0.6;
}

/* ==========================================================================
   Typography - Description
   ========================================================================== */

.mstc-side-by-side-text-only__description {
  font-family: 'Gelasio', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #500617;
  margin-bottom: 2rem;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.mstc-side-by-side-text-only__description-placeholder {
  font-family: 'Gelasio', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: #B40015;
  margin-bottom: 2rem;
  text-align: left;
  opacity: 0.6;
}

/* ==========================================================================
   Button Component
   ========================================================================== */

.mstc-side-by-side-text-only__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #500617;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__button-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  color: #500617;
  font-family: 'Gelasio', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.39;
  letter-spacing: 0;
  vertical-align: middle;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mstc-side-by-side-text-only__button-link:hover {
  gap: 25px;
  color: #B40015;
  text-decoration: none;
}

.mstc-side-by-side-text-only__button-text {
  font-family: 'Gelasio', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.39;
  letter-spacing: 0;
  vertical-align: middle;
}

/* ==========================================================================
   Button Icon
   ========================================================================== */

.mstc-side-by-side-text-only__button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__button-icon svg {
  width: 56px;
  height: 56px;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__button-icon svg circle {
  stroke: #B40015;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__button-icon svg path {
  stroke: #B40015;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__button-link:hover .mstc-side-by-side-text-only__button-icon svg circle {
  fill: #B40015;
  stroke: #B40015;
}

.mstc-side-by-side-text-only__button-link:hover .mstc-side-by-side-text-only__button-icon svg path {
  stroke: white;
}

/* ==========================================================================
   Placeholders
   ========================================================================== */

.mstc-side-by-side-text-only__button-placeholder {
  padding: 1rem;
  color: #666;
  font-style: italic;
  text-align: left;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (min-width: 768.01px) {
  .mstc-side-by-side-text-only__description {
    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  .mstc-side-by-side-text-only.has-bg:not(.flip-columns) {
    .mstc-side-by-side-text-only__header,
    .mstc-side-by-side-text-only__ctas {
      padding-left: 1rem;
    }
  }

  .mstc-side-by-side-text-only.flip-columns {
    .mstc-side-by-side-text-only__left {
      order: 1;
      padding-inline: 1rem 0;
    }

    .mstc-side-by-side-text-only__right {
      padding-inline: 0 1rem;
    }

    .mstc-side-by-side-text-only__ctas {
      justify-content: flex-end;
    }

    &.has-bg {
      .mstc-side-by-side-text-only__description {
        padding-left: 1rem;
      }
    }
  }
}

/* Tablet and smaller */
@media (max-width: 1024px) {
  .mstc-side-by-side-text-only__container {
    gap: 0;
  }

  .mstc-side-by-side-text-only__left {
    flex: 1;
  }

  .mstc-side-by-side-text-only__right {
    flex: 1;
  }

  .mstc-side-by-side-text-only__header {
    font-size: 40px;
  }

  .mstc-side-by-side-text-only__description {
    font-size: 18px;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  /* Main Module */
  .mstc-side-by-side-text-only__container {
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    height: auto;
    padding: 0;
  }

  .mstc-side-by-side-text-only__left {
    flex: 1;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mstc-side-by-side-text-only__right {
    flex: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0px !important;
  }

  .mstc-side-by-side-text-only__header {
    font-size: 2.25rem;
    text-align: left;
    margin-left: 0;
    max-width: 100%;
  }

  .mstc-side-by-side-text-only__description {
    font-size: 1rem;
    text-align: left;
    margin-left: 0;
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .mstc-side-by-side-text-only__button {
    align-items: flex-start;
  }

  .mstc-side-by-side-text-only__button-text {
    font-size: 18px;
  }

  .mstc-side-by-side-text-only__button-icon svg {
    width: 48px;
    height: 48px;
  }
}

/* Mobile portrait */
@media (max-width: 567px) {
  .mstc-side-by-side-text-only__container { 
    padding: 0;
  }
  .mstc-side-by-side-text-only__header {
    font-size: 20px;
  }

  .mstc-side-by-side-text-only__description {
    font-size: 14px !important;
    margin-bottom: 1rem;
  }

  .mstc-side-by-side-text-only__left,
  .mstc-side-by-side-text-only__right {
    padding: 0;
  }

  .mstc-side-by-side-text-only__button-text {
    font-size: 18px;
  }

  .mstc-side-by-side-text-only__button-icon svg {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Footer Container
   ========================================================================== */

.mstc-side-by-side-text-only__footer {
  margin-top: 2rem;
}

/* ==========================================================================
   After Description — Rich text below the layout
   ========================================================================== */

.mstc-side-by-side-text-only__after-description {
  font-family: 'Gelasio', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.62;
  color: #500617;
  max-width: 100%;
  margin-bottom: 2rem;
}

.mstc-side-by-side-text-only__after-description p {
  margin: 0 0 1em 0;
}

.mstc-side-by-side-text-only__after-description p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Section CTAs — Large circle+arrow pattern
   ========================================================================== */

.mstc-side-by-side-text-only__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 1.5rem;
}

.mstc-side-by-side-text-only__cta-item {
  display: inline-flex;
}

.mstc-side-by-side-text-only__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  text-decoration: none;
  color: #500617;
  font-family: 'Gelasio', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.39;
  letter-spacing: 0;
  vertical-align: middle;
  transition: all 0.3s ease;
  max-width: 100%;
  flex-wrap: nowrap;
}

.mstc-side-by-side-text-only__cta-link:hover {
  gap: 25px;
  color: #B40015;
  text-decoration: none;
}

.mstc-side-by-side-text-only__cta-text {
  font-family: 'Gelasio', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.39;
  letter-spacing: 0;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 1;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mstc-side-by-side-text-only__cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-width: 56px;
}

.mstc-side-by-side-text-only__cta-arrow svg {
  width: 56px;
  height: 56px;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__cta-arrow svg circle {
  stroke: #B40015;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__cta-arrow svg path {
  stroke: #B40015;
  transition: all 0.3s ease;
}

.mstc-side-by-side-text-only__cta-link:hover .mstc-side-by-side-text-only__cta-arrow svg circle {
  fill: #B40015;
  stroke: #B40015;
}

.mstc-side-by-side-text-only__cta-link:hover .mstc-side-by-side-text-only__cta-arrow svg path {
  stroke: white;
}

/* ==========================================================================
   Theme Modifiers
   ========================================================================== */

/* Medium Theme (Gold) */
.mstc-side-by-side-text-only--theme-medium {
  --list-text-color: #82142C;
  --list-bullet-color: #82142C;

  background-color: #FDB71A;
  position: relative;
}

.mstc-side-by-side-text-only--theme-medium .mstc-side-by-side-text-only__pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 3%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.gutenberg-prose .mstc-side-by-side-text-only--theme-medium .mstc-side-by-side-text-only__pattern-image,
.mstc-side-by-side-text-only--theme-medium .mstc-side-by-side-text-only__pattern-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left center;
  margin: 0;
  border-radius: 0;
}

.mstc-side-by-side-text-only--theme-medium .mstc-side-by-side-text-only__container,
.mstc-side-by-side-text-only--theme-medium .mstc-side-by-side-text-only__footer {
  position: relative;
  z-index: 2;
}

/* Force override global .gutenberg-prose list markers for Gold theme to be Red */
.gutenberg-prose .mstc-side-by-side-text-only.mstc-side-by-side-text-only--theme-medium ul > li::before,
.gutenberg-prose .mstc-side-by-side-text-only.mstc-side-by-side-text-only--theme-medium ol > li::before {
  content: '';
  position: absolute;
  left: -1rem !important;
  top: 0.6em;
  width: 0;
  height: 0;
  border-left: 6px solid #B40015 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  background: transparent !important;
}

/* Dark Theme (Maroon) */
.mstc-side-by-side-text-only--theme-dark {
  background-color: #82142CCC;
  position: relative;
}

.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.gutenberg-prose .mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__background-image,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__background-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  margin: 0;
  border-radius: 0;
}

.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #82142CCC;
  z-index: 2;
}

.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__container,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__footer {
  position: relative;
  z-index: 3;
}

/* Dark Theme Text Colors */
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__header,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__header-placeholder,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description-placeholder,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description-placeholder *,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description *,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description p,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description ul,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description ol,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description li,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-text,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-text {
  color: #FFFFFF;
}

/* Force override global .gutenberg-prose list red typography */
.gutenberg-prose .mstc-side-by-side-text-only--theme-dark ul,
.gutenberg-prose .mstc-side-by-side-text-only--theme-dark ol,
.gutenberg-prose .mstc-side-by-side-text-only--theme-dark li,
.gutenberg-prose .mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description li,
.gutenberg-prose .mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description li {
  color: #FFFFFF !important;
}

/* 50% Width List Styling equivalent to Program Content Type - Dark Theme Only */
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description ul,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description ol,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description ul,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description ol {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 1.5rem;
  column-gap: 0;
}

.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description li,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description li {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 1rem;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

/* Ensure bullet points align reasonably with flex */
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__description ul li,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__after-description ul li {
  list-style-position: inside;
}

/* Dark Theme Single Button Overrides */
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-link {
  color: #FFFFFF;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-link:hover {
  color: #FDB618;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-icon svg circle,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-icon svg path {
  stroke: #FDB618;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-link:hover .mstc-side-by-side-text-only__button-icon svg circle {
  fill: #FDB618;
  stroke: #FDB618;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__button-link:hover .mstc-side-by-side-text-only__button-icon svg path {
  stroke: #82142C;
}

/* Dark Theme Repeated CTAs Overrides */
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-link {
  color: #FFFFFF;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-link:hover {
  color: #FDB618;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-arrow svg circle,
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-arrow svg path {
  stroke: #FDB618;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-link:hover .mstc-side-by-side-text-only__cta-arrow svg circle {
  fill: #FDB618;
  stroke: #FDB618;
}
.mstc-side-by-side-text-only--theme-dark .mstc-side-by-side-text-only__cta-link:hover .mstc-side-by-side-text-only__cta-arrow svg path {
  stroke: #82142C;
}