/* Noto Sans TC cut down to the characters this card can show. Registered under a private name,
 * NOT "Noto Sans TC": other stylesheets ask for that name and would get a 61-glyph subset,
 * rendering their common characters in it and the rest in a system face. See the font's README
 * for its source and licence. */
@font-face {
  font-family: "ESG Noto Sans TC";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/asset/fonts/noto-sans-tc-esg-subset.woff2") format("woff2");
  unicode-range: U+20, U+22, U+25-26, U+28-3b, U+3d, U+3f-55, U+59, U+5b, U+5d, U+5f, U+61-69, U+6b-79, U+7b, U+7d, U+2082, U+2715, U+4e00, U+4e0b, U+4e86, U+4e92, U+4efd, U+4f4d, U+529f, U+52d5, U+52d9, U+559c, U+5730, U+5883, U+5916, U+5b78, U+5b8c, U+5ba4, U+5c0d, U+5c11, U+606d, U+60a8, U+6210, U+6232, U+6236, U+6392, U+63a2, U+653f, U+6559, U+6578, U+662f, U+670d, U+679c, U+6b21, U+6bcf, U+6c38, U+6e1b, U+70ba, U+737b, U+7403, U+74b0, U+7684, U+770b, U+78b3, U+7a4d, U+7d04, U+7d22, U+7d2f, U+7da0, U+7e7c, U+7e8c, U+7fd2, U+8272, U+884c, U+89c0, U+8b80, U+8ca2, U+8f09, U+904a, U+90fd, U+91cf, U+9589, U+95b1, U+95dc, U+9810, U+9a57, U+9ad4;
}

/* ESG (數位減碳) achievement card. Mobile-first: the rules below are the phone modal (centred,
 * page dimmed); the media block at the bottom turns it into the desktop corner notification. */

.esg-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.esg-card-overlay.is-visible {
  opacity: 1;
}

.esg-card {
  position: relative;
  box-sizing: border-box;
  /* Wider than the design's 264px, which was drawn around a two-character placeholder. The
     widest carbon line - the smallest saving, "0.0065" - needs 272px, where 264px would leave
     only 216px between the paddings. */
  width: 328px;
  max-width: 100%;
  min-height: 320px;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  border-radius: 12px;
  outline: 1px #e5e7eb solid;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
  /* Subset first; the rest catch a character it does not carry, from whatever the visitor has. */
  font-family: "ESG Noto Sans TC", "Noto Sans TC", "Noto Sans CJK TC", "Noto Sans",
    "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif;
  transform: translateY(8px);
  transition: transform 0.18s ease-out;
}

.esg-card-overlay.is-visible .esg-card {
  transform: translateY(0);
}

.esg-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}

.esg-card__close-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.esg-card__close:hover,
.esg-card__close:focus-visible {
  background: rgba(0, 135, 86, 0.1);
  outline: none;
}

.esg-card__art {
  width: 169px;
  height: auto;
  margin-top: 4px;
}

.esg-card__headline {
  margin: 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.92px;
  text-align: center;
}

/* The reading count inside the headline, green as in the design. */
.esg-card__count {
  color: #467d1e;
  font-weight: 700;
  letter-spacing: 0.48px;
}

.esg-card__accent {
  margin: 0;
  color: #008756;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.96px;
  text-align: center;
  white-space: nowrap;
}

/* Second half of the accent line ("綠色數位學習" / "綠色行政服務") sits smaller. */
.esg-card__accent-sub {
  font-size: 14px;
  letter-spacing: 0.56px;
}

/* The 2 in CO₂e. Offset rather than vertical-align: sub, which would push the line box taller
   and shift everything below it. */
.esg-card__sub {
  font-size: 0.72em;
  position: relative;
  bottom: -0.15em;
}

/* The carbon line is a single size throughout, unlike the two above. */
.esg-card__accent--carbon .esg-card__accent-sub {
  font-size: inherit;
  letter-spacing: inherit;
}

.esg-card__note {
  margin: 0;
  color: #000;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1.6px;
  text-align: center;
}

.esg-card__cta {
  width: 100%;
  height: 40px;
  margin-top: auto;
  border: 0;
  border-radius: 25px;
  outline: 1px #e5e7eb solid;
  outline-offset: -1px;
  background: #008756;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 2.56px;
  cursor: pointer;
}

.esg-card__cta:hover,
.esg-card__cta:focus-visible {
  background: #006c45;
  outline: none;
}

/* Desktop: the overlay dims nothing and takes no pointer events, so the page behind stays
 * usable. js/esg-card.js matches this query and skips the focus trap to suit.
 *
 * hover/pointer as well as width, because a phone held sideways is over 769px wide and was
 * getting the corner layout. They describe the primary input, so a touchscreen laptop still
 * counts as desktop. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .esg-card-overlay {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
    background: transparent;
    pointer-events: none;
  }

  .esg-card {
    pointer-events: auto;
    transform: translateY(16px);
  }
}

/* Below 360px the card cannot take its full width, so give back what padding can be spared. */
@media (max-width: 359px) {
  .esg-card-overlay {
    padding: 8px;
  }

  .esg-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Narrower still and even that is not enough. Step the carbon line down - it is the only text
   on the card wide enough to be a problem. */
@media (max-width: 335px) {
  .esg-card__accent--carbon {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esg-card-overlay,
  .esg-card {
    transition: none;
  }
}