/**
 * MCF — RML "Find a Landscaper" (public member directory)
 *
 * Styled to the Registered Master Landscapers design system as it renders on
 * the live site (verified in-browser, not assumed):
 *
 *   Type      Manrope (inherited from the theme — never set here, so a theme
 *             font change carries through). Labels are UPPERCASE 13px /
 *             letter-spacing 1.3px, matching the site's .btn spec.
 *   Buttons   fully-rounded pills (Uncode `btn-circle`, radius 130px),
 *             padding 13px 21px.
 *   Tiles     SQUARE corners, flat — the site's .tmb tiles use border-radius 0
 *             and no shadow, so the cards do too (this is the main visual
 *             departure from the MasterCraft finder, which was rounded 10px).
 *   Palette   dark green #0f3d1f (color-725309) · mid green #48833a
 *             (color-123737) · hover #356b2a · blue-grey #628fa1
 *             (color-292564) · cream #f4f3eb (color-703768).
 *
 * The filter controls are tuned for the DARK hero band by default (that's where
 * they sit on Find a Landscaper). Add light="yes" to a filter shortcode when
 * placing it on a light band.
 */

.mcf-finder-grid-wrap,
.mcf-finder-pills,
.mcf-finder-select-wrap {
  --mcf-green: #48833a;
  --mcf-green-dark: #356b2a;
  --mcf-forest: #0f3d1f;
  --mcf-cream: #f4f3eb;
  --mcf-steel: #628fa1;      /* color-292564 — the Awards page pill colour */
  --mcf-steel-600: #547b8b;  /* its hover shade */
}

/* Per-discipline accent. All three deliberately share the RML accreditation
   green, because that is the single colour Louise's own Design / Build /
   Maintain accreditation logos use — the chips read as one accreditation set.
   The three classes exist as hooks: give a discipline its own --mcf-disc here if
   Head Office ever wants them colour-coded. */
