/*
This file contains variables and classes that are common across
all variants of the card component.
*/
:root {
--dc-token-background-white-theme: #ffffff;
--dc-token-ui-background-dark-theme: #000A14;
--dc-token-ui-background-light-theme: #CCD9FC;
--dc-token-border-light-theme-01: #800038;
--dc-token-overlay-dark-01: #000A14;
--dc-token-overlay-dark-02: #00167f;
--dc-token-overlay-light-01: #002BFE;
--dc-token-text-01: #000A14;
--dc-token-text-02: #ffffff;
--dc-token-text-03: #00167f;
--dc-token-text-04: #80A0F8;
--dc-token-text-05: #666666;
--dc-token-text-06: #999999;
--dc-token-border-default-01: #80858A;
--dc-token-ui-01: #ffffff;
--dc-token-ui-02: #000A14;
--dc-token-ui-03: #00167f;
--dc-token-ui-04: #002BFE;
--dc-token-ui-05: #80A0F8;
--dc-token-ui-06: #FF0070;
--dc-token-ui-07: #FF5C00;
--dc-token-ui-08: #4ADEFF;
--dc-token-ui-09: #00D1C4;
--dc-token-interactive-01: #002BFE;
--dc-token-interactive-02: #ffffff;
--dc-token-interactive-03: #80A0F8;
--dc-token-interactive-04: #000A14;
--dc-token-interactive-05: #FF338D;
--dc-token-interactive-06: #FF80B8;
--dc-token-interactive-hover-01: #0022CB;
--dc-token-interactive-hover-02: #E6E7E8;
--dc-token-interactive-hover-03: #CCD9FC;
--dc-token-interactive-hover-04: #1A232C;
--dc-token-interactive-hover-05: #FF0070;
--dc-token-link-01: #002BFE;
--dc-token-link-hover-01: #0022CB;
--dc-token-link-02: #80A0F8;
--dc-token-link-hover-02: #CCD9FC;
--dc-token-link-03: #000A14;
--dc-token-link-04: #ffffff;
--dc-token-link-visited-white-theme: #6b2fc6;
--dc-token-link-visited-dark-theme: #b888ff;
--dc-token-ui-greyscale-01: #000000;
--dc-token-ui-greyscale-02: #333333;
--dc-token-ui-greyscale-03: #666666;
--dc-token-ui-greyscale-04: #999999;
--dc-token-ui-greyscale-05: #dadada;
--dc-token-ui-greyscale-06: #f0f0f0;
--dc-token-disabled-01: #999999;
--dc-token-disabled-02: #dadada;
--dc-token-disabled-03: #333333;
--dc-token-support-01: #FA0000;
--dc-token-support-02: #f0b02c;
--dc-token-support-03: #40b549;
--dc-token-support-04: #3366F3;
--dc-token-support-extended-01: #C80000;
--dc-token-support-extended-02: #B98922;
--dc-token-support-extended-03: #33913A;
--dc-token-support-extended-04: #0022CB;
--dc-token-ui-fill-extended-01: #1A232C;
--dc-token-ui-fill-extended-02: #4D545B;
--dc-token-ui-fill-extended-03: #80858A;
--dc-token-ui-fill-extended-04: #B3B6B9;
--dc-token-ui-fill-extended-05: #E6E7E8;
--dc-token-ui-fill-extended-06: #000419;
--dc-token-ui-fill-extended-07: #000B40;
--dc-token-ui-fill-extended-08: #001266;
--dc-token-ui-fill-extended-09: #334599;
--dc-token-ui-fill-extended-10: #808BBF;
--dc-token-ui-fill-extended-11: #CCD0E5;
--dc-token-ui-fill-extended-12: #000933;
--dc-token-ui-fill-extended-13: #00167F;
--dc-token-ui-fill-extended-14: #0022CB;
--dc-token-ui-fill-extended-15: #3366F3;
--dc-token-ui-fill-extended-16: #80A0F8;
--dc-token-ui-fill-extended-17: #CCD9FC;
--dc-token-ui-fill-extended-18: #330016;
--dc-token-ui-fill-extended-19: #800038;
--dc-token-ui-fill-extended-20: #CC005A;
--dc-token-ui-fill-extended-21: #FF338D;
--dc-token-ui-fill-extended-22: #FF80B8;
--dc-token-ui-fill-extended-23: #FFCCE2;
--dc-token-ui-fill-extended-24: #331200;
--dc-token-ui-fill-extended-25: #802E00;
--dc-token-ui-fill-extended-26: #CC4A00;
--dc-token-ui-fill-extended-27: #FF7D33;
--dc-token-ui-fill-extended-28: #FFAE80;
--dc-token-ui-fill-extended-29: #FFDECC;
--dc-token-ui-fill-extended-30: #0F2C33;
--dc-token-ui-fill-extended-31: #256F80;
--dc-token-ui-fill-extended-32: #3BB2CC;
--dc-token-ui-fill-extended-33: #6EE5FF;
--dc-token-ui-fill-extended-34: #A5EFFF;
--dc-token-ui-fill-extended-35: #DBF8FF;
--dc-token-ui-fill-extended-36: #002A27;
--dc-token-ui-fill-extended-37: #006962;
--dc-token-ui-fill-extended-38: #00A79D;
--dc-token-ui-fill-extended-39: #33DAD0;
--dc-token-ui-fill-extended-40: #80E8E2;
--dc-token-ui-fill-extended-41: #CCF6F3;
--dc-token-ui-fill-extended-42: #320000;
--dc-token-ui-fill-extended-43: #7D0000;
--dc-token-ui-fill-extended-44: #C80000;
--dc-token-ui-fill-extended-45: #FB3333;
--dc-token-ui-fill-extended-46: #FD8080;
--dc-token-ui-fill-extended-47: #FECCCC;
--dc-token-ui-fill-extended-48: #302309;
--dc-token-ui-fill-extended-49: #785816;
--dc-token-ui-fill-extended-50: #B98922;
--dc-token-ui-fill-extended-51: #F3C056;
--dc-token-ui-fill-extended-52: #F8D896;
--dc-token-ui-fill-extended-53: #FCEFD5;
--dc-token-ui-fill-extended-54: #0D240F;
--dc-token-ui-fill-extended-55: #205B25;
--dc-token-ui-fill-extended-56: #33913A;
--dc-token-ui-fill-extended-57: #66C46D;
--dc-token-ui-fill-extended-58: #A0DAA4;
--dc-token-ui-fill-extended-59: #D9F0DB;
--dc-token-ui-background-alternate-01: #00167f;
--dc-token-ui-background-alternate-02: #ff338d;
--dc-token-ui-background-alternate-03: #000a14;
--dc-token-ui-background-alternate-04: #002bfe;
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400..700");
/**
    Light theme.
*/

:root {
  /* Colours */
  --dc-background-colour: var(--dc-token-background-white-theme);
  --dc-colour-white: #ffffff;
  --dc-background-accent-color: var(--dc-token-interactive-hover-02);
  --dc-background-secondary-color: var(--dc-token-ui-02);
  --dc-background-secondary-accent-color: var(--dc-token-interactive-01);
  --dc-background-token-fill-color: var(--dc-token-ui-01);
  --dc-accent-color: var(--dc-token-interactive-05);
  --dc-primary-colour: var(--dc-token-interactive-01);
  --dc-primary-accent-colour: var(--dc-token-interactive-hover-01);
  --dc-secondary-colour: var(--dc-token-interactive-03);
  --dc-secondary-accent-colour: var(--dc-token-interactive-03);
  --dc-error-colour: #cf364e;
  --dc-primary-error-color: var(--dc-token-support-extended-01);
  --dc-primary-text-color: var(--dc-token-text-01);
  --dc-primary-token-text-color: var(--dc-token-text-02);
  --dc-secondary-text-color: #002470;
  --dc-ui-fill-extended-01: #3b4660;

  --dc-primary-box-shadow: 0px 3px 6px 0px #000a1429;
  --dc-ui-border-default: var(--dc-token-border-default-01);
  --dc-primary-disabled-colour: var(--dc-token-disabled-01);
  --dc-primary-disabled-text-colour: var(--dc-token-disabled-02);
  --dc-secondary-disabled-text-colour: var(--dc-token-disabled-02);
  --dc-background-disabled-color: var(--dc-token-background-white-theme);

  --dc-link-hover-color: var(--dc-token-interactive-01);
  --dc-primary-hover-color: var(--dc-token-interactive-hover-01);
  --dc-tag-hover-color: var(--dc-token-interactive-hover-05);
  --dc-ui-disabled-border: var(--dc-token-disabled-02);

  --dc-ui-fill-hover-colour: var(--dc-token-interactive-hover-02);
  --dc-primary-interactive-color: var(--dc-token-interactive-04);
  --dc-border-color: var(--dc-token-border-light-theme-01);
  --dc-fill-interactive: var(--dc-token-interactive-05);
  --dc-accent-text-color: var(--dc-token-text-05);
  --dc-accent-status-color: var(--dc-token-support-extended-03);
  --dc-primary-status-color: var(--dc-token-support-extended-04);
  --dc-secondary-status-color: var(--dc-token-support-extended-02);
  --dc-disabled-color-01: var(--dc-token-disabled-01);
  --dc-primary-link-visited-color: var(--dc-token-link-visited-white-theme);
  --dc-primary-text-interactive-color: var(--dc-token-interactive-02);

  --dc-greyscale-01: #151515;
  --dc-greyscale-02: #333333;
  --dc-greyscale-03: #666666;
  --dc-greyscale-04: #999999;
  --dc-greyscale-05: #dadada;
  --dc-grayscale-06: #f0f0f0;


  /* hmm */

  /* Typography */
  --dc-font-family: montserrat, sans-serif;

  /* Body */
  --dc-body-text-height: 24px;
  --dc-body-text-size: 16px;
  --dc-body-text-spacing: -0.2px;
  --dc-body-text-weight: 400;

  /* Spacing */
  --dc-padding-01: 4px;
  --dc-padding-02: 8px;
  --dc-padding-03: 12px;
  --dc-padding-04: 16px;
  --dc-padding-05: 24px;
  --dc-padding-06: 32px;
  --dc-padding-07: 40px;

  /* Headings */

  /* 1 */
  --dc-heading1-size: 64px;
  --dc-heading1-height: 80px;
  --dc-heading1-weight: 700;
  --dc-heading1-spacing: -0.5px;

  /* 2 */
  --dc-heading2-size: 48px;
  --dc-heading2-height: 64px;
  --dc-heading2-weight: 700;
  --dc-heading2-spacing: -0.5px;

  /* 3 */
  --dc-heading3-size: 40px;
  --dc-heading3-height: 48px;
  --dc-heading3-weight: 700;
  --dc-heading3-spacing: -0.5px;

  /* 4 */
  --dc-heading4-size: 32px;
  --dc-heading4-height: 40px;
  --dc-heading4-weight: 700;
  --dc-heading4-spacing: -0.5px;

  /* 5 */
  --dc-heading5-size: 24px;
  --dc-heading5-height: 32px;
  --dc-heading5-weight: 600;
  --dc-heading5-spacing: -0.5px;

  /* 6 */
  --dc-heading6-size: 14px;
  --dc-heading6-height: 24px;
  --dc-heading6-weight: 700;
  --dc-heading6-spacing: -0.2px;
}

.dark {
  --dc-background-colour: var(--dc-token-ui-background-dark-theme);
  --dc-colour-white: #ffffff;
  --dc-background-accent-color: var(--dc-token-interactive-hover-04);
  --dc-background-secondary-color: var(--dc-token-ui-05);
  --dc-background-secondary-accent-color: var(--dc-token-interactive-02);
  --dc-background-token-fill-color: var(--dc-token-ui-02);
  --dc-accent-color: var(--dc-token-interactive-06);
  --dc-primary-colour: var(--dc-token-interactive-03);
  --dc-primary-accent-colour: var(--dc-token-interactive-hover-03);

  --dc-secondary-accent-colour: var(--dc-token-interactive-hover-03);
  --dc-error-colour: #cf364e;
  --dc-primary-error-color: var(--dc-token-support-01);
  --dc-primary-text-color: var(--dc-token-text-02);
  --dc-primary-token-text-color: var(--dc-token-text-01);
  --dc-secondary-text-color: #002470;
  --dc-ui-fill-extended-01: #3b4660;

  --dc-primary-box-shadow: 0px 3px 6px 0px #ccced029;



  --dc-secondary-disabled-text-colour: var(--dc-token-disabled-01);
  --dc-background-disabled-color: var(--dc-token-disabled-03);

  --dc-link-hover-color: var(--dc-token-interactive-hover-03);
  --dc-primary-hover-color: var(--dc-token-interactive-hover-03);

  --dc-ui-disabled-border: var(--dc-token-disabled-03);

  --dc-ui-fill-hover-colour: var(--dc-token-interactive-hover-04);
  --dc-primary-interactive-color: var(--dc-token-interactive-02);
  --dc-border-color: var(--dc-token-interactive-05);

  --dc-accent-text-color: var(--dc-token-text-06);
  --dc-accent-status-color: var(--dc-token-support-03);
  --dc-primary-status-color: var(--dc-token-support-04);
  --dc-secondary-status-color: var(--dc-token-support-02);
  --dc-disabled-color-01: var(--dc-token-disabled-03);
  --dc-primary-link-visited-color: var(--dc-token-link-visited-dark-theme);
  --dc-primary-text-interactive-color: var(--dc-token-interactive-04);
}

/*
Below are custom media queries for defining breakpoints for our
component CSS (made possible using the "postcss-custom-media"
PostCSS plugin). They're written in a "mobile-first" approach
and can be applied into a normal '@media' CSS rule like below.

Example CSS:

// "Mobile width" CSS styles go here
background-color: red;

@media(--tablet-breakpoint) {
    // "Tablet width and up" CSS styles go here
    background-color: blue;
}

@media(--desktop-breakpoint) {
    // "Desktop width and up" CSS styles go here
    background-color: yellow;
}
*/

:host {
  --border-radius: 8px;
  --box-shadow: var(--dc-primary-box-shadow);
  --content-padding: 24px;
}

.dc-card {
  background-color: var(--dc-background-colour);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  font-family: var(--dc-font-family);
  height: 100%;
  position: relative;
  width: 100%;
}

.dc-card-media-wrapper {
  display: flex;
  position: relative;
}

.dc-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  width: 100%;
}

