/* ============================================================================
   PROPERTY MANAGEMENT - /property_management/
   ============================================================================

   The public explainer for the PMS: the after-the-let half of the property
   zone, and the page the footer's "Property Management Qatar" link points at.

   Bootstrap carries the grid, the cards and the spacing. What is here is what
   Bootstrap has no class for - the hero measure, the icon medallions, the step
   badges and the brand tint on the closing panel. The page used to borrow
   `help-max-width--lg` and `help-icon-circle--lg` from the help dashboard's
   stylesheet, which it no longer loads.
   ============================================================================ */

/* --- Hero ---------------------------------------------------------------- */

.pms-page__subtitle {
  max-width: 37.5rem;
}

/* --- Feature medallions -------------------------------------------------- */

.pms-feature-card__icon {
  width: 4rem;
  height: 4rem;
}

/* The tints used to come from `bg-*` + `bg-opacity-10`. The brand kit paints
   Bootstrap's `primary` yellow, so the leases medallion rendered a yellow
   glyph on a yellow disc - invisible. The four modifiers below own the pair,
   so a change to the brand's Bootstrap map cannot blank an icon again. */

.pms-feature-card__icon--tenants {
  background-color: var(--brand-primary-100, #FFFAE0);
  color: var(--brand-primary-700, #B88C00);
}

.pms-feature-card__icon--leases {
  background-color: #E8EAF3;
  color: var(--brand-tertiary, #28335c);
}

.pms-feature-card__icon--payments {
  background-color: #E3F5EA;
  color: #1B7F4B;
}

.pms-feature-card__icon--maintenance {
  background-color: var(--brand-secondary-50, #FEF2F2);
  color: var(--brand-secondary-600, #B32424);
}

.pms-feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pms-feature-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.5rem rgba(28, 27, 32, 0.1);
}

/* --- How it works -------------------------------------------------------- */

.pms-step__badge {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Key features -------------------------------------------------------- */

.pms-key-card__heading {
  font-weight: 600;
}

.pms-key-card__list {
  font-size: 0.9375rem;
}

/* --- Getting started ------------------------------------------------------
   A vertical rail rather than the four-across the feature grid uses: these are
   four things that happen in order, with a wait in the middle, and a row of
   equal cards reads as four things you pick from. The rail is drawn on the
   list itself and stopped short of the last disc, so it never runs past the
   final step into empty space. */

.pms-onboarding__intro {
  max-width: 34rem;
}

.pms-onboarding__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.pms-onboarding__step {
  position: relative;
  display: flex;
  gap: 1.25rem;
  padding-bottom: 2rem;
}

.pms-onboarding__step:last-child {
  padding-bottom: 0;
}

/* The connector hangs off each step but the last, so its length is always the
   gap to the next disc - no magic height to keep in step with the copy. */
.pms-onboarding__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.4375rem;
  top: 3rem;
  bottom: 0.5rem;
  width: 0.125rem;
  background-color: var(--brand-primary-300, #FFED8F);
}

.pms-onboarding__number {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--brand-yellow, #F3C130);
  color: var(--brand-black, #1C1B20);
  font-weight: 700;
  font-size: 1.125rem;
  position: relative;
  z-index: 1;
}

/* The global h3 is brand gold, which is a 3:1 heading colour on white and
   these are 18px - under the size WCAG lets 3:1 pass at. The step titles take
   the body ink instead; the discs beside them carry the brand. */
.pms-onboarding__step-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--brand-black, #1C1B20);
}

.pms-onboarding__step-text {
  color: var(--brand-tertiary-600, #4D5368);
  margin-bottom: 0;
}

/* --- Closing panel ------------------------------------------------------- */

.pms-cta {
  background-color: var(--brand-primary-50, #FFFEF5);
  border: 1px solid var(--brand-primary-200, #FFF4B8);
}

.pms-cta__title {
  font-weight: 700;
}