/**
 * LMIS — Home page sections.
 * The palette, primitives, header and footer live in gov/identity.css;
 * this file only styles the blocks that are unique to the home page.
 */

.hv2 {
  background: var(--hv2-bg);
  color: var(--hv2-text);
  overflow-x: clip;
}

.hv2 h1, .hv2 h2, .hv2 h3, .hv2 h4, .hv2 h5 {
  color: var(--hv2-text);
  line-height: 1.35;
  margin: 0;
}

.hv2 p { margin: 0; color: var(--hv2-muted); line-height: 1.9; }
.hv2 a { text-decoration: none; }
.hv2 ul { margin: 0; padding: 0; list-style: none; }
.hv2 img { max-width: 100%; }

/* ============================================================
   Hero
   ============================================================ */

.hv2 .hv2-hero {
  padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(1100px 480px at 85% -10%, #EDF4E7 0%, rgba(237, 244, 231, 0) 60%),
    var(--hv2-bg);
}

.hv2 .hv2-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}

.hv2 .hv2-hero-copy h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.3;
  margin-top: 1.1rem;
  color: var(--hv2-green-900);
}

.hv2 .hv2-hero-copy > p {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
  max-width: 34rem;
}

/* Search card */
.hv2 .hv2-search {
  margin-top: 2rem;
  background: var(--hv2-surface);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r-lg);
  box-shadow: var(--hv2-shadow);
  padding: 1.35rem;
}

.hv2 .hv2-search-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--hv2-text);
  margin-bottom: .85rem;
}

.hv2 .hv2-search-row {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  flex-wrap: wrap;
}

.hv2 .hv2-field {
  flex: 1 1 190px;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--hv2-bg-soft);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r-sm);
  padding-inline: .85rem;
  min-height: 48px;
  color: var(--hv2-muted);
}

.hv2 .hv2-field svg { flex: 0 0 auto; width: 17px; height: 17px; }

.hv2 .hv2-field input,
.hv2 .hv2-field select {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--hv2-text);
  padding-block: .6rem;
  min-width: 0;
}

.hv2 .hv2-field input::placeholder { color: #9AA79F; }

.hv2 .hv2-search .hv2-btn { flex: 0 0 auto; min-height: 48px; padding-inline: 1.6rem; }

.hv2 .hv2-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.hv2 .hv2-search-tags a { color: inherit; }
.hv2 .hv2-search-tags .hv2-tag:hover { background: var(--hv2-lime-soft); color: var(--hv2-green-700); }

.hv2 .hv2-search .alert { margin-top: .75rem; margin-bottom: 0; }

/* Hero media */
.hv2 .hv2-hero-media { position: relative; }

.hv2 .hv2-hero-figure {
  position: relative;
  border-radius: var(--hv2-r-xl);
  overflow: hidden;
  box-shadow: var(--hv2-shadow-lg);
  aspect-ratio: 16 / 11;
  background: var(--hv2-green-800);
  margin: 0;
}

.hv2 .hv2-hero-figure img { width: 100%; height: 100%; object-fit: cover; }

.hv2 .hv2-hero-badge {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  inset-inline-end: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-radius: var(--hv2-r);
  padding: .6rem .9rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hv2-green-900);
  box-shadow: var(--hv2-shadow-sm);
}

.hv2 .hv2-hero-badge .dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hv2-lime);
  box-shadow: 0 0 0 4px rgba(133, 190, 67, .22);
}

.hv2 .hv2-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.hv2 .hv2-hero-stat {
  background: var(--hv2-surface);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--hv2-shadow-sm);
}

.hv2 .hv2-hero-stat--accent { background: var(--hv2-lime-soft); border-color: transparent; }

.hv2 .hv2-hero-stat b {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--hv2-green-700);
  line-height: 1.2;
}

.hv2 .hv2-hero-stat span { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--hv2-muted); }

@media (max-width: 991.98px) {
  .hv2 .hv2-hero-grid { grid-template-columns: 1fr; }
  .hv2 .hv2-hero-media { order: -1; }
}

/* ============================================================
   About
   ============================================================ */

