/* TrackOlap UAE page (/en-ae/field-force-management-software-uae).
   The page reuses the South Africa page's classes and stylesheets; this file
   only holds UAE-specific overrides, scoped to `.ae-ffm-page`. */

/* What Is TrackOlap: body copy and checklist in the NBFC hero description
   style (finances.css .fin-hero-center .prod-hero-sub: muted grey, regular
   weight, 1.65 line height). */
.ae-ffm-page main .ffm-challenge-copy .ffm-accent-copy,
.ae-ffm-page main .ffm-challenge-copy .ffm-challenge-list li {
  color: #5b6474 !important;
  font-size: 17.25px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .ae-ffm-page main .ffm-challenge-copy .ffm-accent-copy,
  .ae-ffm-page main .ffm-challenge-copy .ffm-challenge-list li {
    font-size: 16px !important;
  }
}

/* ---- Built for How UAE Field Teams Work ----------------------------------

   The Attendance & Leave Management page's "What Changes" section
   (coreCapabilities with coreCapabilitiesContentStyle "insight", rendered by
   the shared template): centred eyebrow, heading and intro, then full-width
   panels with the copy on the left and the visual on the right that stack
   over each other while scrolling. Copied from beat-planning-softwares.css
   (the rules that page applies to `.beat-planning-softwares-page` and
   `.attendance-leave-management-softwares-page`), scoped to this page, with
   its warm red and peach recoloured to the NBFC blue theme used here. */
.ae-ffm-page main .ffm-core-capabilities {
  padding: 80px 0 56px;
}

.ae-ffm-page main .ffm-core-capabilities > .ffm-container {
  width: 100%;
  max-width: 1230px;
  padding-right: 40px;
  padding-left: 40px;
}

.ae-ffm-page main .ffm-core-capabilities .ffm-section-heading {
  max-width: 1100px;
  margin: 0 auto 42px;
  text-align: center;
}

