/* ARX FP HelloWork — front block (Figma job component) */

.arx-fphellowork-jobs {
  --arx-fphellowork-gap: 16px;
  --arx-fphellowork-card-w: 260px;
  --arx-fphellowork-radius: 20px;
  box-sizing: border-box;
  width: 100%;
  color: var(--arx-fphellowork-text-dark, #202427);
}

.arx-fphellowork-jobs *,
.arx-fphellowork-jobs *::before,
.arx-fphellowork-jobs *::after {
  box-sizing: border-box;
}

.arx-fphellowork-jobs-inner {
  display: grid;
  grid-template-columns: minmax(0, 357px) minmax(0, 1fr);
  align-items: start;
  margin: 0 auto;
  overflow: visible;
}

.arx-fphellowork-jobs--grid .arx-fphellowork-jobs-inner {
  gap: 16px;
}

.arx-fphellowork-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 357px;
  /* Align H2 / counter / CTA with the section above ("lame du haut") */
  margin-left: -20px;
}

.arx-fphellowork-title {
  margin: 0;
  color: var(--grey-grey18, #24292d);
  font-family: 'Cactus Black Italic',Helvetica,Arial,Lucida,sans-serif;
  font-size: 46px;
  font-style: italic;
  font-weight: 900;
  line-height: 56px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.arx-fphellowork-counter {
  margin: 0px 0 24px 0px;
  color: var(--grey-grey18, #24292d);
  font-family: Gotham, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 325;
  line-height: 26px;
}

.arx-fphellowork-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 6px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--primary-yellow, #ffd600);
  color: var(--grey-black, #000);
  font-family: 'Cactus Bold Italic', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.arx-fphellowork-cta:hover,
.arx-fphellowork-cta:focus-visible {
  filter: brightness(0.95);
  outline: none;
}

.arx-fphellowork-carousel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* + track padding-bottom 16px = 32px card → arrows */
  overflow: visible;
  /* Offset track top padding so card tops stay aligned with h2 */
  margin-top: -8px;
}

.arx-fphellowork-track {
  display: flex;
  align-items: stretch;
  gap: var(--arx-fphellowork-gap);
  overflow: hidden;
}

.arx-fphellowork-jobs--carousel .arx-fphellowork-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  align-items: stretch;
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Padding keeps hover ring + shadow inside the scrollport */
  padding: 8px 8px 16px;
  margin: 0;
  scroll-padding: 8px;
}

.arx-fphellowork-jobs--carousel .arx-fphellowork-track::-webkit-scrollbar {
  display: none;
}

.arx-fphellowork-jobs--grid .arx-fphellowork-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--arx-fphellowork-gap);
  overflow: visible;
  width: 100%;
  padding: 8px;
}

.arx-fphellowork-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  min-height: 260px;
  height: 100%;
  padding: 24px;
  gap: 16px;
  scroll-snap-align: start;
  border: 0;
  border-radius: var(--arx-fphellowork-radius);
  background: var(--grey-white, #fff);
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}

