/* ============================================
   ANWALT DETAIL PAGE - MOBILE STYLES
   Mobile-specific styles for individual lawyer pages
   ============================================ */

/* Mobile should never hide/flicker while JS runs. */
body.page-anwalt:not(.anwalt-ready) .anwalt-grid {
  visibility: visible;
}

/* Flutter mobile: content-container uses Column → Center → Padding(v:15) → ListView
   We replicate this with flex-direction: column + margin: auto on the wrapper. */
body.page-anwalt .content-container {
  flex-direction: column;   /* vertical main axis so margin:auto centers vertically */
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide native scrollbar — custom scrollbar handles it on non-touch devices */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.page-anwalt .content-container::-webkit-scrollbar {
  display: none;
}

/* ===== ANWALT CUSTOM SCROLLBAR (mobile-width, non-touch devices) ===== */
body.page-anwalt .custom-scrollbar {
  position: fixed;
  top: var(--appbar-h);
  right: 0;
  height: calc(100vh - var(--appbar-h));
  width: 16px;
  z-index: 900;
  display: block !important;
  pointer-events: auto !important;
}

body.page-anwalt .custom-scrollbar.is-hidden {
  display: none !important;
  pointer-events: none !important;
}

body.page-anwalt .custom-scrollbar__track {
  height: 100%;
  width: 100%;
  position: relative;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.08);
}

body.page-anwalt .custom-scrollbar__thumb {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  border-radius: 0;
  background: var(--grey);
  cursor: grab;
  touch-action: none;
}

body.page-anwalt .custom-scrollbar.is-dragging .custom-scrollbar__thumb {
  cursor: grabbing;
  opacity: 0.85;
}

body.page-anwalt .custom-scrollbar__thumb:hover,
body.page-anwalt .custom-scrollbar__thumb:focus-visible {
  opacity: 0.85;
}

/* Touch devices: hide custom scrollbar, show native */
@media (pointer: coarse) and (hover: none) {
  body.page-anwalt .custom-scrollbar {
    display: none !important;
    pointer-events: none !important;
  }

  body.page-anwalt .content-container {
    scrollbar-width: thin;
    scrollbar-color: var(--grey) transparent;
  }

  body.page-anwalt .content-container::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  body.page-anwalt .content-container::-webkit-scrollbar-track {
    background: transparent;
  }

  body.page-anwalt .content-container::-webkit-scrollbar-thumb {
    background-color: var(--grey);
    border-radius: 3px;
  }
}

body.page-anwalt .content-wrapper.anwalt {
  height: auto;             /* Override mobile 100% — use natural content height */
  flex: 0 0 auto;           /* Don't grow or shrink */
  margin: auto 0;           /* Flutter Center: centers vertically when shorter */
  align-items: center;
  padding: 0;
  width: 100%;
}

.anwalt-grid {
  display: flex;            /* Was missing — flex props were ignored! */
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: center;
}

/* Hide the sidebar navigation list on mobile */
.anwalt-side {
  display: none;
}

/* Show the profile body on mobile */
.anwalt-body {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;  /* Flutter: Padding symmetric(h:0, v:15) */
}

.anwalt-detail {
  display: flex;            /* Was missing — flex props were ignored! */
  flex-direction: column;
  gap: 0;
  align-items: center;
  transform: none;
  width: 100%;
  max-width: 100%;
  /* FittedBox scale: JS sets --m-photo dynamically; CSS vw as fallback */
  --m-photo: min(180px, 37.8vw);
}

/* Mobile: show separate name, hide inline name */
.anwalt-detail > .anwalt-name {
  display: block;
  text-align: center;
  margin: 0 0 var(--pad-lg);  /* Flutter: LTRB(0, 0, 0, 20) */
  font-size: calc(var(--fs-base) * 1.1);  /* Flutter: scaleFactor 1.1 = 16.5px */
  font-weight: var(--fw-semibold);  /* Flutter: SkneBold = w600 */
  letter-spacing: var(--ls-body);  /* Flutter: letterSpacing 0.3 */
  line-height: var(--lh-body);  /* Flutter: lineHeight 2.0 */
  color: var(--text-color);  /* Flutter: Colors.black */
}

.anwalt-name-inline {
  display: none !important;
}

/* Mobile: photo and info stack vertically */
.anwalt-detail-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;  /* Center children */
  width: 100%;
}

/* Navigation arrows + photo container
   Flutter: FittedBox wrapping a Row(476×180), scaled to 390px width
   Row = [Visibility(148×43) + Container(180×180) + Visibility(148×43)] */
.anwalt-media {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* left space | photo | right space */
  align-items: center;
  width: 100%;
  margin-bottom: 0;  /* Flutter: no gap — role's padding-top handles spacing */
}