.ae-ffm-page main .ffm-core-capabilities .ffm-core-capabilities-heading-eyebrow {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0 auto 12px;
  align-items: center;
  justify-content: center;
  color: var(--ffm-blue);
  background: none;
  font-size: clamp(24px, 2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  line-height: 1.2 !important;
  text-align: center !important;
  -webkit-text-fill-color: currentColor;
}

.ae-ffm-page main .ffm-core-capabilities .ffm-section-heading h2 {
  max-width: 1100px;
  margin-inline: auto;
  color: #111;
  font-size: clamp(32px, 3vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-align: center;
  text-wrap: balance;
}

.ae-ffm-page main .ffm-core-capabilities-heading-accent {
  color: var(--ffm-blue);
  background: linear-gradient(90deg, var(--ffm-blue), var(--ffm-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ae-ffm-page main .ffm-core-capabilities .ffm-section-heading p {
  max-width: 820px;
  margin: 14px auto 0;
  text-align: center;
}

.ae-ffm-page .ffm-core-capabilities-stack {
  max-width: 1150px;
  margin-inline: auto;
}

.ae-ffm-page .ffm-core-capability-panel {
  position: relative;
  display: grid;
  min-height: 420px;
  padding: 60px 80px;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  overflow: hidden;
  color: var(--ffm-ink);
  background: #eef4ff;
  border: 1px solid #d3e0fb;
  border-radius: 20px;
  box-shadow: none;
}

.ae-ffm-page .ffm-core-capability-panel:not(:last-child) {
  margin-bottom: 30px;
}

/* The source's four-step tint, light to deep, repeated for eight panels. */
.ae-ffm-page .ffm-core-capability-panel:nth-child(4n + 2) {
  background: #e5eeff;
}

.ae-ffm-page .ffm-core-capability-panel:nth-child(4n + 3) {
  background: #d9e6ff;
}

.ae-ffm-page .ffm-core-capability-panel:nth-child(4n + 4) {
  background: #c9dbff;
}

.ae-ffm-page .ffm-core-capability-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  padding: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  background: transparent;
}

.ae-ffm-page .ffm-core-capability-header {
  display: flex;
  min-height: 34px;
  margin-bottom: 14px;
  align-items: center;
  gap: 12px;
}

.ae-ffm-page .ffm-core-capability-header .ffm-feature-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin: 0;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  color: var(--ffm-blue);
  background: none;
  box-shadow: none;
}

.ae-ffm-page .ffm-core-capability-header .ffm-feature-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ae-ffm-page main .ffm-core-capability-panel .ffm-core-capability-eyebrow {
  margin: 0;
  color: #0d2f8f;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.ae-ffm-page main .ffm-core-capability-panel h3 {
  margin: 10px 0 12px;
  color: #111;
  font-size: clamp(28px, 2.3vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em;
  text-align: left;
}

.ae-ffm-page main .ffm-core-capability-panel .ffm-core-capability-description {
  margin: 0;
  color: #111;
  font-size: 18px !important;
  line-height: 1.55 !important;
  text-align: justify;
  text-align-last: left;
}

.ae-ffm-page .ffm-core-capability-visual {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 320px;
  height: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.ae-ffm-page .ffm-core-capability-visual::before {
  display: none;
}

.ae-ffm-page .ffm-core-capability-visual img {
  position: relative;
  z-index: 1;
  /* Full width of the visual column (the source capped it at 460px wide
     and 340px tall, which left the UAE pictures small inside the panel). */
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 220ms ease;
}

@media (hover: hover) {
  .ae-ffm-page .ffm-core-capability-panel:hover .ffm-core-capability-visual img {
    transform: translateY(-4px) scale(1.01);
  }
}

@media (min-width: 1025px) {
  .ae-ffm-page .ffm-core-capability-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 36px;
  }

  .ae-ffm-page .ffm-core-capability-visual {
    min-height: 360px;
    align-self: stretch;
    overflow: visible;
  }
}

/* Desktop: the same card layout as the "Plan the Day, Track the Work,
   Verify the Results" tab cards (attendance-self-service-panel in the
   South Africa stylesheet): no card padding, the copy on the left
   (0.88fr) with its own padding, and the picture filling the right 1.12fr
   edge to edge (top, right and bottom), clipped by the card's rounded
   corners. The card is 400px tall (380px on narrower laptops). The picture
   is absolutely positioned, so its own height never stretches the card,
   and its column is sized to the pictures' shape (all eight are about
   2145 x 1728, 1.24:1): 497px wide at 400px tall, 472px at 380px, so the
   whole picture shows with nothing cut off. */
@media (min-width: 1030px) {
  .ae-ffm-page .ffm-core-capability-panel {
    min-height: 400px;
    padding: 0;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) 497px;
    gap: 0;
  }

  .ae-ffm-page .ffm-core-capability-copy {
    padding: 44px 48px 44px 64px;
  }

  .ae-ffm-page .ffm-core-capability-visual {
    position: relative;
    display: block;
    min-height: 0;
    margin: 0;
    align-self: stretch;
    overflow: hidden;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }

  .ae-ffm-page .ffm-core-capability-panel:hover .ffm-core-capability-visual img {
    transform: none;
  }
}

@media (min-width: 1030px) and (max-width: 1200px) {
  .ae-ffm-page .ffm-core-capability-panel {
    min-height: 380px;
    grid-template-columns: minmax(0, 1fr) 472px;
  }

  .ae-ffm-page .ffm-core-capability-copy {
    padding: 36px 32px 36px 44px;
  }
}

/* Panels stack over each other while scrolling, as on the source page. */
@media (min-width: 992px) {
  .ae-ffm-page .ffm-core-capability-panel {
    position: sticky;
    z-index: calc(10 + var(--capability-index));
    top: 100px;
  }
}

@media (max-width: 1200px) {
  .ae-ffm-page main .ffm-core-capabilities .ffm-section-heading h2 {
    font-size: 34px !important;
  }

  .ae-ffm-page .ffm-core-capability-panel {
    padding: 48px 44px;
    gap: 32px;
  }
}

@media (max-width: 1029px) {
  .ae-ffm-page main .ffm-core-capabilities {
    padding: 56px 0;
  }

  .ae-ffm-page main .ffm-core-capabilities > .ffm-container {
    padding-right: 24px;
    padding-left: 24px;
  }

  .ae-ffm-page main .ffm-core-capabilities .ffm-section-heading {
    margin-bottom: 30px;
  }

  .ae-ffm-page main .ffm-core-capabilities .ffm-section-heading h2 {
    font-size: 28px !important;
  }

  .ae-ffm-page .ffm-core-capability-panel {
    min-height: 0;
    padding: 40px 28px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ae-ffm-page .ffm-core-capability-copy {
    order: 2;
  }

  .ae-ffm-page .ffm-core-capability-visual {
    order: 1;
    min-height: 250px;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .ae-ffm-page main .ffm-core-capabilities > .ffm-container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .ae-ffm-page main .ffm-core-capabilities .ffm-section-heading h2 {
    font-size: 25px !important;
  }

  .ae-ffm-page main .ffm-core-capabilities .ffm-core-capabilities-heading-eyebrow {
    font-size: 20px !important;
  }

  .ae-ffm-page .ffm-core-capability-panel {
    padding: 28px 20px;
    gap: 24px;
  }

  .ae-ffm-page main .ffm-core-capability-panel h3 {
    font-size: 26px !important;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    width: 100%;
    height: auto;
    max-height: none;
  }
}

/* ---- Hero: Dubai field operations background ----------------------------

   The hero shares the South Africa page's hero styling, which paints that
   page's South African professionals photo behind the copy. Here the photo
   is the UAE one instead: a pre-washed ice-blue Dubai street (a field
   executive on a phone at the left, two colleagues with a tablet at the
   right, Downtown Dubai behind), with the same layering as the South Africa
   hero, the fades tinted to the photo's ice blue. Decorative (a CSS
   background, so no alt text); the heading text stays the first paint. */
.ae-ffm-hero.za-ffm-hero.finances-page .crm-suite-hero.fin-hero-center {
  background:
    linear-gradient(180deg, rgba(241, 246, 255, 0) 78%, rgba(241, 246, 255, 0.9) 100%),
    url("/assets/img/field-force-management/uae/hero-dubai-field-operations-crisp-bg.webp") center top / cover no-repeat,
    #eef4fd;
}

/* Phones and tablets: the photo fills the whole hero, as on desktop
   ("cover"). A phone shows only a slice of this very wide photo (1672 x
   941), so the slice is anchored towards the right (76%), keeping the Burj
   Khalifa skyline and the colleague with the tablet in view instead of the
   plain haze at the photo's centre. A light wash behind the heading and
   intro keeps the text readable, fading out lower down. */
@media (max-width: 991px) {
  .ae-ffm-hero.za-ffm-hero.finances-page .crm-suite-hero.fin-hero-center {
    background:
      linear-gradient(180deg, rgba(241, 246, 255, 0.55) 0%, rgba(241, 246, 255, 0.4) 55%, rgba(241, 246, 255, 0.15) 100%),
      url("/assets/img/field-force-management/uae/hero-dubai-field-operations-crisp-bg.webp") 76% center / cover no-repeat,
      #edf3fc;
  }
}

/* ---- Plan the Day, Track the Work, Verify the Results: phones and tablets -

   The shared tab slider (South Africa stylesheet) gives each card a 300px
   minimum text block and tall padding, which left large empty space under
   short copy, and painted a pale panel behind the picture while it loaded.
   Here the text block is only as tall as its copy, and the picture area is
   reserved at the pictures' own shape (about 1935 x 1557), so nothing
   jumps when it loads. The page also loads every slide's picture up front
   and stops the slider advancing on its own on these screens
   (selfServicePortal.imageLoading / mobileAutoRotate in the page content). */
@media (max-width: 991px) {
  .ae-ffm-page .attendance-self-service-panel {
    grid-template-rows: auto auto;
  }

  .ae-ffm-page .attendance-self-service-copy {
    min-height: 0;
    padding: 30px 28px 22px;
  }

  .ae-ffm-page .attendance-self-service-visual {
    aspect-ratio: 1935 / 1557;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .ae-ffm-page .attendance-self-service-visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    filter: none;
  }
}

@media (max-width: 640px) {
  .ae-ffm-page .attendance-self-service-copy {
    min-height: 0;
    padding: 24px 20px 18px;
  }

  .ae-ffm-page main .attendance-self-service-copy h3 {
    font-size: 24px !important;
  }

  .ae-ffm-page main .attendance-self-service-copy p {
    margin-top: 12px;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* ---- How TrackOlap Works: phones and tablets ----------------------------

   On these screens each step stacks its copy over its picture. The shared
   styles leave a 56px grid gap plus a 280-390px minimum picture box (so a
   large empty band opened between the capability tags and the picture), and
   cap the picture's height. Here the step copy, tags and picture all start
   from the same left edge, the gap is small, and the picture takes the full
   width at its own height. */
@media (max-width: 991px) {
  .ae-ffm-page main .ffm-how-row {
    padding: 44px 0;
  }

  .ae-ffm-page main .ffm-how-row:first-child {
    padding-top: 28px;
  }

  .ae-ffm-page main .ffm-how-grid {
    gap: 22px;
  }

  .ae-ffm-page main .ffm-how-copy {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    justify-self: start;
    text-align: left;
  }

  .ae-ffm-page main .ffm-how-copy > .ffm-how-eyebrow,
  .ae-ffm-page main .ffm-how-copy .ffm-how-step-title,
  .ae-ffm-page main .ffm-how-copy > .ffm-how-description {
    margin-right: 0;
    margin-left: 0;
  }

  .ae-ffm-page main .ffm-how-copy h3,
  .ae-ffm-page main .ffm-how-copy > p,
  .ae-ffm-page main .ffm-how-copy > .ffm-how-capabilities-label {
    text-align: left;
  }

  .ae-ffm-page main .ffm-how-copy .ffm-how-capabilities {
    justify-content: flex-start;
  }

  .ae-ffm-page main .ffm-how-visual {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin-right: 0;
    margin-left: 0;
    justify-content: flex-start;
    justify-self: start;
  }

  .ae-ffm-page main .ffm-how-step-image {
    width: 100%;
    height: auto;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .ae-ffm-page main .ffm-how-row {
    padding: 32px 0;
  }

  .ae-ffm-page main .ffm-how-grid {
    gap: 16px;
  }

  .ae-ffm-page main .ffm-how-copy > .ffm-how-description {
    margin: 14px 0 18px;
  }
}

/* ---- Built for How UAE Field Teams Work: stacking cards on phones and
   tablets --------------------------------------------------------------

   On laptops each card pins below the header and the next card slides up
   over it while scrolling (position: sticky from 992px up, above). Below
   that width the cards simply scrolled past as a list. Here they pin and
   stack the same way, just under the fixed header. Each card is tightened
   (smaller picture margin, padding and copy) so a whole card fits on a
   phone screen while it is pinned. */
@media (max-width: 991px) {
  .ae-ffm-page .ffm-core-capability-panel {
    position: sticky;
    z-index: calc(10 + var(--capability-index));
    top: 96px;
    gap: 20px;
    box-shadow: 0 -10px 28px rgba(11, 21, 48, 0.08);
  }

  .ae-ffm-page .ffm-core-capability-panel:not(:last-child) {
    margin-bottom: 24px;
  }

  .ae-ffm-page .ffm-core-capability-visual {
    min-height: 0;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    max-height: 340px;
    object-fit: contain;
  }
}

@media (max-width: 640px) {
  .ae-ffm-page .ffm-core-capability-panel {
    top: 80px;
    padding: 18px 16px 22px;
    gap: 14px;
    border-radius: 18px;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    max-height: 240px;
    border-radius: 12px;
  }

  .ae-ffm-page .ffm-core-capability-header {
    min-height: 0;
    margin-bottom: 8px;
  }

  .ae-ffm-page main .ffm-core-capability-panel h3 {
    margin: 4px 0 8px;
    font-size: 22px !important;
  }

  .ae-ffm-page main .ffm-core-capability-panel .ffm-core-capability-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: left;
  }
}

/* Built for How UAE Field Teams Work, phones and tablets: the picture fills
   the card edge to edge across its top (as it fills the right half on
   desktop) instead of sitting inset at a capped height. Negative margins
   cancel the card's top and side padding; the card's rounded corners and
   overflow clip it, and it shows whole at its own shape. */
@media (max-width: 991px) {
  .ae-ffm-page .ffm-core-capability-visual {
    margin: -40px -28px 0;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
  }
}

@media (max-width: 640px) {
  .ae-ffm-page .ffm-core-capability-visual {
    margin: -18px -16px 0;
  }

  .ae-ffm-page .ffm-core-capability-visual img {
    max-height: none;
    border-radius: 0;
  }
}

/* ---- Employee Tracking and Data Privacy: wider cards on phones ----------

   The shared container leaves 18px either side on phones; the four privacy
   cards (one per row here) now run to 10px from each edge. The heading,
   intro and note keep their own width. */
@media (max-width: 640px) {
  .ae-ffm-page .ffm-impact--privacy .ffm-impact-grid--four {
    margin-right: -8px;
    margin-left: -8px;
  }
}