/* ==========================================================================
   Compostos Especiais — faixa clara "Tipos de borracha" e galeria de fotos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Faixa full-width (100vw)

   `.service-main-box` usa `overflow: hidden` só para recortar a imagem de
   destaque no seu `border-radius: 24px` — e esse recorte impedia a faixa de
   sangrar. Aqui o overflow é liberado (apenas nesta página, via
   `.tb-page-fullbleed`) e o raio passa para a própria imagem, preservando o
   visual do card.

   A largura desconta a barra de rolagem: `100vw` a inclui, o que deixaria a
   faixa deslocada. `--tb-sb` é medido em JS; sem ele, cai em 0px.
   -------------------------------------------------------------------------- */

.tb-page-fullbleed .service-main-box {
    overflow: visible;
}

.tb-page-fullbleed .service-feature-image {
    border-radius: 24px 24px 0 0;
}

.tb-compostos-band {
    --tb-bleed: calc(100vw - var(--tb-sb, 0px));
    position: relative;
    width: var(--tb-bleed);
    margin-left: calc(50% - var(--tb-bleed) / 2 - var(--tb-off, 0px));
    margin-right: calc(50% - var(--tb-bleed) / 2 + var(--tb-off, 0px));
    padding: 58px 0 62px;
    background:
        radial-gradient(90% 120% at 8% 0%, rgba(153, 206, 42, .14) 0%, rgba(153, 206, 42, 0) 55%),
        radial-gradient(70% 100% at 100% 100%, rgba(27, 76, 154, .09) 0%, rgba(27, 76, 154, 0) 60%),
        linear-gradient(180deg, #ffffff 0%, #f4f7f0 100%);
    border-top: 1px solid #e6ebe1;
    border-bottom: 1px solid #e6ebe1;
    position: relative;
    overflow: hidden;
}

/* Traço de acento no topo da faixa */
.tb-compostos-band::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #99ce2a, #7bb82a 40%, rgba(27, 76, 154, .45));
}

.tb-compostos-inner {
    max-width: 1660px;
    margin: 0 auto;
    padding: 0 clamp(18px, 3vw, 44px);
}

/* ---- Cabeçalho ---- */

.tb-compostos-header {
    max-width: 780px;
    margin-bottom: 32px;
}

.tb-compostos-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7bb82a;
    margin-bottom: 12px;
}

/* style.css força `h1..h6 { font-size: 30px !important }` */
.tb-compostos-titulo {
    font-size: clamp(24px, 2.6vw, 34px) !important;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
    margin: 0 0 14px;
}

/* Título numa linha só: escapa do max-width do cabeçalho (que segue valendo
   para o texto de apoio). No celular não cabe e volta a quebrar. */
@media (min-width: 768px) {
    .tb-compostos-titulo {
        white-space: nowrap;
        width: max-content;
        max-width: none;
    }
}

.tb-compostos-intro {
    font-size: 15.5px;
    line-height: 1.75;
    color: #5a6076;
    margin: 0;
}

/* ---- Grade dos compostos ----
   Flex com quebra e centralização. --tb-comp-cols define quantos cards por
   linha: 5 no desktop (os 10 compostos em 2 linhas iguais), 4 e 3 em telas
   médias — a última linha incompleta fica centralizada, não colada à
   esquerda — e 2 no celular. */
.tb-compostos-grid {
    --tb-comp-gap: 14px;
    --tb-comp-cols: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tb-comp-gap);
    align-items: stretch;
}

.tb-comp-card {
    flex: 0 0 calc((100% - (var(--tb-comp-cols) - 1) * var(--tb-comp-gap)) / var(--tb-comp-cols));
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ebe1;
    border-radius: 14px;
    padding: 18px 17px 15px;
    box-shadow: 0 4px 14px rgba(21, 28, 40, .05);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, border-color .3s ease;
}

.tb-comp-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, #99ce2a, #7bb82a);
    opacity: 0;
    transition: opacity .3s ease;
}

.tb-comp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(21, 28, 40, .11);
    border-color: rgba(151, 209, 50, .5);
}

.tb-comp-card:hover::before {
    opacity: 1;
}

/* ---- Cabeçalho do card: sigla ISO + nome ---- */

.tb-comp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    min-height: 24px;
}

.tb-comp-sigla {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 21px;
    padding: 0 7px;
    border-radius: 6px;
    background: rgba(153, 206, 42, .13);
    border: 1px solid rgba(153, 206, 42, .3);
    color: #5f8f14;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
}

.tb-comp-nome {
    font-size: 14.5px !important;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a2e;
    margin: 0;
}

/* Nome secundário, ex.: "SBR (Estireno-Butadieno)" */
.tb-comp-nome span {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #8189a0;
    letter-spacing: .01em;
    margin-top: 2px;
}

.tb-comp-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: #5a6076;
    margin: 0 0 13px;
}

/* ---- Tipos de peça como chips ---- */

.tb-comp-pecas {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed #e2e7dd;
}

.tb-comp-pecas-rotulo {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #9aa1b4;
    margin-bottom: 8px;
}

.tb-comp-pecas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-comp-pecas li {
    font-size: 10.5px;
    line-height: 1.25;
    color: #4a4f66;
    background: #f4f6f1;
    border: 1px solid #e6ebe1;
    border-radius: 16px;
    padding: 4px 9px;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.tb-comp-card:hover .tb-comp-pecas li {
    background: rgba(153, 206, 42, .09);
    border-color: rgba(153, 206, 42, .26);
    color: #3d4257;
}

@media (max-width: 1099px) {
    .tb-compostos-grid { --tb-comp-cols: 4; }
}

@media (max-width: 899px) {
    .tb-compostos-grid { --tb-comp-cols: 3; }
}

@media (max-width: 767px) {
    .tb-compostos-band {
        padding: 54px 0 58px;
    }

    .tb-compostos-header {
        margin-bottom: 30px;
    }

    /* 2 por linha: 10 compostos em 5 linhas completas */
    .tb-compostos-grid {
        --tb-comp-gap: 12px;
        --tb-comp-cols: 2;
    }

    .tb-comp-card {
        padding: 16px 15px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb-comp-card,
    .tb-comp-card::before,
    .tb-comp-pecas li {
        transition: none;
    }
}

/* Duotec: foto horizontal ocupando a largura toda + duas verticais lado a lado */
.tb-duotec-grid .tb-feature-media-item {
    min-height: 0;
    aspect-ratio: 3 / 4;
}

.tb-duotec-grid .tb-feature-media-item.is-largo {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

/* Nas verticais a chapa fica no terço inferior da foto */
.tb-duotec-grid .tb-feature-media-item:not(.is-largo) img {
    object-position: center 72%;
}

@media (max-width: 767px) {
    /* diferenciais.css empilha .cols-2 no mobile; aqui as verticais seguem lado a lado */
    .tb-feature-media-grid.cols-2.tb-duotec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}