/* index – styles originally embedded in index.php (block 1) */
/* Homepage – výrazný vizuál se skutečným prostředím MC-EKON */
.hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.hero-monitor-image{
  display:block;
  width:100%;
  max-width:575px;
  height:auto;
  filter:drop-shadow(0 24px 32px rgba(20,32,51,.16));
  transform:rotate(1deg);
}

    .product-grid{
      grid-template-columns:repeat(4,1fr);
    }
    .product-card{
      min-height:330px;
    }
    .product-main{
      background:var(--ink);
    }
    .product-card .product-icon{
      position:relative;
    }
    .product-card .product-icon:after{
      content:"";
      position:absolute;
      inset:12px;
      border-radius:4px;
      border:2px solid var(--accent);
      opacity:.9;
    }
    .product-main .product-icon:after{
      border-color:#8bbcff;
    }

    .product-card.product-green .product-icon:after{border-color:#35a77a}
    .product-card.product-purple .product-icon:after{border-color:#8066c9}
    .product-card.product-orange .product-icon:after{border-color:#d8892f}


    .services{
      background:var(--paper);
    }
    .service-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:24px;
    }
    .service-card{
      display:grid;
      grid-template-columns:70px 1fr;
      gap:24px;
      padding:34px;
      border:1px solid rgba(20,32,52,.12);
      border-radius:22px;
      background:#fff;
      box-shadow:0 16px 40px rgba(20,32,52,.06);
    }
    .service-number{
      font-size:14px;
      font-weight:800;
      letter-spacing:.08em;
      color:var(--accent);
    }
    .service-card h3{
      margin:6px 0 12px;
      font-size:30px;
      line-height:1.05;
    }
    .service-card p{
      margin:0 0 22px;
      line-height:1.65;
    }
    .service-card a{
      font-weight:700;
      text-decoration:none;
    }
    .service-card a span{
      margin-left:8px;
    }

    @media(max-width:1050px){
      .product-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:850px){
      .product-grid{grid-template-columns:1fr}
    }

@media(max-width:850px){
  .hero-monitor-image{
    max-width:620px;
    transform:none;
  }
}

/* -------------------------------------------------------------
   Mobilní karusel služeb – vedení účetnictví / zpracování mezd
   Desktop: oba bloky zůstávají vedle sebe bez ovládacích prvků.
   Mobil: bloky se zobrazují po jednom přes scroll-snap karusel.
------------------------------------------------------------- */
.service-carousel-controls {
  display: none !important;
}

@media (max-width: 850px) {
  .service-carousel {
    position: relative;
    min-width: 0;
  }

  .service-carousel .service-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .service-carousel .service-grid::-webkit-scrollbar {
    display: none;
  }

  .service-carousel .service-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .service-carousel-controls {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
  }

  .service-carousel-controls button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 18px rgba(20,32,51,.07);
  }

  .service-carousel-controls button:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .service-carousel-controls button:disabled {
    opacity: .35;
    cursor: default;
  }

  .service-carousel-dots {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .service-carousel-dots span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccd3dd;
    transition: .2s ease;
  }

  .service-carousel-dots span.is-active {
    width: 18px;
    border-radius: 999px;
    background: var(--accent);
  }
}

/* MC-SPEDICE – přímý odkaz v přehledu dalších řešení */
.more-products .product-link-pill{border-color:#0b63ce;color:#0b63ce}
.more-products .product-link-pill:hover{background:#0b63ce;color:#fff}