:root {
  /* Container */
  --card-icon--container-colour_bg: transparent;
  --card-icon--container-colour_fg: var(--card--container-colour_fg, #000000);
  /* Icon */
  --card-icon--icon--colour_bg: #F2F0F0;
  --card-icon--icon--colour: #1D42A6;
  --card-icon--icon--border-width: 0;
  --card-icon--icon--border_style: solid;
  --card-icon--icon--border_colour: inherit;
  --card-icon--icon--border_radius: 11px;
  /* Icon tag */
  --card-icon--icon-tag--colour_fg: #002147;
  --card-icon--icon-tag--colour_bg: transparent;
  --card-icon--icon-tag--font_family: 'Roboto';
  --card-icon--icon-tag--font_size: 1.25rem;
  --card-icon--icon-tag--font_weight: 500;
  --card-icon--icon-tag--font_style: normal;
  --card-icon--icon-tag--line_height: 120%;
  --card-icon--icon-tag--icon--font_size: 1.375rem;
  --card-icon--icon-tag--border_style: solid;
  --card-icon--icon-tag--border_colour: inherit;
  --card-icon--icon-tag--border_radius: 6px;
  /* Text area */
  --card-icon--text-area--border_width: 0;
  --card-icon--text-area--border_style: solid;
  --card-icon--text-area--border_colour: inherit;
  /* Metadata/Taxonomy Terms */
  --card-icon--metadata--background_colour: var(--taxonomy--tag-colour_background, #1d42a6);
  --card-icon--metadata--text_colour: #ffffff;
  --card-icon--metadata--font_family: 'Roboto';
  --card-icon--metadata--font_size: 1.125rem;
  --card-icon--metadata--font_weight: 500;
  --card-icon--metadata--font_style: normal;
  --card-icon--metadata--line_height: 120%;
  --card-icon--metadata--border_radius: 6px;
  --card-icon--metadata--taxonomy-label--text_colour: #61615f;
  --card-icon--metadata--taxonomy-term--background_colour: var(--taxonomy--tag-colour_background, #1d42a6);
  /* Title */
  --card-icon--title-colour_bg: var(--card--title-colour_bg, white);
  --card-icon--title-colour_fg: #002147;
  --card-icon--title--font_family: 'Noto Serif';
  --card-icon--title--font_size: 2.175rem;
  --card-icon--title--font_weight: 400;
  --card-icon--title--font_style: normal;
  --card-icon--title--line_height: 120%;
  /* Text */
  --card-icon--text_colour_bg: transparent;
  --card-icon--text--font_family: 'Roboto';
  --card-icon--text--font_size: 1.125rem;
  --card-icon--text--font_weight: 400;
  --card-icon--text--font_style: normal;
  --card-icon--text--line_height: 160%;
  --card-icon--text-padding: 0;
  /* Button */
  --card-icon--button--background_colour: var(--button--link-colour_background, #1d42a6);
  --card-icon--button--text_colour: #ffffff;
  --card-icon--button--border_colour: var(--button--link-colour_background, #1d42a6);
  --card-icon--button--font_family: 'Roboto';
  --card-icon--button--font_size: 1.375rem;
  --card-icon--button--font_weight: 500;
  --card-icon--button--font_style: normal;
  --card-icon--button--line_height: 120%;
  --card-icon--button--active--background_colour: var(--button--link--active--background_colour, #002147);
  --card-icon--button--active--text_colour: var(--button--link--active--text_colour, #ffffff);
  --card-icon--button--active--border_colour: var(--button--link--active--border_colour, #ffffff);
  /* Button Icon */
  --card-icon--button-icon--colour_fg: #B9D6F2;
}
/* Card - Icon */
.oxfcms-layout-card-icon {
  display: flex;
  flex-direction: column;
  gap: 33px;
  background-color: var(--card-icon--container-colour_bg);
  overflow: hidden;
  position: relative;
  font-family: var(--card-icon--container-font_family);
  border-color: var(--card-icon--border_colour);
  border-style: var(--card-icon--border_style);
  border-top-width: var(--card-icon--border_top_width);
  border-right-width: var(--card-icon--border_right_width);
  border-bottom-width: var(--card-icon--border_bottom_width);
  border-left-width: var(--card-icon--border_left_width);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
  width: 100%;
  * {
    margin: 0;
  }
  /* Overlay link */
  .oxfcms-layout-link-overlay {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  /* Icon block */
  .oxfcms-card-icon__icon-container {
    position: relative;
    background-color: var(--card-icon--icon--colour_bg);
    border-color: var(--card-icon--icon--border_colour);
    border-style: var(--card-icon--icon--border_style);
    border-width: var(--card-icon--icon--border-width);
    border-radius: var(--card-icon--icon--border_radius);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;

    .card-icon {
      z-index: 1;
      i {
        color: var(--card-icon--icon--colour);
      }
    }

    .paragraph.paragraph--type--oxfcms-icon {
      display: flex;
      width: auto;
      align-items: center;
      justify-content: center;
      .oxfcms-icon-icon {
        aspect-ratio: 16/9;
        padding: 0;
        z-index: 1;
        position: relative;
        i {
          padding: 10px;
          font-size: 5rem;
          box-sizing: border-box;
          align-self: center;
        }
      }
    }
  }
  /* Text block */
  .oxfcms-card-icon__content {
    display: flex;
    flex-direction: column;
    background-color: var(--card-icon--container-colour_bg);
    color: var(--card-icon--container-colour_fg);
    gap: var(--space-sm);
    padding: var(--card-icon--text-padding);
    border-color: var(--card-icon--text-area--border_colour);
    border-style: var(--card-icon--text-area--border_style);
    border-width: var(--card-icon--text-area--border_width);
    border-radius: 0;
    flex-grow: 1;
    /* Metadata */
    .oxfcms-card-icon__tags {
      /* Metadata */
      .card-metadata {
        background-color: transparent;
        width: 100%;
        padding: 0;
        border-radius: 0;

        .l__region {
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          gap: 13px;

          @media (width < 1280px) {
            gap: 8px;
          }
          width: 100%;

          > * {
            display: block;
            width: fit-content;
            max-width: 100%;
            margin: 0;
          }
        }
        --oxfcms-tag-bg-color: var(--card-icon--metadata--background_colour);
        --oxfcms-tag-text-color: var(--card-icon--metadata--text_colour);
        --oxfcms-tag-font-family: var(--card-icon--metadata--font_family);
        --oxfcms-tag-font-size: var(--card-icon--metadata--font_size);
        --oxfcms-tag-font-weight: var(--card-icon--metadata--font_weight);
        --oxfcms-tag-font-style: var(--card-icon--metadata--font_style);
        --oxfcms-tag-line-height: var(--card-icon--metadata--line_height);
        --oxfcms-tag-margin: 0;
        --oxfcms-tag-border-top-left-radius: 6px;
        --oxfcms-tag-border-top-right-radius: 6px;
        --oxfcms-tag-border-bottom-left-radius: 6px;
        --oxfcms-tag-border-bottom-right-radius: 6px;

        .oxfcms-plain-text,
        .oxfcms-metadata {
          color: var(--card-icon--metadata--text_colour);
          font-family: var(--card-icon--metadata--font_family);
          font-size: var(--card-icon--metadata--font_size);
          font-weight: var(--card-icon--metadata--font_weight);
          font-style: var(--card-icon--metadata--font_style);
          line-height: var(--card-icon--metadata--line_height);
        }
        i {
          color: var(--card-icon--metadata--text_colour);
          font-size: var(--card-icon--metadata--font_size);
          line-height: var(--card-icon--metadata--line_height);
        }
        &:has(.oxfcms-taxonomy--vocab-group) {
          --card-icon--metadata--background_colour: transparent;
          padding: 0;
          border-radius: 0;
        }
        .oxfcms-taxonomy,
        .oxfcms-metadata {
          .group-label {
            color: var(--card-icon--metadata--taxonomy-label--text_colour);
            font-family: var(--card-icon--text--font_family);
            font-size: var(--card-icon--text--font_size);
            font-weight: var(--card-icon--text--font_weight);
            font-style: var(--card-icon--text--font_style);
            line-height: var(--card-icon--text--line_height);
          }
          .group-item {
            background-color: var(--card-icon--metadata--taxonomy-term--background_colour);
            color: var(--card-icon--metadata--text_colour);
            border-radius: var(--card-icon--metadata--border_radius);
            width: fit-content;
            padding: var(--space-3xs) 13px;
            text-decoration: none;
            &:visited, *:visited {
              color: var(--card-icon--metadata--text_colour);
            }
          }
        }
        &:not(:has(*)) {
          display: none;
        }
        &:not(:has(.oxfcms-taxonomy), :has(.oxfcms-plain-text), :has(.oxfcms-tag)),
        &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text), :has(.oxfcms-tag)) {
          display: none;
        }
      }
    }
    /* Image tag */
    .oxfcms-card-icon__icon-tag {
      padding: 0;
      color: var(--card-icon--icon-tag--colour_fg);
      border-radius: 0;
      display: inline-block;

      .metadata-field-content {
        padding-right: var(--space-3xs);
      }
      /* Hide empty (but not in edit mode) */
      .oxfcms-layout-card-icon:not(.is-mercury-edit-mode) &,
      .oxfcms-layout-card-icon-container:not(.lp-builder) & {
        &:not(:has(*)) {
          display: none;
        }
        &:not(:has(.oxfcms-taxonomy)):not(:has(.oxfcms-plain-text)):not(:has(.oxfcms-tag)):not(:has(.oxfcms-metadata)),
        &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text)):not(:has(.oxfcms-tag)):not(:has(.oxfcms-metadata)) {
          display: none;
        }
      }
      .l__top_meta {
        display: inline-block;
        .oxfcms-plain-text,
        .oxfcms-metadata,
        .oxfcms-plain-text-content {
          color: var(--card-icon--icon-tag--colour_fg);
          font-family: var(--card-icon--icon-tag--font_family);
          font-size: var(--card-icon--icon-tag--font_size);
          font-weight: var(--card-icon--icon-tag--font_weight);
          font-style: var(--card-icon--icon-tag--font_style);
          line-height: var(--card-icon--icon-tag--line_height);
          border-radius: var(--card-icon--icon-tag--border_radius);

          .fontawesome-icon i, .metadata-field-prefix, .metadata-field-content, title {
            color: var(--card-icon--icon-tag--colour_fg);
            font-size: var(--card-icon--icon-tag--font_size);
            font-style: var(--card-icon--icon-tag--font_style);
            line-height: var(--card-icon--icon-tag--line_height);
          }
          .fontawesome-icon i {
            font-size: var(--card-icon--icon-tag--icon--font_size);
          }
        }
      }
    }

    .oxfcms-heading {
      h1, h2, h3, h4, h5, h6 {
        color: var(--card-icon--title-colour_fg);
        font-family: var(--card-icon--title--font_family);
        font-size: var(--card-icon--title--font_size);
        font-weight: var(--card-icon--title--font_weight);
        font-style: var(--card-icon--title--font_style);
        line-height: var(--card-icon--title--line_height);
      }
    }

    .card-text {
      .oxfcms-text {
        font-family: var(--card-icon--text--font_family);
        font-size: var(--card-icon--text--font_size);
        font-weight: var(--card-icon--text--font_weight);
        font-style: var(--card-icon--text--font_style);
        line-height: var(--card-icon--text--line_height);
      }
    }

    .card-button {
      margin-top: auto;
      /* Hide button if it doesn't actually contain a button */
      &:not(:has(.oxfcms-button)) {
        display: none
      }
      .oxfcms-button {
        a {
          width: 100%;
          z-index: 3;
          position: relative;
          background-color: var(--card-icon--button--background_colour);
          color: var(--card-icon--button--text_colour);
          border: 2px solid var(--card-icon--button--border_colour);
          border-radius: 6px;
          font-family: var(--card-icon--button--font_family);
          font-size: var(--card-icon--button--font_size);
          font-weight: var(--card-icon--button--font_weight);
          font-style: var(--card-icon--button--font_style);
          line-height: var(--card-icon--button--line_height);

          &:hover {
            background-color: var(--card-icon--button--active--background_colour);
            color: var(--card-icon--button--active--text_colour);
            border-color: var(--card-icon--button--active--border_colour);
          }
        }
      }
    }

    @media (width >= 768px) and (width < 1280px) {
      margin-top: 0;
    }
  }
}

@media (width < 1280px) {
  .oxfcms-layout-card-icon {
    --card-icon--icon-tag--font_size: 1.125rem;
    --card-icon--metadata--font_size: 1rem;
    --card-icon--title--font_size: 1.25rem;
    --card-icon--text--font_size: .875rem;
    --card-icon--button--font_size: 1.25rem;
  }
}

@media (width < 768px) {
  .oxfcms-layout-card-icon {
    --card-icon--icon-tag--font_size: 1rem;
    --card-icon--metadata--font_size: .875rem;
    --card-icon--title--font_size: 1.125rem;
    --card-icon--text--font_size: .875rem;
    --card-icon--button--font_size: 1.25rem;
  }
}

.is-mercury-edit-mode,
.lp-builder {
  .oxfcms-layout-card-icon {
    overflow: visible;
    .oxfcms-card-icon__icon-tag {
      min-width: 80px;
      &:not(:has(*)) {
        display: inline-block !important;
      }
      &:not(:has(.oxfcms-taxonomy), :has(.oxfcms-plain-text), :has(.oxfcms-tag), :has(.oxfcms-metadata)),
      &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text), :has(.oxfcms-tag), :has(.oxfcms-metadata)) {
        display: inline-block !important;
      }
    }
    .oxfcms-layout-link-overlay {
      display: none;
    }
    .card-icon:not(:has(.oxfcms-icon-icon)) {
      min-height: 150px;
      z-index: 1;
      height: 100%;
      &:hover {
        background: linear-gradient(0deg, transparent 45%, rgba(79 70 228 / 10%) 45%, rgba(79 70 228 / 10%) 45% 55%, transparent 55%, transparent 20%, rgba(79 70 228 / 10%) 45% 20%, rgba(79 70 228 / 10%) 45% 30%, transparent 30%), linear-gradient(90deg, transparent 45%, rgba(79 70 228 / 10%) 45% 45%, rgba(79 70 228 / 10%) 45% 55%, transparent 55%, transparent 20%, rgba(79 70 228 / 10%) 45% 20%, rgba(79 70 228 / 10%) 45% 30%, transparent 30%);
        background-size: 1em 1em;
        background-color: #ffffff;
      }
    }
    .oxfcms-card-icon__content {
      .card-metadata {
        &:not(:has(.oxfcms-taxonomy), :has(.oxfcms-plain-text), :has(.oxfcms-tag)), &:has(.oxfcms-taxonomy:empty):not(:has(.oxfcms-plain-text), :has(.oxfcms-tag)) {
          display: block;
          min-width: 80px;
        }
      }
      .card-button {
        /* Show button in edit mode */
        &:not(:has(.oxfcms-button)) {
          display: block;
        }
      }
    }
    .l__top_meta.js-lpb-region,
    .l__metadata.js-lpb-region {
       min-height: 34px;
       .js-lpb-component {
         overflow: visible;
       }
       .lpb-controls {
         width: max-content;
         min-width: 180px;
         white-space: nowrap;
         position: absolute;
         right: 0;
         z-index: 100;
       }
    }
  }
}

.oxfcms-layout-card-icon:hover .card-title .oxfcms-heading :is(h1, h2, h3, h4, h5, h6),
.oxfcms-layout-card-icon:focus-within .card-title .oxfcms-heading :is(h1, h2, h3, h4, h5, h6) {
  text-decoration: underline;
}