/* ==========================================================================
   JSG Portfolio - sections
   Mobile-first. Mobile ref: 390px (4:1753) - Desktop ref: 1512px (4:1760)
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */

.jsg-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--jsg-header-h);
  padding: 0;
  background: var(--jsg-bg-page);
}

.jsg-header__name {
  display: flex;
  align-items: center;
  height: var(--jsg-header-h);
  padding-inline-end: 24px;
  font-family: var(--jsg-font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  text-decoration: none;
  white-space: nowrap;
}

/* Hamburger - mobile only (4:1753 node 7:25) */
.jsg-header__menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  flex: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.jsg-header__menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--jsg-text);
}

.jsg-header__divider {
  display: none;
  width: 1px;
  height: 24px;
  background: var(--jsg-text-muted);
  flex: none;
}

.jsg-header__nav { display: none; }

.jsg-header__nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--jsg-header-h);
  padding-inline: 16px;
  font-family: var(--jsg-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.jsg-header__nav-link:hover { color: var(--jsg-text); }

.jsg-header__nav-link svg { width: 10px; height: 5.7px; fill: currentColor; }

/* Theme toggle - mirrors Carbon HeaderGlobalAction (48x48) */
.jsg-header__actions { margin-inline-start: auto; display: flex; }

.jsg-theme-toggle {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--jsg-text);
  padding: 0;
}

.jsg-theme-toggle:hover { background: var(--jsg-bg-band); }
.jsg-theme-toggle:focus-visible { outline: 2px solid var(--jsg-accent); outline-offset: -2px; }
.jsg-theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }

/* Only one of the two icons is shown, per current theme */
.jsg-theme-toggle .jsg-icon-filled { display: none; }
[data-theme="light"] .jsg-theme-toggle .jsg-icon-filled { display: block; }
[data-theme="light"] .jsg-theme-toggle .jsg-icon-outline { display: none; }

/* Mobile nav panel */
.jsg-header__nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-inline: 0;
  top: var(--jsg-header-h);
  z-index: 20;
  background: var(--jsg-bg-band);
  padding-block: 8px;
}

/* --- Hero ----------------------------------------------------------------- */
/* One DOM, two layouts. Grid areas reparent the avatar without duplicate markup:
   mobile  -> avatar sits beside the intro, CTA spans below
   desktop -> avatar spans both rows on the right, opposite the 612px column   */

.jsg-hero {
  background: var(--jsg-bg-band);
  padding: 54px 16px 24px;
  margin-block-end: var(--jsg-hero-gap);
}

.jsg-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "intro avatar"
    "cta   cta";
  column-gap: 10px;
  row-gap: 140px;
  align-items: start;
}

.jsg-hero__intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.jsg-hero__name {
  font-family: var(--jsg-font-ui);
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  margin: 0;
}

.jsg-hero__profession {
  font-family: var(--jsg-font-ui);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  margin: 0;
}

