/* ==========================================================================
   TimLuks – services.css
   Sekcia „Naše zameranie“ (#sluzby): nadpis + krátky úvodný text (obidva na stred),
   pod nimi šesť menších kartičiek služieb (3×2 na desktope) – jednoduché matné
   kartičky bez ikon a bez dekoratívnych tvarov na pozadí (na výslovnú žiadosť,
   pôvodne tam boli aj obe). Kartičky sledujú tmavý/svetlý režim (base.css).
   ========================================================================== */

.section--services {
  position: relative;
}

/* Krátky úvodný text pod nadpisom sekcie – na stred, spolu s nadpisom (.section__title nižšie). */
.section--services .section__title {
  text-align: center;
}

.services__lead {
  max-width: 46em;
  margin-top: calc(clamp(28px, 4vw, 56px) * -1 + 14px);   /* pritiahne text bližšie k nadpisu než default u section__title */
  margin-inline: auto;      /* na stred, keďže má max-width */
  margin-bottom: clamp(36px, 5vw, 64px);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  text-align: center;
  color: var(--muted);
}

/* ---------- Kartičky ---------- */

/* Šesť kartičiek: 1 stĺpec na mobile, 2 na tablete, 3 (2 riadky) na desktope – pozri media queries nižšie.
   Na mobile je stĺpec `1fr` široký a `justify-items: center` drží v ňom užšiu kartičku (.card má
   max-width) na strede. Od 560px hore majú stĺpce PEVNÚ šírku presne rovnú max-width kartičky –
   vďaka tomu ležia kartičky skutočne vedľa seba (oddeľuje ich len `gap`, nie prázdny zvyšok stĺpca)
   a `justify-content: center` centruje celú (užšiu než kontajner) mriežku ako celok. */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(8px, 1vw, 12px);   /* kartičky bližšie k sebe (na výslovnú žiadosť, pôvodne clamp(14px,1.8vw,20px)) */
}

@media (min-width: 560px) {
  .services__grid { grid-template-columns: repeat(2, 320px); justify-content: center; }
}
@media (min-width: 900px) {
  .services__grid { grid-template-columns: repeat(3, 320px); }
}

/* Užšie a vyššie kartičky (na výslovnú žiadosť) – obmedzená šírka + výrazne väčšie zvislé
   odsadenie než vodorovné. Matné/plné pozadie (nie priesvitné) – pôvodne mali `rgba(...,0.6)` + blur. */
.card {
  width: 100%;
  max-width: 320px;   /* trochu širšie (na výslovnú žiadosť, pôvodne 280px) – stĺpce mriežky vyššie musia mať rovnakú šírku */
  padding: clamp(32px, 4.5vw, 52px) clamp(16px, 1.6vw, 20px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);   /* plné/matné, len jemne odlíšené od pozadia sekcie */
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (hover: hover) {
  .card:hover {
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-4px);
  }
}

/* Kartička „Podpora a údržba" má zelený okraj natrvalo (rovnaká farba ako :hover u ostatných). */
.card--accent {
  border-color: rgba(var(--accent-rgb), 0.55);
}

.card__title {
  margin-bottom: 6px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);   /* väčšie nadpisy kartičiek (na výslovnú žiadosť, pôvodne 1.05rem) */
  font-weight: 700;
}

.card__text {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}


/* Kartičky sú odkazy na podstránky (<a class="card">) – vzhľad ostáva rovnaký ako pri <article>;
   fokus z klávesnice len zachová zaoblenie kartičky (base.css by mu pri :focus-visible dalo 4px). */
a.card { display: block; color: inherit; }
a.card:focus-visible { border-radius: var(--radius); }