/* JA — tiles, grids, checklists, quotes, breadcrumb, appraiser cards */

/* Grids */
.ja-grid { display: grid; gap: var(--ja-gap-cards); }
.ja-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ja-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Figma: 3×400 + 2×10 = 1220 */
.ja-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Tile — fill-only card. Figma strokes ONLY the stuck/scope cards (which sit
   white-on-white and need the edge); Fees / Specialists / Communication are
   fill-only, so the border is re-added per-section below. */
.ja-tile {
    background: var(--ja-white);
    border: 0;
    border-radius: var(--ja-radius-tile);
    padding: 30px;
    position: relative;
}
.ja-stuck .ja-tile,
.ja-scope .ja-tile { border: 1px solid var(--ja-line-warm); }
/* Stuck "Body Text Block" cards (Figma EL-9a5a7a18): padding 50px, kick→body
   gap 14px, label 16px/700/0.0112em — scoped so fees/specialists keep the
   global 30px tile padding. */
.ja-stuck .ja-tile { padding: 50px; }
.ja-stuck .ja-tile__kick { font-size: 16px; font-weight: 700; letter-spacing: 0.0112em; margin-bottom: 14px; }
/* Figma specialists cards are the smaller 290×320 radius-20 variant. */
.ja-specialists .ja-tile { border-radius: var(--ja-radius-tile-sm); }
/* Kick ports .title_label (style.css:143-152): blue 14px / 900 / 1.12px /
   uppercase. Reaches every tile on all 3 JA templates. */
.ja-tile__kick {
    font-family: var(--ja-font-sans);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    color: var(--ja-blue);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ja-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: none;
    display: block;
}
/* Body — Figma spec: 16px / 500 / 22.5px / -0.04em / ink */
.ja-tile__body { font-size: 16px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.04em; color: var(--ja-ink); margin: 0; }
.ja-tile .ja-checks { margin-top: 8px; }

/* Centered icon tiles — port deep_expertise tile (style.css:2496-2510).
   Specialists is the only section still emitting .ja-tile__icon
   (Communication moved to .ja-comm__card — see ja-comm.css). Icon is a
   sibling <img> stacked above the kick, so centering is pure CSS. */
.ja-specialists .ja-tile { text-align: center; padding: 50px 15px 35px; }
.ja-specialists .ja-tile__icon { width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 0; }
.ja-specialists .ja-tile__kick { justify-content: center; }

/* Check / X lists — real theme icon assets (not data-URI hexes) */
.ja-checks { list-style: none; margin: 0; padding: 0; }
.ja-checks li {
    position: relative;
    padding-left: 38px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ja-ink);
    margin-bottom: 14px;
}
.ja-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    background: url("../../images/Icons/ico-check.svg") center/contain no-repeat;
}
.ja-checks--xs li::before {
    background: url("../../images/Icons/uncheck.svg") center/contain no-repeat;
}

/* Stuck compare split lists use simple arrow markers per Figma (#2546:1171) */
.ja-stuck__compare .ja-checks li::before {
    top: 6px;
    width: 16px;
    height: 10px;
    background: url("../../images/Icons/ico-arrow.svg") center/contain no-repeat;
}

/* Quote — white card + real quote glyph asset. Ports the JustClaims white
   quote card (style.css:1199-1233): 24px radius, 55px 30px padding,
   19px/150% text, blue 14/900/1.12px uppercase attribution. */
.ja-quote {
    background: var(--ja-white);
    border: 1px solid var(--ja-line);
    border-radius: var(--ja-radius-card);
    padding: 55px 30px;
    position: relative;
}
.ja-quote::before {
    content: "";
    display: block;
    width: 29px;
    height: 24px;
    background: url("../images/Icons/ico-quote.svg") center/contain no-repeat;
    margin-bottom: 18px;
}
.ja-quote__text { font-family: var(--ja-font-serif); font-weight: 400; font-size: 19px; line-height: 150%; color: var(--ja-ink); margin: 0 0 14px; }
.ja-quote__who { font-size: 14px; font-weight: 900; letter-spacing: 1.12px; text-transform: uppercase; color: var(--ja-blue); margin: 0; }

