/* ==========================================================================
   Celiac Disease Study — Recruitment Landing Page
   Klinika Pediatrii, Warszawski Uniwersytet Medyczny (WUM)
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --blue: #1a5c96;
  --blue-badge: #2b6cab;
  --blue-text: #1f5182;
  --blue-deep: #134672;
  --green: #5a9e3f;
  --green-badge: #6aa84f;
  --green-arrow: #8fbf6a;
  --gold: #e6b422;
  --gold-dark: #d99a1f;
  --body: #3d4550;
  --body-2: #41494f;
  --body-3: #4a5058;
  --muted: #6b7683;

  --bg-green: #eef5e7;
  --bg-blue: #e9f3fb;
  --bg-cream: #fbf3dc;
  --ring-cream: #fdf0c9;
  --tint-green: #cfe3bf;
  --tint-blue: #cfe0ee;
  --tint-dotted: #9cc4e6;
  --selection: #cfe4f5;

  --radius-card: 20px;
  --content-width: 960px;
  --side-pad: 28px;

  --font-head: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;
}

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--blue); }
a:hover { color: var(--blue-deep); }

::selection { background: var(--selection); }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__photo-wrap { animation: none; }
}

/* --- Layout helpers ------------------------------------------------------- */
.section { padding: 64px var(--side-pad); }

.container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.bg-green { background: var(--bg-green); }
.bg-blue  { background: var(--bg-blue); }
.bg-cream { background: var(--bg-cream); }
.bg-white { background: #fff; }

/* Shared checklist badge + text */
.check {
  display: flex;
  align-items: center;
  gap: 14px;
}
.check--top { align-items: flex-start; }

.badge {
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-img {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 22px var(--side-pad);
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  flex: none;
}
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; }
.brand {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
  line-height: 1.25;
}
.brand span {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 24px var(--side-pad) 56px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.08;
  color: var(--blue);
  margin: 0 0 26px;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 26px;
}
.hero__list .badge { width: 32px; height: 32px; background: var(--blue-badge); font-size: 17px; }
.hero__list-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--blue);
  line-height: 1.2;
}
.hero__closing {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--blue);
  margin: 0;
  text-wrap: pretty;
}
.hero__photo { display: flex; justify-content: center; }
.hero__photo-wrap {
  position: relative;
  animation: floaty 6s ease-in-out infinite;
}
.hero__photo-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: var(--ring-cream);
}
.hero__photo-circle {
  position: relative;
  width: 360px;
  height: 360px;
  max-width: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid #fff;
  box-shadow: 0 18px 40px rgba(26, 92, 150, .18);
}
.hero__photo-circle img { width: 100%; height: 100%; object-fit: cover; }

/* --- Research ------------------------------------------------------------- */
.research { padding: 20px var(--side-pad) 64px; }
.research .container {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 36px;
  align-items: stretch;
}
.research__img { min-height: 300px; box-shadow: 0 14px 30px rgba(26, 92, 150, .12); }
.research__card {
  background: var(--bg-cream);
  border-radius: var(--radius-card);
  padding: 34px;
}
.research__intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--body-3);
  margin: 0 0 22px;
}
.research__intro sup { font-size: 12px; white-space: nowrap; }
.research__intro sup a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  padding: 0 1px;
}
.research__checks { display: flex; flex-direction: column; gap: 16px; }
.research__checks .badge { width: 30px; height: 30px; background: var(--gold); font-size: 16px; }
.research__checks span:last-child { font-size: 18px; color: var(--body); }

/* --- CEL BADANIA (study goal) -------------------------------------------- */
.goal .container {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.gf-badge { justify-self: center; }
.gf-badge__outer {
  position: relative;
  width: 232px;
  height: 232px;
  border-radius: 50%;
  background: var(--bg-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(90, 158, 63, .18);
}
.gf-badge__inner {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--tint-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gf-badge__inner svg { margin-bottom: 3px; }
.gf-badge__pct {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 800;
  line-height: .85;
  color: var(--gold);
}
.gf-badge__label {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold);
  margin-top: 3px;
}
.goal__text { text-align: center; }
.goal__text h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 34px;
  color: var(--green);
  margin: 0 0 20px;
  letter-spacing: .01em;
}
.goal__text p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--body-2);
  margin: 0 auto;
  max-width: 26em;
}

/* --- KOGO ZAPRASZAMY (who we invite) ------------------------------------- */
.invite .container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
.invite h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 34px;
  color: var(--blue);
  margin: 0 0 26px;
}
.invite__list { display: flex; flex-direction: column; gap: 20px; }
.invite__list .badge { width: 32px; height: 32px; background: var(--blue-badge); font-size: 17px; margin-top: 2px; }
.invite__list-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 21px;
  color: var(--blue-text);
  line-height: 1.3;
}
.invite__img { height: 440px; box-shadow: 0 16px 34px rgba(26, 92, 150, .16); }
.invite__img img { object-position: center 30%; }

