@font-face {
  font-display: swap;
  font-family: "LITFL CC Figtree";
  font-style: normal;
  font-weight: 400 700;
  src: url("assets/figtree-latin.woff2") format("woff2");
}

/*
 * Narrow first: this is the sidebar card. The card is its own size container, so from 560px of
 * its own width it turns into the article-bottom banner, wherever it is placed. Sizes are in cqi
 * so the layout scales with the card the way the artboards do.
 */
.litfl-cc {
  --cc-navy: #233a52;
  --cc-band: #36516a;
  --cc-placeholder: #bbcfdb;
  --cc-blue: #87d3ed;
  --cc-green: #93d997;
  --cc-orange: #ffc766;
  --cc-yellow: #fbdf64;
  --cc-gradient: linear-gradient(90deg, var(--cc-blue), var(--cc-green));
  --cc-frame-r: 3.5cqi;

  container: litfl-cc / inline-size;
  font-family: "LITFL CC Figtree", system-ui, sans-serif;
  margin-block: 2.5em 1.5em;
}

.litfl-cc[data-placement="sidebar"] {
  margin-block: 0;
}

.litfl-cc[data-theme="gradient"] { --cc-bg: var(--cc-gradient); --cc-star: var(--cc-yellow); --cc-ribbon: var(--cc-orange); --cc-badge: var(--cc-orange); }
.litfl-cc[data-theme="blue"]     { --cc-bg: var(--cc-blue);     --cc-star: var(--cc-orange); --cc-ribbon: var(--cc-green);  --cc-badge: var(--cc-orange); }
.litfl-cc[data-theme="green"]    { --cc-bg: var(--cc-green);    --cc-star: var(--cc-orange); --cc-ribbon: var(--cc-blue);   --cc-badge: var(--cc-orange); }
.litfl-cc[data-theme="yellow"]   { --cc-bg: var(--cc-yellow);   --cc-star: var(--cc-green);  --cc-ribbon: var(--cc-orange); --cc-badge: var(--cc-gradient); }
.litfl-cc[data-theme="orange"]   { --cc-bg: var(--cc-orange);   --cc-star: var(--cc-green);  --cc-ribbon: var(--cc-blue);   --cc-badge: var(--cc-gradient); }

.litfl-cc *,
.litfl-cc *::before,
.litfl-cc *::after {
  box-sizing: border-box;
}

.litfl-cc-link {
  align-items: center;
  background: var(--cc-bg);
  border-radius: 4.5cqi;
  color: var(--cc-navy);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  line-height: 1.15;
  overflow: hidden;
  padding: 3cqi 5.25cqi 5.35cqi;
  position: relative;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}

.litfl-cc-link:hover,
.litfl-cc-link:focus-visible {
  box-shadow: 0 6px 20px rgba(35, 58, 82, 0.18);
  color: var(--cc-navy);
  transform: translateY(-2px);
}

.litfl-cc-link:focus-visible {
  outline: 3px solid var(--cc-navy);
  outline-offset: 3px;
}

.litfl-cc-logo {
  display: block;
  height: auto;
  max-width: none;
  width: 54cqi;
}

.litfl-cc-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-size: max(17px, 5.6cqi);
  font-weight: 600;
  margin: 6.5cqi 0 8.5cqi;
  overflow: hidden;
  text-align: center;
}

.litfl-cc-panel {
  align-self: stretch;
  background: #fff;
  border-radius: 3.5cqi;
  display: grid;
  grid-template-columns: 61% 1fr;
  grid-template-rows: 1fr auto;
  padding: 1.1cqi;
  position: relative;
}

/* The slanted navy band behind the bottom of the panel. */
.litfl-cc-panel::before {
  background: var(--cc-band);
  bottom: -5.35cqi;
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
  content: "";
  height: 15.85cqi;
  left: -5.25cqi;
  position: absolute;
  right: -5.25cqi;
  z-index: -1;
}

.litfl-cc-media {
  aspect-ratio: 1.46;
  background: var(--cc-placeholder);
  display: block;
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
}

/*
 * The frame: rounded corners and a slanted right edge. The corners keep a fixed radius, so the
 * shape holds when the banner grows taller than the artboard.
 */
.litfl-cc-media,
.litfl-cc-image {
  clip-path: shape(
    from var(--cc-frame-r) 0,
    hline to calc(100% - var(--cc-frame-r)),
    curve to calc(100% - var(--cc-frame-r) / 8) var(--cc-frame-r) with 100% 0,
    line to calc(92.5% + var(--cc-frame-r) / 8) calc(100% - var(--cc-frame-r)),
    curve to calc(92.5% - var(--cc-frame-r)) 100% with 92.5% 100%,
    hline to var(--cc-frame-r),
    curve to 0 calc(100% - var(--cc-frame-r)) with 0 100%,
    vline to var(--cc-frame-r),
    curve to var(--cc-frame-r) 0 with 0 0,
    close
  );
}

.litfl-cc-image {
  display: block;
  height: 100%;
  max-width: none;
  object-fit: cover;
  width: 100%;
}

.litfl-cc-subline {
  align-self: center;
  font-size: max(13px, 3.2cqi);
  font-weight: 400;
  grid-column: 2;
  grid-row: 1;
  padding: 1em 0.6em;
  text-align: center;
}

.litfl-cc-subline strong {
  font-weight: 700;
}

/* Longer lines get smaller type and less padding, so they fit beside the image (see subline_length()). */
.litfl-cc-subline[data-length="medium"] {
  font-size: max(11.5px, 2.9cqi);
  padding: 0.6em 0.4em;
}

.litfl-cc-subline[data-length="long"] {
  font-size: max(11px, 2.7cqi);
  line-height: 1.1;
  padding: 0.4em 0.3em;
}

