/* Serim Flavor certificate and patent catalog.
 * Certificate scans stay private because the source documents can contain
 * personal information. The media panel uses an existing Serim brand image. */
body.about-certificate-page {
  --vfcert-page-bg: #f2f7f7;
  --vfcert-paper: #fff;
  --vfcert-card-bg: #fff;
  --vfcert-card-hover: #f3f2f0;
  --vfcert-card-shadow: 0px 1px 3px 1px #161a1e03, 0px 4px 8px -6px #161a1e14, 0px 1px 5px -4px #161a1e14, 0px 0px 0px 1px #161a1e0a, 0px 1px 0px 0px #161a1e05;
  --vfcert-heading: var(--serim-text-primary, #171717);
  --vfcert-copy: var(--serim-text-secondary, #5c5c5c);
  --vfcert-muted: var(--serim-text-weak, #737373);
  --vfcert-border: #e2e4e5;
  --vfcert-focus: var(--serim-text-link-focus-soft, #476cff);

  padding-top: 0;
  background: var(--vfcert-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vfcert-main,
.vfcert-main *,
.vfcert-main *::before,
.vfcert-main *::after {
  box-sizing: border-box;
}

.vfcert-main {
  width: 100%;
  overflow: clip;
  color: var(--vfcert-copy);
  font-family: var(--vf-font-sans, "UCity Pro", "Pretendard Variable", Pretendard, sans-serif);
}

.vfcert-main :where(h1, h2, h3, p, dl, dd) {
  margin: 0;
}

.vfcert-gutters {
  width: 100%;
  padding-inline: 1.25rem;
}

.vfcert-container {
  width: 100%;
  max-width: 81rem;
  margin-inline: auto;
}

.vfcert-hero {
  min-height: min(42rem, 86svh);
  background: var(--vfcert-page-bg);
}

.vfcert-hero .serim-hero-intro-lg__title {
  max-width: 17ch;
}

.vfcert-hero .serim-hero-intro-lg__description {
  max-width: 46rem;
}

.vfcert-catalog {
  padding-block: 4rem 5rem;
  background: transparent;
}

.vfcert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  counter-reset: vfcert-card;
}

.vfcert-card {
  --vfcert-media-start: rgb(9 58 91 / 16%);
  --vfcert-media-end: rgb(4 33 68 / 48%);
  --vfcert-seal: #148d9b;

  position: relative;
  display: grid;
  min-width: 0;
  counter-increment: vfcert-card;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "body"
    "media";
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  background: var(--vfcert-card-bg);
  box-shadow: var(--vfcert-card-shadow);
}

.vfcert-card:nth-child(2) {
  --vfcert-media-start: rgb(29 59 102 / 12%);
  --vfcert-media-end: rgb(15 41 86 / 52%);
  --vfcert-seal: var(--serim-navy, #17477f);
}

.vfcert-card:nth-child(3) {
  --vfcert-media-start: rgb(42 104 78 / 13%);
  --vfcert-media-end: rgb(26 73 58 / 52%);
  --vfcert-seal: #3c8068;
}

.vfcert-card:nth-child(4) {
  --vfcert-media-start: rgb(63 116 80 / 12%);
  --vfcert-media-end: rgb(28 70 50 / 52%);
  --vfcert-seal: #477a5b;
}

.vfcert-card:nth-child(5) {
  --vfcert-media-start: rgb(26 122 99 / 13%);
  --vfcert-media-end: rgb(10 74 59 / 52%);
  --vfcert-seal: #19876e;
}

.vfcert-card:nth-child(6) {
  --vfcert-media-start: rgb(42 78 126 / 12%);
  --vfcert-media-end: rgb(27 55 96 / 55%);
  --vfcert-seal: #355c8a;
}

.vfcert-card:nth-child(7) {
  --vfcert-media-start: rgb(55 90 126 / 12%);
  --vfcert-media-end: rgb(32 62 94 / 55%);
  --vfcert-seal: #4e7195;
}

.vfcert-card:nth-child(8) {
  --vfcert-media-start: rgb(92 75 117 / 12%);
  --vfcert-media-end: rgb(61 47 83 / 55%);
  --vfcert-seal: #735f8d;
}

.vfcert-card:nth-child(9) {
  --vfcert-media-start: rgb(127 86 43 / 12%);
  --vfcert-media-end: rgb(89 57 27 / 55%);
  --vfcert-seal: #9a6c3f;
}

.vfcert-card-head {
  grid-area: head;
  padding: 1.5rem 1.5rem 0;
  border-radius: 1rem 1rem 0 0;
  background: var(--vfcert-card-bg);
  transition: background-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vfcert-card-head > .vfcert-card-mark {
  display: none;
}

.vfcert-card-type {
  margin-bottom: 0.75rem !important;
  color: var(--vfcert-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vfcert-card-title {
  max-width: 27ch;
  color: var(--vfcert-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.vfcert-card-body {
  display: flex;
  grid-area: body;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem 1.5rem 1.5rem;
  border-radius: 0 0 1rem 1rem;
  background: var(--vfcert-card-bg);
  transition: background-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vfcert-card:hover :is(.vfcert-card-head, .vfcert-card-body) {
  background: #ebe9e8;
}

.vfcert-card-description {
  max-width: 40rem;
  color: var(--vfcert-copy);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.vfcert-card-meta {
  display: grid;
  gap: 0.4375rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(23 23 23 / 10%);
  color: var(--vfcert-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.vfcert-card-meta > div {
  display: grid;
  grid-template-columns: minmax(5.75rem, auto) minmax(0, 1fr);
  gap: 0.75rem;
}

.vfcert-card-meta dt {
  font-weight: 500;
}

.vfcert-card-meta dd {
  color: var(--vfcert-heading);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.vfcert-status {
  align-self: flex-start;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
}

.vfcert-status--attention {
  background: #f4e8cf;
  color: #765519;
}

.vfcert-card-media {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  grid-area: media;
  place-items: center;
  overflow: hidden;
  margin: 0;
  border-radius: 1rem;
  background-color: #7f9ca8;
  isolation: isolate;
}

.vfcert-card-media::before,
.vfcert-card-media::after {
  position: absolute;
  inset: 0;
  content: "";
}

.vfcert-card-media::before {
  z-index: -2;
  background-image:
    linear-gradient(135deg, var(--vfcert-media-start), var(--vfcert-media-end)),
    url("../../hero-reference/hero-serim-about-straight-fields-n2a.1400w.avif");
  background-position: center;
  background-size: cover;
  transform: scale(1.001);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vfcert-card:nth-child(2n) .vfcert-card-media::before {
  background-position: 60% center;
}

.vfcert-card:nth-child(3n) .vfcert-card-media::before {
  background-position: 38% center;
}

.vfcert-card-media::after {
  z-index: -1;
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 1.35rem,
      rgb(255 255 255 / 24%) 1.4rem 1.46rem
    ),
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 38%),
    radial-gradient(circle at center, transparent 12%, rgb(2 15 35 / 12%) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  opacity: 0.28;
  transform: rotate(-7deg) scale(1.18);
}

.vfcert-card-seal {
  position: relative;
  display: grid;
  width: clamp(6.75rem, 34%, 8.25rem);
  aspect-ratio: 1;
  place-content: center;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  background: var(--vfcert-seal);
  box-shadow:
    0 1rem 2.5rem rgb(5 18 35 / 24%),
    inset 0 0 0 1px rgb(255 255 255 / 14%);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}

.vfcert-card-seal::before,
.vfcert-card-seal::after {
  position: absolute;
  inset: 17%;
  background: rgb(255 255 255 / 42%);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  content: "";
}

.vfcert-card-seal::after {
  inset: calc(17% + 2px);
  background: var(--vfcert-seal);
}

.vfcert-card-seal strong,
.vfcert-card-seal small {
  position: relative;
  z-index: 1;
}

.vfcert-card-seal strong {
  font-size: 0;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.vfcert-card-seal strong::after {
  content: counter(vfcert-card, decimal-leading-zero);
  font-size: clamp(1.35rem, 4.8vw, 2rem);
  letter-spacing: -0.055em;
}

.vfcert-card-seal small {
  margin-top: 0.25rem;
  font-size: 0;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.vfcert-card-seal small::after {
  content: "SERIM";
  font-size: 0.625rem;
}

.vfcert-card:hover .vfcert-card-media::before {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .vfcert-gutters {
    padding-inline: 2.5rem;
  }

  .vfcert-hero {
    min-height: min(48rem, 82svh);
  }

  .vfcert-catalog {
    padding-block: 7rem 8rem;
  }
}

@media (min-width: 790px) {
  .vfcert-card {
    min-height: 15.1875rem;
    grid-template-columns: minmax(0, 61fr) minmax(18rem, 39fr);
    grid-template-areas:
      "head media"
      "body media";
    grid-template-rows: auto 1fr;
    column-gap: 0.25rem;
  }

  .vfcert-card-head {
    padding: 0.75rem 1.25rem 0;
    border-radius: 1rem 0 0 0;
  }

  .vfcert-card-type {
    font-size: 0.8125rem;
  }

  .vfcert-card-title {
    font-size: clamp(1.375rem, 1.7vw, 1.5rem);
    line-height: 1;
  }

  .vfcert-card-body {
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0 0 0 1rem;
  }

  .vfcert-card-description {
    max-width: 27.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .vfcert-card-meta {
    font-size: 0.8125rem;
  }

  .vfcert-card-media {
    min-height: 15.1875rem;
    aspect-ratio: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vfcert-card-head,
  .vfcert-card-body,
  .vfcert-card-media::before,
  .vfcert-card-seal {
    transition: none;
  }

  .vfcert-card:hover .vfcert-card-media::before {
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vfcert-card {
      animation: vfcert-card-reveal linear both;
      animation-duration: 1ms;
      animation-range: entry 0% entry 34%;
      animation-timeline: view(block);
    }
  }
}

@keyframes vfcert-card-reveal {
  from {
    opacity: 0.001;
    transform: translateY(1.875rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}