/**
 * @file
 * Card component styles for Aotearoa theme.
 */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp5);
  border: 1px solid var(--black);
  background-color: var(--white);
  box-sizing: border-box;
  min-width: 0;
  align-items: flex-start;
}

/* ==========================================================================
   Background Colors with Opacity
   ========================================================================== */

.card.card--bg-white {
  background-color: var(--white);
}

.card.card--bg-primary.card--opacity-10 { background-color: rgba(6, 120, 190, 0.1); }
.card.card--bg-primary.card--opacity-20 { background-color: rgba(6, 120, 190, 0.2); }
.card.card--bg-primary.card--opacity-30 { background-color: rgba(6, 120, 190, 0.3); }
.card.card--bg-primary.card--opacity-40 { background-color: rgba(6, 120, 190, 0.4); }
.card.card--bg-primary.card--opacity-50 { background-color: rgba(6, 120, 190, 0.5); }
.card.card--bg-primary.card--opacity-60 { background-color: rgba(6, 120, 190, 0.6); }
.card.card--bg-primary.card--opacity-70 { background-color: rgba(6, 120, 190, 0.7); }
.card.card--bg-primary.card--opacity-80 { background-color: rgba(6, 120, 190, 0.8); }
.card.card--bg-primary.card--opacity-90 { background-color: rgba(6, 120, 190, 0.9); }
.card.card--bg-primary.card--opacity-100 { background-color: var(--primary); }

/* ==========================================================================
   Corner Styles
   ========================================================================== */

.card.card--corner-default {
  border-radius: 30px;
}

.card.card--corner-feature {
  border-radius: 30px 120px 30px 30px;
}

/* ==========================================================================
   Card Image
   ========================================================================== */

.card__image {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 140px;
  margin-block-end: var(--sp3);
}

.card__image img,
.card__image .canvas-image,
.card__image .canvas-image__img {
  max-width: 180px;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   Card Heading
   ========================================================================== */

.card__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--primary);
  margin: 0 0 var(--sp2) 0;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ==========================================================================
   Card Text
   ========================================================================== */

.card__text {
  font-family: var(--font-sans);
  font-size: var(--body-m-size);
  font-weight: normal;
  line-height: var(--body-l-line-height);
  margin: 0 0 var(--sp3) 0;
  flex-grow: 1;
  text-align: left;
}