/* The design language of the pages the client signed off on
   (/services/hr-payroll/, /vat-services-in-dubai/ and the rest): a hero, then
   full-bleed bands that alternate white, lilac and grey, generous vertical
   rhythm, cards of equal height, and content that fades up as it arrives.

   It is opt-in. A page gets it by adding `bam-refresh page-<name>` to the body
   class, so the pages that already have the design are never touched by it.

   Nothing here changes a word of copy. It moves boxes and colours bands. */

:root {
  --bam-band-lilac: #f4ecff;   /* taken from the reference pages */
  --bam-band-grey: #f8f8f8;
  --bam-ink: #2f2a5a;
  --bam-rhythm: 72px;          /* vertical breathing room between bands */
  --bam-measure: 1140px;       /* the content width the reference pages use */
}

/* A band runs the full width of the window and holds its content to the
   measure. `max()` keeps a gutter on phones without a media query. */
.bam-refresh .bam-band {
  width: 100%;
  max-width: none;
  padding: var(--bam-rhythm) max(20px, calc((100% - var(--bam-measure)) / 2));
}
.bam-refresh .bam-band--lilac { background: var(--bam-band-lilac); }
.bam-refresh .bam-band--grey { background: var(--bam-band-grey); }
.bam-refresh .bam-band--tight { --bam-rhythm: 48px; }

/* The page becomes a single column of full-bleed bands. `display: contents`
   lets a wrapper's children become bands in their own right without moving a
   single element in the markup. */
.bam-refresh .bam-flow {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 0;
}
.bam-refresh .bam-contents { display: contents; }

/* Two neighbouring bands of the same colour read as one. */
.bam-refresh .bam-band--joined-below { padding-bottom: 0; }
.bam-refresh .bam-band--joined-above { padding-top: 0; }

/* Cards in a row match height and sit on a white tile, the way the icon boxes
   do on the service pages. */
.bam-refresh .bam-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
  width: 100%;
}
.bam-refresh .bam-cards > * {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  padding: 32px 24px;
  box-shadow: 0 2px 18px rgba(47, 42, 90, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bam-refresh .bam-cards > *:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(47, 42, 90, 0.14);
}
.bam-refresh .bam-cards .elementor-image-box-img img,
.bam-refresh .bam-cards .elementor-icon-box-icon img { margin-inline: auto; }
.bam-refresh .bam-cards .elementor-image-box-title,
.bam-refresh .bam-cards .elementor-icon-box-title { margin-top: 14px; }

/* A band heading, centred and spaced like the reference pages. */
.bam-refresh .bam-band > .elementor-widget-heading { width: 100%; }
.bam-refresh .bam-band-title .elementor-heading-title {
  text-align: center;
  color: var(--bam-ink);
  margin-bottom: 12px;
}
.bam-refresh .bam-band-lead,
.bam-refresh .bam-band-lead > .elementor-widget-container {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.bam-refresh .bam-band-lead p:last-child { margin-bottom: 0; }

/* Accordions read better full width with room around each row. */
.bam-refresh .bam-band .e-n-accordion-item { margin-bottom: 12px; }
.bam-refresh .bam-band summary { border-radius: 10px; }

@media (max-width: 767px) {
  :root { --bam-rhythm: 48px; }
  .bam-refresh .bam-cards { gap: 16px; }
  .bam-refresh .bam-cards > * { padding: 24px 20px; }
}