/* ==========================================================================
   Método — Inspeção Técnica + Galeria mosaic
   ========================================================================== */

.metodo-inspecao {
    background: var(--color-white);
    padding: var(--section-pad-md) 0 var(--section-pad-xl);
}

.metodo-inspecao__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 42vw, 576px));
    gap: clamp(32px, 2.5vw, 48px);
    align-items: flex-start;
}

.metodo-inspecao__content { max-width: min(100%, clamp(320px, 52vw, 720px)); }

.metodo-inspecao__label {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.63vw, 12px);
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #212121;
    margin-bottom: clamp(6px, 0.42vw, 8px);
}

.metodo-inspecao__line {
    width: var(--line-width);
    height: 0;
    border-top: 1px solid var(--color-primary);
    flex-shrink: 0;
}

.metodo-inspecao__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-section-lg);
    line-height: 1.2;
    color: #212121;
    margin-bottom: clamp(16px, 1.25vw, 24px);
}

.metodo-inspecao__paragraph {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #454545;
    margin-bottom: var(--gap-content);
}

.metodo-inspecao__paragraph:last-child { margin-bottom: 0; }

/* ===== Mosaico (7 fotos + linhas de conexão) ===== */

.metodo-inspecao__mosaic {
    position: relative;
    width: 100%;
    max-width: clamp(280px, 42vw, 576px);
    aspect-ratio: 576 / 538;
    margin-left: auto;
    --cut: clamp(30px, 3.9vw, 75px);
    clip-path: polygon(
        var(--cut) 0,
        calc(100% - var(--cut)) 0,
        100% var(--cut),
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        var(--cut) 100%,
        0 calc(100% - var(--cut)),
        0 var(--cut)
    );
}

.metodo-inspecao__tile {
    position: absolute;
    display: block;
    object-fit: cover;
    border-radius: clamp(4px, 0.31vw, 6px);
    z-index: 1;
}

/* Coordenadas extraídas do frame Figma 14973:6986 (576×538) */
.metodo-inspecao__tile--tl { left:  0.69%; top:  1.86%; width: 48.61%; height: 44.61%; }
.metodo-inspecao__tile--tr { left: 50.87%; top:  1.86%; width: 48.44%; height: 44.61%; }
.metodo-inspecao__tile--ml { left:  0.69%; top: 47.96%; width: 32.64%; height: 23.79%; }
.metodo-inspecao__tile--c  { left: 34.90%; top: 47.96%; width: 29.17%; height: 50.19%; z-index: 2; }
.metodo-inspecao__tile--mr { left: 65.63%; top: 47.96%; width: 33.68%; height: 23.79%; }
.metodo-inspecao__tile--bl { left:  0.69%; top: 73.42%; width: 32.64%; height: 24.72%; }
.metodo-inspecao__tile--br { left: 65.63%; top: 73.42%; width: 33.68%; height: 24.72%; }

/* Linhas de conexão — dimensões fluidas (Figma), z-index abaixo das fotos */
.metodo-inspecao__link {
    position: absolute;
    width: clamp(6px, 0.47vw, 9px);
    height: clamp(82px, 6.46vw, 124px);
    background: var(--color-primary, #EF8619);
    border-radius: clamp(1px, 0.1vw, 2px);
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.metodo-inspecao__link--top {
    left: 50.085%;
    top: 24.16%;
}

.metodo-inspecao__link--right {
    background: #155EEF;
    width: clamp(83px, 6.51vw, 125px);
    height: clamp(6px, 0.47vw, 9px);
    left: 82.55%;
    top: 47.21%;
}

.metodo-inspecao__link--bottom {
    left: 34.11%;
    top: 73.05%;
}

@media (max-width: 1024px) {
    .metodo-inspecao { padding: var(--section-pad-md) 0 var(--section-pad-lg); }
    .metodo-inspecao__inner {
        grid-template-columns: 1fr;
        gap: clamp(32px, 2.5vw, 40px);
    }
    .metodo-inspecao__content { max-width: 100%; }
    .metodo-inspecao__mosaic {
        width: 100%;
        max-width: min(100%, 576px);
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .metodo-inspecao { padding: clamp(36px, 2.6vw, 40px) 0 clamp(48px, 3.65vw, 56px); }
    .metodo-inspecao__mosaic {
        width: calc(100% + clamp(16px, 4vw, 32px));
        max-width: min(100vw, 520px);
        margin-left: calc(-1 * clamp(8px, 2vw, 16px));
        margin-right: calc(-1 * clamp(8px, 2vw, 16px));
        --cut: clamp(20px, 4.8vw, 32px);
    }
}