/* ===== About page ===== */
/* Hero теперь использует общий .banner-компонент из main.css — см. about/index.html */

.about-chapter{max-width:760px}
.about-chapter+.about-chapter{margin-top:clamp(36px,5vw,56px)}
.about-chapter__tag{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.about-chapter h2{font-size:clamp(20px,2.6vw,28px);font-weight:700;margin-bottom:16px}
.about-chapter p{font-size:15.5px;line-height:1.75;color:var(--text);margin-bottom:14px}
.about-chapter p:last-child{margin-bottom:0}
.about-chapter blockquote{margin:18px 0;padding:14px 20px;border-left:3px solid var(--blue);background:var(--blue-light);border-radius:0 var(--r) var(--r) 0;font-size:15px;font-style:italic;color:var(--text)}

.about-split{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(24px,4vw,48px);align-items:center}
.about-split__photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.about-split__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.about-split{grid-template-columns:1fr}.about-split__photo{order:-1;max-height:420px}}

.about-case{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,40px);margin-top:20px}
.about-case__tag{display:inline-block;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:6px;margin-bottom:14px}

.about-authorcard{max-width:760px;margin-top:clamp(40px,5vw,64px);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);display:flex;gap:20px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.about-authorcard__avatar{width:84px;height:84px;min-width:84px;border-radius:50%;overflow:hidden;background:var(--blue-light)}
.about-authorcard__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.about-authorcard__name{font-size:18px;font-weight:800;margin-bottom:2px}
.about-authorcard__role{font-size:13.5px;color:var(--blue);font-weight:600;margin-bottom:10px}
.about-authorcard__bio{font-size:14.5px;line-height:1.65;color:var(--text-grey)}

.about-cta{margin-top:clamp(40px,5vw,64px)}

.portfolio-heading{text-align:center;max-width:640px;margin:0 auto clamp(24px,3.5vw,36px)}
.portfolio-heading .about-chapter__tag{display:block}

/* ===== Портфолио ===== */
.about-case__linklist{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.about-case__link{display:inline-flex;align-items:center;gap:6px;background:var(--blue-light);color:var(--blue);font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:8px;transition:background .2s,transform .2s}
.about-case__link:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
.about-case__link svg{width:13px;height:13px;flex-shrink:0}
.about-case__note{font-size:14px;color:var(--text-grey);line-height:1.6}
.about-case__note a{color:var(--blue);font-weight:600;text-decoration:underline}

.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,2vw,20px);margin-top:24px}
.portfolio-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:clamp(18px,2.2vw,22px);display:flex;flex-direction:column;transition:border-color .22s,box-shadow .22s,transform .22s}
.portfolio-card:hover{border-color:var(--blue);box-shadow:0 8px 28px rgba(59,91,219,0.12);transform:translateY(-3px)}
.portfolio-card__tag{display:inline-block;align-self:flex-start;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:6px;margin-bottom:12px}
.portfolio-card__desc{font-size:14px;color:var(--text-grey);line-height:1.55;margin-bottom:16px;flex-grow:1}
.portfolio-card__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border)}
.portfolio-card__action{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--text);transition:color .2s}
.portfolio-card__action svg{width:14px;height:14px;flex-shrink:0}
.portfolio-card__action:hover{color:var(--blue)}
.portfolio-card__sep{color:var(--border);font-size:13px}

.portfolio-footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;font-size:14.5px;color:var(--text-grey)}
.portfolio-footer a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600}
.portfolio-footer a:hover{text-decoration:underline}
.portfolio-footer svg{width:15px;height:15px}

@media (max-width:480px){
  .portfolio-grid{grid-template-columns:1fr}
  .about-case__linklist{flex-direction:column;align-items:flex-start}
}

@media (max-width:600px){
  .about-authorcard{flex-direction:column;align-items:flex-start;text-align:left}
}