/* ==========================================================================
   AUM Experience Card

   Four styles, and every colour set per card.

   Background is a custom property rather than a fixed declaration, so the
   style, the chosen colour and the hover colour can all coexist. A hardcoded
   background would win over the style and leave the hover state with nothing
   to change.
   ========================================================================== */

.aum-xp {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--aum-xp-pad, 40px);
  font-family: var(--aum-font, Lato, sans-serif);
  background: var(--aum-xp-bg, var(--aum-white, #fff));
  border: 1px solid var(--aum-xp-border, var(--aum-border, #e8e8e8));
  transition: background var(--aum-transition, .25s ease),
              border-color var(--aum-transition, .25s ease),
              transform var(--aum-transition, .25s ease),
              box-shadow var(--aum-transition, .25s ease);
}

.aum-xp.is-align-center { text-align: center; }
.aum-xp.is-align-right  { text-align: right; }

.aum-xp:hover {
  background: var(--aum-xp-hover-bg, var(--aum-xp-bg, var(--aum-white, #fff)));
  border-color: var(--aum-accent-deep, #7b6a58);
}

.aum-xp.has-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .06);
}

/* --- Parts ---------------------------------------------------------------- */

.aum-xp__num {
  font-size: var(--aum-xp-num-size, 13px);
  letter-spacing: .2em;
  color: var(--aum-xp-num-color, var(--aum-accent-deep, #7b6a58));
  margin: 0 0 16px;
}

.aum-xp__title {
  font-size: var(--aum-xp-title-size, 22px);
  font-weight: 400;
  letter-spacing: var(--aum-xp-title-track, .14em);
  text-transform: uppercase;
  color: var(--aum-xp-title-color, var(--aum-gray, #9b9b9b));
  line-height: 1.35;
  margin: 0 0 18px;
}

.aum-xp__rule {
  border: 0;
  border-top: 2px solid var(--aum-xp-rule-color, var(--aum-accent, #d7c6b2));
  width: 44px;
  margin: 0 0 20px;
  opacity: 1;
}

.aum-xp.is-align-center .aum-xp__rule { margin-inline: auto; }
.aum-xp.is-align-right  .aum-xp__rule { margin-left: auto; }

.aum-xp__body {
  font-size: var(--aum-xp-body-size, 16px);
  line-height: var(--aum-xp-body-leading, 1.7);
  color: var(--aum-xp-body-color, var(--aum-text, #2b2b2b));
  margin: 0 0 28px;
}

.aum-xp__body strong {
  color: var(--aum-xp-title-color, var(--aum-black, #000));
  font-weight: 700;
}

.aum-xp__extra { margin: 0 0 28px; }
.aum-xp__extra > *:last-child { margin-bottom: 0; }

/* margin-top:auto pins the button, so a row of cards with uneven copy still
   lines its buttons up. */
.aum-xp__actions { margin-top: auto; }

/* --- Button --------------------------------------------------------------- */

.aum-xp__btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: var(--aum-fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 17px 20px;
  border-radius: 0;
  transition: background var(--aum-transition, .25s ease),
              color var(--aum-transition, .25s ease),
              border-color var(--aum-transition, .25s ease);
}

.aum-xp__btn.is-outline {
  background: var(--aum-xp-btn-bg, transparent);
  color: var(--aum-xp-btn-color, var(--aum-gray, #9b9b9b));
  border: 1px solid var(--aum-xp-btn-border, var(--aum-border, #e8e8e8));
}

.aum-xp__btn.is-outline:hover {
  background: var(--aum-black, #000);
  border-color: var(--aum-black, #000);
  color: var(--aum-white, #fff);
}

.aum-xp__btn.is-solid {
  background: var(--aum-xp-btn-bg, var(--aum-black, #000));
  color: var(--aum-xp-btn-color, var(--aum-white, #fff));
  border: 1px solid var(--aum-xp-btn-border, var(--aum-xp-btn-bg, var(--aum-black, #000)));
}

.aum-xp__btn.is-solid:hover {
  background: var(--aum-accent-deep, #7b6a58);
  border-color: var(--aum-accent-deep, #7b6a58);
}

.aum-xp__btn.is-text {
  display: inline-block;
  width: auto;
  text-align: left;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--aum-xp-btn-color, var(--aum-gray, #9b9b9b));
}

.aum-xp__btn.is-text:hover {
  background: transparent;
  color: var(--aum-black, #000);
}

.aum-xp.is-align-center .aum-xp__btn.is-text { text-align: center; }

/* --- Styles ---------------------------------------------------------------
   bordered  the default, a hairline card
   soft      filled with the soft ground, no border
   ink       dark card for a featured item
   open      no card at all, separated by column rules
   -------------------------------------------------------------------------- */

.aum-xp--soft {
  background: var(--aum-xp-bg, var(--aum-soft, #f7f7f7));
  border-color: var(--aum-xp-border, transparent);
}

.aum-xp--ink {
  background: var(--aum-xp-bg, var(--aum-black, #000));
  border-color: var(--aum-xp-border, var(--aum-xp-bg, var(--aum-black, #000)));
}

.aum-xp--ink .aum-xp__title { color: var(--aum-xp-title-color, #fff); }
.aum-xp--ink .aum-xp__body  { color: var(--aum-xp-body-color, rgba(255, 255, 255, .74)); }
.aum-xp--ink .aum-xp__body strong { color: var(--aum-xp-title-color, #fff); }
.aum-xp--ink .aum-xp__num   { color: var(--aum-xp-num-color, var(--aum-accent, #d7c6b2)); }

.aum-xp--ink .aum-xp__btn.is-outline {
  border-color: var(--aum-xp-btn-border, rgba(255, 255, 255, .3));
  color: var(--aum-xp-btn-color, rgba(255, 255, 255, .8));
}

.aum-xp--ink .aum-xp__btn.is-outline:hover {
  background: #fff;
  border-color: #fff;
  color: #000;
}

.aum-xp--open {
  background: var(--aum-xp-bg, transparent);
  border: 0;
  padding: 8px 34px;
}

.aum-xp--open:hover { transform: none; box-shadow: none; background: var(--aum-xp-bg, transparent); }

/* The separator is drawn on the column rather than the card, so it vanishes
   cleanly when the columns stack. */
.aum-bootstrap-row-block > [class*="col"] + [class*="col"] > .aum-xp--open,
.row > [class*="col"] + [class*="col"] > .aum-xp--open {
  border-left: 1px solid var(--aum-xp-border, var(--aum-border, #e8e8e8));
}

@media (max-width: 991.98px) {
  .aum-bootstrap-row-block > [class*="col"] + [class*="col"] > .aum-xp--open,
  .row > [class*="col"] + [class*="col"] > .aum-xp--open {
    border-left: 0;
    border-top: 1px solid var(--aum-xp-border, var(--aum-border, #e8e8e8));
    padding-top: 34px;
    margin-top: 12px;
  }
}

/* --- In a grid ------------------------------------------------------------ */

.aum-bootstrap-column-block > .aum-xp,
.col > .aum-xp { height: 100%; }

@media (max-width: 575.98px) {
  .aum-xp { padding: calc(var(--aum-xp-pad, 40px) * .7); }
}

@media (prefers-reduced-motion: reduce) {
  .aum-xp { transition: none; }
  .aum-xp:hover { transform: none; }
}