/* ============================================================
   keshin.work — Shared Components
   ------------------------------------------------------------
   The Figma component library, translated. Loaded on EVERY page
   (like the header/footer web components that use it).

     Buttons/Button        → .k-btn   (+ --primary/--secondary/--lg)
     2. Buttons (cta-link) → .cta-link  Hover=Yes: text, arrow and
                             underline flip to brand blue and the
                             ↗ arrow rotates 45° into →  (per the
                             Hover variant in Figma, node 3922:49793)
     1. tag                → .k-tag
     7.0 - Footer          → .sf-*
   ============================================================ */

/* ── Buttons/Button ──────────────────────────────────────────
   Anatomy: 4px padded shell · 32px icon tile · 12px-padded label.
   Sharp corners — no radius anywhere in the updated system.     */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: 40px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.k-btn-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fit the glyph in a 20px box rather than forcing it to 20×20. The Meet
   mark is 16.67×13.334 and its SVG carries preserveAspectRatio="none",
   so a forced square stretches it half again as tall instead of
   letterboxing. Square marks (computer, resume) are unaffected. */
.k-btn-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 20px;
  max-height: 20px;
}

.k-btn-label {
  padding: 0 12px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hierarchy=Primary — brand blue shell, white icon tile,
   label = Hairline-12 in Gray/10 with 1px tracking. */
.k-btn--primary { background: var(--color-brand); }
.k-btn--primary .k-btn-icon { background: var(--surface-white); }
.k-btn--primary .k-btn-label {
  font-size: var(--text-hairline-12);
  line-height: 20px;
  letter-spacing: 1px;
  color: var(--color-gray-10);
}
.k-btn--primary:hover { background: var(--color-primary-hover); }   /* #002177 */

/* Hierarchy=Secondary — 2px Gray/30 border, transparent tile,
   label = Hairline-13 in Gray/80. */
.k-btn--secondary {
  background: transparent;
  border: 2px solid var(--color-gray-30);
  padding: 2px;                       /* 4px visual incl. border */
}
.k-btn--secondary .k-btn-label {
  font-size: var(--text-hairline-13);
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  color: var(--color-gray-80);
}
.k-btn--secondary:hover { background: rgba(31, 37, 55, 0.05); }

/* Filled icon tile — the resume/paper glyph is a LIGHT artwork and only
   reads on the dark plate Figma gives it (cta-download-resume). */
.k-btn-icon--dark { background: var(--color-gray-80); }

/* Trailing-arrow tile (e.g. footer "Discover"): dark ↗ on no fill */
.k-btn-icon--arrow svg { width: 18px; height: 18px; display: block; }
.k-btn-icon--arrow { color: var(--color-gray-80); }

/* Size=Large — tablet/mobile hero + mobile footer (48px tall) */
.k-btn--lg { padding: 8px; min-height: 48px; }
.k-btn--secondary.k-btn--lg { padding: 6px; }

/* ── 2. Buttons — cta-link (label ↗ + 2px underline) ─────────
   Default: Gray/80. Hover: everything turns brand blue and the
   arrow rotates from ↗ to → (Figma Hover=Yes swaps the icon).  */
.cta-link {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--color-gray-80);
  cursor: pointer;
  transition: color .2s ease;
  /* also used on <button> (copy email) — strip UA chrome */
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  appearance: none;
}

.cta-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta-link-label {
  font-family: var(--font-body);
  font-size: var(--text-hairline-13);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  white-space: nowrap;
}

.cta-link-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-link-arrow svg {
  width: 14.25px;
  height: 14.25px;
  display: block;
  transition: transform .2s ease;
}

/* 2px divider under the content — same color as the text */
.cta-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.cta-link:hover { color: var(--color-brand); }
.cta-link:hover .cta-link-arrow svg { transform: rotate(45deg); }

/* Copy-email variant: label + 20px copy icon, 12px gap (no arrow) */
.cta-link--copy .cta-link-row { gap: 12px; }
.cta-link--copy .cta-link-arrow svg { width: 20px; height: 20px; }
.cta-link--copy:hover .cta-link-arrow svg { transform: none; }

/* ── 1. tag — white chip, Hairline-13 label, sharp corners ─── */
.k-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--surface-white);
  font-family: var(--font-body);
  font-size: var(--text-hairline-13);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-80);
  white-space: nowrap;
}

/* ============================================================
   7.0 — FOOTER  (custom element <site-footer>, class .site-footer)
   ------------------------------------------------------------
   A hairline-ruled grid on Surface/S20. Vertical rails sit at the
   page gutter (80px), the 925px column split, and 80px from the
   right edge — drawn as cell borders on a 4-column grid:

       [gutter 80] [left …845] [right …435] [gutter 80]
   ============================================================ */
.site-footer {
  display: block;
  width: 100%;
  background: var(--surface-20);
}

.sf-grid {
  max-width: 1440px;
  margin: 0 auto;
}

.sf-row {
  display: grid;
  grid-template-columns:
    var(--page-gutter)
    minmax(0, 845fr)
    minmax(300px, 435fr)
    var(--page-gutter);
  border-top: 1px solid var(--color-border);
}
.sf-row:last-child { border-bottom: 1px solid var(--color-border); }

