/* ══ HERO ACTIONS + KAFELKI — styl "płaski z cienką ramką" (milo 2026-09-29) ══
   Milo: "tak delikatnie sie podnosi, moze byc jakas cieniutka ramka czarna
   przykladowo, takie podkreslenie, ale nie takie wypukle buttony"

   CO USUNIĘTE (dawało efekt wypukłości):
   - box-shadow rozpraszający (0 6px 18px …) — świecąca aureola pod spodem
   - ::before z inset 0 1px 0 rgba(255,255,255,.55) — biały highlight u góry
   - translateY(-2px) — za mocne podniesienie

   CO ZOSTAJE:
   - cienka ramka 1px (czarna/atramentowa) — "podkreślenie" zamiast cienia
   - delikatne podniesienie 1px
   - ramka ciemnieje przy hoverze
*/

/* ══ PASKI POD HERO (pełna szerokość) ══ */
.hero-actions-full{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  width:100%;
  margin:0;
  padding:0 0 8px;
}

.hero-actions-full .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:68px;
  padding:0 30px;
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-.02em;
  border-radius:14px;
  border:1px solid rgba(24,34,31,.55);      /* CIENKA ramka — podkreślenie */
  box-shadow:none;                           /* zero wypukłości */
  position:relative;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}

/* delikatne podniesienie — 1px, spokojnie */
.hero-actions-full .btn:hover{
  transform:translateY(-1px);
  border-color:var(--ink);                   /* ramka ciemnieje = "podkreślenie" */
}

/* ── PASEK 1: główny ── */
.hero-actions-full .btn-primary{
  background:var(--green);
  color:#fff;
  border-color:rgba(255,255,255,.28);        /* na ciemnym tle jasna ramka */
}
.hero-actions-full .btn-primary:hover{
  border-color:#fff;
  background:#2f7358;
}

/* ── PASEK 2: Wydarzenia ── */
.hero-actions-full .btn-wydarzenia-hero{
  background:var(--lime);
  color:var(--ink);
  border-color:rgba(24,34,31,.55);
}
.hero-actions-full .btn-wydarzenia-hero:hover{
  border-color:var(--ink);
  background:#cfe4a8;
}

/* ── PASEK 3: Najnowsze ── */
.hero-actions-full .btn-light{
  background:var(--card);
  color:var(--ink);
  border-color:rgba(24,34,31,.45);
}
.hero-actions-full .btn-light:hover{
  border-color:var(--ink);
  color:var(--ink);
  background:#fff;
}

.hero-actions-full .btn:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* ══ KAFELKI DZIAŁÓW — nadpisuję style.css (mocniejsza specyficzność) ══ */
.section .topics .topic{
  border:1px solid rgba(24,34,31,.22) !important;
  box-shadow:none !important;
  transition:transform .22s ease, border-color .22s ease !important;
}
.section .topics .topic:hover{
  transform:translateY(-3px) !important;
  border-color:var(--ink) !important;
  box-shadow:none !important;
}

/* ══ MOBILE ══ */
@media(max-width:900px){
  .hero-actions-full{grid-template-columns:1fr;gap:11px}
  .hero-actions-full .btn{min-height:62px;font-size:15.5px}
  .section .topics .topic:hover{transform:translateY(-2px) !important}
}

/* ══ REDUCED MOTION ══ */
@media(prefers-reduced-motion:reduce){
  .hero-actions-full .btn,
  .topics .topic{transition:none}
  .hero-actions-full .btn:hover,
  .topics .topic:hover{transform:none}
}