.arx-fphellowork-card:hover,
.arx-fphellowork-card:focus-within {
  border-radius: 20px;
  background: var(--grey-white, #fff);
  box-shadow:
    0 0 0 4px var(--primary-yellow, #ffd600),
    0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

.arx-fphellowork-jobs--grid .arx-fphellowork-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: auto;
  height: 100%;
}

.arx-fphellowork-jobs--carousel .arx-fphellowork-card {
  width: auto;
  min-width: 0;
  max-width: none;
}

.arx-fphellowork-card-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  height: 100%;
  gap: 16px;
  padding: 0;
}

.arx-fphellowork-card-title {
  margin: 0;
  color: var(--grey-black, #000);
  font-family: 'Gotham Bold', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 350;
  line-height: 26px;
}

.arx-fphellowork-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.arx-fphellowork-card-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--grey-grey30, #3c454d);
  font-family: Gotham, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 325;
  line-height: 18px;
}

.arx-fphellowork-card-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.arx-fphellowork-card-meta-item--location .arx-fphellowork-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0C11.2187 0 14 2.51042 14 6.03349C14 7.10927 13.5385 8.40916 12.7085 9.90826C12.279 10.684 11.7581 11.4978 11.1655 12.3355C10.5598 13.1915 9.91205 14.027 9.26426 14.8091L9.00017 15.1249L8.75352 15.4141L8.39573 15.8218C8.18064 16.0594 7.81939 16.0594 7.60428 15.8219L7.36265 15.5483L7.12548 15.273L6.86985 14.9704C6.82582 14.9177 6.7811 14.864 6.73575 14.8092C6.08796 14.0272 5.44016 13.1917 4.83452 12.3357C4.24167 11.4978 3.72061 10.6836 3.29099 9.90758C2.46129 8.40887 2 7.1092 2 6.03349C2 2.51042 4.78126 0 8 0ZM8 4C9.19311 4 10.16 5.00754 10.16 6.25C10.16 7.49246 9.19311 8.5 8 8.5C6.80689 8.5 5.84 7.49246 5.84 6.25C5.84 5.00754 6.80689 4 8 4Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0C11.2187 0 14 2.51042 14 6.03349C14 7.10927 13.5385 8.40916 12.7085 9.90826C12.279 10.684 11.7581 11.4978 11.1655 12.3355C10.5598 13.1915 9.91205 14.027 9.26426 14.8091L9.00017 15.1249L8.75352 15.4141L8.39573 15.8218C8.18064 16.0594 7.81939 16.0594 7.60428 15.8219L7.36265 15.5483L7.12548 15.273L6.86985 14.9704C6.82582 14.9177 6.7811 14.864 6.73575 14.8092C6.08796 14.0272 5.44016 13.1917 4.83452 12.3357C4.24167 11.4978 3.72061 10.6836 3.29099 9.90758C2.46129 8.40887 2 7.1092 2 6.03349C2 2.51042 4.78126 0 8 0ZM8 4C9.19311 4 10.16 5.00754 10.16 6.25C10.16 7.49246 9.19311 8.5 8 8.5C6.80689 8.5 5.84 7.49246 5.84 6.25C5.84 5.00754 6.80689 4 8 4Z' fill='%23000'/%3E%3C/svg%3E");
}

.arx-fphellowork-card-meta-item--contract .arx-fphellowork-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3333 14.667H2.66724C2.66724 14.667 2.66724 3.80437 2.66724 1.33302C3.7039 1.33299 13.2836 1.33302 13.3333 1.33302V14.667ZM4.50024 9.50002H6.50024V8.50002H4.50024V9.50002ZM4.50024 7.00002H8.50024V6.00002H4.50024V7.00002ZM4.50024 3.50002V4.50002H9.83325V3.50002H4.50024Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3333 14.667H2.66724C2.66724 14.667 2.66724 3.80437 2.66724 1.33302C3.7039 1.33299 13.2836 1.33302 13.3333 1.33302V14.667ZM4.50024 9.50002H6.50024V8.50002H4.50024V9.50002ZM4.50024 7.00002H8.50024V6.00002H4.50024V7.00002ZM4.50024 3.50002V4.50002H9.83325V3.50002H4.50024Z' fill='%23000'/%3E%3C/svg%3E");
}

.arx-fphellowork-card-meta-item--salary .arx-fphellowork-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 10.499C14 13.2591 11.4999 14.4992 7.99974 14.4992C4.49961 14.4992 1.99951 13.2591 1.99951 10.519C1.99951 7.89602 3.14617 6.40429 5.43946 5.05483C6.95244 6.19585 9.05333 6.19461 10.565 5.05111C12.855 6.38646 14 7.87792 14 10.499ZM9.61823 4.29363L10.7974 2.45089C10.8484 2.35305 10.8737 2.24386 10.8707 2.13359C10.8678 2.02332 10.8369 1.9156 10.7809 1.82057C10.7249 1.72555 10.6456 1.64634 10.5505 1.59041C10.4555 1.53447 10.3477 1.50365 10.2374 1.50085H5.99729C5.87966 1.49861 5.76364 1.52834 5.66158 1.58686C5.55952 1.64539 5.47526 1.73051 5.41778 1.83315C5.3603 1.9358 5.33175 2.05212 5.33519 2.16971C5.33861 2.28731 5.37389 2.40177 5.43726 2.50089L6.40942 4.31065C7.39483 4.90086 8.63777 4.89518 9.61823 4.29363Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 10.499C14 13.2591 11.4999 14.4992 7.99974 14.4992C4.49961 14.4992 1.99951 13.2591 1.99951 10.519C1.99951 7.89602 3.14617 6.40429 5.43946 5.05483C6.95244 6.19585 9.05333 6.19461 10.565 5.05111C12.855 6.38646 14 7.87792 14 10.499ZM9.61823 4.29363L10.7974 2.45089C10.8484 2.35305 10.8737 2.24386 10.8707 2.13359C10.8678 2.02332 10.8369 1.9156 10.7809 1.82057C10.7249 1.72555 10.6456 1.64634 10.5505 1.59041C10.4555 1.53447 10.3477 1.50365 10.2374 1.50085H5.99729C5.87966 1.49861 5.76364 1.52834 5.66158 1.58686C5.55952 1.64539 5.47526 1.73051 5.41778 1.83315C5.3603 1.9358 5.33175 2.05212 5.33519 2.16971C5.33861 2.28731 5.37389 2.40177 5.43726 2.50089L6.40942 4.31065C7.39483 4.90086 8.63777 4.89518 9.61823 4.29363Z' fill='%23000'/%3E%3C/svg%3E");
}