/* --- JAK WYGLĄDA UDZIAŁ (participation steps) ---------------------------- */
.steps { padding: 70px var(--side-pad); }
.steps__heading {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  margin-bottom: 48px;
}
.steps__heading .rule {
  flex: 1;
  height: 0;
  border-top: 3px dotted var(--tint-dotted);
  max-width: 120px;
}
.steps__heading h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  color: var(--blue);
  margin: 0;
  text-align: center;
  letter-spacing: .02em;
}
.steps__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.step { width: 150px; text-align: center; }
.step__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__icon img { width: 100%; height: 100%; object-fit: contain; }
.step__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
  line-height: 1.25;
  letter-spacing: .03em;
}
.step__label span { font-weight: 400; color: var(--muted); }
.step__arrow {
  align-self: center;
  color: var(--green-arrow);
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 24px;
}

/* --- CO WARTO WIEDZIEĆ (good to know) ------------------------------------ */
.know h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  color: var(--gold-dark);
  margin: 0 0 34px;
  text-align: center;
}
.know__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
  max-width: 760px;
  margin: 0 auto;
}
.know__grid .badge { width: 32px; height: 32px; background: var(--gold); font-size: 16px; }
.know__grid span:last-child { font-size: 18px; color: var(--body); line-height: 1.35; }

/* --- DLACZEGO WARTO (why participate) ------------------------------------ */
.why h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  color: var(--green);
  margin: 0 0 34px;
}
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.why__list { display: flex; flex-direction: column; gap: 20px; }
.why__list .badge { width: 32px; height: 32px; background: var(--green-badge); font-size: 17px; margin-top: 2px; }
.why__list span:last-child { font-size: 19px; color: var(--body); line-height: 1.45; }
.why__img { height: 300px; box-shadow: 0 14px 30px rgba(90, 158, 63, .2); }
.why__img img { object-position: center 42%; }

/* --- Dołącz do nas (join us) --------------------------------------------- */
.join { padding: 66px var(--side-pad) 60px; }
.join .container { max-width: 640px; text-align: center; }
.join h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  color: var(--blue);
  margin: 0 0 30px;
}
.join__img {
  width: 100%;
  max-width: 520px;
  height: 340px;
  margin: 0 auto 30px;
  box-shadow: 0 16px 36px rgba(26, 92, 150, .16);
}
.join__img img { object-position: center 35%; }
.join p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  color: var(--blue);
  margin: 0;
  line-height: 1.35;
  text-wrap: balance;
}

/* --- Contact -------------------------------------------------------------- */
.contact { padding: 56px var(--side-pad) 64px; }
.contact .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: stretch;
}
.contact__card {
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 14px 30px rgba(26, 92, 150, .14);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 30px;
  text-align: center;
}
.contact__logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(26, 92, 150, .16);
}
.contact__logo img { width: 100%; height: 100%; object-fit: contain; }
.contact__card-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--blue);
  line-height: 1.3;
}
.contact__card-label span { font-weight: 400; font-size: 16px; color: var(--muted); }
.contact__info { align-self: center; }
.contact__info p { font-size: 19px; line-height: 1.5; color: var(--body); margin: 0 0 26px; }
.contact__info p strong { color: var(--blue); }
.contact__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--blue);
  margin-bottom: 18px;
}
.contact__rows { display: flex; flex-direction: column; gap: 12px; }
.contact__row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  color: var(--body);
}
.contact__chip {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--tint-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__row a { color: var(--body); text-decoration: none; }
.contact__row a:hover { color: var(--blue); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet / medium screens */
@media (max-width: 900px) {
  .hero__title { font-size: 40px; }
  .join h2 { font-size: 34px; }
}

/* Stack two-column grids below ~760px */
@media (max-width: 760px) {
  :root { --side-pad: 20px; }

  .section { padding: 48px var(--side-pad); }

  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 16px var(--side-pad) 40px;
    text-align: center;
  }
  .hero__title { font-size: 36px; }
  .hero__list { align-items: flex-start; text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
  .hero__photo { order: -1; }
  .hero__photo-circle { width: 300px; height: 300px; }

  .research .container { grid-template-columns: 1fr; gap: 24px; }
  .research__img { height: 260px; min-height: 0; }

  .goal .container { grid-template-columns: 1fr; gap: 32px; }
  .gf-badge { order: -1; }

  .invite .container { grid-template-columns: 1fr; gap: 28px; }
  .invite__img { height: 300px; }

  .steps__heading .rule { max-width: 60px; }
  .steps__heading h2 { font-size: 22px; }

  /* Stack the steps vertically so each arrow points straight down
     between one step and the next. */
  .steps__row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
  .step { width: auto; }
  .step__arrow {
    transform: rotate(90deg);
    padding: 0;
    margin: 2px 0;
    align-self: center;
  }

  .know__grid { grid-template-columns: 1fr; gap: 16px; max-width: 460px; }

  .why__grid { grid-template-columns: 1fr; gap: 28px; }
  .why__img { height: 260px; order: -1; }

  .contact .container { grid-template-columns: 1fr; gap: 28px; }
  .contact__info { text-align: center; }
  .contact__rows { align-items: center; }
}

/* Small phones */
@media (max-width: 420px) {
  .hero__title { font-size: 30px; }
  .hero__photo-circle { width: 240px; height: 240px; }
  .hero__list-text { font-size: 18px; }
  .goal__text h2, .invite h2 { font-size: 28px; }
  .know h2, .why h2 { font-size: 26px; }
  .join h2 { font-size: 30px; }
  .join__img { height: 260px; }
  .join p { font-size: 20px; }
}