/* ============================================================
 *  DICOM TEAM — pages.css
 *  Один из 6 модульных CSS-файлов дизайн-системы.
 *  См. также: base, layout, hero, components, pages, responsive.
 * ============================================================ */

/* ============================================================
 *  02. О НАС (тёмная секция, особая раскладка)
 * ============================================================ */
.about {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}
.about__decor {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 32px;
    z-index: 0;
    opacity: .15;
    pointer-events: none;
}
.about__decor--top-left {
    top: -40px; left: -40px;
    background: linear-gradient(135deg, var(--c-accent), #4FA3D1);
}
.about__decor--bottom-right {
    bottom: -60px; right: -40px;
    background: linear-gradient(135deg, #B8DBF0, transparent);
}
.about__list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 18px;
    line-height: 1.55;
    max-width: 520px;
    color: #fff;
}
.about__list li {
    position: relative;
    padding-left: 28px;
}
.about__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 16px; height: 2px;
    background: var(--c-accent);
}
.about__list li b { font-weight: 600; color: #fff; }
.about__visual {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}
.about__visual img {
    max-width: 160px;
    width: 100%;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.4));
}

/* ============================================================
 *  03. КЕЙСЫ (серая секция, карточки на белом)
 * ============================================================ */
.cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.case {
    background: #fff;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--t), box-shadow var(--t);
    display: flex;
    flex-direction: column;
}
.case:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.case__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}
.case__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}
.case:hover .case__image img { transform: scale(1.04); }
.case__body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.case__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    padding: 4px 10px;
    border-radius: 999px;
    align-self: flex-start;
}
.case__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.case__body p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-text-soft);
    flex: 1;
}
.link-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-weight: 600;
    color: var(--c-accent);
    transition: gap var(--t);
}
.link-more:hover { gap: 10px; color: var(--c-accent-d); }

/* ============================================================
 *  CONTACT BLOCK — большие плитки контактов
 *
 *  Для страницы /contacts/:
 *    <div class="contact-grid">
 *      <div class="contact-card">
 *        <div class="contact-card__label">Общие вопросы</div>
 *        <h3 class="contact-card__title">Линия поддержки</h3>
 *        <a class="contact-card__email">info@dicom.team</a>
 *        <a class="contact-card__phone">+7 (960) 311-21-05</a>
 *      </div>
 *    </div>
 * ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.contact-card {
    background: #fff;
    border-radius: var(--r);
    padding: 40px 36px;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-card:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.contact-card__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-accent);
    margin-bottom: 4px;
}
.contact-card__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
.contact-card__email,
.contact-card__phone {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--c-text);
    text-decoration: none;
    padding: 4px 0;
    transition: color var(--t);
}
.contact-card__email:hover,
.contact-card__phone:hover {
    color: var(--c-accent);
}
.contact-card__note {
    margin-top: 12px;
    font-size: 14px;
    color: var(--c-text-muted);
    line-height: 1.5;
}

@media (max-width: 899px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-card { padding: 28px 24px; }
    .contact-card__title { font-size: 20px; }
    .contact-card__email, .contact-card__phone { font-size: 18px; }
}


/* ============================================================
 *  CHANNELS — кружки мессенджеров/соцсетей в ряд
 *
 *  <div class="channels">
 *    <a class="channel" href="https://t.me/...">
 *      <span class="channel__icon">📱</span>  ← или SVG
 *      <span class="channel__label">Telegram</span>
 *    </a>
 *  </div>
 * ============================================================ */
