/* =========================================================
   IP Cards Module
   Supports: icon cards, numbered cards, image cards, SVG cards,
   plain cards, links, borders, shadows, hover states and watermarks.
========================================================= */

.ip-cards,
.ip-icon-cards {
  --card-gap: 20px;
  --card-row-gap: 20px;
  --card-padding: 28px;
  --card-bg: transparent;
  --card-text: var(--ip-gris);
  --card-border-colour: var(--card-accent);
  --card-shadow-colour: var(--card-accent);
}

.ip-cards.ip-card-gap--small {
  --card-gap: 20px;
}

.ip-cards.ip-card-gap--medium {
  --card-gap: 32px;
}

.ip-cards.ip-card-gap--large {
  --card-gap: 48px;
}

.ip-cards.ip-card-vertical-gap--small {
  --card-row-gap: 20px;
}

.ip-cards.ip-card-vertical-gap--medium {
  --card-row-gap: 32px;
}

.ip-cards.ip-card-vertical-gap--large {
  --card-row-gap: 48px;
}

.ip-cards .cards {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100%;
  column-gap: var(--card-gap);
  row-gap: var(--card-row-gap);
}

.ip-cards.ip-card-height--equal .cards {
  align-items: stretch !important;
}

.ip-cards.ip-card-height--auto .cards {
  align-items: flex-start !important;
}

.ip-cards.ip-box-align--left .cards {
  justify-content: flex-start !important;
}

.ip-cards.ip-box-align--center .cards {
  justify-content: center !important;
}

.ip-cards.ip-box-align--right .cards {
  justify-content: flex-end !important;
}

.ip-cards.ip-box-align--stretch .cards {
  justify-content: stretch !important;
}

.ip-cards .cards__card.card.card--ip {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;

  flex: 0 0 calc(
    (100% - ((var(--boxes-per-row) - 1) * var(--card-gap)))
    / var(--boxes-per-row)
  ) !important;

  max-width: calc(
    (100% - ((var(--boxes-per-row) - 1) * var(--card-gap)))
    / var(--boxes-per-row)
  ) !important;

  min-width: 0 !important;
  min-height: 0;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: var(--card-padding) !important;
  background: var(--card-bg);
  color: var(--card-text);
  text-decoration: none !important;
  border: 0;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.ip-cards.ip-card-height--equal .cards__card.card.card--ip {
  height: auto;
}

.ip-cards.ip-card-height--auto .cards__card.card.card--ip {
  align-self: flex-start;
}

/* =========================================================
   Card backgrounds
========================================================= */

.ip-cards.ip-card-bg--transparent {
  --card-bg: transparent;
}

.ip-cards.ip-card-bg--white {
  --card-bg: #ffffff;
}

.ip-cards.ip-card-bg--grey {
  --card-bg: #f7f7f4;
}

.ip-cards.ip-card-bg--blue {
  --card-bg: var(--ip-blue);
  --card-text: #ffffff;
}

.ip-cards.ip-card-bg--orange {
  --card-bg: var(--ip-orange);
  --card-text: #ffffff;
}

.ip-cards.ip-card-bg--gradient {
  --card-bg: linear-gradient(135deg, var(--ip-blue) 0%, #0f3554 100%);
  --card-text: #ffffff;
}

.ip-cards.ip-card-bg--blue .card__text,
.ip-cards.ip-card-bg--blue .card__text p,
.ip-cards.ip-card-bg--blue .card__text div,
.ip-cards.ip-card-bg--orange .card__text,
.ip-cards.ip-card-bg--orange .card__text p,
.ip-cards.ip-card-bg--orange .card__text div,
.ip-cards.ip-card-bg--gradient .card__text,
.ip-cards.ip-card-bg--gradient .card__text p,
.ip-cards.ip-card-bg--gradient .card__text div {
  color: #ffffff !important;
}

/* =========================================================
   Accent, border colour and shadow colour mapping
========================================================= */

.ip-cards.ip-card-border-colour--accent {
  --card-border-colour: var(--card-accent);
}

.ip-cards.ip-card-border-colour--blue {
  --card-border-colour: var(--ip-blue);
}

.ip-cards.ip-card-border-colour--orange {
  --card-border-colour: var(--ip-orange);
}

.ip-cards.ip-card-border-colour--grey {
  --card-border-colour: #ecece9;
}

.ip-cards.ip-card-border-colour--white {
  --card-border-colour: #ffffff;
}

.ip-cards.ip-card-shadow-colour--accent {
  --card-shadow-colour: var(--card-accent);
}

.ip-cards.ip-card-shadow-colour--blue {
  --card-shadow-colour: var(--ip-blue);
}

.ip-cards.ip-card-shadow-colour--orange {
  --card-shadow-colour: var(--ip-orange);
}

.ip-cards.ip-card-shadow-colour--grey {
  --card-shadow-colour: var(--ip-gris);
}

.ip-cards.ip-card-shadow-colour--white {
  --card-shadow-colour: #ffffff;
}

/* =========================================================
   Borders
========================================================= */

.ip-cards.ip-card-border--none .cards__card.card.card--ip {
  border: 0 !important;
}

.ip-cards.ip-card-border--all .cards__card.card.card--ip {
  border: 1px solid var(--card-border-colour) !important;
}

.ip-cards.ip-card-border--left .cards__card.card.card--ip {
  border-left: 2px solid var(--card-border-colour) !important;
}

.ip-cards.ip-card-border--right .cards__card.card.card--ip {
  border-right: 2px solid var(--card-border-colour) !important;
}

.ip-cards.ip-card-border--top .cards__card.card.card--ip {
  border-top: 2px solid var(--card-border-colour) !important;
}

.ip-cards.ip-card-border--bottom .cards__card.card.card--ip {
  border-bottom: 2px solid var(--card-border-colour) !important;
}

/* Backwards compatibility for old per-card border classes */
.ip-cards .border--left {
  border-left: 2px solid var(--card-border-colour) !important;
}

.ip-cards .border--right {
  border-right: 2px solid var(--card-border-colour) !important;
}

/* =========================================================
   Shadows
========================================================= */

.ip-cards.ip-card-shadow--none .cards__card.card.card--ip {
  box-shadow: none !important;
}

.ip-cards.ip-card-shadow--soft .cards__card.card.card--ip {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.ip-cards.ip-card-shadow--strong .cards__card.card.card--ip {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16);
}

.ip-cards.ip-card-shadow--soft.ip-card-shadow-colour--accent .cards__card.card.card--ip,
.ip-cards.ip-card-shadow--soft.ip-card-shadow-colour--blue .cards__card.card.card--ip,
.ip-cards.ip-card-shadow--soft.ip-card-shadow-colour--orange .cards__card.card.card--ip,
.ip-cards.ip-card-shadow--soft.ip-card-shadow-colour--grey .cards__card.card.card--ip {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--card-shadow-colour) 16%, transparent);
}