.jsg-hero__avatar {
  grid-area: avatar;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--jsg-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.jsg-hero__avatar img {
  /* Size by HEIGHT: the figure is portrait (137x228), so sizing by width
     overflows the circle. Figma fills 81% of the diameter (228 of 280). */
  height: 65px;
  width: auto;
  /* Figma composes rotate(180deg) with scaleY(-1) on this node, which resolves
     to a horizontal mirror - the brush points right. */
  transform: scaleX(-1);
}

/* Light mode ships its own figure (dark strokes), not a recolour of the dark one */
.jsg-hero__avatar .jsg-avatar-light { display: none; }
[data-theme="light"] .jsg-hero__avatar--dual .jsg-avatar-dark  { display: none; }
[data-theme="light"] .jsg-hero__avatar--dual .jsg-avatar-light { display: block; }

.jsg-hero__cta {
  grid-area: cta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.jsg-hero__availability {
  font-family: var(--jsg-font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: normal;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  margin: 0;
  /* The authored copy breaks this over two lines, as the Figma frame does,
     and the local preview has always rendered it that way (build.py runs it
     through nl()). On HubSpot the same newline was collapsing to a space.
     This makes the two agree, and makes the Administrator's textarea behave
     the way a textarea should. */
  white-space: pre-line;
}

/* --- Briefography --------------------------------------------------------- */

.jsg-brief { --jsg-title-gap: 11px; }

.jsg-brief__body p {
  font-family: var(--jsg-font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: normal;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  margin: 0 0 1em;
}

.jsg-brief__body p:last-child { margin-bottom: 0; }

/* --- Work ----------------------------------------------------------------- */

.jsg-work { --jsg-title-gap: 20px; }

.jsg-work__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.jsg-work__card {
  background: var(--jsg-bg-tile);
  filter: drop-shadow(var(--jsg-tile-shadow, none));
  padding: 12px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.jsg-work__thumb {
  position: relative;
  background: var(--jsg-thumb-bg);
  aspect-ratio: 308 / 184.8;
  overflow: hidden;
}

.jsg-work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Capabilities --------------------------------------------------------- */

.jsg-caps { --jsg-title-gap: 22px; }

.jsg-caps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.jsg-tile {
  background: var(--jsg-bg-tile);
  filter: drop-shadow(var(--jsg-tile-shadow, none));
  padding: 21px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 150px;
}

.jsg-tile__title {
  font-family: var(--jsg-font-ui);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  color: var(--jsg-text);
  margin: 0;
}

.jsg-tile__rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--jsg-rule);
  width: 100%;
  max-width: 279px;
  margin: 0;
}

.jsg-tile__bullets {
  column-count: 2;
  column-gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jsg-tile__bullets li {
  font-family: var(--jsg-font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--jsg-text);
  break-inside: avoid;
}

.jsg-tile__bullets li::before { content: "\2022\00a0"; }

/* --- Tools ---------------------------------------------------------------- */

.jsg-tools { --jsg-title-gap: 24px; }

.jsg-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  justify-content: start;
}

.jsg-tool {
  background: var(--jsg-bg-tile);
  filter: drop-shadow(var(--jsg-tile-shadow, none));
  height: 120px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.jsg-tool__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}

.jsg-tool__icon img { width: 100%; height: 100%; object-fit: contain; }

.jsg-tool__label {
  margin-top: auto;
  font-family: var(--jsg-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.05;
  color: var(--jsg-text);
  /* respect the authored line break; matches Figma, which lets long
     labels ("Adobe After Effects") overhang the 97px tile rather than reflow */
  white-space: pre;
}

/* --- Contact -------------------------------------------------------------- */

.jsg-contact { --jsg-title-gap: 24px; }

.jsg-contact__copy {
  font-family: var(--jsg-font-ui);
  font-weight: 300;
  font-size: 18px;
  line-height: normal;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  margin: 0 0 24px;
  max-width: 827px;
}

/* --- Footer --------------------------------------------------------------- */

.jsg-footer {
  background: var(--jsg-bg-band);
  min-height: 238px;
  /* collapses against the last band's 24px, resolving to the frame's 48px */
  margin-block-start: var(--jsg-footer-gap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px;
}

.jsg-footer p {
  font-family: var(--jsg-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--jsg-tracking);
  color: var(--jsg-text);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   Desktop - 1512px reference (4:1760 / 4:2033)
   ========================================================================== */

@media (min-width: 768px) {

  /* Background bleeds edge to edge; content holds the frame's 44px inset up to
     1512px, then centres on the same 1424px measure beyond it. */
  .jsg-header { padding-inline: max(44px, calc((100% - 1424px) / 2)); }
  .jsg-header__menu-btn { display: none; }
  .jsg-header__nav { display: flex; align-items: center; }
  .jsg-header__divider { display: block; }

  .jsg-hero {
    padding-block: 54px;
    padding-inline: max(40px, calc((100% - 1432px) / 2));
  }

  /* 612px copy column, 485px gutter, 280px avatar spanning both rows */
  .jsg-hero__inner {
    grid-template-columns: 612px 280px;
    grid-template-areas:
      "intro avatar"
      "cta   avatar";
    column-gap: 485px;
    row-gap: 140px;
    justify-content: start;
    align-items: center;
  }

  .jsg-hero__intro { gap: 24px; align-self: end; }

  .jsg-hero__name { font-size: 60px; line-height: 1.1; font-weight: 300; }

  .jsg-hero__avatar {
    width: 280px;
    height: 280px;
    padding: 37px 41px;
    align-self: center;
  }

  .jsg-hero__avatar img { height: 228px; width: auto; }

  .jsg-hero__cta { gap: 22px; align-self: start; }

  .jsg-work__row      { grid-template-columns: repeat(auto-fit, minmax(0, 332px)); }
  .jsg-caps__grid     { grid-template-columns: repeat(3, 1fr); }
  .jsg-tools__grid    { grid-template-columns: repeat(8, 97.143px); }

  /* Keep a gutter between the 1074px bands and the viewport at intermediate
     widths. Mobile bands stay full-bleed, matching frame 4:1753. */
  .jsg-band {
    padding-inline: 24px;
    width: min(100% - 48px, var(--jsg-container));
  }
}

/* Per-theme icon variants. The --dual class is set by the module only when a
   light-theme variant was supplied, so single-icon tools are unaffected. */
.jsg-tool__icon .jsg-icon-light { display: none; }
[data-theme="light"] .jsg-tool__icon--dual .jsg-icon-dark  { display: none; }
[data-theme="light"] .jsg-tool__icon--dual .jsg-icon-light { display: block; }