.hv2 .hv2-about { background: var(--hv2-surface); }

.hv2 .hv2-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.hv2 .hv2-about-copy p { font-size: 1rem; }

.hv2 .hv2-checks { display: grid; gap: .75rem; margin-top: 1.75rem; }

.hv2 .hv2-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--hv2-bg);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r-sm);
  padding: .8rem 1rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--hv2-text);
}

.hv2 .hv2-check i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hv2-lime);
  color: #fff;
}

.hv2 .hv2-check svg { width: 13px; height: 13px; }

.hv2 .hv2-about-media { position: relative; }

.hv2 .hv2-about-figure {
  position: relative;
  border-radius: var(--hv2-r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--hv2-shadow-lg);
  background: var(--hv2-bg-soft);
  margin: 0;
}

.hv2 .hv2-about-figure img { width: 100%; height: 100%; object-fit: cover; }

.hv2 .hv2-about-orb {
  position: absolute;
  inset-block-end: -18px;
  inset-inline-start: -18px;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--hv2-lime);
  color: #fff;
  box-shadow: 0 10px 24px rgba(133, 190, 67, .35);
}

@media (max-width: 991.98px) {
  .hv2 .hv2-about-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Vision band (dark)
   ============================================================ */

.hv2 .hv2-vision { background: var(--hv2-green-900); color: #fff; }

.hv2 .hv2-vision h2 { color: #fff; }
.hv2 .hv2-vision .hv2-head-sub { color: rgba(255, 255, 255, .72); }

.hv2 .hv2-vision-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.75rem;
}

.hv2 .hv2-vision-stat {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--hv2-r-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.hv2 .hv2-vision-stat b {
  display: block;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--hv2-lime);
  line-height: 1.2;
}

.hv2 .hv2-vision-stat strong {
  display: block;
  margin-top: .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.hv2 .hv2-vision-stat span {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.8;
}

@media (max-width: 767.98px) {
  .hv2 .hv2-vision-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   Services
   ============================================================ */

.hv2 .hv2-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.hv2 .hv2-service {
  display: flex;
  flex-direction: column;
  border-radius: var(--hv2-r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hv2-border);
  background: var(--hv2-surface);
  box-shadow: var(--hv2-shadow-sm);
}

.hv2 .hv2-service--dark { background: var(--hv2-green-900); border-color: transparent; color: #fff; }

.hv2 .hv2-service h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: .75rem; }
.hv2 .hv2-service--dark h3 { color: #fff; }
.hv2 .hv2-service--dark p { color: rgba(255, 255, 255, .70); }

.hv2 .hv2-service-list { display: grid; gap: .7rem; margin-block: 1.5rem; }

.hv2 .hv2-service-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--hv2-muted);
}

.hv2 .hv2-service--dark .hv2-service-list li { color: rgba(255, 255, 255, .82); }

.hv2 .hv2-service-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: .32rem;
  color: var(--hv2-lime);
}

.hv2 .hv2-service-foot { margin-top: auto; }

@media (max-width: 767.98px) {
  .hv2 .hv2-services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Jobs list
   ============================================================ */

.hv2 .hv2-jobs { background: var(--hv2-surface); }

.hv2 .hv2-job-list { display: grid; gap: .85rem; }

.hv2 .hv2-job {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--hv2-bg);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r);
  padding: 1rem 1.15rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hv2 .hv2-job:hover {
  background: var(--hv2-surface);
  border-color: var(--hv2-border-strong);
  box-shadow: var(--hv2-shadow);
}

.hv2 .hv2-job-main { flex: 1 1 auto; min-width: 0; }

.hv2 .hv2-job-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.hv2 .hv2-job-title a { color: var(--hv2-green-900); }
.hv2 .hv2-job-title a:hover { color: var(--hv2-lime-dark); }

.hv2 .hv2-job-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin-top: .3rem;
  font-size: .8125rem;
  color: var(--hv2-muted);
}

.hv2 .hv2-job-meta a { color: inherit; }
.hv2 .hv2-job-meta a:hover { color: var(--hv2-lime-dark); }
.hv2 .hv2-job-meta .sep { opacity: .45; }

.hv2 .hv2-job-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  flex: 0 1 auto;
}

