/* ======================================================
   CBA Cloud – Serviços
   Paleta castanho quente (primary) + cinzas e off-white
   ====================================================== */

:root{
  --primary:       #8B5D3E;  /* castanho canela – cor de destaque   */
  --primary-dark:  #6E4930;  /* tom mais escuro para hover/focus    */
  --primary-light: #F5EEE9;  /* subtom claro (fundos suaves)        */
  --grey-700:      #212529;  /* texto principal                     */
  --grey-500:      #6C757D;  /* texto secundário                    */
  --shadow:        0 10px 20px rgba(0,0,0,.1);
}

/* ---------- BLOCOS E LAYOUT GERAL ---------- */
.service-block{
  padding: 5rem 0;
  background-color: #f8f9fa;          /* mantém o cinza muito claro */
  overflow-x: hidden;
  overflow-x: clip;
}

.service-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.service-container.reverse{
  flex-direction: row-reverse !important;
}

/* ---------- IMAGEM & BLOB ---------- */
.service-image{
  position: relative;
  flex: 1 1 300px;
  max-width: 400px;
  min-width: 0;
}

.service-image picture{
  display: block;
}

.service-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow);
}

.service-blob{
  position: absolute;
  top: 10%;
  left: 10%;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 2rem;
  z-index: 1;
}

/* ---------- TEXTO --------- */
.service-text{
  flex: 1 1 300px;
  max-width: 600px;
  min-width: 0;
  overflow-wrap: break-word;
}

.service-label{
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: .05em;
  font-size: .9rem;
}

.service-text h2{
  font-size: 2rem;
  font-weight: 700;
  margin: .5rem 0;
}

.service-text p{
  color: var(--grey-500);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ---------- LINK “Saiba Mais” ---------- */
.service-link{
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  transition: color .2s ease;
}

.service-link:hover{
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ======================================================
   LISTA MODERNA COM CHECK
   ====================================================== */
.service-copy ul{
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.service-copy li{
  position: relative;
  padding-left: 2.2rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--grey-700);
}

/* círculo + check em castanho */
.service-copy li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--primary);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.75 10.16 3.2 7.6a.75.75 0 0 1 1.06-1.06l1.49 1.49 4.99-4.99a.75.75 0 0 1 1.06 1.06L5.75 10.16Z' fill='%23fff'/%3E%3C/svg%3E") center / 70% 70% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.75 10.16 3.2 7.6a.75.75 0 0 1 1.06-1.06l1.49 1.49 4.99-4.99a.75.75 0 0 1 1.06 1.06L5.75 10.16Z' fill='%23fff'/%3E%3C/svg%3E") center / 70% 70% no-repeat;
}

/* Sub-títulos dentro da cópia (“O que fazemos”, “Benefícios”, etc.) */
.service-copy strong{
  display: block;
  margin: .75rem 0 .25rem;
  color: var(--primary);
  font-weight: 700;
}

/* ---------- versão 2 colunas (opcional) ---------- */
@media (min-width: 992px){
  .service-copy ul.columns-2{
    column-count: 2;
    column-gap: 2rem;
  }
}

/* Stack every service consistently on tablets and phones. The image remains
   first in the DOM, while the alternating desktop layout is kept above. */
@media (max-width: 991.98px){
  .service-block{
    padding: 3.5rem 0;
  }

  .service-block .container{
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .service-container,
  .service-container.reverse{
    flex-direction: column !important;
    align-items: stretch;
    gap: 2.75rem;
  }

  .service-image{
    flex: none;
    width: calc(100% - 1rem);
    max-width: 400px;
    margin-right: 1rem;
    align-self: center;
  }

  .service-blob{
    top: 1rem;
    left: 1rem;
  }

  .service-text{
    flex: none;
    width: 100%;
    max-width: none;
    padding-left: 0;
  }
}

@media (max-width: 575.98px){
  .service-block{
    padding: 3rem 0;
  }

  .service-container,
  .service-container.reverse{
    gap: 2.25rem;
  }

  .service-text h2{
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  .service-text p,
  .service-copy li{
    font-size: 1rem;
  }
}