/* DR08 Bejelentkezés (+ DR08b / DR08c / staff) — page styles (prefix dr08-). Mockup 1536 × 1024, scale 1: plans/DR08.md §2, §5. Kept in sync with prototype/gen/dr08.css. */

.dr08 { display: grid; grid-template-columns: 829fr 707fr; min-height: max(824px, calc(100vh - 84px - 117px)); }

/* Left welcome panel (x 0–829) */
.dr08-welcome { position: relative; overflow: hidden; background: var(--graphite); color: var(--paper); }
.dr08-welcome img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--art-pos, 88% 50%); }
/* A graphite veil from the left keeps the headline readable over the render at every width (founder 2026-09-30: high-res renders). */
.dr08-welcome::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 25, 24, .92) 0%, rgba(23, 25, 24, .7) 38%, rgba(23, 25, 24, 0) 72%); }
.dr08-welcome__text { position: relative; z-index: 1; padding: 152px 40px 0 66px; }
.dr08-welcome__text::before { content: ""; display: block; width: 66px; height: 3px; margin-bottom: 44px; background: var(--accent-rule); }
.dr08-welcome__title { font-size: clamp(48px, 5.6vw, 96px); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.dr08-welcome__sub { margin-top: 26px; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.2; }
.dr08-welcome .side-caption { margin-top: 62px; color: var(--paper); }

/* Right form panel (x 829–1536, content x 912–1470) */
.dr08-main { padding: 70px 66px 50px 83px; background: var(--ivory); }
.dr08-main .section-head { margin-bottom: 30px; }
.dr08-main h1 { font-size: clamp(44px, 5.6vw, 88px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.dr08-lead { max-width: 380px; margin: 18px 0 35px; font-size: clamp(18px, 1.63vw, 26px); line-height: 1.3; color: var(--muted); }
.dr08-main .form { gap: 21px; }
.dr08-main .form-notice, .dr08-main .form-alert { margin-bottom: 4px; }
.dr08-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.dr08-row .field--check label { color: var(--muted); font-size: 16px; }
.dr08-row .field--check input { width: 22px; height: 22px; }
.dr08-forgot { font-size: 16px; font-weight: 500; color: var(--ink); text-underline-offset: 6px; text-decoration-color: var(--blue); }
.dr08-main .btn--submit { height: 58px; min-width: 250px; margin-top: 4px; font-size: 22px; }
.dr08-main .side-caption { margin-top: 48px; }
.dr08-back { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; }
.dr08-back:hover { text-decoration: underline; text-underline-offset: 5px; }
.dr08-back .icon { width: 18px; height: 18px; }
.dr08-main .form-success { padding-top: 10px; }

/* Tablet */
@media (max-width: 1180px) {
  .dr08 { grid-template-columns: 40fr 60fr; }
  .dr08-welcome__text { padding: 110px 30px 0 40px; }
  .dr08-main { padding: 56px 40px 44px 48px; }
}

/* Phone layer (plans/DR08.md §8) */
@media (max-width: 768px) {
  .dr08 { grid-template-columns: 1fr; min-height: 0; }
  .dr08-welcome { height: 180px; }
  .dr08-welcome__text { display: none; }
  .dr08-main { padding: 36px 20px 44px; }
  .dr08-row { flex-wrap: wrap; }
  .dr08-main .btn--submit { width: 100%; min-width: 0; }
}
.dr08-staff-text { max-width: 480px; margin-bottom: 30px; font-size: 18px; line-height: 1.5; color: var(--muted); }