/* Раздел «О нас»: подстраницы с меню раздела (О компании, схема проезда, сертификаты) */

.about-page { padding: 0 0 3rem; position: relative; }
.about-main { min-width: 0; }

/* Якорь на форму заявки: отступ под фиксированную шапку при переходе по /contact#request-form */
#request-form { scroll-margin-top: 110px; }

/* Меню раздела — по умолчанию горизонтальная панель над центрированным контентом.
   На широких экранах превращается в вертикальный рельс справа (public-responsive.css). */
.about-sidebar { background: #fff; border-radius: 12px; box-shadow: 0 5px 15px rgba(74, 159, 202, .18); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.about-sidebar-title { font-weight: 700; color: var(--p-text-700); margin-bottom: .75rem; font-size: 1.05rem; }
/* Сброс глобальных стилей элемента <nav> (position: fixed и т.д.) для меню раздела */
.about-nav { position: static; width: auto; top: auto; padding: 0; background: none; box-shadow: none; z-index: auto; }
.about-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.about-nav a { display: block; padding: .55rem .9rem; border-radius: 8px; color: var(--p-text-600); text-decoration: none; font-weight: 600; border: 1px solid var(--p-bg-alt); transition: background .2s, color .2s, border-color .2s; }
.about-nav a:hover { background: var(--p-bg-alt); color: var(--p-brand-dark); }
.about-nav a.active { background: var(--p-bg-alt); color: var(--p-brand-dark); border-color: var(--p-brand-dark); }
.about-nav a:focus-visible { outline: 2px solid var(--p-brand); outline-offset: 2px; }

/* «О компании» внутри раздела */
.about-cta-line { margin-top: 1.5rem; }
.about-cta-line a { color: var(--p-brand-dark); font-weight: 600; text-decoration: none; }
.about-cta-line a:hover { text-decoration: underline; }

/* Схема проезда */
.directions-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.directions-info-item { background: #fff; border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 4px 12px rgba(74, 159, 202, .15); }
.directions-info-label { display: block; font-size: .8rem; color: var(--p-text-500); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.directions-info-value { color: var(--p-text-700); font-weight: 600; }
.directions-info-value a { color: var(--p-brand-dark); text-decoration: none; }
.directions-info-value a:hover { text-decoration: underline; }
.directions-note { text-align: center; color: var(--p-text-500); font-size: .9rem; margin-top: 1rem; }

/* Сертификаты */
.certificates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: start; }
.certificate-card { margin: 0; background: #fff; border-radius: 12px; box-shadow: 0 5px 18px rgba(0, 0, 0, .12); overflow: hidden; display: flex; flex-direction: column; }
.certificate-link { display: block; background: var(--p-bg-alt); line-height: 0; }
.certificate-link img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.certificate-card:hover .certificate-link img { transform: scale(1.02); }
.certificate-caption { padding: 1.1rem 1.25rem 1.35rem; }
.certificate-caption strong { display: block; color: var(--p-text-700); margin-bottom: .35rem; }
.certificate-caption span { color: var(--p-text-600); font-size: .92rem; line-height: 1.5; }