/*
##########
# Home layout tweaks (wide cards, stacked bar content, hidden pane bodies).
##########
*/

.panes.home-active {
  --home-pane-gap: 0px;
  --home-pane-width: clamp(200px, 11vw, 240px);
  --home-pane-max-width: clamp(220px, 12.5vw, 260px);
  gap: 0;
  padding-right: 0;

  @media (max-width: 1439.5px) {
    --home-pane-gap: 0px;
    --home-pane-width: clamp(128px, 8vw, 178px);
    --home-pane-max-width: clamp(144px, 8.5vw, 196px);
  }

  @media (min-width: 768px) {
    .pane:not(.home) {
      .pane-content,
      .tool-show {
        display: none;
      }
    }
    .pane.home {
      .pane-content,
      .tool-show {
        display: flex;
      }
    }
  }

  &.active {
    .pane-bar {
      background: color-mix(
        in srgb,
        var(--collapsed-color, transparent) 25%,
        #ffffff 75%
      );
      color: var(--collapsed-text-color, inherit);
    }
  }

  .pane-content,
  .tool-show {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
  }
}


@media (min-width: 768px) {
  .panes[data-active-pane='home'] .pane {
    --overlap: 0px;
    margin-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 28px;
  }

  .panes[data-active-pane='home'] .pane.home {
    box-shadow: none;
  }

  .panes[data-active-pane='home'] .pane:not(.home) {
    --home-pane-surface: color-mix(
      in srgb,
      var(--collapsed-color, transparent) 25%,
      #fffffd 75%
    );
    --home-card-surface: var(--home-pane-surface);
    width: var(--home-pane-width);
    flex: 0 0 var(--home-pane-width);
    min-width: var(--home-pane-width);
    max-width: var(--home-pane-max-width);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);
    border-top-width: 10px;
    background: var(--home-pane-surface);
  }

  /* Keep glossary column consistent with the rest so it no longer stretches wider. */
  .panes[data-active-pane='home'] .pane.glossary {
    flex: 0 0 var(--home-pane-width);
    min-width: var(--home-pane-width);
    max-width: var(--home-pane-max-width);
  }

  .panes[data-active-pane='home'] .pane:not(.home)::after {
    opacity: 0.08;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-content,
  .panes[data-active-pane='home'] .pane:not(.home) .tool-show {
    display: none !important;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: clamp(12px, 1.2vw, 18px) clamp(10px, 1.4vw, 16px)
      clamp(12px, 1.5vw, 18px);
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
    align-content: center;
    row-gap: clamp(2px, 0.6vw, 8px);
    background: var(--home-pane-surface);
    border: 1px solid
      color-mix(
        in srgb,
        var(--collapsed-color, var(--primary-color-200)) 60%,
        transparent 40%
      );
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    color: var(--collapsed-text-color, var(--primary-color-900));
  }

  .panes[data-active-pane='home'] .pane.glossary .pane-bar,
  .panes[data-active-pane='home'] .pane.service-definitions .pane-bar,
  .panes[data-active-pane='home'] .pane.services .pane-bar {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.6vw, 8px);
    max-width: 100%;
    margin: 0 auto;
  }

  .panes[data-active-pane='home'] .pane.glossary .pane-bar .bar-items,
  .panes[data-active-pane='home'] .pane.service-definitions .pane-bar .bar-items,
  .panes[data-active-pane='home'] .pane.services .pane-bar .bar-items {
    flex: 1 1 auto;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    width: 100%;
    min-height: clamp(68px, 7vw, 96px);
    transform: none;
    text-align: center;
    overflow: hidden;
    color: inherit;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header:hover {
    transform: translateY(-2px);
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header .fas,
  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header i {
    font-size: 18px;
    color: color-mix(
      in srgb,
      var(--collapsed-text-color, var(--primary-color-700)) 80%,
      #000000 20%
    );
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header .label {
    writing-mode: initial;
    transform: none;
    white-space: normal;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-items,
  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-tools {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    padding-top: 2px;
    margin: 0;
    scrollbar-width: none;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-items::-webkit-scrollbar,
  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-tools::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-item-md {
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--home-card-surface);
    border: 1px solid
      color-mix(
        in srgb,
        var(--collapsed-color, var(--primary-color-200)) 70%,
        transparent 30%
      );
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
    transition:
      transform 150ms ease,
      box-shadow 150ms ease,
      background 150ms ease;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-item-md:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-item-md .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: color-mix(
      in srgb,
      var(--collapsed-text-color, var(--primary-color-700)) 80%,
      #000000 20%
    );
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-item-md .label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    color: color-mix(
      in srgb,
      var(--collapsed-text-color, var(--primary-color-900)) 85%,
      #000000 15%
    );
  }
}

@media (min-width: 768px) and (max-width: 1439.5px) {
  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar {
    padding: clamp(10px, 1vw, 16px) clamp(8px, 1.2vw, 14px)
      clamp(10px, 1.2vw, 16px);
    row-gap: clamp(2px, 0.4vw, 6px);
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header {
    gap: 8px;
    min-height: clamp(56px, 6vw, 84px);
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header .fas,
  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header i {
    font-size: 16px;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-header .label {
    font-size: 14px;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-items,
  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-tools {
    gap: 8px;
    padding-right: 4px;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-item-md {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .panes[data-active-pane='home'] .pane:not(.home) .pane-bar .bar-item-md .label {
    font-size: 13px;
  }
}