.ip-cards.ip-card-shadow--strong.ip-card-shadow-colour--accent .cards__card.card.card--ip,
.ip-cards.ip-card-shadow--strong.ip-card-shadow-colour--blue .cards__card.card.card--ip,
.ip-cards.ip-card-shadow--strong.ip-card-shadow-colour--orange .cards__card.card.card--ip,
.ip-cards.ip-card-shadow--strong.ip-card-shadow-colour--grey .cards__card.card.card--ip {
  box-shadow: 0 18px 46px color-mix(in srgb, var(--card-shadow-colour) 24%, transparent);
}

/* =========================================================
   Hover effects
========================================================= */

.ip-cards.ip-card-hover--none .cards__card.card.card--ip.ip-card-has-link:hover {
  transform: none;
}

.ip-cards.ip-card-hover--lift .cards__card.card.card--ip.ip-card-has-link:hover {
  transform: translateY(-4px);
}

.ip-cards.ip-card-hover--border-glow .cards__card.card.card--ip.ip-card-has-link:hover {
  box-shadow: 0 0 0 1px var(--card-accent), 0 14px 32px rgba(0, 0, 0, 0.10);
}

.ip-cards.ip-card-hover--background-shift .cards__card.card.card--ip.ip-card-has-link:hover {
  background: color-mix(in srgb, var(--card-accent) 10%, var(--card-bg));
}

/* Fallback when color-mix is unsupported */
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
  .ip-cards.ip-card-hover--background-shift .cards__card.card.card--ip.ip-card-has-link:hover {
    background: #f7f7f4;
  }
}
/* =========================================================
   Watermark colours
========================================================= */

.ip-cards.ip-card-watermark-colour--blue {
  --watermark-colour: var(--ip-blue)!important;
}

.ip-cards.ip-card-watermark-colour--orange {
  --watermark-colour: var(--ip-orange)!important;
}

.ip-cards.ip-card-watermark-colour--grey {
  --watermark-colour: var(--ip-gris)!important;
}

.ip-cards.ip-card-watermark-colour--white {
  --watermark-colour: #ffffff!important;
}
/* =========================================================
   Decoration: icons, numbers, images, SVG
========================================================= */

.ip-cards .card__decoration,
.ip-cards .card__icon {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-bottom: 20px;
  color: var(--card-accent) !important;
  line-height: 1;
}

.ip-cards .ip-card-icon-align--left .card__decoration,
.ip-cards .card__icon.icon-align--left {
  text-align: left !important;
}

.ip-cards .ip-card-icon-align--center .card__decoration,
.ip-cards .card__icon.icon-align--center {
  text-align: center !important;
}

.ip-cards .ip-card-icon-align--right .card__decoration,
.ip-cards .card__icon.icon-align--right {
  text-align: right !important;
}

.ip-cards .ip-card-icon-size--small {
  --icon-size: 32px;
}

.ip-cards .ip-card-icon-size--medium {
  --icon-size: 42px;
}