.channels {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.channel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--c-text);
    font-weight: 500;
    font-size: 15px;
    transition: border-color var(--t), background var(--t), transform var(--t), color var(--t);
}
.channel:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
    transform: translateY(-2px);
}
.channel__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.channel__icon svg,
.channel__icon img {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.channel__label { white-space: nowrap; }


/* ============================================================
 *  ПАМЯТКА ПО ПРИМЕНЕНИЮ НА ДРУГИХ СТРАНИЦАХ
 *  ============================================================
 *
 *  СЕКЦИЯ:
 *    <section class="section section--light">  светлая (белый)
 *    <section class="section section--gray">   серая  (#F6F7F9)
 *    <section class="section section--dark">   тёмная (#0F1B33)
 *
 *  ШАПКА СЕКЦИИ:
 *    <div class="section-head section-head--left">  цифра справа
 *    <div class="section-head section-head--right"> цифра слева
 *
 *  СЕТКИ:
 *    .grid-2, .grid-3  (для карточек)
 *
 *  КАРТОЧКА:
 *    <article class="card">                              обычная
 *    <article class="card card--accent">                 тёмная
 *    <article class="card card--wide">                   2 колонки шириной
 *      .card__tag — плашка категории
 *      .card__title — заголовок
 *      .card__text — описание
 *      .card__meta — цена/мета снизу
 *
 *  КНОПКА:
 *    <a class="btn btn--primary">  синяя
 *    <a class="btn btn--ghost">    прозрачная с рамкой
 *
 *  BADGE:
 *    <div class="badge badge--soft">  светлый пилюлёобразный
 *
 *  ССЫЛКА "ПОДРОБНЕЕ":
 *    <a class="link-more">Подробнее →</a>
 *
 *  MEDIA-ROW (картинка + текст):
 *    <article class="media-row media-row--image-right"> ... </article>
 *    <article class="media-row media-row--image-left">  ... </article>
 *
 *  Шахматка (серия media-row автоматически чередуется):
 *    <div class="media-rows">
 *      <article class="media-row">...</article>
 *      <article class="media-row">...</article>
 *      <article class="media-row">...</article>
 *    </div>
 *
 *  STATS (4 крупные цифры):
 *    <div class="stats">
 *      <div class="stat">
 *        <div class="stat__value">50<span>+</span></div>
 *        <div class="stat__label">Подпись</div>
 *      </div>
 *    </div>
 *
 *  PROCESS / TIMELINE (этапы работы):
 *    <ol class="process">
 *      <li class="process__step">
 *        <div class="process__num">1</div>
 *        <div class="process__body">
 *          <h4 class="process__title">Шаг</h4>
 *          <p>Описание</p>
 *        </div>
 *      </li>
 *    </ol>
 *
 *  ACCORDION / FAQ (нативный, без JS):
 *    <div class="accordion">
 *      <details class="accordion__item">
 *        <summary class="accordion__head">
 *          <span>Вопрос</span><span class="accordion__icon"></span>
 *        </summary>
 *        <div class="accordion__body"><p>Ответ</p></div>
 *      </details>
 *    </div>
 *
 *  TABS (вкладки, требует JS в main.js):
 *    <div class="tabs">
 *      <button class="tabs__btn is-active" data-tab="t1">Битрикс24</button>
 *      <button class="tabs__btn" data-tab="t2">ИИ</button>
 *    </div>
 *    <div class="tabs-panels">
 *      <div class="tabs-panel is-active" id="t1">...</div>
 *      <div class="tabs-panel" id="t2">...</div>
 *    </div>
 *
 *  PRICING TABLE:
 *    <div class="pricing">
 *      <div class="pricing__col [pricing__col--featured]">
 *        <div class="pricing__head">
 *          <div class="pricing__tier">Bronze</div>
 *          <div class="pricing__price">15%</div>
 *          <div class="pricing__sub">скидка</div>
 *        </div>
 *        <ul class="pricing__list">
 *          <li>Что входит</li>
 *          <li class="pricing__no">Чего нет</li>
 *        </ul>
 *        <a class="btn btn--ghost">CTA</a>
 *      </div>
 *    </div>
 *
 *  LOGO CLOUD:
 *    <div class="logo-cloud">
 *      <div class="logo-cloud__item"><img src=""></div>
 *      <div class="logo-cloud__item">
 *        <span class="logo-cloud__placeholder">Client</span>
 *      </div>
 *    </div>
 *
 * ============================================================ */