.arx-fphellowork-card-meta-item--date .arx-fphellowork-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2a6.8 6.8 0 1 0 0 13.6A6.8 6.8 0 0 0 8 1.2zm.7 3.3v.6c.9.2 1.5.7 1.5 1.6 0 .9-.7 1.4-1.8 1.6l-.3.1v2.1c.4-.1.7-.3.9-.6l.9.6c-.4.6-1 .9-1.8 1v.7H7.3v-.7c-.9-.2-1.6-.7-1.6-1.7 0-1 .7-1.5 1.8-1.7l.3-.1V6.8c-.3.1-.6.3-.8.6l-.9-.5c.4-.6 1-.9 1.7-1v-.7h1.4zm-1.4 5.5c-.4.1-.6.3-.6.6s.3.5.8.6v-1.2zm1.4-3.8c.4-.1.6-.3.6-.6s-.2-.5-.7-.6v1.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2a6.8 6.8 0 1 0 0 13.6A6.8 6.8 0 0 0 8 1.2zm.7 3.3v.6c.9.2 1.5.7 1.5 1.6 0 .9-.7 1.4-1.8 1.6l-.3.1v2.1c.4-.1.7-.3.9-.6l.9.6c-.4.6-1 .9-1.8 1v.7H7.3v-.7c-.9-.2-1.6-.7-1.6-1.7 0-1 .7-1.5 1.8-1.7l.3-.1V6.8c-.3.1-.6.3-.8.6l-.9-.5c.4-.6 1-.9 1.7-1v-.7h1.4zm-1.4 5.5c-.4.1-.6.3-.6.6s.3.5.8.6v-1.2zm1.4-3.8c.4-.1.6-.3.6-.6s-.2-.5-.7-.6v1.2z'/%3E%3C/svg%3E");
}

.arx-fphellowork-card-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--grey-black, #000);
  border-radius: 50px;
  background: transparent;
  color: var(--grey-black, #000);
  font-family: 'Gotham Bold', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height:22px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
}

.arx-fphellowork-card-cta:hover,
.arx-fphellowork-card-cta:focus-visible {
  background: var(--grey-black, #000);
  color: var(--grey-white, #fff);
  outline: none;
}

.arx-fphellowork-nav {
  display: flex;
  gap: 24px;
  padding-left: 8px;
}

.arx-fphellowork-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe141 0%, #f4cd00 100%);
  color: #24292d;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

.arx-fphellowork-nav-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.arx-fphellowork-nav-btn--prev .arx-fphellowork-nav-icon {
  transform: scaleX(-1);
}

.arx-fphellowork-nav-btn:hover:not(:disabled),
.arx-fphellowork-nav-btn:focus-visible:not(:disabled) {
  filter: brightness(0.97);
  outline: none;
}

.arx-fphellowork-nav-btn:disabled {
  background: #d3d7d9;
  color: #24292d;
  cursor: default;
  opacity: 1;
  filter: none;
}

.arx-fphellowork-empty {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  color: var(--arx-fphellowork-muted, #6d757c);
}

@media (max-width: 980px) {
  .arx-fphellowork-jobs-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 0 48px 16px;
  }

  .arx-fphellowork-intro {
    max-width: none;
    align-items: center;
    text-align: center;
    margin-left: 0;
  }

  .arx-fphellowork-intro-text {
    width: 100%;
  }

  .arx-fphellowork-nav {
    justify-content: center;
    padding-left: 0;
  }

  .arx-fphellowork-jobs--grid .arx-fphellowork-jobs-inner {
    gap: 16px;
    padding-left: 0;
    padding-right: 0;
  }

  .arx-fphellowork-jobs--grid .arx-fphellowork-intro {
    padding-left: 16px;
    padding-right: 16px;
  }

  .arx-fphellowork-jobs--grid .arx-fphellowork-track {
    grid-template-columns: 1fr;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .arx-fphellowork-jobs--grid .arx-fphellowork-card {
    width: calc(100% - 32px);
    min-width: 0;
    max-width: none;
    margin-left: 16px;
    margin-right: 16px;
  }

  .arx-fphellowork-jobs--carousel .arx-fphellowork-track {
    padding-right: 24px;
  }
}