/* NIE ZAWIERAJA */
.free { background: var(--bg-alt); padding: 80px 0; }
.free__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.free__title { font-size: var(--fs-h2); max-width: 24ch; }
.free__side { display: grid; gap: 28px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.xpill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 18px 4px 6px; border-radius: var(--r-chip); background: var(--bg); border: 1.5px solid var(--border); }
.xpill .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; border: 1.5px solid var(--text-muted); color: var(--text-muted); }
.xpill span { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--text-muted); }
.free__badges { display: flex; align-items: center; gap: 28px; }
.free__badges img { width: 96px; height: auto; }

/* ABOUT */
.about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; }
.about__photo { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--stage); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__copy { display: grid; gap: 24px; }
.facts { display: grid; gap: 20px; margin-top: 16px; }
.fact { border-left: 2px solid var(--accent-natural); padding: 2px 0 2px 24px; display: grid; gap: 6px; max-width: 62ch; }
.fact h3 { font-size: 1.25rem; }
.fact p { color: var(--text-muted); font-size: 1rem; }

/* HOWTO */
.howto { padding-bottom: 64px; }
.order { padding-top: 0; }
.howto__grid { display: grid; grid-template-columns: 8fr 4fr; gap: 56px; align-items: start; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; position: relative; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 22px; right: calc(33.333% - 43px); top: 21px; height: 2px; background: var(--border); }
.step { position: relative; display: grid; gap: 10px; align-content: start; }
.step__n { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--action); color: var(--btn-text); font: 600 1.25rem/1 var(--font-display); }
.step h3 { font-size: 1.25rem; margin-top: 8px; }
.step p { color: var(--text-muted); font-size: 1rem; }
.callbox { padding: 32px; border-radius: var(--r-card); background: var(--bg); display: grid; gap: 8px; align-content: start; margin-top: 8px; }
.callbox__phone { font: 600 2rem/1.2 var(--font-display); color: var(--text); text-decoration: none; margin-top: 8px; min-height: 44px; }
.callbox__phone:hover { color: var(--action); }
.callbox__hours { color: var(--text-muted); }

/* BLOG */
.blog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.post__link { display: grid; gap: 8px; align-content: start; color: var(--text); text-decoration: none; }
.post__img { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-alt); margin-bottom: 8px; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.post__cat, .post__time { font-size: var(--fs-small); color: var(--text-muted); }
.post h3 { font-size: 1.375rem; }
.post__link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.post__lead { color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .post__link:hover .post__img img { transform: scale(1.03); } }

/* COOP */
.coop-wrap { padding-bottom: var(--section-y); }
.coop { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 64px 56px; border-radius: var(--r-card); background: var(--stage); }
.coop__copy { display: grid; gap: 12px; }
.coop .lead { color: var(--text); }

@media (max-width: 900px) {
  .free { padding: 56px 0; } .free__grid { grid-template-columns: 1fr; gap: 28px; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; } .about__photo { aspect-ratio: 4 / 3; }
  .howto__grid { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .steps::before { left: 21px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .step { grid-template-columns: 44px 1fr; column-gap: 16px; } .step__n { grid-row: span 2; } .step h3 { margin-top: 0; align-self: center; }
  .posts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scroll-padding-left: var(--gutter); margin-top: 28px; }
  .post { flex: 0 0 78%; max-width: 340px; scroll-snap-align: start; }
  .coop { padding: 40px 24px; }
}