/* loanDepot Directory — loan officer search ([ld_lo_search]).
   Interactive elements repeat their declarations across states with
   !important: the Elementor kit styles every <button>/<a> globally. */

.ldlos {
    --ld-purple: #501283;
    --ld-purple-vivid: #7a3ff6;
    --ld-ink: #222;
    --ld-line: #e9e6ef;
    color: var(--ld-ink);
}

/* ---- Hero ---------------------------------------------------------------- */
.ldlos-hero {
    max-width: 1440px;
    margin: 0 auto 48px;
    padding: 56px 1.5rem;
    border-radius: 16px;
    background-color: #4a1080;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ldlos-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

/* Desktop/H1 */
.ldlos-hero__title {
    margin: 0;
    font-family: Poppins, inherit, sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: #fff;
    text-align: center;
}

/* Desktop/Subheadline */
.ldlos-hero__text {
    margin: 0;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    color: #fff;
    text-align: center;
}

/* ---- Search (same spec as the branch map) -------------------------------- */
.ldlos-search { width: 100%; display: flex; justify-content: center; }

.ldlos-search__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 370px;
}

.ldlos .ldlos-input {
    width: 100%;
    height: 48px !important;
    margin: 0;
    padding: 12px 60px 12px 12px !important;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: #333;
    border: 1px solid #bfbfbf !important;
    border-radius: 999px !important;
    background: #fff;
    box-shadow: none;
}

.ldlos .ldlos-input::placeholder { color: #333; opacity: .65; }

.ldlos .ldlos-input:focus {
    outline: none;
    border-color: var(--ld-purple-vivid) !important;
    box-shadow: 0 0 0 4px rgba(122, 63, 240, .18);
}

.ldlos .ldlos-search__btn,
.ldlos .ldlos-search__btn:hover,
.ldlos .ldlos-search__btn:focus,
.ldlos .ldlos-search__btn:active {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ld-purple-vivid) !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    transition: background .15s ease;
}

.ldlos .ldlos-search__btn:hover,
.ldlos .ldlos-search__btn:focus { background: var(--ld-purple) !important; }
.ldlos-search__btn svg { display: block; }

/* ---- Results ------------------------------------------------------------- */
.ldlos-status {
    max-width: 1140px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 14px;
    color: #6b6478;
}

.ldlos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Name/title/NMLS stay tight; the phone, email, branch and icon rows below
   are 24px apart (design spec). */
.ldlos-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 24px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 16.8px 1px rgba(0, 0, 0, .12);
    text-align: center;
    transition: box-shadow .18s ease, transform .18s ease;
}

.ldlos-card:hover { box-shadow: 0 8px 26px 1px rgba(80, 18, 131, .18); transform: translateY(-2px); }

/*
 * A card for an officer with no page of their own does not lift on hover.
 *
 * The lift is what tells someone the card is a link. Direct officers have no
 * page to open, so their card is a contact panel: the phone and email inside it
 * are still links and still respond, but the card itself is not one and should
 * not offer to be. Leaving the lift on produces the worst version — it invites
 * a click and then absorbs it.
 */
.ldlos-card--static:hover { box-shadow: none; transform: none; }

.ldlos-card__link--static { cursor: default; }

.ldlos .ldlos-card__link,
.ldlos .ldlos-card__link:link,
.ldlos .ldlos-card__link:visited,
.ldlos .ldlos-card__link:hover,
.ldlos .ldlos-card__link:active,
.ldlos .ldlos-card__link:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: inherit !important;
    text-decoration: none !important;
}

/* Avatar keeps its own breathing room above the name block. */
.ldlos-card__link .ldlos-avatar { margin-bottom: 10px; }

.ldlos-avatar {
    position: relative;
    display: block;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    overflow: hidden;
    background: #d9d9d9;
}

.ldlos-avatar .ldlos-ph,
.ldlos-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ldlos-avatar img { object-fit: cover; }

/* The placeholder is only for "no photo": hidden while a photo is present, or it
   shows through cut-out (transparent PNG) headshots. A photo that fails to load
   removes itself (onerror), which brings the placeholder back. */
.ldlos-avatar:has(img) .ldlos-ph { display: none; }

.ldlos-card__name {
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 16.834px;
    font-style: normal;
    font-weight: 700;
    line-height: 16.834px;
    color: #222;
    text-align: center;
}

/* Job title + NMLS sit right under the name. */
.ldlos-card__role,
.ldlos-card__line {
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 13.467px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.834px;
    color: #222;
    word-break: break-word;
}

/* Phone, email and branch: 24px apart from each other and from the icons. */
.ldlos-card__line { margin: 24px 0 0; }
.ldlos-card__actions { display: flex; gap: 8px; margin-top: 24px; }

.ldlos .ldlos-act,
.ldlos .ldlos-act:link,
.ldlos .ldlos-act:visited,
.ldlos .ldlos-act:active,
.ldlos .ldlos-act:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--ld-purple) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--ld-purple) !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}

.ldlos .ldlos-act:hover { background: var(--ld-purple) !important; color: #fff !important; }

/* Skeletons while a search runs. */
.ldlos-card.is-skeleton { gap: 12px; }
.ldlos-sk {
    display: block;
    width: 70%;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: ldlos-shimmer 1.3s linear infinite;
}
.ldlos-sk--lg { width: 85%; height: 13px; }
.ldlos-sk--sm { width: 50%; }

@keyframes ldlos-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (max-width: 1024px) {
    .ldlos-hero__title { font-size: 44px; }
    .ldlos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* Full-bleed hero: square corners and break out of whatever centred
       container it sits in (the PHP wrapper or an Elementor section). */
    .ldlos-hero {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
        padding: 40px 1.25rem;
        margin-bottom: 32px;
    }

    .ldlos-hero__title { font-size: 32px; }
    .ldlos-hero__text { font-size: 17px; line-height: 25px; }
    .ldlos-search__field { max-width: none; }

    /* Two per row, tightened up — the 24px gaps between lines left the cards
       looking empty once they went full width. */
    .ldlos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .ldlos-card { padding: 16px; }
    .ldlos-avatar { width: 84px; height: 84px; }
    .ldlos-card__link .ldlos-avatar { margin-bottom: 8px; }
    .ldlos-card__line { margin-top: 12px; font-size: 12.5px; line-height: 16px; }
    .ldlos-card__actions { margin-top: 14px; gap: 6px; }
    .ldlos .ldlos-act { width: 30px !important; height: 30px !important; }
}