.anwalt-arrow {
  /* Flutter FittedBox: 43.2 × 0.819 = 35.4px on 390 viewport => 35.4/390 ≈ 9.1vw */
  width: min(43px, 9.1vw);
  height: min(43px, 9.1vw);
  border-radius: 50%;
  background: var(--arrow-bg);  /* Flutter: #FFE0E0E0 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Flutter icon: 21.6 × 0.819 = 17.7px => 17.7/390 ≈ 4.5vw */
  font-size: min(22px, 4.6vw);
  line-height: 1;  /* prevent inherited line-height:2 from misaligning the glyph */
  color: var(--grey);  /* Flutter: #5E5A59 */
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;  /* iOS: suppress long-press Copy callout */
  user-select: none;
  -webkit-user-select: none;
}

.anwalt-arrow:hover {
  background: var(--arrow-bg-hover);
}

.anwalt-arrow:first-child {
  justify-self: center;  /* Center in left space */
}

.anwalt-photo {
  width: var(--m-photo);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  justify-self: center;  /* Center photo */
  border-radius: 2px;  /* Flutter: BorderRadius.circular(2.0) */
  overflow: hidden;
}

/* CRITICAL: Make img scale to its container, not its natural 210px */
.anwalt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anwalt-arrow:last-child {
  justify-self: center;  /* Center in right space */
}

.anwalt-info {
  /* Flutter: role is full-width (390px), contact rows have LTRB(10,20,10,0) */
  width: 100%;
  max-width: 100vw;  /* Dynamic: track viewport, not fixed 390px */
  margin: 0;
  padding: 0;  /* No padding — each child manages its own spacing */
  text-align: center;  /* Center inline-flex rows */
  display: flex;
  flex-direction: column;
  align-items: center;  /* Flutter: Center wraps role text */
}

.anwalt-info .anwalt-name,



.anwalt-info .anwalt-name-inline {
  font-size: calc(var(--fs-base) * 1.1);  /* Flutter: scaleFactor 1.1 */
  margin: 0 0 8px;
  font-weight: var(--fw-semibold);  /* Flutter: SkneBold = w600 */
  align-self: center;  /* Center the name */
}

.anwalt-info .role {
  font-size: var(--fs-base);  /* Flutter: scaleFactor 1 = 15px */
  letter-spacing: var(--ls-body);  /* Flutter: letterSpacing 0.3 */
  line-height: var(--lh-body);  /* Flutter: lineHeight 2.0 */
  margin: var(--pad-lg) 0 0;  /* Flutter: Padding LTRB(0, 20, 0, 0) */
  text-align: center;
  width: 100%;  /* Flutter: role rendered at full 390px width */
  color: var(--text-color);  /* Flutter: Colors.black */
}

/* Contact rows wrapper — shrinks to widest row, centers as a block */
.anwalt-info .contact-rows {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;       /* rows stretch to same width = aligned left edges */
  margin: var(--pad-sm) auto 0;  /* center horizontally, 10px gap from role */
  padding: 0;
}

/* Contact rows - flex for label + value */
.anwalt-info .row {
  font-size: var(--fs-base);  /* Flutter: scaleFactor 1 = 15px */
  letter-spacing: var(--ls-body);  /* Flutter: letterSpacing 0.3 */
  line-height: var(--lh-body);     /* Flutter: lineHeight 2.0 */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

/* First contact row needs no extra top margin (wrapper handles it) */
.anwalt-info .role + .contact-rows {
  margin-top: var(--pad-sm);
}

.anwalt-info .row + .row {
  margin-top: var(--pad-sm);  /* Flutter: Tel row Padding LTRB(0, 10, 0, 0) */
}

.anwalt-info .row .label {
  display: inline-block;
  min-width: 42px;  /* Enough for "Email:" — keeps Tel: aligned */
  font-weight: var(--fw-regular);
  white-space: nowrap;
  text-align: left;
}

.anwalt-info .row a {
  color: var(--text-color);
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  font-weight: var(--fw-regular);
  display: block;
  width: 100%;
}

.anwalt-info .row a:hover {
  color: var(--text-color);
  text-decoration: underline;
}

.anwalt-info .download {
  margin-top: var(--pad-sm);  /* Flutter: LTRB(0, 10, 0, 0) */
  font-size: var(--fs-base);  /* Flutter: scaleFactor 1 = 15px */
  letter-spacing: var(--ls-body);  /* Flutter: letterSpacing 0.3 */
  line-height: var(--lh-body);  /* Flutter: lineHeight 2.0 */
  width: 100%;
  text-align: center;
}

.anwalt-info .download a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: var(--fw-regular);
}

.anwalt-info .download a:hover {
  color: var(--text-color);
  text-decoration: underline;
}