/* ============================================
   ANWALT DETAIL PAGE - DESKTOP STYLES
   Desktop-only styles for individual lawyer pages
   Mobile styles are in anwalt.mobile.css
   ============================================ */

:root {
  /* Keep <= 240 so 2x stays within 500px source */
  --anwalt-portrait: clamp(180px, 18vw, 240px);

  /* Keep a stable detail-block width across all lawyers */
  --anwalt-gap: clamp(22px, 4vw, 60px);
  --anwalt-info-w: 320px;
}

/* Desktop: hide the separate name above, show the one in info section */
.anwalt-detail > .anwalt-name {
  display: none;
}

/* Name inside info section for desktop */
.anwalt-name-inline {
  display: block;
  text-align: left;
  font-size: calc(var(--fs-base) * 1.4); /* Flutter: scaleFactor 1.4 = 21px */
  font-weight: var(--fw-regular);
  color: var(--text-color);
  letter-spacing: var(--ls-body);
  line-height: 1; /* Flutter: height 1.0 */
  margin: 0 0 var(--pad-sm);
}

/* Desktop: name is separate, photo and info are side by side */
.anwalt-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  transform: none;
}

/* Container for photo and info side by side on desktop */
.anwalt-detail-row {
  display: flex;
  flex-direction: row;
  gap: var(--anwalt-gap);
  align-items: center;
  width: 100%;
}

/* Hide navigation arrows on desktop; mobile media query will enable them */
.anwalt-arrow {
  display: none;
}

/* Desktop: photo container without arrows */
.anwalt-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Match Fachgebiete positioning/measurements by reusing Flutter token variables */
body.page-anwalt {
  --fg-gap: var(--fg-text-left-pad);
  --fg-side-w: var(--fg-list-w);

  /* Match the horizontal "position calculation" relative to the centered menu.
     Desired list-start = (distance from viewport-left to menu-start) / 2.
     menu-start = (100vw - menuInnerWidth) / 2 => list-start = (100vw - menuInnerWidth) / 4.
     Because the two-column row is centered (width: --fg-row-w), we convert list-start
     into an inner margin-left within that row.
   */
  --menu-inner-w: clamp(500px, 50vw, 800px);

  /* JS can override this with an exact px value based on real rendered text widths. */
  --anwalt-list-ml: max(
    0px,
    calc(
      ((100vw - var(--menu-inner-w)) / 4)
      - ((100vw - var(--fg-row-w)) / 2)
    )
  );
}

body.page-anwalt .content-container {
  justify-content: flex-start;
  /* Borders are defined globally in styles.css (.content-container)
     but explicitly set here to ensure consistency across all pages */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* ===== ANWALT CUSTOM SCROLLBAR (screen edge, same pattern as home/kanzlei) ===== */
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;
}

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

/* Touch devices: hide custom scrollbar (JS isTouchDevice guard also prevents init) */
@media (pointer: coarse) and (hover: none) {
  body.page-anwalt .custom-scrollbar {
    display: none !important;
    pointer-events: none !important;
  }
}

body.page-anwalt .content-wrapper.anwalt {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center() like Flutter */
  align-items: center;     /* Center() like Flutter */
}

/* Avoid a visible "jump" while JS computes exact alignment. */
body.page-anwalt:not(.anwalt-ready) .anwalt-grid {
  visibility: hidden;
}

.anwalt-grid {
  width: var(--fg-row-w);
  max-width: calc(0.85 * 100vw); /* Prevent jumping by using stable calculation */
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--fg-gap);
  align-items: center;
  justify-content: flex-start;
  /* Prevent layout shifts during resize */
  box-sizing: border-box;
}

.anwalt-side {
  width: var(--fg-list-w);
  margin-left: var(--anwalt-list-ml);
  flex-shrink: 0;
  position: static;
}

.anwalt-title {
  height: 40px; /* headline container height (matches Fachgebiete) */
  display: flex;
  align-items: center;
  margin: 0;
  font-size: calc(var(--fs-base) * 1.3);
  line-height: 1;
  color: var(--red);
  font-weight: var(--fw-regular);
}

.anwalt-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.anwalt-link {
  height: 40px; /* doubled from 32px for more space between nav items */
  display: flex;
  align-items: center;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-body);
  line-height: 1;
  color: var(--grey);
  text-decoration: none;
}

.anwalt-link:hover {
  color: var(--red);
}

.anwalt-link.is-active {
  color: var(--red);
}

.anwalt-body {
  width: var(--fg-text-w);
  max-width: none;
  display: flex;
  align-items: center; /* center the photo+info block vertically in the middle container */
}

/* Desktop: photo and info side by side */
.anwalt-detail-row {
  display: flex;
  flex-direction: row;
  gap: var(--anwalt-gap);
  align-items: center;
  transform: translateX(var(--anwalt-detail-tx, 0px));
}

.anwalt-photo {
  width: var(--anwalt-portrait);
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--arrow-bg-hover);
  flex: none;
}

.anwalt-info {
  width: var(--anwalt-info-w);
  min-width: var(--anwalt-info-w);
  max-width: var(--anwalt-info-w);
  height: var(--anwalt-portrait);
  flex: none;
  text-align: left;
  --contact-label-w: 55px;
  /* Match photo height and vertically center contents */
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Ensure equal space to top/bottom and consistent spacing between items */
  box-sizing: border-box;
  gap: var(--pad-md);
}

.anwalt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anwalt-info .anwalt-name,





.anwalt-info .anwalt-name-inline {
  color: var(--text-color);
  font-weight: var(--fw-regular);
  font-size: calc(var(--fs-base) * 1.4); /* Flutter: scaleFactor 1.4 = 21px */
  letter-spacing: var(--ls-body);
  line-height: 1; /* Flutter: height 1.0 */
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  display: block;
}

.anwalt-info .role,
.anwalt-info .row,
.anwalt-info .download {
  color: var(--text-color);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-body);
  line-height: 1;
  margin: 0;
}

.anwalt-info .row {
  display: grid;
  grid-template-columns: var(--contact-label-w) minmax(0, 1fr);
  column-gap: 4px;
  align-items: baseline;
}

.anwalt-info .row .label {
  display: block;
  font-weight: var(--fw-regular);
  text-align: left;
  white-space: nowrap;
}

.anwalt-info .contact-rows {
  display: flex;
  flex-direction: column;
  gap: var(--pad-md);
}

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



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

.anwalt-info .download {
  margin: 0;
}