/* ============================================================
   Gamifikacja z AWF — strona główna
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root{
  --ink:        #1e2624;
  --text:       #33403c;
  --text-soft:  #6a7873;
  --bg:         #f7f6f2;
  --card:       #ffffff;
  --line:       #e4e1d8;
  --accent:     #2f6f5e;

  --c-wampir:   #a12939;
  --c-swinki:   #c98a6b;
  --c-franek:   #4a6b4f;
  --c-szmaragd: #14786c;

  --font-display: 'Lato', -apple-system, sans-serif;
  --font-body: 'Lato', -apple-system, sans-serif;

  --radius: 10px;
  --shadow: 0 16px 34px -20px rgba(30,38,36,.28);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.68;
}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
a{color:var(--accent);}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#dfe8e4;font-size:14px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:12px 28px;}
.topbar a{color:#dfe8e4;text-decoration:none;opacity:.9;}
.topbar a:hover{opacity:1;}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;font-size:13px;}
.logo-mark{flex:0 0 auto;color:inherit;}

/* ---------- hero ---------- */
.hero{padding:46px 0 10px; text-align:center;}
.hero-banner{max-width:780px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}

/* ---------- intro ---------- */
.intro{padding:38px 0 20px;}
.intro-row{
  display:flex;align-items:center;gap:18px;
  max-width:820px;margin:0 auto 18px;
}
.intro-row img{width:30px;flex:0 0 auto;}
.intro-row.rev{flex-direction:row-reverse;}
.intro-row p{margin:0;text-align:center;color:var(--text-soft);font-size:1.05rem;}
@media (max-width:600px){
  .intro-row{flex-direction:column;}
  .intro-row.rev{flex-direction:column;}
}

/* ---------- section heading ---------- */
.section-heading{text-align:center;margin:0 0 36px;}
.section-heading h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.8rem;
  letter-spacing:.01em;
  margin:0 0 10px;
  color:var(--ink);
}
.section-heading .rule{width:48px;height:3px;background:var(--accent);margin:0 auto;border-radius:2px;}

section{padding:40px 0;}

/* ---------- course grid ---------- */
.course-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-bottom:20px;
}
@media (max-width:720px){
  .course-grid{grid-template-columns:1fr;}
}

.course-card{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px 26px;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:inherit;
  border-top:5px solid var(--card-accent, var(--accent));
  transition:transform .15s ease, box-shadow .15s ease;
}
.course-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -20px rgba(30,38,36,.4);
}
.course-card .course-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.3rem;
  letter-spacing:.01em;
  color:var(--ink);
  margin:0 0 6px;
  text-transform:uppercase;
}
.course-card .course-meta{
  font-size:13px;
  color:var(--card-accent, var(--accent));
  font-weight:700;
  margin:0 0 2px;
}
.course-card .course-author{
  font-size:13px;
  color:var(--text-soft);
  margin:0 0 16px;
}
.course-card .course-desc{
  font-size:14.5px;
  color:var(--text-soft);
  margin:0 0 16px;
}
.course-card .course-cta{
  font-size:13.5px;
  font-weight:700;
  color:var(--card-accent, var(--accent));
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.course-card .course-cta .arrow{transition:transform .15s ease;}
.course-card:hover .course-cta .arrow{transform:translateX(4px);}

.card-wampir{--card-accent:var(--c-wampir);}
.card-swinki{--card-accent:var(--c-swinki);}
.card-franek{--card-accent:var(--c-franek);}
.card-szmaragd{--card-accent:var(--c-szmaragd);}

/* ---------- more link ---------- */
.more-link{text-align:center; color:var(--text-soft); font-size:14px; font-style:italic; margin-top:10px;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#c9d3cf;text-align:center;padding:28px 0;font-size:13px;}
footer p{margin:0;max-width:600px;margin:0 auto;}
footer a{color:#a9e0cf;}