.sf-cell-l {
  grid-column: 2;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  min-width: 0;
}
.sf-cell-r {
  grid-column: 3;
  border-right: 1px solid var(--color-border);
  min-width: 0;
}

/* ── Row 1: “Open to the Opportunity” + Next Page ──────────── */
.sf-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 24px;
  text-decoration: none;
}

.sf-cta-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--color-gray-60);
}
.sf-cta-heading strong {
  font-weight: 400;
  color: var(--color-gray-80);
  transition: color .2s ease;
}
.sf-cta:hover .sf-cta-heading strong { color: var(--color-brand); }

.sf-cta-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-title-2);      /* 3. Title/Title - 2 - 20 */
  font-weight: 600;
  line-height: var(--lh-title-2);
  letter-spacing: var(--ls-title-2);
  color: var(--color-gray-60);
}

.sf-next {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  min-height: 192px;
}

.sf-label {
  font-family: var(--font-body);
  font-size: var(--text-hairline-13);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-50);
}

.sf-next-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sf-next-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-gray-80);
}

/* ── Row 2: Quick links + contact ──────────────────────────── */
.sf-links {
  display: flex;
  flex-direction: column;
  gap: 112px;
  padding: 24px;
}

.sf-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  align-items: flex-start;
}

.sf-menu a {
  font-family: var(--font-body);
  font-size: var(--text-menu);          /* Menu/Semibold-32 */
  font-weight: 600;
  line-height: var(--lh-menu);
  letter-spacing: var(--ls-menu);
  color: var(--color-gray-80);
  text-decoration: none;
  transition: color .2s ease;
}
.sf-menu a:hover,
.sf-menu a.active { color: var(--color-brand); }

.sf-wordmark {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sf-wordmark img { display: block; height: 48px; width: auto; }

.sf-contact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  min-height: 492px;
  gap: 40px;
}

.sf-datetime {
  display: flex;
  flex-direction: column;
}

.sf-date-line {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-60);
}

.sf-time-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-60);
  line-height: 16px;
  white-space: nowrap;
}
.sf-locale { display: inline-flex; align-items: center; gap: 1px; }
.sf-locale img { width: 16px; height: 16px; }

.sf-social-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.sf-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.sf-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-socials a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, background-color .2s ease;
}
/* Each glyph is exported at its OWN true size (20×20, behance 20×13,
   X 19.6×20, telegram 24×24 — the full-bleed one). Forcing a single
   24×24 on all of them stretches and distorts the set, so size only
   the ring and let every glyph sit at its natural size, centered. */
.sf-socials a img {
  display: block;
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
}
.sf-socials a:hover {
  border-color: var(--color-gray-80);
  background: var(--surface-white);
}

.sf-talk { width: 100%; }
.sf-talk .k-btn-label { flex: 1; text-align: left; }

/* ── Row 3: legal + back to top ────────────────────────────── */
.sf-legal {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  min-height: 56px;
}
.sf-legal-r {
  justify-content: space-between;
  gap: 16px;
  padding-right: 0;
}

.sf-legal-text {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-60);
}

.sf-top-btn {
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-80);
  transition: color .2s ease;
}
.sf-top-btn svg { width: 10px; height: 14px; display: block; }
.sf-top-btn:hover { color: var(--color-brand); }

/* ── Footer — tablet ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .sf-links { gap: 64px; }
  .sf-contact { min-height: 0; }
  .sf-wordmark img { height: 36px; }
}

/* ── Footer — mobile: every band stacks full-width ─────────── */
@media (max-width: 767px) {
  .sf-row {
    grid-template-columns: var(--page-gutter) minmax(0, 1fr) var(--page-gutter);
    border-top: 0;
  }
  .sf-row:last-child { border-bottom: 0; }

  .sf-cell-l,
  .sf-cell-r {
    grid-column: 2;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .sf-row:first-child .sf-cell-l { border-top: 1px solid var(--color-border); }

  .sf-cta { padding: 24px 16px; }
  .sf-cta-sub {
    font-size: var(--text-body-s);
    font-weight: 500;
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
  }

  .sf-next { min-height: 0; gap: 40px; padding: 24px 16px; }
  .sf-next-title { font-size: var(--text-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }

  .sf-links { gap: 40px; padding: 24px 16px; }
  .sf-menu { gap: 8px; margin-top: 16px; }
  .sf-menu a {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.025em;
  }
  .sf-wordmark { gap: 9px; }
  .sf-wordmark img { height: 28px; }

  .sf-contact { padding: 24px 16px; gap: 48px; justify-content: flex-start; }
  .sf-social-block { gap: 24px; }
  .sf-actions { gap: 8px; }

  .sf-legal { min-height: 64px; padding: 20px 16px; }
  .sf-legal-text { font-size: var(--text-chip); letter-spacing: var(--ls-chip); font-weight: 600; }
  .sf-top-btn { background: var(--surface-white); width: 32px; height: 32px; flex-shrink: 0; }
}

/* ── Scroll-to-top FAB (legacy pages) stays styled in style.css ── */