.hv2 .hv2-job .hv2-btn { flex: 0 0 auto; }

@media (max-width: 991.98px) {
  .hv2 .hv2-job { flex-wrap: wrap; }
  .hv2 .hv2-job-main { flex-basis: calc(100% - 60px); }
  .hv2 .hv2-job-tags { flex-basis: 100%; }
  .hv2 .hv2-job .hv2-btn { margin-inline-start: auto; }
}

/* ============================================================
   Companies
   ============================================================ */

.hv2 .hv2-company-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 4px;
  margin-inline: -4px;
  padding-inline: 4px;
}

.hv2 .hv2-company-track::-webkit-scrollbar { display: none; }

.hv2 .hv2-company {
  flex: 0 0 calc((100% - 4rem) / 5);
  scroll-snap-align: start;
  display: block;
  background: var(--hv2-surface);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r);
  padding: 1.25rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hv2 .hv2-company:hover {
  border-color: var(--hv2-border-strong);
  box-shadow: var(--hv2-shadow);
  transform: translateY(-2px);
}

.hv2 .hv2-company-name {
  margin-top: .9rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--hv2-green-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.hv2 .hv2-company-sub { margin-top: .3rem; font-size: .75rem; color: var(--hv2-muted); }

.hv2 .hv2-company-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }

.hv2 .hv2-carousel-nav { display: flex; gap: .5rem; }

.hv2 .hv2-carousel-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hv2-border-strong);
  background: var(--hv2-surface);
  color: var(--hv2-green-900);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.hv2 .hv2-carousel-btn:hover { background: var(--hv2-green-900); color: #fff; border-color: var(--hv2-green-900); }

@media (max-width: 1199.98px) { .hv2 .hv2-company { flex-basis: calc((100% - 3rem) / 4); } }
@media (max-width: 991.98px)  { .hv2 .hv2-company { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 767.98px)  { .hv2 .hv2-company { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 479.98px)  { .hv2 .hv2-company { flex-basis: 82%; } }

/* ============================================================
   Training
   ============================================================ */

.hv2 .hv2-training { background: var(--hv2-bg-soft); }

.hv2 .hv2-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.hv2 .hv2-course {
  display: flex;
  flex-direction: column;
  background: var(--hv2-surface);
  border: 1px solid var(--hv2-border);
  border-radius: var(--hv2-r-lg);
  overflow: hidden;
  box-shadow: var(--hv2-shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}

.hv2 .hv2-course:hover { box-shadow: var(--hv2-shadow); transform: translateY(-2px); }

.hv2 .hv2-course-pic {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--hv2-green-800);
  overflow: hidden;
}

.hv2 .hv2-course-pic img { width: 100%; height: 100%; object-fit: cover; }

.hv2 .hv2-course-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem; }

.hv2 .hv2-course-body h3 {
  margin-top: .75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hv2-green-900);
  line-height: 1.5;
}

.hv2 .hv2-course-body > p {
  margin-top: .5rem;
  font-size: .875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hv2 .hv2-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  margin-top: .9rem;
  font-size: .75rem;
  color: var(--hv2-muted);
}

.hv2 .hv2-course-meta li { display: inline-flex; align-items: center; gap: .3rem; }
.hv2 .hv2-course-meta svg { width: 14px; height: 14px; }

.hv2 .hv2-course-foot { margin-top: auto; padding-top: 1.15rem; }

@media (max-width: 991.98px) { .hv2 .hv2-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .hv2 .hv2-course-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Closing CTA
   ============================================================ */

.hv2 .hv2-cta { padding-block: clamp(2rem, 4vw, 3.5rem); }

.hv2 .hv2-cta-panel {
  position: relative;
  border-radius: var(--hv2-r-xl);
  overflow: hidden;
  background: var(--hv2-green-900);
  padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
  text-align: center;
}

.hv2 .hv2-cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hv2-cta-image, none);
  background-size: cover;
  background-position: center;
  opacity: .18;
}

