/* Main Section Wrapper (Full-Width Background Layer)*/
.papertrail-vertical-tabs-section {
  width: 100%;
  background: #f8f8f8;
  padding: 0px;

  /* Inner Content Container (Constrains and Centers Content Footprints)*/
  .vertical-tab-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 42px 28px;
    gap: 48px;
    box-sizing: border-box;

    /* --- Top Wrapper Layout (Headline & Badge) --- */
    .top-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: stretch;
      width: 100%;
      max-width: 940px;
      margin: 0 auto;
      gap: 20px;

      .vertical-tabs-main-title {
        align-self: stretch;
        margin: 0;
        color: #333;
        text-align: center;
        font-family: "Open Sans", sans-serif;
        font-size: 42px;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
      }
    }

    /* --- Bottom Layout Canvas Container (Grid Master) --- */
    .tabs-grid-container {
      display: inline-grid;
      width: 100%;
      max-width: 940px;
      margin: 0 auto;
      align-self: stretch;
      row-gap: 28px;
      column-gap: 28px;
      grid-template-rows: repeat(1, fit-content(100%));
      grid-template-columns: minmax(280px, 1fr) 2fr;

      /* Column 1: Left Menu Navigation Links */
      .tabs-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-self: stretch;
        gap: 20px;
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
      }

      .tab-trigger-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        gap: 10px;
        width: 100%;
        padding: 0;
        margin: 0;
        border: none;
        background: #0b4c8d;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
        overflow: visible;

        &:hover {
          .tab-trigger-label-text {
            text-decoration: underline;
            text-decoration-color: #ffffff;
            text-underline-offset: 3px;
          }
        }

        &:focus-visible {
          outline: 2px solid #0b4c8d;
          outline-offset: 2px;
        }

        /* Mute state arrows on default passive layout styles */
        .tab-trigger-active-arrow {
          display: none;
          pointer-events: none;
        }

        /* Active State Modification Engine (.is-active) */
        &.is-active {
          align-items: center;
          overflow: visible;
          background: transparent;
          box-shadow: 0 5px 5px 0 #dddddd;

          .tab-trigger-inner-wrapper {
            flex: 1 0 0;
            padding: 14px;
            border: 2px solid #0b4c8d;
            background: #ffffff;
            box-sizing: border-box;
          }

          &:hover .tab-trigger-inner-wrapper {
            background: #ffffff;
          }

          .tab-trigger-label-text {
            color: #333333;
          }

          .tab-trigger-active-arrow {
            display: block;
            width: 14px;
            height: 24px;
            position: absolute;
            z-index: 5;

            /* Centers the pointer perfectly along the vertical axis of the button */
            top: 50%;
            transform: translateY(-50%);

            /* Hangs the arrow cleanly outside the button container wrapper box */
            right: -12px;
            bottom: auto;

            svg {
              display: block;
              width: 14px;
              height: 24px;
            }

            path {
              fill: #ffffff;
              stroke: #0b4c8d;
              stroke-width: 2;
              stroke-linejoin: miter;
            }
          }
        }

        .tab-trigger-inner-wrapper {
          display: flex;
          align-items: center;
          align-self: stretch;
          padding: 14px;
          gap: 10px;
          background: #0b4c8d;
          border-radius: 4px;
          text-align: left;
          box-sizing: border-box;
        }

        .tab-trigger-label-text {
          color: #ffffff;
          font-family: "Open Sans", sans-serif;
          font-size: 14px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      /* Column 2: Right Panels Display Window Container */
      .right-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: stretch;
        grid-row: 1 / span 1;
        grid-column: 2 / span 1;

        .vertical-tab-panel-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-self: stretch;
          width: 100%;
          gap: 16px;
        }

        .tab-panel-image-container {
          display: flex;
          width: 100%;
          height: auto;
          align-self: stretch;
          overflow: hidden;
          border-radius: 4px;

          img {
            width: 100%;
            height: auto;
            object-fit: fill;
          }
        }

        .tab-panel-description-text {
          align-self: stretch;
          color: #333333;
          font-family: "Open Sans", sans-serif;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px;

          b,
          strong {
            color: #333333;
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px;
          }
        }
      }
    }

    /* --- Responsive Tablet Scaling (720px) --- */
    @media (max-width: 720px) {
      padding: 32px 20px;
      gap: 32px;

      .top-wrapper {
        .vertical-tabs-main-title {
          font-size: 31.5px;
        }
      }

      .tabs-grid-container {
        row-gap: 20px;
        column-gap: 20px;
        grid-template-columns: minmax(200px, 1fr) 2fr;
      }
    }

    /* --- Responsive Mobile Stacking (550px) --- */
    @media (max-width: 550px) {
      padding: 42px 28px;
      gap: 24px;

      .top-wrapper {
        .vertical-tabs-main-title {
          font-size: 31.5px;
        }
      }

      .tabs-grid-container {
        display: flex;
        flex-direction: column;
        row-gap: 12px;

        .tabs-column {
          display: flex;
          flex-direction: column;
          gap: 12px;
          grid-row: unset;
          grid-column: unset;
        }

        .right-wrapper.js-tabs-ready {
          display: none;
        }

        .vertical-tab-panel-item.is-active {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          gap: 16px;

          .tab-panel-image-container {
            overflow: hidden;
            border-radius: 4px;

            img {
              width: 100%;
              height: 100%;
              object-fit: fill;
            }
          }

          a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 14px;
            gap: 10px;
            border-radius: 4px;
            border: 1px solid #bbbbbb;
            background: linear-gradient(180deg, #62c462 0%, #51a351 100%);
            box-shadow:
              0 1px 2px 0 #00000000,
              0 1px 0 0 #ffffff33 inset;
            color: #ffffff;
            text-align: center;
            font-family: "Open Sans", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-decoration: none;
          }
        }

        .tab-trigger-item.is-active {
          margin-bottom: 0;

          .tab-trigger-active-arrow {
            position: absolute;
            top: auto;
            bottom: -9px;
            right: auto;
            left: 50%;
            transform: translateX(-50%) rotate(90deg);
            width: 14px;
            height: 14px;

            svg {
              display: block;
              width: 14px;
              height: 14px;
            }

            path {
              stroke-width: 3.5;
            }
          }
        }
      }
    }
  } /* .vertical-tab-container ends safely here */
} /* .papertrail-vertical-tabs-section ends safely here */