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


:root{
  --accent: #edde00;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-hover: #F8F9FA;
  --text: #000000;

  --radius: 0px;
  --tag-radius: 8px;

  /* jemný rámeček odvozený z #F8F9FA */
  --border: #E9ECEF; /* velmi blízko #F8F9FA, ale viditelný */
  --gap: 14px;
}

.effects{
  background: var(--bg);
  color: var(--text);

  /* kratší okraj shora i zespodu */
  padding-top: 16px;
  padding-bottom: 24px;

  /* pokud máte někde margin na sekci */
  margin: 0;
}

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

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(5, minmax(0, 1fr));

  /* důležité: karty se natáhnou na výšku řádku */
  align-items: stretch;
}

/* Card */
.effect-card{
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);

  /* místo stínu jemný rámeček */
  border: 1px solid var(--border);
  box-shadow: none;

  padding: 12px;
  display: flex;
  flex-direction: column;

  transition: background-color .16s ease, border-color .16s ease;
}

.effect-card:hover{
  background: var(--panel-hover);
  border-color: #DEE2E6; /* o chlup výraznější při hoveru */
}

/* Dot bottom-right */
.effect-dot{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

/* Tag */
.effect-tag{
  display: inline-flex;
  align-items: center;
  width: fit-content;

  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;

  padding: 6px 10px;
  border-radius: var(--tag-radius);

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

  margin-bottom: 10px;
}

/* Text */
.effect-text{
  margin: 0;

  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(0,0,0,.78);

  padding-right: 18px; /* space for dot */
  padding-bottom: 2px;
}

/* Safety override ("jistič") */
.effect-card .effect-text{
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* === Centering helper: 3 karty uprostřed v 5sloupcové mřížce === */
/* Použijte na gridu třídu: effects__grid effects__grid--center-3 */
.effects__grid--center-3 .effect-card:nth-child(1){ grid-column: 2; }
.effects__grid--center-3 .effect-card:nth-child(2){ grid-column: 3; }
.effects__grid--center-3 .effect-card:nth-child(3){ grid-column: 4; }

/* Na menších šířkách to vrátíme do přirozeného toku */
@media (max-width: 1100px){
  .effects__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .effects__grid--center-3 .effect-card:nth-child(1),
  .effects__grid--center-3 .effect-card:nth-child(2),
  .effects__grid--center-3 .effect-card:nth-child(3){
    grid-column: auto;
  }
}
@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; }
}