/* === Bloky služeb dlaždice === */


:root{
  --accent: #edde00;
  --bg: #F8F9FA;
  --text: #000;
  --card: #fff;

  /* nadčasové parametry */
  --radius: 0px;            /* hranaté */
  --shadow: 0 10px 26px rgba(0,0,0,.08);
  --shadow-hover: 0 14px 34px rgba(0,0,0,.12);
}

.effects{
  background: var(--bg);
  padding: clamp(20px, 4vw, 56px);
  color: var(--text);
}

.effects__grid{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  gap: 14px;

  /* Cíl: 10 bloků = 2 řady po 5 (když se vejdou).
     Na menších šířkách se to automaticky přepne na 4/3/2. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.effect-card{
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;

  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;

  transition: transform .16s ease, box-shadow .16s ease;
}

.effect-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* žlutá tečka (bez šedého okraje) */
.effect-dot{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

/* štítek */
.effect-tag{
  display: inline-flex;
  align-items: center;
  width: fit-content;

  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(237,222,0,.22);
  color: var(--text);
}

/* krátký efekt — žádný brutální bold */
.effect-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(0,0,0,.88);
}

/* Responsive: když se 5 sloupců nevejde */
@media (max-width: 1100px){
  .effects__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .effects__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .effects__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .effects__grid{ grid-template-columns: 1fr; }
}