/* Breadcrumb */
.ja-breadcrumb { margin-bottom: 18px; }
.ja-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 14px; }
.ja-breadcrumb__item a { color: var(--ja-blue); text-decoration: none; }
.ja-breadcrumb__item.is-current { color: var(--ja-ink-3); }
.ja-breadcrumb__sep { color: var(--ja-ink-3); }

/* Appraiser card */
.ja-appraiser { background: var(--ja-white); border: 1px solid var(--ja-line); border-radius: var(--ja-radius-card); padding: 24px; }
.ja-appraiser__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ja-radius-img); margin-bottom: 14px; }
.ja-appraiser__name { font-family: var(--ja-font-serif); font-weight: 400; font-size: 20px; color: var(--ja-ink); margin: 0 0 4px; }
.ja-appraiser__role { font-size: 14px; font-weight: 600; color: var(--ja-blue); margin: 0 0 8px; }
.ja-appraiser__bio { font-size: 14.5px; color: var(--ja-ink-2); margin: 0; }

/* Image placeholder */
.ja-ph { background: var(--ja-cream); border: 1px dashed var(--ja-line); border-radius: var(--ja-radius-img); aspect-ratio: 4/3; }
.ja-ph--sq { aspect-ratio: 1; }
.ja-ph--wide { aspect-ratio: 4/3; }

/* Section heads — blocks on shared/section-head.php use .ja-shead instead. */
.ja-stuck__head, .ja-scope__head, .ja-specialists__head,
.ja-different__head, .ja-disputes__head, .ja-proof__head, .ja-how__head,
.ja-fees__head, .ja-faq__head, .ja-model__head, .ja-state-cards__head { margin-bottom: 44px; }

.ja-stuck__costs { margin-bottom: 52px; }
.ja-stuck__compare-heading { margin-bottom: 28px; }
.ja-scope__footnote { max-width: 70ch; margin: 26px auto 0; font-size: 16px; color: var(--ja-ink-2); }
.ja-disputes__cols { gap: 48px; }
.ja-disputes__body p { font-size: 16px; line-height: 1.6; color: var(--ja-ink-2); }

/* Split panel — filled left, bordered right, panels touch. Surface-inverse:
   the fill flips with the section surface (stuck → cream, scope → white).
   Both panels are flex columns so their checklists space-distribute over the
   shared height — no empty tail on the shorter list. */
.ja-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ja-split > div { padding: 50px 60px; display: flex; flex-direction: column; }
.ja-split .ja-checks { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; flex: 1; }
.ja-split .ja-checks li { margin-bottom: 0; }
.ja-split > div:first-child { background: var(--ja-cream); border-radius: 30px 0 0 30px; }
.ja-split > div + div { border: 1px solid var(--ja-line-warm); border-left-width: 0; border-radius: 0 30px 30px 0; }
.ja-scope .ja-split > div:first-child { background: var(--ja-white); }

/* About block — user-directed 1:1 match to Figma "About Us Block" (#2564:1146).
   Overrides two deliberate global deviations for THIS block only:
     • Hero Block: row, gap 120px, alignItems center.
     • Header Text: column gap 14px (eyebrow → H2 → body).
     • Labels (1973:2001): DM Sans 700 / 16px / 0.0112em / UPPER / #4768DA.
     • H2 (1973:1995): Hedvig 400 / 48px / -0.04em / #03002F (line-height auto).
     • Body (1973:2000): DM Sans 500 / 16px / 22.5px / -0.04em / #03002F;
       Figma separates paragraphs with \n\n = one blank line ≈ 22.5px. */
