/* Fachgebiete mobile-only styles
   - Triggered by narrow width (max-width: 799px) only
   - Loaded by fachgebiete.html after css/fachgebiete.css
*/

/* Mobile styles for narrow screens */
@media (max-width: 799px) {
  body.page-fachgebiete .fg-article-scroll {
    padding-top: 0;
    /* Both axes must be set — desktop sets overflow:visible (shorthand).
       iOS Safari kills touch scroll if overflow-x stays 'visible'. */
    overflow-x: hidden;
    overflow-y: scroll;  /* scroll more reliable than auto on iOS Safari */
    -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
    /* Fill the absolute-positioned fg-body */
    flex: 1;
    height: 100%;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.page-fachgebiete .fg-article-scroll::-webkit-scrollbar {
    display: none;
  }

  body.page-fachgebiete .fg-grid {
    margin-left: 0;
  }

  .fg-grid {
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }

  .fg-side {
    width: 100%;
  }

  .fg-body {
    padding-top: 0;
  }

  .fg-nav {
    gap: var(--tile-gap);
  }

  .fg-link {
    display: flex;
    align-items: center;
    min-height: var(--tile-h);
    padding: var(--tile-padding-y) var(--tile-padding-x);
    background: var(--tile-bg);
    border: var(--tile-border);
    border-radius: 0;
    box-shadow: var(--tile-shadow);
    font-size: var(--tile-font-size);
    line-height: 1.4;
    width: 100%;
    text-align: left;
  }

  /* Fachgebiete page: override token-driven desktop layout on small widths */
  body.page-fachgebiete .content-wrapper.fg {
    justify-content: flex-start;
    align-items: stretch;
  }

  /* Container holds sticky title + scrollable list */
  body.page-fachgebiete .content-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* Prevent container scroll - list scrolls internally */
    position: relative; /* Anchor for absolute-positioned fg-grid in detail view */
    /* Override desktop height: var(--content-h) = 65vh.
       body.page-fachgebiete is more specific than .content-container, so we
       must explicitly restore the full remaining-viewport height here. */
    height: calc(100vh  - var(--appbar-h) - var(--logo-h) - var(--mobile-footer-h));
    height: calc(100dvh - var(--appbar-h) - var(--logo-h) - var(--mobile-footer-h));
  }

  body.page-fachgebiete .fg-grid {
    width: 100%;
    height: auto;          /* Cancel desktop height: calc(100vh - ...) */
    margin: 0;
    gap: 0;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  body.page-fachgebiete .fg-side {
    width: 100%;
    height: 100%;
    margin-left: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Sticky title at top - always visible */
  body.page-fachgebiete .fg-side .fg-title {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    display: block;
    height: auto;
    background: var(--mid);
    color: var(--red);
    justify-content: center;
    text-align: center;
    padding: var(--mobile-title-padding);
    margin: 0;
    font-size: calc(var(--fs-base) * 1.2);  /* Flutter: scaleFactor 1.2 = 18px */
    font-family: var(--font-sans);
    font-weight: var(--fw-page-title);
    letter-spacing: var(--ls-body);
    line-height: var(--lh-body);
    overflow: visible;
  }

  /* Scrollable nav container - uses flexbox to distribute space */
  body.page-fachgebiete .fg-nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 20px 16px;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.page-fachgebiete .fg-nav-scroll::-webkit-scrollbar {
    display: none;
  }

  /* List: Flutter Card style - Card(color: midContainerColor, elevation: 2, borderRadius: 0) */
  body.page-fachgebiete .fg-nav {
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap-dynamic);
    justify-content: flex-start;
    flex: 1;
    min-height: min-content;
  }

  body.page-fachgebiete .fg-link {
    height: auto;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    color: var(--text-color);
    padding: var(--pad-sm);  /* Flutter: paddingSmall(10) all sides */
    font-size: var(--fs-base);
    letter-spacing: var(--ls-body);
    line-height: var(--lh-body);
    background: var(--mid);  /* Flutter: SkneColors.midContainerColor */
    border: none;
    border-radius: 2px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12);  /* Material elevation 2 */
    transition: none;
    flex-shrink: 0;
    cursor: pointer;
  }

  body.page-fachgebiete .fg-link:hover,
  body.page-fachgebiete .fg-link:focus {
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 3px 4px rgba(0,0,0,0.16);
    transform: none;
  }

  /* No active highlight in mobile list view */
  body.page-fachgebiete .fg-link.active {
    color: var(--text-color);
  }

  /* Hide the desktop/detail content in mobile list view */
  body.page-fachgebiete .fg-body {
    display: none;
  }

  /* Mobile detail view: show article only (list hidden) */
  body.page-fachgebiete.fg-mobile-detail .fg-side {
    display: none;
  }

  /* ── fg-grid becomes the ONE scroll container, identical to .legal-text ── */
  body.page-fachgebiete.fg-mobile-detail .fg-grid {
    /* static flow, same as legal-text inside content-container */
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* same padding as .legal-text on mobile */
    padding: 0 var(--pad-md) var(--pad-md);
    box-sizing: border-box;
    /* cancel desktop layout tweaks */
    flex-direction: unset;
    align-items: unset;
    justify-content: unset;
    gap: 0;
    flex: none;
    min-height: 0;
  }

  body.page-fachgebiete.fg-mobile-detail .fg-grid::-webkit-scrollbar {
    display: none;
  }

  /* fg-body and fg-article-scroll: transparent pass-throughs, content flows into fg-grid */
  body.page-fachgebiete.fg-mobile-detail .fg-body {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0;
    margin: 0;
    align-self: auto;
    min-height: 0;
  }

  body.page-fachgebiete.fg-mobile-detail .fg-article-scroll {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  body.page-fachgebiete.fg-mobile-detail .fg-article {
    display: none;
  }

  /* Show only the active article in detail view */
  body.page-fachgebiete.fg-mobile-detail .fg-article.active {
    display: block;
  }

  /* h3 = sticky title bar — exact copy of .page-legal .page-title on mobile
     negative margin bleeds to fg-grid edges, counteracting its side padding */
  body.page-fachgebiete.fg-mobile-detail .fg-article h3 {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    height: auto;
    margin: 0 calc(-1 * var(--pad-md));
    padding: var(--mobile-title-padding);
    background: var(--mid);
    color: var(--red);
    text-align: center;
    font-size: calc(var(--fs-base) * 1.2);
    font-weight: var(--fw-page-title);
    letter-spacing: var(--ls-body);
    line-height: var(--lh-body);
    -webkit-tap-highlight-color: transparent;
  }

  /* Body text — matches .legal-text p on mobile */
  body.page-fachgebiete.fg-mobile-detail .fg-article p {
    color: var(--text-color);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-body);
    line-height: var(--lh-body);
    margin: var(--pad-sm) 0;
    padding: 0;
  }

  /* Use custom scrollbar on mobile, matching other pages */
  body.page-fachgebiete .fg-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    z-index: 10;
    pointer-events: none;
  }

  body.page-fachgebiete .fg-scrollbar.is-hidden {
    display: none;
  }

  body.page-fachgebiete .fg-scrollbar .custom-scrollbar__track {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    background: transparent;
  }

  body.page-fachgebiete .fg-scrollbar .custom-scrollbar__thumb {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 0;
    border-radius: 0;
    background: var(--grey);
    opacity: 0.55;
    cursor: grab;
    touch-action: none;
  }

  body.page-fachgebiete .fg-scrollbar.is-dragging .custom-scrollbar__thumb {
    cursor: grabbing;
    opacity: 0.75;
  }

  body.page-fachgebiete .fg-scrollbar .custom-scrollbar__thumb:hover,
  body.page-fachgebiete .fg-scrollbar .custom-scrollbar__thumb:focus-visible {
    opacity: 0.75;
  }
}