.litfl-cc-subline[data-length="xlong"] {
  font-size: max(10.5px, 2.5cqi);
  line-height: 1.1;
  padding: 0.3em 0.25em;
}

.litfl-cc-cme {
  background: var(--cc-ribbon);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%);
  /* The same flag with its points rounded; the polygon stays for browsers without shape(). */
  clip-path: shape(
    from 0 0,
    hline to calc(100% - 3px),
    curve to calc(100% - 0.1575em) 11.25% with 100% 0,
    line to calc(100% - 0.658em) 47%,
    curve to calc(100% - 0.658em) 53% with calc(100% - 0.7em) 50%,
    line to calc(100% - 0.1575em) 88.75%,
    curve to calc(100% - 3px) 100% with 100% 100%,
    hline to 0,
    close
  );
  display: block;
  font-size: max(12px, 2.9cqi);
  font-weight: 500;
  grid-column: 2;
  grid-row: 2;
  margin: 0 1.7cqi 1.2cqi -8cqi;
  padding: 0.3em 1.1em 0.3em calc(5cqi + 0.4em);
  text-align: center;
  white-space: nowrap;
}

.litfl-cc-domain {
  display: none;
}

/* The starburst overlapping the panel's top-left corner. */
.litfl-cc-free {
  display: grid;
  left: -3.5cqi;
  place-items: center;
  position: absolute;
  top: -6.75cqi;
  width: max(72px, 18cqi);
  z-index: 2;
}

.litfl-cc-star {
  fill: var(--cc-star);
  grid-area: 1 / 1;
  height: 100%;
  overflow: visible;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 6;
  width: 100%;
}

.litfl-cc-free-label {
  font-size: max(10.5px, 2.6cqi);
  font-weight: 600;
  grid-area: 1 / 1;
  line-height: 1.1;
  padding: 0 22%;
  text-align: center;
  transform: rotate(-10deg);
}

/* ------------------------------------------------------------ banner ---- */

@container litfl-cc (min-width: 560px) {
  /* The artboard's proportions as a minimum, so a long title can still make the card taller. */
  .litfl-cc-link {
    align-items: start;
    min-height: calc(100cqi / 4.6);
    border-radius: 2.25cqi;
    column-gap: 4.4cqi;
    display: grid;
    grid-template-columns: 30% 1fr auto;
    grid-template-rows: auto 1fr auto;
    padding: 1.1cqi;
  }

  .litfl-cc-logo {
    grid-column: 2;
    grid-row: 1;
    margin-top: 1.3cqi;
    width: 30cqi;
  }

  .litfl-cc-title {
    -webkit-line-clamp: 2;
    align-self: center;
    font-size: max(22px, 4cqi);
    font-weight: 500;
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0.5em 0 0.25em;
    padding-right: 2cqi;
    text-align: left;
  }

  .litfl-cc-panel {
    display: contents;
  }

  .litfl-cc-panel::before {
    display: none;
  }

  /* White frame: the same shape clipped twice, the inner radius shrunk by the frame width. */
  .litfl-cc-media {
    --cc-frame-r: 2cqi;
    align-self: stretch;
    aspect-ratio: auto;
    background: #fff;
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 0.55cqi;
    width: 100%;
  }

  .litfl-cc-image {
    --cc-frame-r: 1.45cqi;
    background: var(--cc-placeholder);
  }

  .litfl-cc-subline {
    align-self: end;
    font-size: max(14px, 2.4cqi);
    grid-column: 2;
    grid-row: 3;
    margin-bottom: 2.6cqi;
    padding: 0;
    text-align: left;
  }

  .litfl-cc-subline strong {
    font-weight: inherit;
  }

  /* The banner has room for long lines at its normal size; only the longest step down. */
  .litfl-cc-subline[data-length] {
    font-size: max(14px, 2.4cqi);
    line-height: inherit;
    padding: 0;
  }

  .litfl-cc-subline[data-length="xlong"] {
    font-size: max(13px, 2cqi);
  }

  .litfl-cc-cme {
    align-self: end;
    background: #fff;
    border-radius: 1.5cqi 0 1.5cqi 0;
    clip-path: none;
    font-size: max(12px, 1.7cqi);
    grid-column: 3;
    grid-row: 3;
    margin: 0 0.2cqi 0 0;
    padding: 0.4cqi 0.4cqi 0.6cqi;
  }

  .litfl-cc-cme-label {
    background: var(--cc-badge);
    border-radius: 1.1cqi 0 0 0;
    display: block;
    padding: 0.25em 1em;
  }

  .litfl-cc-domain {
    display: block;
    font-size: 0.9em;
    font-weight: 400;
    padding-top: 0.3em;
  }

  /* The white ribbon running off the top-right edge. */
  .litfl-cc-free {
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.6cqi 50%);
    clip-path: shape(
      from 100% 0,
      vline to 100%,
      hline to 0.375cqi,
      curve to 0.24cqi 92.5% with 0 100%,
      line to 1.536cqi 52%,
      curve to 1.536cqi 48% with 1.6cqi 50%,
      line to 0.24cqi 7.5%,
      curve to 0.375cqi 0 with 0 0,
      close
    );
    display: block;
    left: auto;
    padding: 0.9cqi 2.5cqi 0.9cqi 2.8cqi;
    right: -1cqi;
    top: 2.5cqi;
    transform: rotate(2.2deg);
    transform-origin: left center;
    width: auto;
  }

  .litfl-cc-star {
    display: none;
  }

  .litfl-cc-free-label {
    display: block;
    font-size: max(12px, 1.85cqi);
    padding: 0;
    transform: none;
    white-space: nowrap;
  }
}