.ja-about__grid { gap: 120px; margin-bottom: 44px; align-items: center; }
.ja-about .ja-eyebrow { letter-spacing: 0.0112em; margin: 0 0 14px; }
.ja-about .ja-h2 { letter-spacing: -0.04em; line-height: normal; margin: 0 0 14px; }
.ja-about .ja-about__body p {
    font-family: var(--ja-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.04em;
    color: var(--ja-ink);
    margin: 0;
}
.ja-about .ja-about__body p + p { margin-top: 22.5px; }
.ja-about__img { margin-bottom: 24px; }
.ja-about__fact { padding: 20px; }

/* Cream separator: the About white block must breathe apart from the FAQ
   band above it.
   GAP REMOVED: the 96px margin leaked the page body's cream background in a
   visible band between the FAQ navy section and this white section. Section
   padding alone now separates them. */

/* No-image pill column: facts render as a 2×2 grid of bordered pills. The
   extra .ja-about section context keeps this rule above fork style.css. */
.ja-about .ja-about__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.ja-about .ja-about__facts .ja-about__fact { padding: 32px 24px 26px; }
.ja-about .ja-about__facts .ja-tile__kick { margin-bottom: 12px; font-size: 17px; font-weight: 700; color: var(--ja-ink); }
.ja-about .ja-about__facts .ja-tile__body { font-size: 16px; color: var(--ja-ink-2); }
.ja-about__appraisers .ja-h3 { margin-bottom: 20px; }

.ja-locations__grid { gap: 64px; align-items: center; }
.ja-locations__placeholder { background: var(--ja-cream); border: 1px solid var(--ja-line); border-radius: var(--ja-radius-card); aspect-ratio: 570/528; }
.ja-locations__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ja-locations__also { margin-top: 22px; font-size: 15.5px; color: var(--ja-ink-2); }

.ja-model__block { margin-bottom: 32px; margin-inline: auto; max-width: 76ch; text-align: center; }
.ja-model__body p { font-size: 16px; line-height: 1.65; color: var(--ja-ink-2); }
.ja-state-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ja-state-card__name { font-family: var(--ja-font-serif); font-weight: 400; font-size: 24px; color: var(--ja-ink); margin: 0 0 10px; }
.ja-state-card .ja-tile__icon { margin: 0 auto 18px; }
/* Equal-height cards (grid stretch) + flex column: the body's bottom margin
   keeps a 16px floor; the link's auto margin pins it to each card's bottom,
   whatever the blurb length. */
.ja-state-card .ja-tile__body { margin-bottom: 16px; }
.ja-state-card__link { margin-top: auto; }

/* Standalone intake card on /locations/: constrain to a single narrow
   column and center it within the cream band. */
.ja-coverage-form__inner { max-width: 560px; margin-inline: auto; }
.ja-states-list__line { font-size: 16px; line-height: 1.7; color: var(--ja-ink-2); }

.ja-proof-local__grid { gap: 56px; }
.ja-proof-local__appraisers { margin-top: 20px; }
.ja-proof-local__quote { margin-bottom: 24px; }

@media (max-width: 960px) {
	.ja-grid--2, .ja-grid--3, .ja-grid--4 { grid-template-columns: 1fr; }
	.ja-tile { padding: 24px; }
	.ja-specialists .ja-tile { padding: 20px; }
	.ja-specialists .ja-tile__icon { width: 30px; height: 30px; }
	.ja-quote { padding: 32px 24px; }
	.ja-split { grid-template-columns: 1fr; }
	.ja-split > div { padding: 28px; }
	.ja-split > div:first-child { border-radius: 30px 30px 0 0; }
	.ja-split > div + div { border-left: 1px solid var(--ja-line-warm); border-top-width: 0; border-radius: 0 0 30px 30px; }
	.ja-scope__cols, .ja-disputes__cols, .ja-about__grid, .ja-locations__grid, .ja-proof-local__grid { grid-template-columns: 1fr; gap: 32px; }
	/* Mobile CTA buttons: center under the locations copy. */
	.ja-locations__actions { justify-content: center; }
}