.mcf-disc-design,
.mcf-disc-build,
.mcf-disc-maintain { --mcf-disc: #48833a; }

/* ─────────────────────────────────────────────────────────────────────────
 * Filter pills
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

/* Resting state matched to the Awards page pills (the reference Louise gave):
   Uncode `.btn.btn-circle.btn-color-292564` — solid blue-grey #628fa1, 1px
   border in the same colour, white uppercase, no shadow.

   Hover + selected invert to WHITE with the brand dark green as the text. This
   is the same treatment MasterCraft's approved finder uses (white pill, #002e62
   navy text) — reading as "lit up" rather than introducing a second hue, which
   is what a solid green pill did. Hover deliberately previews the selected look;
   the selected pill is told apart by weight, and it persists once the cursor
   moves away. */
.mcf-fpill {
  padding: 11px 22px;
  border: 1px solid var(--mcf-steel, #628fa1);
  background-color: var(--mcf-steel, #628fa1);
  color: #fff;
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 400;
  line-height: 1; cursor: pointer;
  border-radius: 130px; /* Uncode btn-circle */
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mcf-fpill:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--mcf-forest, #0f3d1f);
}
.mcf-fpill.is-active {
  background-color: #fff;
  border-color: #fff;
  color: var(--mcf-forest, #0f3d1f);
  font-weight: 600;
}
.mcf-fpill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* light-background variant — a white pill would vanish on a pale band, so hover
   and selected invert the other way: solid brand dark green with white text. */
.mcf-finder-pills.mcf-on-light .mcf-fpill:hover,
.mcf-finder-pills.mcf-on-light .mcf-fpill.is-active {
  background-color: var(--mcf-forest, #0f3d1f);
  border-color: var(--mcf-forest, #0f3d1f);
  color: #fff;
}
.mcf-finder-pills.mcf-on-light .mcf-fpill:focus-visible { outline-color: var(--mcf-forest, #0f3d1f); }

/* ─────────────────────────────────────────────────────────────────────────
 * Filter dropdown
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-select-wrap { display: flex; justify-content: center; }
.mcf-select-shell { position: relative; display: inline-block; }
.mcf-select-shell::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px; color: #fff;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none; opacity: .9;
}

/* !important throughout: Uncode's style-utils/style-custom set background,
   border, arrow image, width and margin on bare `select` AND on
   `.style-dark .style-light select` (specificity 0,2,1) — which our single
   class would otherwise lose to, giving white text on a white pill. */
.mcf-finder-select {
  box-sizing: border-box;
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: none !important; /* kills Uncode's own SVG arrow — we draw ::after */
  background-color: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  color: #fff !important;
  padding: 13px 50px 13px 21px;
  font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 500;
  text-align: left; line-height: 1;
  cursor: pointer; outline: none;
  border-radius: 130px; /* matches the pills */
  width: auto !important; min-width: 260px !important; max-width: 100% !important;
  height: auto; margin: 0 !important;
  transition: background-color .2s, border-color .2s;
}
.mcf-finder-select:hover,
.mcf-finder-select:focus-visible { background-color: rgba(255, 255, 255, .22) !important; border-color: #fff !important; }
.mcf-finder-select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Native option lists can't inherit the dark treatment — keep them readable. */
.mcf-finder-select option { color: #1b2330; background: #fff; text-transform: none; letter-spacing: normal; }

/* light-background variant */
.mcf-on-light .mcf-select-shell::after { color: var(--mcf-forest, #0f3d1f); }
.mcf-on-light .mcf-finder-select { background-color: #fff !important; color: var(--mcf-forest, #0f3d1f) !important; border-color: #cfd8cd !important; }
.mcf-on-light .mcf-finder-select:hover,
.mcf-on-light .mcf-finder-select:focus-visible { border-color: var(--mcf-green, #48833a) !important; background-color: #fff !important; }
.mcf-on-light .mcf-finder-select:focus-visible { outline-color: var(--mcf-green, #48833a); }

/* When a control is rendered as pills, its dropdown is the phone stand-in only
   (the media query at the bottom swaps them). */
.mcf-finder-select-alt { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
 * Card grid
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-grid-wrap { width: 100%; }
.mcf-finder-grid {
  display: grid;
  /* min(…, 100%) keeps the card at its target width on wide screens but never
     lets a track exceed the container, so the grid can't cause horizontal
     overflow on very narrow phones. max-width caps the row at ~4 generous
     columns (instead of squeezing in a 5th) and centres it. */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--mcf-card-min, 300px), 100%), 1fr));
  gap: 24px;
  max-width: 1320px;
  margin-left: auto; margin-right: auto;
}

.mcf-lc-card {
  position: relative; display: block; overflow: hidden;
  height: 300px;
  border-radius: 0; /* the RML tiles are square-cornered */
  text-decoration: none;
  background: var(--mcf-forest, #0f3d1f); /* base under the image / for noimg cards */
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s;
  will-change: transform;
}
.mcf-lc-card:hover,
.mcf-lc-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 61, 31, .25);
}
/* Distinct keyboard focus ring (not just the hover lift) — WCAG 2.4.7. */
.mcf-lc-card:focus-visible { outline: 3px solid var(--mcf-green, #48833a); outline-offset: 3px; }

.mcf-lc-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.mcf-lc-card:hover .mcf-lc-bg { transform: scale(1.05); }

/* Placeholder for members with no header/story image: a clean brand wash. */
.mcf-lc-noimg { background-image: linear-gradient(150deg, var(--mcf-green, #48833a) 0%, var(--mcf-forest, #0f3d1f) 100%); }
.mcf-lc-noimg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 15%, rgba(255, 255, 255, .14) 0%, transparent 55%);
}

.mcf-lc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 30, 15, .86) 0%, rgba(8, 30, 15, .30) 55%, rgba(8, 30, 15, .06) 100%);
}

/* Accreditation chips — a member can hold up to three, so they wrap as a row
   rather than sitting as one corner badge. */
.mcf-lc-badges {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
.mcf-lc-badge {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 130px;
  background: var(--mcf-disc, #48833a);
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  line-height: 1.4;
}

.mcf-lc-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px; text-align: left;
}
/* Locality eyebrow — same treatment as the site's section eyebrows. */
.mcf-lc-place {
  display: block;
  color: var(--mcf-cream, #f4f3eb);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  margin-bottom: 6px;
}
/* Clamped at two lines: the content block is anchored to the card's bottom edge
   and grows upward, so an unusually long company name would otherwise push the
   strapline and button off the top of the card. */
.mcf-lc-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #fff;
  font-size: 21px; font-weight: 700; line-height: 1.25;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.mcf-lc-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: rgba(255, 255, 255, .84);
  font-size: 13px; line-height: 1.5;
  margin-bottom: 14px;
}
.mcf-lc-btn {
  display: inline-block;
  padding: 11px 21px;
  border-radius: 130px; /* Uncode btn-circle */
  background: var(--mcf-green, #48833a); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  line-height: 1;
  transition: background-color .2s;
}
.mcf-lc-card:hover .mcf-lc-btn { background: var(--mcf-green-dark, #356b2a); }

/* Empty state + not-yet-configured note */
.mcf-finder-empty {
  text-align: center; color: #5c6a5c; font-size: 15px;
  padding: 40px 20px 8px; margin: 0;
}
.mcf-finder-setup {
  grid-column: 1 / -1; text-align: center; color: #5c6a5c; font-size: 15px;
  padding: 48px 24px;
  border: 1px dashed #cfd8cd;
  background: rgba(15, 61, 31, .02);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Filter animation (FLIP + fade-up, JS-driven)
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-lc-card[hidden] { display: none !important; }

/* Entering / repositioning: JS toggles these; transitions live here. Cards that
   filter OUT are hidden immediately (display:none) — the eye follows the reflow
   — while remaining cards slide (FLIP) and new cards fade up with a stagger. */
.mcf-finder-grid.is-animating .mcf-lc-card { transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease, box-shadow .28s; }
.mcf-lc-card.is-enter { opacity: 0; transform: translateY(16px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .mcf-lc-card,
  .mcf-lc-bg,
  .mcf-finder-grid.is-animating .mcf-lc-card { transition: none !important; }
  .mcf-lc-card.is-enter { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Responsive
 * ───────────────────────────────────────────────────────────────────────── */
/* Tablet / phone: swap any pill group for its dropdown and let the dropdowns go
   full-width so stacked filters line up. */
@media (max-width: 782px) {
  .mcf-finder-pills { display: none; }
  .mcf-finder-select-wrap,
  .mcf-finder-select-alt { display: block; }
  .mcf-select-shell { display: block; width: 100%; }
  /* !important to beat the desktop rule's own !important (needed there to win
     against Uncode's `select { width:100% }`). */
  .mcf-finder-select { min-width: 0 !important; width: 100% !important; }
}

@media (max-width: 600px) {
  .mcf-finder-grid { gap: 16px; }
  .mcf-lc-card { height: 260px; }
}