/* Heftwell — "O pracowni" page */

.about-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.about-intro-txt p { color: var(--ink-soft); }
.about-intro-pic { position: relative; }
.about-intro-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); }
.pic-tag { position: absolute; left: 18px; bottom: 18px; padding: 8px 16px; background: rgba(255, 255, 255, .94); border-radius: 999px; color: var(--sage-d); font-size: .84rem; font-weight: 800; box-shadow: var(--shadow); }

.stats:has(.stat:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: none; }
.pstep { position: relative; padding: 30px 24px 28px; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.pstep::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--sage), var(--gold)); }
.pstep-no { display: block; margin-bottom: 10px; font-family: var(--serif); font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--gold); }
.pstep p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vcard { padding: 30px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); transition: transform .25s, border-color .25s, box-shadow .25s; }
.vcard:hover { transform: translateY(-4px); border-color: var(--sage); box-shadow: var(--shadow); }
.vcard-ico { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; background: var(--oat-2); color: var(--sage-d); font-size: 1.5rem; }
.vcard p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.qlist { display: grid; gap: 10px; margin: 0 0 1.3em; }
.qlist li { display: flex; gap: 10px; color: var(--ink-soft); }
.qlist i { flex: none; color: var(--sage); font-size: 1.2rem; line-height: 1.5; }

.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gal { margin: 0; overflow: hidden; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); }
.gal img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .6s; }
.gal:hover img { transform: scale(1.06); }
.gal figcaption { padding: 14px 16px 16px; color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }

@media (max-width: 1040px) {
	.path-grid, .values-grid, .gal-grid, .stats:has(.stat:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.about-intro { grid-template-columns: 1fr; gap: 36px; }
	.about-intro-pic img { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
	.path-grid, .values-grid, .gal-grid, .stats:has(.stat:nth-child(4)) { grid-template-columns: 1fr; }
}