/*
 * MFL CARD
 */

 .mfl-card {
  --card-background: #87c9ff;
  --content-background: #87c9ff;
  --heading-colour: #0e006b;
  --text-colour: #0e006b;
  --button-background: #0e006b;
  --button-text: #ffffff;

  box-sizing: border-box;

  display: grid !important;
  grid-template-columns: 41% 59% !important;
  grid-template-rows: 1fr;

  width: 100%;
  min-height: 340px;

  padding: 0;
  margin: 0;

  overflow: hidden;

  background: var(--card-background);
  border-radius: 14px;
}


/*
* Make box sizing predictable
*/

.mfl-card *,
.mfl-card *::before,
.mfl-card *::after {
  box-sizing: border-box;
}


/*
* IMAGE
*/

.mfl-card__image {
  grid-column: 1;
  grid-row: 1;

  position: relative;

  width: 100%;
  height: 100%;
  min-height: 340px;

  margin: 0;
  padding: 0;

  background-color: var(--card-background);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mfl-card__image--empty {
  background-color: var(--card-background);
}


/*
* CONTENT
*/

.mfl-card__content {
  grid-column: 2;
  grid-row: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-width: 0;
  min-height: 340px;

  margin: 0;
  padding: 25px 23px 20px;

  color: var(--text-colour);
  background: var(--content-background);
}

.mfl-card__text {
  min-width: 0;
  margin: 0;
  padding: 0;
}


/*
* TITLE
*/

.mfl-card__title {
  margin: 0 0 14px !important;
  padding: 0;

  color: var(--heading-colour) !important;

  font-size: clamp(25px, 2.3vw, 29px);
  font-weight: 700;
  line-height: 1.15;
}


/*
* DESCRIPTION
*/

.mfl-card__description {
  max-width: 28ch;

  margin: 0;
  padding: 0;

  color: var(--text-colour);

  font-size: 15px;
  font-weight: 400;
  line-height: 1.15;
}

.mfl-card__description p {
  margin: 0 0 12px;
}

.mfl-card__description p:last-child {
  margin-bottom: 0;
}


/*
* FOOTER
*/

.mfl-card__footer {
  margin-top: 32px;
  padding: 0;
}


/*
* BUTTON
*/

.mfl-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  min-height: 25px;

  margin: 0;
  padding: 10px 25px;

  color: var(--button-text) !important;
  background: var(--button-background);

  border: 2px solid var(--button-background);
  border-radius: 5px;

  font-size: 16px;
  font-weight: 500;
  line-height: 1;

  text-decoration: none !important;

  transition:
      background-color 180ms ease,
      color 180ms ease,
      transform 180ms ease;
}

.mfl-card__button:hover {
  color: var(--button-background) !important;
  background: transparent;

  text-decoration: none !important;

  transform: translateY(-1px);
}

.mfl-card__button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}


/*
* NO FILE MESSAGE
*/

.mfl-card__unavailable {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  margin: 0;
  padding: 0;

  color: var(--text-colour);

  font-size: 13px;
  line-height: 1.3;
}

.mfl-card__unavailable svg {
  flex: 0 0 auto;
  fill: currentColor;
}


/*
* GUTENBERG EDITOR
*/

.editor-styles-wrapper .mfl-card,
.block-editor-block-list__layout .mfl-card {
  display: grid !important;
  grid-template-columns: 41% 59% !important;
}


/*
* Force Gutenberg not to stretch the image
* above the text.
*/

.editor-styles-wrapper .mfl-card__image,
.block-editor-block-list__layout .mfl-card__image {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.editor-styles-wrapper .mfl-card__content,
.block-editor-block-list__layout .mfl-card__content {
  grid-column: 2 !important;
  grid-row: 1 !important;
}


/*
* Editor image controls
*/

.mfl-card--editor .mfl-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mfl-card__image-controls {
  position: relative;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  padding: 12px;
}


/*
* Hide image buttons until hover when
* there is already an image.
*/

.mfl-card--editor
.mfl-card__image:not(.mfl-card__image--empty)
.mfl-card__image-controls {
  opacity: 0;

  transition: opacity 180ms ease;
}

.mfl-card--editor
.mfl-card__image:hover
.mfl-card__image-controls {
  opacity: 1;
}


/*
* Gutenberg buttons over image
*/

.mfl-card--editor
.mfl-card__image-controls
.components-button {
  background: #ffffff;
}


/*
* TABLET
*/

@media (max-width: 850px) {

  .mfl-card,
  .editor-styles-wrapper .mfl-card,
  .block-editor-block-list__layout .mfl-card {
      grid-template-columns: 55% 45% !important;
  }

  .mfl-card__content {
      padding: 24px 20px;
  }
}


/*
* MOBILE
*/

@media (max-width: 650px) {

  .mfl-card,
  .editor-styles-wrapper .mfl-card,
  .block-editor-block-list__layout .mfl-card {
      grid-template-columns: 1fr !important;
      grid-template-rows: auto auto !important;

      min-height: auto;
  }

  .mfl-card__image,
  .editor-styles-wrapper .mfl-card__image,
  .block-editor-block-list__layout .mfl-card__image {
      grid-column: 1 !important;
      grid-row: 1 !important;

      min-height: 280px;
  }

  .mfl-card__content,
  .editor-styles-wrapper .mfl-card__content,
  .block-editor-block-list__layout .mfl-card__content {
      grid-column: 1 !important;
      grid-row: 2 !important;

      min-height: 260px;

      padding: 25px 22px;
  }

  .mfl-card__description {
      max-width: none;

      font-size: 16px;
      line-height: 1.3;
  }

  .mfl-card__footer {
      margin-top: 28px;
  }
}


/*
* SMALL MOBILE
*/

@media (max-width: 420px) {

  .mfl-card__image {
      min-height: 220px;
  }

  .mfl-card__content {
      min-height: 240px;
  }

  .mfl-card__title {
      font-size: 25px;
  }
}