/**
 * Standalone Welcome Page, based on Figma node 690:6566.
 */

.jkptg-welcome-page-shell,
.jkptg-welcome-page-shell__main,
.jkptg-welcome-page-shell .region-content,
.jkptg-welcome-page-shell .block-system-main-block,
.jkptg-welcome-page-shell .node,
.jkptg-welcome-page-shell .node__content,
.jkptg-welcome-page-shell .layout,
.jkptg-welcome-page-shell .layout__region {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.jkptg-welcome-page-shell,
.jkptg-welcome-page-shell__main {
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
}

.jkptg-welcome-page-shell {
  position: relative;
}

/* Keep the full Welcome Page visible below Drupal's administrative toolbar. */
:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome-page-shell,
:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome-page-shell__main {
  height: calc(100dvh - var(--drupal-displace-offset-top, 79px));
  overflow: hidden;
}

.jkptg-welcome-page-shell .block-page-title-block,
.jkptg-welcome-page-shell .block-local-tasks-block,
.jkptg-welcome-page-shell .block-local-actions-block {
  display: none;
}

:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome
  .contextual {
  z-index: 101;
}

.jkptg-welcome__edit-block {
  display: none;
}

:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome__edit-block {
  position: absolute;
  z-index: 102;
  top: 12px;
  left: max(12px, var(--jkptg-layout-page-gutter, 24px));
  display: inline-flex;
  min-height: 38px;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  color: var(--jkptg-text-inverse, #fcfcfc);
  background: var(--jkptg-surface-action-press, #026ca3);
  border: 1px solid var(--jkptg-text-inverse, #fcfcfc);
  border-radius: var(--jkptg-radius-md, 6px);
  box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
  font-size: var(--jkptg-font-size-sm, 14px);
  font-weight: var(--jkptg-font-weight-semibold, 600);
  line-height: 20px;
  text-decoration: none;
}

:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome__edit-block:hover,
:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome__edit-block:focus-visible {
  color: var(--jkptg-text-inverse, #fcfcfc);
  background: var(--jkptg-surface-action-hover, #1985bc);
}

:is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
  .jkptg-welcome__edit-block:focus-visible {
  outline: 3px solid var(--jkptg-text-inverse, #fcfcfc);
  outline-offset: 2px;
}

.jkptg-welcome {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  color: var(--jkptg-text-inverse, #fcfcfc);
  background: linear-gradient(
    270deg,
    var(--jkptg-surface-gradient-end, #2d9bd3),
    var(--jkptg-surface-gradient-start, #00a99d)
  );
  font-family: var(--jkptg-font-family-title, "Inter", sans-serif);
}

.jkptg-welcome__background,
.jkptg-welcome__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jkptg-welcome__background {
  z-index: 0;
}

.jkptg-welcome__visual {
  z-index: 1;
  overflow: hidden;
}

.jkptg-welcome__background .field,
.jkptg-welcome__background .field__item {
  width: 100%;
  height: 100%;
}

.jkptg-welcome__background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.jkptg-welcome__visual-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 160dvh);
  height: max(100%, 62.5vw);
  transform: translate(-50%, -50%);
}

/* Keep the artwork's 1440:900 composition at wide aspect ratios. */
@media (min-width: 1440px) and (min-aspect-ratio: 8 / 5) {
  .jkptg-welcome__visual-canvas {
    width: min(100%, 160dvh);
    height: min(100%, 62.5vw);
  }
}

.jkptg-welcome__visual-image {
  position: absolute;
  overflow: hidden;
}

.jkptg-welcome__visual-image .field,
.jkptg-welcome__visual-image .field__item {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.jkptg-welcome__visual-image img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: fill;
}

.jkptg-welcome__visual-image--cloud-left {
  top: 24.7778%;
  left: 38.1944%;
  width: 35.5556%;
  height: 32.1111%;
}

.jkptg-welcome__visual-image--cloud-left img {
  top: -23.06%;
  left: -7.46%;
  width: 219.3%;
  height: 258.33%;
}

.jkptg-welcome__visual-image--building {
  position: absolute;
  top: 50%;
  right: max(-103px, calc((100% - 100vw) / 2));
  width: min(820px, calc(100% + 124px));
  height: auto;
  aspect-ratio: 820 / 522;
  transform: translateY(-50%);
}

.jkptg-welcome__visual-image--building img {
  /* Node 1777:3803 is already cropped to this 870:632 design slot. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.jkptg-welcome__inner {
  display: flex;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(calc(100% - 48px), 1240px);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  padding-block: 50px;
  flex-direction: column;
  justify-content: space-evenly;
}

.jkptg-welcome__top {
  display: flex;
  position: relative;
  z-index: 2;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
}

.jkptg-welcome__brand {
  display: flex;
  width: 185px;
  flex: 0 0 185px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jkptg-welcome__brand-logo,
.jkptg-welcome__brand-logo .field,
.jkptg-welcome__brand-logo .field__item {
  width: 125px;
  height: 99px;
}

.jkptg-welcome__brand-logo img {
  display: block;
  width: 125px;
  height: 99px;
  object-fit: contain;
}

.jkptg-welcome__brand-title,
.jkptg-welcome__brand-department {
  margin: 0;
  color: var(--jkptg-text-inverse, #fcfcfc);
  font-size: var(--jkptg-font-size-xxs, 10px);
  font-weight: var(--jkptg-font-weight-bold, 700);
  line-height: 14.4px;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
}

.jkptg-welcome__brand-title {
  width: 150px;
}

.jkptg-welcome__brand-department {
  width: 185px;
}

.jkptg-welcome__utilities {
  display: flex;
  width: 700.2px;
  flex: 0 0 700.2px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-height: 28px;
  min-width: 0;
}

/*
 * The toolbar shortens the design canvas in administrative previews. Lift
 * only the utility group so it stays clear of the building artwork.
 */
.jkptg-welcome__socials {
  width: 130px;
  flex: 0 0 130px;
}

.jkptg-welcome__socials .field--name-field-welcome-socials.field__items {
  display: flex;
  width: 130px;
  height: 28px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

.jkptg-welcome-social,
.jkptg-welcome-social .field,
.jkptg-welcome-social .field__item,
.jkptg-welcome-social img {
  display: block;
  width: 28px;
  height: 28px;
}

.jkptg-welcome-social {
  overflow: hidden;
  background: var(--jkptg-surface-secondary, #f3f5f8);
  border-radius: 50%;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.jkptg-welcome-social:hover,
.jkptg-welcome-social:focus-visible {
  box-shadow: 0 3px 8px rgb(0 0 0 / 24%);
  transform: translateY(-2px);
}

.jkptg-welcome-social:focus-visible,
.jkptg-welcome-card:focus-visible {
  outline: 3px solid var(--jkptg-text-inverse, #fcfcfc);
  outline-offset: 3px;
}

.jkptg-welcome__languages .jkptg-language-switcher,
.jkptg-welcome__languages .links {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jkptg-welcome__languages {
  width: 190px;
  flex: 0 0 190px;
}

.jkptg-welcome__languages .links li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.jkptg-welcome__languages .jkptg-language-switcher__separator {
  background-color: rgb(255 255 255 / 20%);
}

.jkptg-welcome__languages .jkptg-language-switcher__separator img {
  display: none;
}

.jkptg-welcome__languages a {
  color: var(--jkptg-text-inverse, #fcfcfc);
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
}

.jkptg-welcome__languages ul.links a.is-active,
.jkptg-welcome__languages ul.links a[aria-current="page"] {
  color: var(--jkptg-text-inverse, #fcfcfc);
  font-weight: 600;
}

.jkptg-welcome__languages a:hover,
.jkptg-welcome__languages a:focus-visible {
  color: var(--jkptg-text-inverse, #fcfcfc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jkptg-welcome__content {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  min-width: 0;
}

.jkptg-welcome__content-container {
  display: grid;
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  min-width: 0;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center;
}

.jkptg-welcome__content-container-left {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.jkptg-welcome__content-container-right {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 184px;
  overflow: visible;
  pointer-events: none;
}

:where(.jkptg-welcome__content-container-left) .jkptg-welcome__title {
  width: min(743px, 58vw);
  max-width: none;
  overflow-wrap: anywhere;
}

.jkptg-welcome__intro {
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}

.jkptg-welcome__intro-title,
.jkptg-welcome__intro-subtitle,
.jkptg-welcome__title,
.jkptg-welcome__ministry {
  margin: 0;
  color: inherit;
}

.jkptg-welcome__intro,
.jkptg-welcome__title,
.jkptg-welcome__ministry {
  margin-inline-start: 0px;
}

.jkptg-welcome__intro-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 38.4px;
  text-transform: uppercase;
}

.jkptg-welcome__intro-subtitle {
  margin-top: 10px;
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 600;
  line-height: 19.2px;
}

.jkptg-welcome__title {
  max-width: 743px;
  font-size: var(--jkptg-font-size-2xl, 32px);
  font-weight: 900;
  line-height: 38.4px;
  text-shadow: 0 4px 4px rgb(0 0 0 / 50%);
  text-transform: uppercase;
  white-space: pre-line;
}

.jkptg-welcome__ministry {
  margin-top: 2px;
  font-size: var(--jkptg-font-size-lg, 18px);
  font-weight: 900;
  line-height: 24px;
  text-shadow: 0 4px 4px rgb(0 0 0 / 50%);
  text-transform: uppercase;
}

.jkptg-welcome__carousel {
  --jkptg-welcome-fixed-card-width: 214px;
  --jkptg-welcome-card-inset: 35px;
  position: relative;
  width: min(1180px, 100%);
  min-height: 150px;
  margin-top: 0px;
}

.jkptg-welcome__cards {
  width: calc(100% - 60px);
  height: auto;
  margin-inline: var(--jkptg-welcome-card-inset);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.jkptg-welcome__cards.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.jkptg-welcome__cards.is-dragging a {
  pointer-events: none;
}

.jkptg-welcome__carousel.is-static .jkptg-welcome__cards {
  cursor: default;
}

.jkptg-welcome__cards > .field--name-field-welcome-cards.field__items {
  display: grid;
  grid-template-columns: var(--jkptg-welcome-fixed-card-width) minmax(0, 1fr);
  gap: 44px;
  width: 100%;
  min-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.jkptg-welcome__cards
  > .field--name-field-welcome-cards.field__items
  > .field__item,
.jkptg-welcome__cards-moving-track > .field__item {
  display: flex;
  width: 214px;
  flex: 0 0 214px;
}

.jkptg-welcome__card--fixed {
  position: relative;
  z-index: 2;
  cursor: default;
}

.jkptg-welcome__cards-moving-viewport {
  min-width: 0;
  overflow: hidden;
}

.jkptg-welcome__cards-moving-track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: 10px;
  will-change: transform;
}

.jkptg-welcome__control {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  color: var(--jkptg-text-inverse, #fcfcfc);
  background: var(--jkptg-surface-control, #535353);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.jkptg-welcome__control--previous {
  left: calc(var(--jkptg-welcome-card-inset) + var(--jkptg-welcome-fixed-card-width) + 12px);
}
.jkptg-welcome__control--next {
  right: 0;
}

.jkptg-welcome__control img {
  display: block;
  width: 7px;
  height: 12px;
}

.jkptg-welcome__control--previous img {
  transform: scaleX(-1);
}

.jkptg-welcome__control:hover,
.jkptg-welcome__control:focus-visible {
  background: var(--jkptg-text-primary, #00122a);
}

.jkptg-welcome__control:focus-visible {
  outline: 2px solid var(--jkptg-text-inverse, #fcfcfc);
  outline-offset: 3px;
}

.jkptg-welcome-card {
  display: grid;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 214px;
  min-width: 214px;
  min-height: 150px;
  padding: 20px 24px 16px;
  overflow: hidden;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 68px minmax(0, auto);
  align-items: center;
  gap: 0;
  color: var(--jkptg-text-secondary, #3d3d3d);
  background:
    linear-gradient(
      var(--jkptg-surface-overlay-on-dark-60),
      var(--jkptg-surface-overlay-on-dark-60)
    ),
    linear-gradient(
      var(--jkptg-surface-overlay-on-dark-15),
      var(--jkptg-surface-overlay-on-dark-15)
    );
  border: 1px solid var(--jkptg-border-action-default, #2d9bd3);
  border-radius: var(--jkptg-radius-xl, 12px);
  text-decoration: none;
  transition:
    border-color 220ms ease,
    border-width 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
}

.jkptg-welcome-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background-color: var(--jkptg-surface-overlay-brand);
  background-image: linear-gradient(
    270deg,
    color-mix(
      in srgb,
      var(--jkptg-surface-gradient-start, #00a99d) 60%,
      transparent
    ),
    color-mix(
      in srgb,
      var(--jkptg-surface-gradient-end, #2d9bd3) 60%,
      transparent
    )
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.jkptg-welcome-card > * {
  position: relative;
  z-index: 1;
}

.jkptg-welcome-card:hover,
.jkptg-welcome-card:focus-visible {
  color: var(--jkptg-text-primary, #00122a);
  border: 2px solid var(--jkptg-border-action-hover, #1985bc);
  box-shadow: 0 2px 8px var(--jkptg-color-alpha-black-20, #00000033);
}

.jkptg-welcome-card:hover::before,
.jkptg-welcome-card:focus-visible::before {
  opacity: 1;
}

.jkptg-welcome-card__icon,
.jkptg-welcome-card__icon .field,
.jkptg-welcome-card__icon .field__item {
  display: flex;
  width: 94px;
  height: 68px;
  align-items: center;
  justify-content: center;
}

.jkptg-welcome-card__icon {
  justify-self: center;
}

.jkptg-welcome-card__icon img {
  display: block;
  width: auto;
  max-width: 74px;
  height: auto;
  max-height: 60px;
  background-color: transparent;
  object-fit: contain;
}

.jkptg-welcome-card--portal .jkptg-welcome-card__icon img {
  
}

.jkptg-welcome-card__title {
  display: block;
  width: 100%;
  min-width: 0;
  align-self: center;
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

@media (max-width: 1199.98px) {
  .jkptg-welcome__inner {
    min-height: 0;
    padding-block: clamp(32px, 8dvh, 72px);
  }

  .jkptg-welcome__utilities {
    width: auto;
    flex: 1 1 auto;
  }

  .jkptg-welcome__content-container {
    grid-template-columns: minmax(0, 48fr) minmax(280px, 52fr);
  }

  .jkptg-welcome__visual-image--building {
    width: min(700px, calc(100% + 96px));
  }

  .jkptg-welcome__cards
    > .field--name-field-welcome-cards.field__items
    > .field__item,
  .jkptg-welcome__cards-moving-track > .field__item {
    width: 214px;
    flex-basis: 214px;
  }

  .jkptg-welcome-card {
    width: 214px;
    min-width: 214px;
  }

  .jkptg-welcome-card__title {
    font-size: 16px;
    line-height: 19px;
  }
}

@media (max-width: 767.98px) {
  .jkptg-welcome__content-container,
  .jkptg-welcome__content-container-left {
    display: contents;
  }

  .jkptg-welcome__content-container-right {
    display: none;
  }

  .jkptg-welcome__intro,
  .jkptg-welcome__title,
  .jkptg-welcome__ministry {
    margin-inline-start: 28px;
  }

  .jkptg-welcome__background img {
    object-position: 62% center;
  }

  .jkptg-welcome__inner {
    width: min(calc(100% - 32px), 1200px);
    min-height: 0;
    padding-block: clamp(14px, 3.5dvh, 28px);
    justify-content: space-between;
    gap: clamp(12px, 3dvh, 24px);
  }

  .jkptg-welcome__top {
    align-items: flex-start;
    gap: clamp(12px, 3vw, 24px);
  }

  .jkptg-welcome__brand {
    width: clamp(100px, 25vw, 150px);
    flex: 0 0 clamp(100px, 25vw, 150px);
  }

  .jkptg-welcome__brand-logo,
  .jkptg-welcome__brand-logo .field,
  .jkptg-welcome__brand-logo .field__item,
  .jkptg-welcome__brand-logo img {
    width: clamp(68px, 14vw, 88px);
    height: clamp(54px, 11.2vw, 70px);
  }

  .jkptg-welcome__brand-title {
    font-size: 8px;
    line-height: 11px;
  }

  .jkptg-welcome__brand-department {
    width: 100%;
    font-size: 8px;
    line-height: 11px;
  }

  .jkptg-welcome__utilities {
    width: auto;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 2vw, 16px);
  }

  :is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
    .jkptg-welcome__utilities {
    transform: translateY(-8px);
  }

  .jkptg-welcome__socials,
  .jkptg-welcome__socials .field--name-field-welcome-socials.field__items {
    width: auto;
    flex: 0 0 auto;
  }

  .jkptg-welcome__languages {
    width: auto;
    flex: 0 0 auto;
  }

  .jkptg-welcome__languages a {
    font-size: clamp(12px, 2.4vw, 15px);
  }

  .jkptg-welcome__intro-title,
  .jkptg-welcome__title {
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.1;
  }

  .jkptg-welcome__intro-subtitle,
  .jkptg-welcome__ministry {
    margin-top: 6px;
    font-size: clamp(13px, 2.8vw, 16px);
    line-height: 1.25;
  }

  .jkptg-welcome__carousel {
    height: clamp(108px, 18dvh, 130px);
    margin-top: 18px;
  }

  .jkptg-welcome__cards {
    width: calc(100% - 56px);
    margin-inline: 28px;
  }

  .jkptg-welcome__control--previous {
    left: calc(28px + var(--jkptg-welcome-fixed-card-width) + 12px);
  }

  .jkptg-welcome__cards > .field--name-field-welcome-cards.field__items {
    gap: 10px;
  }

  .jkptg-welcome__cards
    > .field--name-field-welcome-cards.field__items
    > .field__item,
  .jkptg-welcome__cards-moving-track > .field__item {
    width: clamp(145px, 42vw, 180px);
    flex-basis: clamp(145px, 42vw, 180px);
  }

  .jkptg-welcome-card {
    width: 100%;
    min-width: 0;
    height: clamp(108px, 18dvh, 130px);
    padding: 12px 14px;
    gap: 8px;
  }

  .jkptg-welcome-card__icon,
  .jkptg-welcome-card__icon .field,
  .jkptg-welcome-card__icon .field__item {
    width: 64px;
    height: 50px;
  }

  .jkptg-welcome-card__icon img {
    max-width: 64px;
    max-height: 50px;
  }

  .jkptg-welcome-card__title {
    min-height: 18px;
    font-size: 14px;
    line-height: 17px;
  }
}

@media (max-width: 479.98px) {
  .jkptg-welcome__cards
    > .field--name-field-welcome-cards.field__items
    > .field__item,
  .jkptg-welcome__cards-moving-track > .field__item {
    width: 180px;
    flex-basis: 180px;
  }

  .jkptg-welcome__top {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .jkptg-welcome__brand {
    width: clamp(76px, 24vw, 92px);
    flex-basis: clamp(76px, 24vw, 92px);
    align-items: center;
  }

  .jkptg-welcome__brand-logo,
  .jkptg-welcome__brand-logo .field,
  .jkptg-welcome__brand-logo .field__item,
  .jkptg-welcome__brand-logo img {
    width: 64px;
    height: 51px;
  }

  .jkptg-welcome__brand-title,
  .jkptg-welcome__brand-department {
    width: 100%;
    font-size: 6px;
    line-height: 8px;
    text-align: center;
  }

  .jkptg-welcome__utilities {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(6px, 2vw, 10px);
  }

  .jkptg-welcome__socials,
  .jkptg-welcome__socials .field--name-field-welcome-socials.field__items {
    width: auto;
    flex-basis: auto;
    gap: 4px;
  }

  .jkptg-welcome-social,
  .jkptg-welcome-social .field,
  .jkptg-welcome-social .field__item,
  .jkptg-welcome-social img {
    width: 20px;
    height: 20px;
  }

  .jkptg-welcome__languages {
    width: auto;
    flex: 0 1 auto;
  }

  .jkptg-welcome__languages .jkptg-language-switcher,
  .jkptg-welcome__languages .links {
    gap: 5px;
  }

  .jkptg-welcome__languages a {
    font-size: clamp(9px, 2.8vw, 11px);
  }

  .jkptg-welcome__languages .jkptg-language-switcher,
  .jkptg-welcome__languages .links,
  .jkptg-welcome__languages .links li {
    gap: 4px;
  }

  .jkptg-welcome__intro-title,
  .jkptg-welcome__title {
    font-size: clamp(21px, 7vw, 28px);
  }

  .jkptg-welcome__intro-subtitle,
  .jkptg-welcome__ministry {
    font-size: clamp(11px, 3.4vw, 14px);
  }

  .jkptg-welcome__cards
    > .field--name-field-welcome-cards.field__items
    > .field__item,
  .jkptg-welcome__cards-moving-track > .field__item {
    width: 180px;
    flex-basis: 180px;
  }
}

@media (max-width: 399.98px) {
  .jkptg-welcome__utilities {
    gap: 8px;
  }

  .jkptg-welcome__languages a {
    font-size: 9px;
  }

  .jkptg-welcome-social,
  .jkptg-welcome-social .field,
  .jkptg-welcome-social .field__item,
  .jkptg-welcome-social img {
    width: 18px;
    height: 18px;
  }
}

@media (max-height: 799.98px) and (min-width: 768px) {
  .jkptg-welcome__inner {
    padding-block: clamp(24px, 6dvh, 48px);
  }

  .jkptg-welcome__brand {
    width: 220px;
    flex-basis: 220px;
  }

  .jkptg-welcome__brand-logo,
  .jkptg-welcome__brand-logo .field,
  .jkptg-welcome__brand-logo .field__item,
  .jkptg-welcome__brand-logo img {
    width: 90px;
    height: 71px;
  }

  .jkptg-welcome__brand-title,
  .jkptg-welcome__brand-department {
    font-size: 8px;
    line-height: 11px;
  }

  .jkptg-welcome__visual-image--building {
    width: min(620px, calc(100% + 72px));
  }

  .jkptg-welcome__intro {
    margin-bottom: 6px;
  }

  .jkptg-welcome__intro-title,
  .jkptg-welcome__title {
    font-size: 32px;
    line-height: 38px;
  }

  .jkptg-welcome__intro-subtitle,
  .jkptg-welcome__ministry {
    margin-top: 6px;
    font-size: 16px;
    line-height: 20px;
  }

  .jkptg-welcome__carousel {
    margin-top: 18px;
    height: 150px;
  }

  .jkptg-welcome-card {
    height: 150px;
    padding: 10px 14px;
    grid-template-rows: 56px minmax(0, 1fr);
    gap: 2px;
  }

  .jkptg-welcome-card__icon,
  .jkptg-welcome-card__icon .field,
  .jkptg-welcome-card__icon .field__item {
    width: 72px;
    height: 56px;
  }

  .jkptg-welcome-card__icon img {
    max-width: 72px;
    max-height: 56px;
  }

  .jkptg-welcome-card__title {
    font-size: 16px;
    line-height: 19px;
  }
}

@media (max-height: 599.98px) {
  .jkptg-welcome__inner {
    padding-block: 12px;
    gap: 8px;
  }

  .jkptg-welcome__brand-logo,
  .jkptg-welcome__brand-logo .field,
  .jkptg-welcome__brand-logo .field__item,
  .jkptg-welcome__brand-logo img {
    width: 52px;
    height: 41px;
  }

  .jkptg-welcome__brand-title,
  .jkptg-welcome__brand-department {
    font-size: 6px;
    line-height: 8px;
  }

  .jkptg-welcome__intro {
    margin-bottom: 4px;
  }

  .jkptg-welcome__intro-title,
  .jkptg-welcome__title {
    font-size: clamp(19px, 4.5dvh, 26px);
    line-height: 1.05;
  }

  .jkptg-welcome__intro-subtitle,
  .jkptg-welcome__ministry {
    margin-top: 4px;
    font-size: clamp(10px, 2.5dvh, 14px);
    line-height: 1.15;
  }

  .jkptg-welcome__carousel {
    margin-top: 10px;
    height: 118px;
    min-height: 118px;
  }

  .jkptg-welcome-card {
    height: 118px;
    min-height: 118px;
    padding: 8px 12px;
    grid-template-rows: 38px minmax(0, 1fr);
    gap: 2px;
  }

  .jkptg-welcome-card__icon,
  .jkptg-welcome-card__icon .field,
  .jkptg-welcome-card__icon .field__item {
    width: 46px;
    height: 38px;
  }

  .jkptg-welcome-card__icon img {
    max-width: 46px;
    max-height: 38px;
  }

  .jkptg-welcome-card__title {
    min-height: 15px;
    font-size: 12px;
    line-height: 14px;
  }
}

/* Present every shortcut at once on the mobile landing page. */
@media (max-width: 767.98px) {
  .jkptg-welcome-page-shell,
  .jkptg-welcome-page-shell__main,
  .jkptg-welcome-page-shell .region-content,
  .jkptg-welcome-page-shell .block-system-main-block,
  .jkptg-welcome-page-shell .node,
  .jkptg-welcome-page-shell .node__content,
  .jkptg-welcome-page-shell .layout,
  .jkptg-welcome-page-shell .layout__region,
  :is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
    .jkptg-welcome-page-shell,
  :is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
    .jkptg-welcome-page-shell__main {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .jkptg-welcome {
    height: auto;
    min-height: 100dvh;
    overflow: hidden;
  }

  .jkptg-welcome__background::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgb(0 83 87 / 68%),
      rgb(0 105 110 / 90%)
    );
    content: "";
  }

  .jkptg-welcome__visual {
    display: none;
  }

  .jkptg-welcome__inner {
    display: flex;
    width: min(calc(100% - 48px), 400px);
    height: auto;
    min-height: 100dvh;
    padding: 30px 0 36px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  .jkptg-welcome__top,
  .jkptg-welcome__content {
    display: contents;
  }

  .jkptg-welcome__brand {
    order: 1;
    width: 100%;
    flex: none;
  }

  .jkptg-welcome__brand-logo,
  .jkptg-welcome__brand-logo .field,
  .jkptg-welcome__brand-logo .field__item,
  .jkptg-welcome__brand-logo img {
    width: clamp(52px, 16vw, 68px);
    height: clamp(41px, 12.8vw, 54px);
  }

  .jkptg-welcome__brand-title,
  .jkptg-welcome__brand-department {
    display: block;
    width: 100%;
    font-size: clamp(8px, 2.2vw, 10px);
    line-height: 1.2;
  }

  .jkptg-welcome__brand-title {
    margin-top: 4px;
  }

  .jkptg-welcome__brand-department {
    margin-top: 2px;
  }

  .jkptg-welcome__intro {
    order: 2;
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
  }

  .jkptg-welcome__intro-title {
    font-size: clamp(16px, 4.5vw, 21px);
    line-height: 1.15;
  }

  .jkptg-welcome__intro-subtitle {
    margin-top: 2px;
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1.2;
  }

  .jkptg-welcome__title {
    order: 3;
    width: 100%;
    margin: 8px 0 0;
    font-size: clamp(14px, 4.2vw, 19px);
    line-height: 1.08;
    text-align: center;
    text-wrap: balance;
  }

  .jkptg-welcome__ministry {
    order: 4;
    width: 100%;
    margin: 4px 0 0;
    font-size: clamp(9px, 2.5vw, 12px);
    line-height: 1.2;
    text-align: center;
  }

  .jkptg-welcome__utilities,
  :is(.toolbar-fixed, .toolbar-horizontal, .toolbar-vertical)
    .jkptg-welcome__utilities {
    order: 5;
    width: auto;
    min-height: 0;
    margin-top: 12px;
    flex: none;
    justify-content: center;
    gap: 8px;
    transform: none;
  }

  .jkptg-welcome__socials .field--name-field-welcome-socials.field__items {
    height: auto;
  }

  .jkptg-welcome__carousel {
    order: 6;
    width: 100%;
    height: auto;
    margin-top: 16px;
  }

  .jkptg-welcome__cards {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
    cursor: default;
    touch-action: auto;
  }

  .jkptg-welcome__cards > .field--name-field-welcome-cards.field__items {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .jkptg-welcome__cards-moving-viewport,
  .jkptg-welcome__cards-moving-track {
    display: contents;
  }

  .jkptg-welcome__cards
    > .field--name-field-welcome-cards.field__items
    > .field__item,
  .jkptg-welcome__cards-moving-track > .field__item {
    width: auto;
    min-width: 0;
    flex: none;
  }

  .jkptg-welcome-card {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 156px;
    padding: 8px 6px;
    grid-template-rows: clamp(56px, 18vw, 76px) minmax(0, auto);
    gap: 2px;
    background: rgb(219 234 236 / 88%);
    box-shadow: 0 3px 7px rgb(0 0 0 / 20%);
  }

  .jkptg-welcome-card__icon,
  .jkptg-welcome-card__icon .field,
  .jkptg-welcome-card__icon .field__item {
    width: clamp(72px, 24vw, 96px);
    height: clamp(56px, 18vw, 76px);
  }

  .jkptg-welcome-card__icon img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .jkptg-welcome-card__title {
    font-size: clamp(10px, 2.6vw, 13px);
    line-height: 1.15;
    white-space: normal;
  }

  .jkptg-welcome__control {
    display: none;
  }
}

/* Keep the rightmost visible shortcut card fully inside the slider. */
@media (min-width: 768px) {
  .jkptg-welcome__cards-moving-viewport {
    container: welcome-moving-cards / inline-size;
  }

  .jkptg-welcome__cards-moving-track > .field__item {
    box-sizing: border-box;
    min-width: 0;
    width: calc((100cqw - 30px) / 4);
    flex-basis: calc((100cqw - 30px) / 4);
  }

  .jkptg-welcome__cards-moving-track .jkptg-welcome-card {
    width: 100%;
    min-width: 0;
  }
}

@container welcome-moving-cards (max-width: 669px) {
  .jkptg-welcome__cards-moving-track > .field__item {
    width: calc((100cqw - 20px) / 3);
    flex-basis: calc((100cqw - 20px) / 3);
  }
}

@container welcome-moving-cards (max-width: 499px) {
  .jkptg-welcome__cards-moving-track > .field__item {
    width: calc((100cqw - 10px) / 2);
    flex-basis: calc((100cqw - 10px) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jkptg-welcome-card,
  .jkptg-welcome-card::before,
  .jkptg-welcome-card__icon,
  .jkptg-welcome-social {
    transition: none;
  }
}