/* Service pages (/uslugi/*). Loaded AFTER /styles.css, which provides the
   CSS variables, header, footer, drawer and button styles. Structure mirrors
   blog.css/portfolio.css on purpose - same visual language across every
   subordinate page family. */

.uslugi-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}
@media (max-width: 980px) {
  .uslugi-main { padding: 96px 20px 56px; }
}
/* Pages with a full-bleed photo banner (see .uslugi-hero-banner below) handle
   the fixed-header clearance on the banner itself, so the main content that
   follows only needs normal breathing room, not the header offset again. */
.uslugi-main--banner { padding-top: 48px; }
@media (max-width: 980px) {
  .uslugi-main--banner { padding-top: 36px; }
}

/* Full-bleed tinted-photo hero, one per service so each reads as its own
   place rather than three copies of the same template. Same duotone-gradient-
   over-photo technique as the homepage .hero, just shorter and page-specific
   per tint. Breadcrumbs live inside it (light-on-photo) since the banner now
   owns the top-of-page clearance instead of .uslugi-main. */
.uslugi-hero-banner {
  position: relative;
  margin: 0 calc(50% - 50vw);
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding-top: 120px;
}
.uslugi-hero-banner::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 85% 15%, rgba(224,193,188,0.14), transparent 45%);
}
.uslugi-hero-banner-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  width: 100%;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.uslugi-hero-banner .breadcrumbs { color: rgba(251,247,242,0.7); margin-bottom: 18px; }
.uslugi-hero-banner .breadcrumbs a { color: rgba(251,247,242,0.7); }
.uslugi-hero-banner .breadcrumbs a:hover { color: #fff; }
.uslugi-hero-banner .breadcrumbs span[aria-current] { color: #fff; }
.uslugi-hero-banner h1 {
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.uslugi-hero-banner p {
  margin-top: 14px;
  font-size: 1.1rem;
  max-width: 60ch;
  color: rgba(251,247,242,0.9);
}
.uslugi-hero-banner--design {
  background-image: linear-gradient(180deg, rgba(42,54,63,0.3) 0%, rgba(42,54,63,0.75) 100%), url('/assets/portfolio/project-13.webp');
}
.uslugi-hero-banner--remont {
  background-image: linear-gradient(180deg, rgba(30,25,25,0.35) 0%, rgba(30,25,25,0.8) 100%), url('/assets/portfolio/project-14.webp');
}
.uslugi-hero-banner--mebel {
  background-image: linear-gradient(180deg, rgba(107,68,58,0.35) 0%, rgba(107,68,58,0.78) 100%), url('/assets/portfolio/project-07.webp');
}
@media (max-width: 760px) {
  .uslugi-hero-banner { min-height: 260px; padding-top: 96px; }
}

.uslugi-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 48px 0;
}
.uslugi-picker-item {
  display: block;
  color: inherit;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  border: 1px solid rgba(43,58,69,0.12);
  background: var(--cream-050, #fbf7f2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.uslugi-picker-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.1); }
.uslugi-picker-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.uslugi-picker-body { padding: 20px; }
.uslugi-picker-body h2 { font-size: 1.15rem; font-weight: 600; color: var(--navy-800, #313f4a); margin-bottom: 8px; }
.uslugi-picker-body p { font-size: 0.9rem; color: #57626b; line-height: 1.5; margin-bottom: 14px; }
.uslugi-picker-price {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: #b06a5e;
  border-top: 1px solid rgba(43,58,69,0.12);
  padding-top: 12px;
  width: 100%;
}
@media (max-width: 860px) {
  .uslugi-picker { grid-template-columns: 1fr; }
}

.breadcrumbs {
  font-size: 0.85rem;
  color: #6b7178;
  margin-bottom: 28px;
}
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--navy-800, #313f4a); }
.breadcrumbs span[aria-current] { color: var(--navy-800, #313f4a); }

.uslugi-hero h1 {
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy-800, #313f4a);
  letter-spacing: 0.01em;
}
.uslugi-hero p {
  margin-top: 14px;
  font-size: 1.1rem;
  color: #57626b;
  max-width: 60ch;
}

.uslugi-lead {
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--cream-100, #f6f0e9);
  border-radius: 8px;
}
.uslugi-lead p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--navy-800, #313f4a); }

.uslugi-body { font-size: 1.05rem; line-height: 1.7; color: #2b2f34; }
.uslugi-body h2 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  margin: 44px 0 14px;
}
.uslugi-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-800, #313f4a);
  margin: 26px 0 10px;
}
.uslugi-body p { margin: 14px 0; }
.uslugi-body ul, .uslugi-body ol { margin: 14px 0; padding-left: 24px; }
.uslugi-body li { margin: 7px 0; }
.uslugi-body a { color: #b06a5e; text-decoration: underline; text-underline-offset: 2px; }

.uslugi-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.96rem; }
.uslugi-table th, .uslugi-table td { border: 1px solid rgba(43,58,69,0.15); padding: 12px 14px; text-align: left; vertical-align: top; }
.uslugi-table th { background: var(--cream-100, #f6f0e9); font-weight: 600; }
.uslugi-table td:first-child { font-weight: 600; white-space: nowrap; }

.uslugi-note {
  font-size: 0.9rem;
  color: #7c8790;
  margin-top: 10px;
}

.uslugi-cta {
  margin: 48px 0 0;
  padding: 28px;
  background: var(--navy-800, #313f4a);
  color: var(--cream-050, #fbf7f2);
  border-radius: var(--radius, 14px);
}
.uslugi-cta h2 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 500; color: var(--blush-500, #e0c1bc); }
.uslugi-cta p { margin: 0 0 18px; color: var(--blush-300, #ecd6d1); font-size: 0.98rem; }
.uslugi-cta .btn { margin-right: 10px; }

.uslugi-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(43,58,69,0.12); }
.uslugi-related h2 { font-size: 1.1rem; font-weight: 600; color: var(--navy-800, #313f4a); margin: 0 0 12px; }
.uslugi-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.uslugi-related a { color: #b06a5e; }

/* Mini-FAQ block within .uslugi-body - same details/summary interaction as
   /faq/'s .faq-item, but light-on-cream instead of cream-on-navy since this
   page family has no dark section to host it in. */
.uslugi-faq-item {
  border-top: 1px solid rgba(43,58,69,0.15);
  padding: 13px 0;
}
.uslugi-faq-item:last-child { border-bottom: none; }
.uslugi-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy-800, #313f4a);
  transition: color 0.2s ease;
}
.uslugi-faq-item summary:hover { color: #b06a5e; }
.uslugi-faq-item summary::-webkit-details-marker { display: none; }
.uslugi-faq-item summary::marker { content: ""; }
.uslugi-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: #b06a5e;
  transition: transform 0.2s ease;
}
.uslugi-faq-item summary:hover::after { transform: scale(1.2); }
.uslugi-faq-item[open] summary::after { content: "\2013"; }
.uslugi-faq-item p {
  margin-top: 8px;
  color: #57626b;
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 640px;
}