/* ═══════════════════════════════════════════════════════════
   BONO MODO — Стили услуг (Soft Luxe)
   ═══════════════════════════════════════════════════════════ */

/* ─── Хаб услуг ─────────────────────────────────────────────── */
.services-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 50px; }
.service-hub-card {
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-hub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-hub-card__media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(150deg, var(--accent-soft), var(--rose)); }
.service-hub-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-hub-card__body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.service-hub-card__title { font-family: var(--font-serif); font-size: 27px; font-weight: 600; line-height: 1.1; }
.service-hub-card__text { color: var(--muted); margin-top: 12px; line-height: 1.55; font-size: 15.5px; flex: 1; }
.service-hub-card__link { margin-top: 20px; font-weight: 600; color: var(--accent-deep); }
.service-hub-card:hover .service-hub-card__link { color: var(--accent); }
.services-hub__note { margin-top: 44px; color: var(--muted); font-size: 16px; max-width: 60ch; line-height: 1.6; }
.services-hub__cta { margin-top: 22px; }

/* ─── Страница услуги: hero ─────────────────────────────────── */
.service-page { padding-block: 8px 64px; }
.service-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 64px); align-items: center; padding-block: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 52px); }
.service-hero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.01em; margin-top: 6px; }
.service-hero__tagline { margin-top: 20px; font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-2); line-height: 1.55; max-width: 46ch; }
.service-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.service-hero__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-lg); background: linear-gradient(150deg, var(--accent-soft), var(--rose)); }
.service-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Сайдбар «Что вы получите» ─────────────────────────────── */
.service-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; }
.service-panel__title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.service-deliverables { display: flex; flex-direction: column; gap: 12px; }
.service-deliverables li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.service-deliverables li::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--accent); font-size: 13px; }

/* ─── Связанные блоки ──────────────────────────────────────── */
.service-related { margin-top: clamp(48px, 7vw, 84px); }
.service-related--articles { margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 1024px) {
  .service-hero { grid-template-columns: 1fr; }
  .service-hero__media { max-width: 480px; }
}
@media (max-width: 760px) {
  .services-hub { grid-template-columns: 1fr; }
}