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

.metodo-inspecao {
    background: var(--color-white);
    padding: 64px 0 96px;
}

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

.metodo-inspecao__content { max-width: 640px; }

.metodo-inspecao__label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    color: #212121;
    margin-bottom: 8px;
}

.metodo-inspecao__line {
    width: 64px;
    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: 32px;
    line-height: 1.2;
    color: #212121;
    margin-bottom: 24px;
}

.metodo-inspecao__paragraph {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 170%;
    color: #454545;
    margin-bottom: 16px;
}

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

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

.metodo-inspecao__mosaic {
    position: relative;
    width: 100%;
    max-width: 576px;
    aspect-ratio: 576 / 538;
    margin-left: auto;
    /* cortes diagonais em cada uma das 4 extremidades */
    --cut: 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: 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 fixas (Figma), z-index abaixo das fotos */
.metodo-inspecao__link {
    position: absolute;
    width: 9px;
    height: 124px;
    background: var(--color-primary, #EF8619);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* Laranja vertical entre as 2 fotos de cima (encaixa no vão entre tl e tr) */
.metodo-inspecao__link--top {
    left: 50.085%;
    top: 24.16%;
}

/* Azul horizontal entre a foto superior direita (tr) e a foto logo abaixo (mr) */
.metodo-inspecao__link--right {
    background: #155EEF;
    width: 125px;
    height: 9px;
    left: 82.55%;
    top: 47.21%;
}

/* Laranja vertical alinhado ao centro vertical da foto central (tile--c) */
.metodo-inspecao__link--bottom {
    left: 34.11%;
    top: 73.05%;   /* centro vertical de c: (top 47.96% + height 50.19%/2) */
}

@media (max-width: 768px) {
    .metodo-inspecao__link { width: 6px; height: 82px; }
    .metodo-inspecao__link--right { width: 83px; height: 6px; }
}

@media (max-width: 1024px) {
    .metodo-inspecao { padding: 48px 0 72px; }
    .metodo-inspecao__inner { grid-template-columns: 1fr; gap: 40px; }
    .metodo-inspecao__content { max-width: 100%; }
    .metodo-inspecao__title { font-size: 28px; }
    .metodo-inspecao__mosaic { margin: 0 auto; }
}

@media (max-width: 768px) {
    .metodo-inspecao { padding: 40px 0 56px; }
    .metodo-inspecao__title { font-size: 24px; }
    .metodo-inspecao__mosaic { --cut: 30px; }
}