.with-image {
  position: absolute;
  right: 0;
  top: 0;
}

.dc-card-image {
  object-position: center;
  object-fit: cover;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  height: 240px;
  width: 100%;
}

::slotted([slot="tags"]) {
  margin: 8px 8px 0 0;
}

.dc-card-content-wrapper {
  color: var(--dc-primary-text-color);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--content-padding);
}

.dc-card-title {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 18px;
  font-weight: var(--dc-heading5-weight);
  letter-spacing: var(--dc-heading5-spacing);
  line-height: 24px;
  overflow: hidden;
  word-break: break-word;
}

@media (min-width: 500px) {
  .dc-card-title {
    font-size: var(--dc-heading5-size);
    line-height: var(--dc-heading5-height);
  }
}


.dc-card-content {
  color: var(--dc-primary-text-color);
  flex-grow: 1;
}

.dc-card-date {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 12px;
}

.dc-card-text {
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  color: var(--dc-primary-text-color);
  display: -webkit-box;
  line-height: 24px;
  letter-spacing: -0.2px;
  margin-top: 12px;
  overflow: hidden;
}

.dc-card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  align-items: center;
}

.dc-card-action-icon-button {
  background-color: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
}

.dc-card-action-icon-button:focus-visible {
  outline: 2px solid var(--dc-primary-colour);
}

.dc-card-action-icon {
  display: flex;
  height: 24px;
  width: 24px;
}

.dc-card-action-icon path {
  fill: var(--dc-primary-colour);
}