.ip-cards .ip-card-icon-size--large {
  --icon-size: 58px;
}

.ip-cards .card__decoration svg,
.ip-cards .card__decoration .card__svg-icon svg,
.ip-cards .card__icon svg {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  fill: var(--card-accent) !important;
  stroke: var(--card-accent) !important;
}

.ip-cards .material-icons,
.ip-cards .material-icons-outlined,
.ip-cards .material-icons-two-tone,
.ip-cards .material-icons-round,
.ip-cards .material-icons-sharp,
.ip-cards .ion,
.ip-cards .feather-icon {
  font-size: var(--icon-size) !important;
  color: var(--card-accent) !important;
}

.ip-cards .card__image-icon {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  object-fit: contain;
}

.ip-cards .card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--icon-size);
  height: var(--icon-size);
  color: var(--card-accent);
  font-family: "Noto Serif", serif;
  font-size: var(--icon-size);
  font-weight: 400;
  line-height: 1;
}

/* =========================================================
   Text
   Rich text fields control typography. This section only handles
   layout, stacking and basic spacing cleanup.
========================================================= */

.ip-cards .card__text {
  position: relative;
  z-index: 2;
  width: 100%;
}

.ip-cards.ip-card-height--equal .card__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ip-cards .card__eyebrow,
.ip-cards .card__title,
.ip-cards .card__subheading,
.ip-cards .card__body {
  width: 100%;
}

.ip-cards .card__eyebrow {
  margin-bottom: 8px;
}

.ip-cards .card__title {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.ip-cards .card__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #ecece9;
  margin-top: 12px;
  transition: background-color 0.2s ease;
}

.ip-cards .cards__card.card.card--ip.ip-card-has-link:hover .card__title::after {
  background: var(--card-accent);
}

.ip-cards .card__subheading {
  margin-bottom: 5px;
}

/* Remove awkward rich text spacing only */
.ip-cards .card__eyebrow > *:first-child,
.ip-cards .card__title > *:first-child,
.ip-cards .card__subheading > *:first-child,
.ip-cards .card__body > *:first-child {
  margin-top: 0;
}

.ip-cards .card__eyebrow > *:last-child,
.ip-cards .card__title > *:last-child,
.ip-cards .card__subheading > *:last-child,
.ip-cards .card__body > *:last-child {
  margin-bottom: 0;
}

/* Non-whole-card link */
.ip-cards .card__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 20px;
  color: var(--card-accent) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}

.ip-cards.ip-card-height--equal .card__link {
  margin-top: auto;
  padding-top: 20px;
}

.ip-cards .card__link::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.ip-cards .card__link:hover::after {
  transform: translateX(4px);
}

/* Bullet styling */
.ip-cards .card__text ul {
  list-style: none !important;
  padding-left: 0;
  margin: 16px 0;
}

.ip-cards .card__text li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 14px !important;
  color: var(--card-text) !important;
  line-height: 1.5;
}

.ip-cards .card__text li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--card-accent);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
}

/* =========================================================
   Watermark
========================================================= */

.ip-cards .card__watermark {
  position: absolute;
  z-index: 1;
  pointer-events: none;

  width: 250px;
  height: 250px;

  background-image: none !important;
  background: none !important;
  background-color: var(--watermark-colour, var(--ip-blue)) !important;

  -webkit-mask-image: url("https://144732994.fs1.hubspotusercontent-eu1.net/hubfs/144732994/ip_logo_mark_ko-2.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: url("https://144732994.fs1.hubspotusercontent-eu1.net/hubfs/144732994/ip_logo_mark_ko-2.svg") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  opacity: var(--watermark-opacity, 0.08);
}

.ip-cards.ip-card-watermark--bottom-right .card__watermark {
  right: -75px;
  bottom: -75px;
}

.ip-cards.ip-card-watermark--bottom-center .card__watermark {
  left: 50%;
  bottom: -75px;
  transform: translateX(-50%);
}

.ip-cards.ip-card-watermark--bottom-left .card__watermark {
  left: -75px;
  bottom: -75px;
}

/* =========================================================
   Visibility controls
========================================================= */

@media (min-width: 601px) {
  .ip-cards .ip-card-hide-desktop {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .ip-cards .ip-card-hide-mobile {
    display: none !important;
  }
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {

  .ip-cards .cards {
    column-gap: calc(var(--card-gap) * 0.75);
    row-gap: calc(var(--card-row-gap) * 0.75);
  }

  .ip-cards .cards__card.card.card--ip {
    flex-basis: calc((100% - (var(--card-gap) * 0.75)) / 2) !important;
    max-width: calc((100% - (var(--card-gap) * 0.75)) / 2) !important;
  }
}

@media (max-width: 600px) {

  .ip-cards .cards {
    column-gap: calc(var(--card-gap) * 0.75);
    row-gap: calc(var(--card-row-gap) * 0.75);
  }

  .ip-cards .cards__card.card.card--ip {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}