.hv2 .hv2-cta-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 48, 31, .55) 0%, rgba(22, 48, 31, .88) 100%);
}

.hv2 .hv2-cta-inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }

.hv2 .hv2-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
}

.hv2 .hv2-cta-inner p { margin-top: 1rem; color: rgba(255, 255, 255, .75); }

.hv2 .hv2-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

/* ============================================================
   Audience split — job seeker / employer
   ============================================================ */

.hv2 .hv2-audience { background: var(--hv2-surface); }

.hv2 .hv2-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.hv2 .hv2-path {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--hv2-r-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--hv2-border);
  background: var(--hv2-bg);
}

.hv2 .hv2-path--seeker { background: var(--hv2-lime-soft); border-color: transparent; }

.hv2 .hv2-path--employer {
  background: var(--hv2-green-900);
  border-color: transparent;
  color: #fff;
}

.hv2 .hv2-path--employer h3,
.hv2 .hv2-path--employer .hv2-path-kicker { color: #fff; }
.hv2 .hv2-path--employer p { color: rgba(255, 255, 255, .78); }

.hv2 .hv2-path-head { display: flex; align-items: flex-start; gap: .9rem; }

.hv2 .hv2-path-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--hv2-r-sm);
  background: var(--hv2-surface);
  color: var(--hv2-green-700);
  box-shadow: var(--hv2-shadow-sm);
}

.hv2 .hv2-path--employer .hv2-path-icon {
  background: rgba(255, 255, 255, .12);
  color: var(--hv2-lime);
  box-shadow: none;
}

.hv2 .hv2-path-icon svg { width: 22px; height: 22px; }

.hv2 .hv2-path-kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--hv2-green-700);
  margin-bottom: .2rem;
}

.hv2 .hv2-path-head h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 800; }

.hv2 .hv2-path-list { display: grid; gap: .6rem; }

.hv2 .hv2-path-list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--hv2-text);
}

.hv2 .hv2-path--employer .hv2-path-list li { color: rgba(255, 255, 255, .85); }

.hv2 .hv2-path-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: .32rem;
  color: var(--hv2-lime-dark);
}

.hv2 .hv2-path--employer .hv2-path-list svg { color: var(--hv2-lime); }

.hv2 .hv2-path-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: auto;
  padding-top: .35rem;
}

.hv2 .hv2-path-foot {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  border-top: 1px solid rgba(22, 48, 31, .12);
  padding-top: .9rem;
}

.hv2 .hv2-path--employer .hv2-path-foot { border-top-color: rgba(255, 255, 255, .18); }

.hv2 .hv2-path-foot b { font-size: 1.35rem; font-weight: 800; color: var(--hv2-green-700); }
.hv2 .hv2-path--employer .hv2-path-foot b { color: var(--hv2-lime); }

.hv2 .hv2-path-foot span { font-size: .8125rem; color: var(--hv2-muted); }
.hv2 .hv2-path--employer .hv2-path-foot span { color: rgba(255, 255, 255, .7); }

@media (max-width: 767.98px) {
  .hv2 .hv2-audience-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Balanced closing call to action
   ============================================================ */

.hv2 .hv2-cta-inner { max-width: 58rem; }

.hv2 .hv2-cta-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 2rem;
  text-align: start;
}

.hv2 .hv2-cta-side {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--hv2-r-lg);
  padding: 1.35rem;
}

.hv2 .hv2-cta-kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--hv2-lime);
}

.hv2 .hv2-cta-side p { margin-top: .5rem; font-size: .9375rem; }

.hv2 .hv2-cta-side .hv2-cta-actions { justify-content: flex-start; margin-top: 1.25rem; }

@media (max-width: 767.98px) {
  .hv2 .hv2-cta-split { grid-template-columns: 1fr; }
}

/* Governorate select sits between the keyword field and the scope select */
.hv2 .hv2-field--state { flex: 0 1 190px; }
.hv2 .hv2-field--scope { flex: 0 1 190px; }

@media (max-width: 575.98px) {
  .hv2 .hv2-field--state,
  .hv2 .hv2-field--scope { flex: 1 1 100%; }
}