/* ————————————————————————————
   1. Sheet kontejner: fini gradient i shadow
———————————————————————————— */
.u-section-1 .u-sheet-1 {
  background: linear-gradient(180deg, #FCF8F0 0%, #F6EFE3 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
}

/* ————————————————————————————
   2. Glavni okvir (group‑1) 
———————————————————————————— */
.u-section-1 .u-group-1 {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.75rem;
  padding: 2rem;
  margin: 0 auto 2rem;
  max-width: 900px;
}

/* ————————————————————————————
   3. Naslov usluge
———————————————————————————— */
.u-section-1 .u-group-1 > h2 {
  font-size: 2.5rem;
  color: #B38F4A;           /* brand‑zlatna */
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ————————————————————————————
   4. Blockquote‑uvod
———————————————————————————— */
.u-section-1 .u-container-layout-1 > p:first-of-type {
  border-left: 4px solid #B38F4A;
  padding-left: 1rem;
  margin-bottom: 2rem;
  font-style: italic;
  color: #333;
}

/* ————————————————————————————
   5. Grid layout za stavke
———————————————————————————— */
.u-section-1 ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ————————————————————————————
   6. Card stil za svaki <li>
———————————————————————————— */
.u-section-1 ol li {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.25rem 1rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* hover + focus interakcija */
.u-section-1 ol li:hover,
.u-section-1 ol li:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  outline: none;
}

/* ————————————————————————————
   7. Badge za broj stavke
———————————————————————————— */
.u-section-1 ol li::before {
  content: counter(item) ;
  counter-increment: item;
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: #B38F4A;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
  font-size: 1rem;
}

/* resetiraj brojač na početku liste */
.u-section-1 ol {
  counter-reset: item;
}

/* ————————————————————————————
   8. Tekst unutar stavki
———————————————————————————— */
.u-section-1 ol li strong {
  display: block;
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.5rem;
}

/* ————————————————————————————
   9. Responsivno
———————————————————————————— */

@media (max-width: 767px) {
  .u-text-1:not(footer .u-text-1) {
    font-size: 1.5rem !important;
  }
}


@media (max-width: 768px) {
  .u-section-1 .u-group-1 {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
     text-align: left !important;
  }

.u-section-1 .u-container-layout-1 > p:first-of-type {
    text-align: left !important;
  }

  .u-section-1 ol {
    display: block;
     text-align: left !important;
  }

  .u-section-1 ol li {
    margin-bottom: 1rem;
    width: 100%;
     text-align: left !important;
  }
}