/**
 * MCF public display shortcodes — light, restyleable defaults.
 * These sit inside Louise's Content Block templates, so styling is intentionally
 * minimal and namespaced (.mcf-*); the theme/template can override freely.
 *
 * Colour model (plan §7): components are colour-agnostic — they read
 * var(--mcf-accent). The base navy is shared; the accent is set per service by a
 * .mcf-svc-{kitchen|plumbing|electrical} wrapper class (defaults only — Louise's
 * Content-Block CSS always overrides). No fixed MCF palette, no hardcoded gold.
 */

:root {
    --mcf-navy: #002961;
    --mcf-accent: #008ca7; /* neutral default; per-service wrappers override */
}

/* Per-service accent defaults — the repeater adds the matching wrapper class. */
.mcf-svc-kitchen    { --mcf-accent: #008ca7; }
.mcf-svc-plumbing   { --mcf-accent: #ff6633; }
.mcf-svc-electrical { --mcf-accent: #64a70b; }

.mcf-section { margin: 0 0 28px; }
.mcf-section-heading {
    margin: 0 0 16px;
    color: var(--mcf-navy);
    font-weight: 700;
}
.mcf-section-footnote {
    margin: 12px 0 0;
    font-size: .85rem;
    font-style: italic;
    color: #6b7689;
}

/* Highlights / stat counters */
.mcf-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.mcf-highlight { display: flex; flex-direction: column; }
.mcf-highlight-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mcf-navy);
}
.mcf-highlight-label {
    margin-top: 6px;
    font-size: .9rem;
    color: #6b7689;
}

/* Gallery */
.mcf-gallery {
    display: grid;
    gap: 12px;
}
.mcf-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcf-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcf-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Tier-2 loops: thin grid cell (ours) + optional explicit column counts. */
.mcf-loop-item { min-width: 0; }
.mcf-loop-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcf-loop-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcf-loop-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mcf-gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Case study cards */
.mcf-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.mcf-pcard {
    border: 1px solid #e4e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.mcf-pcard-media img { display: block; width: 100%; height: 200px; object-fit: cover; }
.mcf-pcard-title { margin: 14px 16px 6px; font-size: 1.1rem; color: var(--mcf-navy); }
.mcf-pcard-excerpt { margin: 0 16px 16px; color: #54607a; font-size: .92rem; }

/* Testimonials */
.mcf-quote-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.mcf-quote {
    margin: 0;
    padding: 22px 24px;
    background: #f6f8fb;
    border-left: 4px solid var(--mcf-accent);
    border-radius: 0 12px 12px 0;
}
.mcf-quote-text { margin: 0 0 12px; font-size: 1.02rem; color: #2a3550; }
.mcf-quote-cite { font-weight: 700; color: var(--mcf-navy); font-style: normal; }
.mcf-quote-loc { font-weight: 400; color: #6b7689; }

/* ── Profile body copy — readability (Louise review: line spacing + font sizing)
 * The Our Story paragraph binds via [mcf_field key="mcf_story_text"] inside a
 * vc_column_text tagged el_class="mcf-story-text". The default body size renders
 * tight; bump the size + line-height for comfortable reading. Scoped to the
 * profile page so it never leaks into other Story-styled text. Louise can still
 * override from the Content Block / theme CSS.
 *
 * ADJ-75 (2026-09-10, "Font to match"): the national-content footnote under the
 * Projects / Gallery grids ([mcf_projects_footer] / [mcf_gallery_footer], in a
 * Text element tagged `mcf-fallback-note`) is the same kind of element as Our
 * Story but was left at the theme default, so the two read as different fonts
 * a screen apart. Same rule, same measure — keep them together. */
.mcf-profile-page .mcf-story-text,
.mcf-story-text,
.mcf-fallback-note {
    font-size: 1.0625rem;   /* ~17px (up from the ~15px default) */
    line-height: 1.85;
    letter-spacing: .005em;
}
.mcf-story-text p,
.mcf-fallback-note p { margin: 0 0 1.1em; }
.mcf-story-text p:last-child,
.mcf-fallback-note p:last-child { margin-bottom: 0; }

/* ── Contact details — the values bound under each Showroom/Hours/… label ───
 * Each label heading is followed by a vc_column_text (el_class="mcf-contact-value")
 * holding the licensee's [mcf_field] value. Sit it snug under its label with a
 * little breathing room before the next label. The right-hand column holds the
 * per-licensee contact form ([mcf_contact_form] → HO-set embed). */
.mcf-contact-value {
    margin: 2px 0 16px;
    font-size: 1rem;
    line-height: 1.5;
}
.mcf-contact-value:last-child { margin-bottom: 0; }
.mcf-contact-value a { color: var(--mcf-accent); }

/* ── Single-template section visibility ───────────────────────────────────
 * The profile route sets body classes from content + the HO fallback switch.
 * Louise tags each conditional section row with mcf-sec-{section}; we collapse
 * it when the matching mcf-hide-{section} is on <body>. For Projects & Gallery,
 * mcf-src-{section}-{local|national} hides the inapplicable "More" button so
 * Louise can place both (mcf-more-local / mcf-more-national). */
.mcf-hide-projects     .mcf-sec-projects,
.mcf-hide-gallery      .mcf-sec-gallery,
.mcf-hide-designers    .mcf-sec-designers,
.mcf-hide-awards       .mcf-sec-awards,
.mcf-hide-testimonials .mcf-sec-testimonials,
.mcf-hide-whatwedo     .mcf-sec-whatwedo,
.mcf-hide-services     .mcf-sec-services,
.mcf-hide-story        .mcf-sec-story { display: none !important; }
.mcf-hide-contactform  .mcf-sec-contactform {
    visibility: hidden !important;
}

/* A row shared by TWO sub-sections hides only when BOTH are empty.
 * The Electrical/Plumbing "What We Do / <trade> Services" section is one block of
 * copy — an eyebrow + heading — over two independently-hiding parts: the
 * licensee's What We Do paragraph, and the Services grid built from their picks.
 * Tag the row holding that shared heading (and its anchor-nav button)
 * `mcf-sec-whatwedo-services`; the paragraph itself takes `mcf-sec-whatwedo` and
 * the grid's row takes `mcf-sec-services`, so each still collapses on its own.
 * Without this the heading would vanish whenever What We Do was blank, leaving a
 * grid of service cards with nothing above it.
 *
 * Kept as TWO rules, not one selector list: an unsupported :has() invalidates the
 * whole list it sits in, which would take the row rule down with it and leave the
 * section showing for everyone on that browser. On its own, the button rule is
 * the only thing that degrades. */
.mcf-hide-whatwedo.mcf-hide-services .mcf-sec-whatwedo-services { display: none !important; }
.mcf-hide-whatwedo.mcf-hide-services .btn-container:has(.mcf-sec-whatwedo-services) { display: none !important; }

/* Featured awards (up to mcf_award_slot_count()). Louise tags each award's row or
 * column with mcf-sec-award-{n} (n = 1…4, matching index 0…3); we collapse just
 * that award when it's empty — the same collapse the whole Awards section uses,
 * applied per award. Add matching pairs here if the slot count is filtered above 4. */
.mcf-hide-award-1 .mcf-sec-award-1,
.mcf-hide-award-2 .mcf-sec-award-2,
.mcf-hide-award-3 .mcf-sec-award-3,
.mcf-hide-award-4 .mcf-sec-award-4 { display: none !important; }

/* Award description: [mcf_award key="body"] keeps the licensee's line breaks
 * (nl2br), so give each break a little space — a multi-line description then reads
 * as separate lines/paragraphs instead of a wall of text. Scoped to the award rows
 * (mcf-sec-awards / mcf-sec-award-{n}), so nothing else on the profile is touched.
 * Adjust the margin here to taste.
 *
 * !important because Uncode resets `.uncode_text_column > :first-child { margin-top:0 }`
 * — and since the description starts with a text node, the FIRST <br> counts as that
 * first element child, so without this the opening line break alone lost its space. */
[class*="mcf-sec-award"] br {
    display: block;
    content: "";
    margin-top: 0.5em !important;
}

/* Space BETWEEN award bands. Each award is a full-bleed gradient row, so with no
 * gap two consecutive awards merge into one block of colour. The gap sits ABOVE
 * slots 2–4 (never above the first, never below the last), so it only ever appears
 * BETWEEN two visible awards — no stray space before the section or after it.
 * Awards are always contiguous (empty rows are dropped on save), so this yields
 * exactly one gap per pair. A hidden award's margins collapse with it, so an empty
 * award leaves no orphan gap — which a spacer element in the block could not do.
 * Tune the clamp to taste. */
.mcf-sec-award-2,
.mcf-sec-award-3,
.mcf-sec-award-4 {
    margin-top: clamp(20px, 3vw, 48px);
}

/* Contact card ("Ready to start your journey") lines. Louise tags each line —
 * the label + its [mcf_field] value — with mcf-sec-contact-{field}; we collapse
 * that line when the licensee left the field blank, so no orphan "Hours" /
 * "Areas" heading is left standing. Tag both the label and value elements (or a
 * shared wrapper) so the whole line goes with it. */
.mcf-hide-contact-address   .mcf-sec-contact-address,
.mcf-hide-contact-hours     .mcf-sec-contact-hours,
.mcf-hide-contact-christmas .mcf-sec-contact-christmas,
.mcf-hide-contact-areas     .mcf-sec-contact-areas { display: none !important; }

/* When the tagged element is an inline element WPBakery wraps (e.g. the anchor-
 * nav buttons render as <span class="btn-container"><a class="mcf-sec-…"></span>),
 * hiding the element alone leaves the wrapper's padding + inline gap behind.
 * Collapse the wrapper too when the button it holds belongs to a hidden section.
 * (:has() is supported in all current browsers.) */
.mcf-hide-projects     .btn-container:has(.mcf-sec-projects),
.mcf-hide-gallery      .btn-container:has(.mcf-sec-gallery),
.mcf-hide-designers    .btn-container:has(.mcf-sec-designers),
.mcf-hide-awards       .btn-container:has(.mcf-sec-awards),
.mcf-hide-testimonials .btn-container:has(.mcf-sec-testimonials),
.mcf-hide-contactform  .btn-container:has(.mcf-sec-contactform),
.mcf-hide-whatwedo     .btn-container:has(.mcf-sec-whatwedo),
.mcf-hide-services     .btn-container:has(.mcf-sec-services),
.mcf-hide-story        .btn-container:has(.mcf-sec-story) { display: none !important; }

/* "View all our projects" only when there IS more to see (mcf-hide-projects-more:
 * every own project is already in the grid). The resolved [mcf_projects_url]
 * button is auto-marked mcf-projects-viewall(-wrap); a hand-placed one can carry
 * the Extra Class mcf-sec-projects-more instead. */
.mcf-hide-projects-more .mcf-projects-viewall-wrap,
.mcf-hide-projects-more .mcf-projects-viewall,
.mcf-hide-projects-more .btn-container:has(.mcf-projects-viewall),
.mcf-hide-projects-more .mcf-sec-projects-more,
.mcf-hide-projects-more .btn-container:has(.mcf-sec-projects-more) { display: none !important; }

.mcf-src-projects-local    .mcf-sec-projects .mcf-more-national,
.mcf-src-projects-national .mcf-sec-projects .mcf-more-local,
.mcf-src-gallery-local     .mcf-sec-gallery  .mcf-more-national,
.mcf-src-gallery-national  .mcf-sec-gallery  .mcf-more-local { display: none !important; }

/* [mcf_projects_footer] / [mcf_gallery_footer] print nothing on local content, but
 * the Text element wrapping them still holds its margins. Louise tags that element
 * `mcf-fallback-note` and we collapse it whenever the section isn't national. */
.mcf-src-projects-local .mcf-sec-projects .mcf-fallback-note,
.mcf-src-gallery-local  .mcf-sec-gallery  .mcf-fallback-note { display: none !important; }

/* ── Gallery of Galleries (ADJ-44) — the tile caption ────────────────────
 *
 * The bound gallery element carries ONE Media Elements layout for both of its
 * modes. Title + Description are required for tiles, and actively wrong for
 * loose photos: with no album to read from, Uncode falls back to the
 * attachment's own title (partials/elements.php:1066) and captions every photo
 * with its filename. So the blocks stay ticked in the builder and we decide per
 * mode here, off the mcf-gallery-mode-* body class.
 */
/* Flat mode is LOOSE PHOTOS, not galleries. The icon, name and description all
 * describe a gallery, so none of them belong on an individual photo — a photo has
 * no name worth showing (Uncode would use its filename) and nothing to open but
 * itself. Let the photos be photos. */
.mcf-gallery-mode-flat .mcf-bind-gallery .t-entry-title,
.mcf-gallery-mode-flat .mcf-bind-gallery .t-entry-excerpt,
.mcf-gallery-mode-flat .mcf-bind-gallery .t-overlay-icon,
.mcf-gallery-mode-none .mcf-bind-gallery .t-entry-title,
.mcf-gallery-mode-none .mcf-bind-gallery .t-entry-excerpt,
.mcf-gallery-mode-none .mcf-bind-gallery .t-overlay-icon { display: none !important; }

/* With the icon gone the 58% tint would sit on every photo with nothing in it —
 * a permanently greyed-down wall. Clear it at rest and keep a lighter version on
 * hover, so the photos still read as clickable. (The 58% is an inline style on
 * the element, hence !important.) */
.mcf-gallery-mode-flat .mcf-bind-gallery .t-entry-visual-overlay-in,
.mcf-gallery-mode-none .mcf-bind-gallery .t-entry-visual-overlay-in { opacity: 0 !important; }
.mcf-gallery-mode-flat .mcf-bind-gallery .tmb:hover .t-entry-visual-overlay-in,
.mcf-gallery-mode-none .mcf-bind-gallery .tmb:hover .t-entry-visual-overlay-in { opacity: .22 !important; }

/* In tile mode the caption is the point, so treat it properly. Uncode centres
 * the icon + title + excerpt as one stack in the middle of the tile, which on a
 * 3-up grid overflows the tile and collides with the icon. Anchor the caption to
 * the bottom over a gradient scrim instead — legible on any photo, and it reads
 * as a label rather than as text dropped on an image. */
/* Uncode centres the caption inside .t-overlay-inner; pin that box to the tile so
 * "bottom" means the bottom of the photo rather than the bottom of a centred box
 * whose height depends on the text in it. */
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-inner {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
/* The caption box fills the tile and pins its content to the bottom. Filling
 * rather than bottom-anchoring is what lets the icon sit at the tile's centre:
 * absolute children resolve against THIS box, so it has to span the whole tile. */
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-text {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 18px 16px !important;
    text-align: left;
    transform: none !important;
    background: linear-gradient(to top, rgba(0, 20, 50, .86) 0%, rgba(0, 20, 50, .55) 26%, rgba(0, 20, 50, 0) 58%);
}

/* The picture icon stays — it's the affordance that says "this opens". It just
 * can't live in the caption's flow, where it pushed the text off the bottom of
 * the tile and struck through the title. Centre it on the tile instead. The
 * drop-shadow replaces the flat 58% tint we removed, so it stays visible on a
 * bright photo. */
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    filter: drop-shadow(0 1px 5px rgba(0, 12, 30, .5));
    transition: transform .25s ease, opacity .25s ease;
}
/* On a text-showed tile Uncode fades the WHOLE overlay out on hover
 * (.tmb-text-showed.tmb-overlay-text-anim… .t-entry-visual:hover .t-overlay-text,
 * style-core.css) — that is where the icon's fade on the live profiles comes from.
 * Keep exactly that fade for the icon, so hovering still clears it off the photo,
 * but hold the caption: the gallery name is the thing you're hovering in order to
 * act on, and it's what tells the tiles apart. */
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-visual:hover .t-overlay-icon {
    opacity: 0;
}

.mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-title {
    margin: 0 !important;
    /* !important throughout: the heading carries Uncode's own `h6 title-scale`
     * classes, whose sizing rules outrank a plain declaration here. */
    font-size: 1.02rem !important;
    line-height: 1.28 !important;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    /* Gallery names are free-typed; two lines is the ceiling on every breakpoint
     * so one wordy name can't push a tile out of line with its neighbours. */
    max-height: 2.56em;         /* 2 × line-height */
    overflow: hidden;
}
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-excerpt {
    margin: 4px 0 0 !important;
    font-size: .82rem;
    line-height: 1.4;
    opacity: .9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    /* A description is optional and free-typed — clamp it to two lines so one long
     * one can't grow the caption over the whole tile.
     *
     * max-height does the actual guaranteeing. The -webkit-box/line-clamp pair is
     * left in as progressive enhancement for the ellipsis, but it is NOT relied on:
     * .t-entry-excerpt computes to display:flow-root here even against an
     * !important, and line-clamp is inert on anything but -webkit-box. */
    max-height: 2.8em;          /* 2 × line-height */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* The overlay tint is tuned for a hover state with a centred icon; with a scrim
 * doing the legibility work it just greys the photo out. Lift it at rest and
 * keep a gentler version on hover. */
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-visual-overlay-in { opacity: 0 !important; }
.mcf-gallery-mode-tiles .mcf-bind-gallery .tmb:hover .t-entry-visual-overlay-in { opacity: .28 !important; }

/* Uncode animates the caption in from a 0.9 scale on hover; with the caption
 * always visible that reads as a wobble. */
.mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-text,
.mcf-gallery-mode-tiles .mcf-bind-gallery .tmb:hover .t-overlay-text { opacity: 1 !important; }

/* Tiles go 2-up around 760px and the tile drops to roughly 195px wide, so the
 * desktop type has to come down with it or a two-word gallery name eats the
 * whole tile. Sizes are graded rather than switched, and the icon shrinks too —
 * at 45px it dominates a tile that small. */
@media (max-width: 767px) {
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-text { padding: 14px 13px 12px !important; }
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-title  { font-size: .88rem !important; line-height: 1.24 !important; }
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-excerpt {
        font-size: .74rem; line-height: 1.35; margin-top: 3px !important; max-height: 2.7em;
    }
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-icon { font-size: 32px !important; }
}

@media (max-width: 479px) {
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-text { padding: 12px 11px 10px !important; }
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-title  { font-size: .8rem !important; line-height: 1.22 !important; }
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-entry-excerpt {
        font-size: .69rem; line-height: 1.32; max-height: 2.64em;
    }
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-icon { font-size: 26px !important; }
    /* The scrim has to start higher on a short tile or the second line of a
     * wrapped name sits on bare photo. */
    .mcf-gallery-mode-tiles .mcf-bind-gallery .t-overlay-text {
        background: linear-gradient(to top, rgba(0, 20, 50, .88) 0%, rgba(0, 20, 50, .6) 34%, rgba(0, 20, 50, 0) 70%);
    }
}

/* Designers carousel — shell is ours, the card is the item template */
.mcf-carousel { position: relative; }
.mcf-carousel-viewport { overflow: hidden; }
.mcf-carousel-track { display: flex; gap: 24px; transition: transform .4s ease; }
.mcf-carousel-item { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }
.mcf-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.mcf-carousel-prev, .mcf-carousel-next {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid #d7dde7; background: #fff; color: var(--mcf-navy);
    font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.mcf-carousel-prev:hover, .mcf-carousel-next:hover { background: var(--mcf-accent); border-color: var(--mcf-accent); color: #fff; }
.mcf-carousel-dots { display: flex; gap: 8px; }
.mcf-carousel-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d7dde7; cursor: pointer; }
.mcf-carousel-dot.is-active { background: var(--mcf-accent); }

/* Native Uncode designers carousel (Louise's Post Module) — center a lone card.
 * With 2+ designers OWL builds a scrollable carousel that already fills the row.
 * With a single designer OWL flags the carousel `.disabled` (nothing to scroll)
 * and sizes its stage to one item's width, which then sits left-aligned in the
 * full-width row. Only in that disabled state do we center the stage; scrollable
 * carousels (no `.disabled`) are left fully native, so drag/slide is preserved. */
.mcf-sec-designers .owl-carousel.disabled .owl-stage-outer {
    display: flex;
    justify-content: center;
}

/* Native Uncode testimonials carousel — a licensee with a SINGLE testimonial.
 * mcf_fit_bound_carousel_to_count() (mcf-index-bind.php) drops the module to one
 * card per view when that's all the licensee has, so the quote fills the row
 * instead of sitting in the left third. A full 1300px line is a poor measure for
 * a quote, so cap and centre it — the card still reads as a card. Two
 * testimonials need no rule: they render as two halves and fill the row.
 * Change the cap here to make a lone testimonial wider or narrower. */
.mcf-carousel-solo .owl-carousel {
    max-width: 720px; /* narrower than the row, never wider than it: the element is
                       * block-level, so it still shrinks to the container on phones */
    margin-left: auto;
    margin-right: auto;
}

/* Default designer card (used when no item_template is supplied) */
.mcf-designer-card { background: #fff; border: 1px solid #e4e8f0; border-radius: 14px; overflow: hidden; height: 100%; }
.mcf-designer-card-media img, .mcf-designer-card-photo { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center top; }
.mcf-designer-card-body { padding: 18px 20px 22px; }
.mcf-designer-card-name { margin: 0 0 4px; font-size: 1.05rem; color: var(--mcf-navy); }
.mcf-designer-card-role { display: block; margin-bottom: 10px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mcf-accent); }
.mcf-designer-card-bio { margin: 0; font-size: .9rem; color: #54607a; line-height: 1.6; }

/* ── Tier-2 item-template cards (scaffolded card blocks; restyleable) ──────
 * Default styling for the project/gallery/designer/testimonial card Content
 * Blocks. Namespaced .mcf-card*; Louise overrides via the card block or theme
 * CSS and it reflects live. */
.mcf-card { display: block; background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; height: 100%; }
.mcf-card-media { position: relative; overflow: hidden; }
.mcf-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mcf-card:hover .mcf-card-media img { transform: scale(1.04); }

/* Project + gallery = overlay tile */
.mcf-card-project, .mcf-card-gallery { position: relative; }
.mcf-card-project .mcf-card-media, .mcf-card-gallery .mcf-card-media { aspect-ratio: 4 / 3; }
.mcf-card-project .mcf-card-overlay, .mcf-card-gallery .mcf-card-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 18px 20px; color: #fff;
    background: linear-gradient(to top, rgba(0,20,50,.78) 0%, rgba(0,20,50,.15) 55%, transparent 100%);
}
.mcf-card-gallery .mcf-card-overlay { opacity: 0; transition: opacity .25s; }
.mcf-card-gallery:hover .mcf-card-overlay { opacity: 1; }
.mcf-card-project .mcf-card-meta { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 4px; }
.mcf-card-project .mcf-card-title { margin: 0; font-size: 1.15rem; color: #fff; }
.mcf-card-gallery .mcf-card-overlay span { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Designer card */
.mcf-card-designer { border: 1px solid #e4e8f0; }
.mcf-card-designer .mcf-card-media { aspect-ratio: 1 / 1; }
.mcf-card-designer .mcf-card-body { padding: 18px 20px 22px; }
.mcf-card-name { margin: 0 0 2px; font-size: 1.05rem; color: var(--mcf-navy); }
.mcf-card-role { display: block; margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mcf-accent); }
.mcf-card-bio { margin: 0; font-size: .9rem; color: #54607a; line-height: 1.6; }

/* Testimonial card */
.mcf-card-testimonial { padding: 28px 26px; border: 1px solid #e4e8f0; border-top: 3px solid var(--mcf-accent); }
.mcf-card-stars { color: var(--mcf-accent); letter-spacing: 2px; margin-bottom: 12px; }
.mcf-card-quote { margin: 0 0 16px; font-style: italic; color: #2a3550; line-height: 1.7; }
.mcf-card-cite { font-style: normal; }
.mcf-card-cite strong { display: block; color: var(--mcf-navy); }
.mcf-card-cite span { font-size: .85rem; color: #6b7689; }

/* Default award list + card (used when no item_template is supplied) */
.mcf-awards { display: grid; gap: 16px; }
.mcf-awards.mcf-loop-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcf-awards.mcf-loop-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcf-award-card {
    display: flex; gap: 18px; align-items: flex-start;
    background: #fff; border: 1px solid #e4e8f0;
    border-left: 4px solid var(--mcf-accent);
    border-radius: 12px; padding: 20px 22px;
}
.mcf-award-card-media img, .mcf-award-card-photo { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.mcf-award-card-year { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--mcf-accent); margin-bottom: 4px; }
.mcf-award-card-title { margin: 0 0 6px; font-size: 1.1rem; color: var(--mcf-navy); }
.mcf-award-card-body-text { margin: 0; font-size: .9rem; color: #54607a; line-height: 1.6; }

@media (max-width: 900px) {
    .mcf-carousel-item { flex-basis: calc((100% - 24px) / 2); }
    .mcf-awards.mcf-loop-cols-2, .mcf-awards.mcf-loop-cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .mcf-gallery-cols-3, .mcf-gallery-cols-4,
    .mcf-loop-cols-3, .mcf-loop-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .mcf-carousel-item { flex-basis: 100%; }
}

/* ==========================================================================
   ADJ-79 — Profile mobile nav row
   --------------------------------------------------------------------------
   The teal/green bar on profiles at <960px is a WPBakery row (desktop-hidden
   tablet-hidden) holding an Uncode in-page menu module, fed by the per-division
   "Profile Mobile Menu {KITCHEN|ELECTRICAL|PLUMBING}" nav menus. Its top-level
   item is literally titled "MENU" and collapses the section links beneath it.

   Three faults, per Louise:
     1. the word MENU is visible and unwanted;
     2. the collapse icon does nothing when tapped;
     3. the bar is far taller than the equivalent row on RML.

   (2) is the load-bearing one. Uncode's style-core.css ships:
       .unmenu-block a, .unmenu-block .unmenu-title      { pointer-events: none }
       .unmenu-block a > span, .unmenu-title > span      { pointer-events: auto }
   ...while binding the click handler to .unmenu-title itself. So the ONLY
   hit-testable element in the whole bar is the <span>MENU</span>, and the icon
   is inert. Hiding the word without first fixing the icon would leave the
   profile nav completely unopenable on mobile — (1) and (2) must ship together.

   Scoping: RML solves this via a .member-profile-nav wrapper plus a hand-added
   .mcf-mobile-menu-toggle class. MC has neither reliably — only the KITCHEN
   menu item carries that class; electrical and plumbing have none. So we key on
   structure instead: a profile page has exactly one .unmenu-block-in-page, and
   its only top-level collapsible item is the MENU parent (the desktop nav row
   is WPBakery buttons, not a menu module). That covers all three divisions with
   no content edit, and picks up any future division for free.
   ========================================================================== */

@media (max-width: 959px) {

    /* (1) Hide the word, keep the accessible name — visually-hidden, not
       display:none, so screen readers still announce the control. */
    body.mcf-profile-page .unmenu-block-in-page .unmenu-collapse > li.menu-item-has-children > .unmenu-title > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* (2) Re-enable the icon. Overrides Uncode's pointer-events:none, which it
       inherits by sitting inside .unmenu-title. The click still bubbles up to
       the handler on .unmenu-title. */
    body.mcf-profile-page .unmenu-block-in-page .unmenu-collapse > li.menu-item-has-children > .unmenu-title > .collapsible-icon-wrapper {
        position: relative;
        pointer-events: auto;
        cursor: pointer;
    }

    /* Normalise the glyph to 30px across divisions. The three blocks had drifted:
       the kitchen block sets an explicit 30px (its own generated
       .fontsize-icon-208737-custom rule), while electrical and plumbing declare
       no icon size at all and so INHERIT .unmenu-title's 15px — half the size,
       and the reason their bars sat at 39px against kitchen's 54px. Setting it
       here rather than in the three blocks keeps this ticket free of live
       builder edits and covers any future division. */
    body.mcf-profile-page .unmenu-block-in-page .unmenu-collapse > li.menu-item-has-children > .unmenu-title > .collapsible-icon-wrapper > .collapsible-icon {
        font-size: 30px;
    }

    /* Grow the hit area to the 44px tap-target minimum without changing layout
       or the row's height. Sized absolutely rather than as a negative inset so
       it stays 44px regardless of what the glyph resolves to. */
    body.mcf-profile-page .unmenu-block-in-page .unmenu-collapse > li.menu-item-has-children > .unmenu-title > .collapsible-icon-wrapper::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* (3) Narrow the bar to match RML (~55px). The builder gives this row the
       default 36px/36px; RML's equivalent runs 10px/10px. The `> .row-inner`
       step matters: without it :has() also matches the outer full-width
       .row-parent that wraps this one, which must stay at zero padding. */
    body.mcf-profile-page .row-parent:has(> .row-inner .unmenu-block-in-page) {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}