/* ==========================================================================
   Area pages, "Local broker template (New Design)" (app/Views/area/*.php).
   Loaded after ui.css and home.css: the shared sections use the homepage
   styles, this file only adds the area-only sections.
   ========================================================================== */

/* Hero: body is two paragraphs and there's no subtitle line. */
.mfs-area-hero__qualifier { margin-top: 20px; }
.mfs-area-hero__body { display: grid; gap: 12px; max-width: 580px; margin-top: 20px; }
.mfs-area-hero__img { object-position: 50% 50%; }
/* Photo credit: dark pill over the image, bottom right; lifted above the
   reviews badge where that overlaps the image (640px+). */
.mfs-area-hero__credit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}
.mfs-area-hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mfs-area-hero__credit a:hover { text-decoration-thickness: 2px; }
@media (min-width: 640px) {
  .mfs-area-hero__credit { right: 20px; left: 20px; bottom: 16px; max-width: calc(100% - 40px); }
  .mfs-area-hero__image--badge .mfs-area-hero__credit { bottom: 72px; }
}

/* Six reasons ------------------------------------------------------------- */
.mfs-area-reasons__title { margin-top: 16px; }
.mfs-area-reasons { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 640px) { .mfs-area-reasons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mfs-area-reasons { grid-template-columns: repeat(3, 1fr); margin-top: 40px; } }
.mfs-area-reason { padding-top: 24px; border-top: 1px solid var(--mfs-line); }
.mfs-area-reason__title {
  font-family: var(--mfs-font-heading);
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.015em;
  color: var(--mfs-navy);
}
.mfs-area-reason__body { margin-top: 10px; font-size: 16px; line-height: 25px; color: var(--mfs-body); }

/* Heading left, content right (local insights, specialist situations). */
.mfs-area-split { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .mfs-area-split { grid-template-columns: minmax(0, 11fr) minmax(0, 19fr); align-items: start; gap: 80px; }
}
.mfs-area-split__title { margin-top: 16px; }

/* Local insights ---------------------------------------------------------- */
.mfs-area-insights { display: grid; gap: 20px; }
.mfs-area-insights p { font-size: 17px; line-height: 27px; color: var(--mfs-body); }
.mfs-area-insights a { color: var(--mfs-navy); text-decoration: underline; text-underline-offset: 2px; }
.mfs-area-insights a:hover { text-decoration-thickness: 2px; }
.mfs-area-insights strong { color: var(--mfs-navy); font-weight: 600; }

/* Specialist situations --------------------------------------------------- */
.mfs-area-specialist { border-bottom: 1px solid var(--mfs-line); }
.mfs-area-specialist li { border-top: 1px solid var(--mfs-line); }
.mfs-area-specialist__row { display: grid; gap: 4px; padding-block: 18px; }
.mfs-area-specialist__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 28px;
  color: var(--mfs-navy);
  transition: color 0.2s;
}
.mfs-area-specialist__title .mfs-icon { transition: transform 0.2s; }
.mfs-area-specialist__body { font-size: 15px; line-height: 23px; color: var(--mfs-body); }
.mfs-ui .mfs-area-specialist__row:hover .mfs-area-specialist__title { color: var(--mfs-action); }
.mfs-area-specialist__row:hover .mfs-icon { transform: translateX(4px); }

/* FAQ: list sits between the intro and the contact card on phones, and
   to the right of both from 1024px. */
.mfs-area-faq {
  display: grid;
  grid-template-areas: "head" "list" "contact";
  gap: 32px;
}
@media (min-width: 1024px) {
  .mfs-area-faq {
    grid-template-columns: minmax(0, 420px) minmax(0, 760px);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head list" "contact list";
    justify-content: space-between;
    column-gap: 56px;
    row-gap: 28px;
  }
}
.mfs-area-faq__head { grid-area: head; }
.mfs-area-faq__intro { margin-top: 16px; }
@media (min-width: 640px) { .mfs-area-faq__intro { font-size: 17px; } }
.mfs-area-faq__list { grid-area: list; border-top: 1px solid var(--mfs-line); }
.mfs-area-faq__item { border-bottom: 1px solid var(--mfs-line); }
.mfs-area-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: var(--mfs-navy);
  cursor: pointer;
  list-style: none;
}
@media (min-width: 640px) { .mfs-area-faq__q { padding-block: 24px; font-size: 19px; line-height: 28px; } }
.mfs-area-faq__q::-webkit-details-marker { display: none; }
.mfs-area-faq__q:hover { color: var(--mfs-action); }
/* Plus that turns into a minus when open. */
.mfs-area-faq__icon { position: relative; flex-shrink: 0; width: 24px; height: 24px; }
.mfs-area-faq__icon::before,
.mfs-area-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--mfs-action);
  transition: transform 0.2s var(--mfs-ease);
}
.mfs-area-faq__icon::after { transform: rotate(90deg); }
.mfs-area-faq__item[open] .mfs-area-faq__icon::after { transform: rotate(0deg); }
.mfs-area-faq__a { max-width: 680px; padding-bottom: 24px; font-size: 17px; line-height: 27px; color: var(--mfs-body); }
.mfs-area-faq__contact {
  grid-area: contact;
  align-self: start;
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--mfs-line);
  border-radius: var(--mfs-radius);
  background: #fff;
}
.mfs-area-faq__contact .mfs-btn { padding: 12px 20px; font-size: 16px; }
.mfs-area-faq__contact p { line-height: 24px; }
.mfs-area-faq__contact .mfs-small { line-height: 21px; }