/* DR03 Szoftverfejlesztés — page styles (prefix dr03-). Measurements at 1536 px: plans/DR03.md §2 and §5. Kept in sync with prototype/gen/dr03.css. */

/* Hero (0–873 incl. the 96 px header) */
.dr03-hero { --hero-h: 50.6vw; }
.dr03-hero .hero__actions { column-gap: 44px; }
.dr03-hero .lead { max-width: 590px; }

/* Services (873–1583) */
.dr03-services { padding-block: 66px 84px; }
.dr03-services__head { display: grid; grid-template-columns: 62fr 38fr; align-items: end; margin-bottom: 78px; }
.dr03-services__head p { max-width: 430px; padding-bottom: 6px; font-size: clamp(17px, 1.56vw, 26px); line-height: 1.4; color: var(--muted); }
.dr03-services .cols > * { padding-left: 44px; }
.dr03-services .cols > :first-child { padding-left: 0; }
.dr03-services .col .body-muted { max-width: 300px; }

/* Process (1583–2240) */
.dr03-process { position: relative; overflow: hidden; }
.dr03-process__art { position: absolute; top: 0; right: 0; left: 66.5%; height: 383px; }
.dr03-process__art img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.dr03-process__art::before, .dr03-process__art::after { content: ""; position: absolute; z-index: 1; }
.dr03-process__art::before { inset: 0 auto 0 0; width: 160px; background: linear-gradient(90deg, var(--graphite), rgba(23, 25, 24, 0)); }
.dr03-process__art::after { inset: auto 0 0 0; height: 140px; background: linear-gradient(0deg, var(--graphite), rgba(23, 25, 24, 0)); }
.dr03-process__inner { position: relative; z-index: 2; padding-block: 64px 50px; }
.dr03-process .section-head { margin-right: 32%; }
.dr03-process .h2 { margin-bottom: 20px; }
.dr03-process__lead { max-width: 700px; margin-bottom: 100px; font-size: clamp(17px, 1.63vw, 27px); line-height: 1.45; color: var(--paper-2); }
.dr03-process__cap-top { position: absolute; z-index: 2; top: 62px; right: var(--gutter); }
.dr03-process__cap-bottom { position: absolute; z-index: 2; top: 300px; right: var(--gutter); }
.dr03-steps { --n: 5; }

/* Principles (2240–2730) */
.dr03-principles { padding-block: 66px 76px; border-bottom: 1px solid var(--rule); }
.dr03-principles .h2 { margin-bottom: 50px; }
.dr03-principles .cols { --n: 3; }
.dr03-principles .title { margin-bottom: 16px; font-size: clamp(20px, 1.82vw, 30px); }
.dr03-principles .body-muted { max-width: 370px; font-size: clamp(17px, 1.63vw, 26px); line-height: 1.4; }

/* Project consultation form (2730–3357) */
.dr03-form { padding-block: 46px 50px; scroll-margin-top: 0; }
.dr03-form__grid { display: grid; grid-template-columns: 547fr 36px 823fr; }
.dr03-form__intro { display: flex; flex-direction: column; padding-right: 40px; }
.dr03-form__intro .section-head { margin-bottom: 28px; }
.dr03-form__intro .h2 { font-size: clamp(36px, 4.3vw, 72px); }
.dr03-form__intro .section-head .line { flex: 0 0 150px; }
.dr03-form__intro .lead { max-width: 440px; margin-top: 28px; color: rgba(5, 5, 5, .85); }
.dr03-form__intro .side-caption { margin-top: auto; padding-top: 60px; }
.dr03-form__rule { width: 1px; background: var(--rule); justify-self: start; }
.dr03-form__panel { padding-top: 0; }

/* Tablet */
@media (max-width: 1180px) {
  .dr03-services__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .dr03-process__art { left: 45%; opacity: .45; }
  .dr03-process__cap-top, .dr03-process__cap-bottom { display: none; }
  .dr03-process .section-head { margin-right: 0; }
  .dr03-process__lead { margin-bottom: 60px; }
  .dr03-steps { --n: 3; row-gap: 40px; }
  .dr03-steps > :nth-child(4) { padding-left: 0; border-left: 0; }
  .dr03-steps > :nth-child(3) .step__arrow { display: none; }
  .dr03-form__grid { grid-template-columns: 1fr; gap: 36px; }
  .dr03-form__rule { display: none; }
  .dr03-form__intro { padding: 0 0 36px; border-bottom: 1px solid var(--rule); }
}

/* Phone layer (plans/DR03.md §8) */
@media (max-width: 768px) {
  .dr03-services .cols > * { padding-left: 0; }
  .dr03-principles .cols, .dr03-steps { --n: 1; }
  .dr03-process__art { left: 0; height: 56vw; opacity: .35; }
  .dr03-steps > :nth-child(4) { border-top: 1px solid var(--rule-dark); }
  .dr03-steps > :nth-child(3) .step__arrow { display: block; }
  .dr03-form__intro .side-caption { display: none; }
}
