/**
 * Process Section Styles
 *
 * Timeline/process component with overview tabs and phase accordions
 *
 * @package suspended_starter
 * @since 1.0.0
 */

  /* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

  .process-section {
    --process-accent: #BAAE92;
    --process-bg: #F5F5F0;
    --process-bg-alt: #F5F9FA;
    --process-text: #2D2D2D;
    --process-text-light: #555756;
    --process-border: #BAAE925C;
    --process-radius: 12px;
    --process-transition: 0.3s ease;
  }

  /* ==========================================================================
   Main Container
   ========================================================================== */

  .process-section__title {
  }


  .process-section__subtitle {
    font: normal normal 600 20px/32px var(--font-heading, 'Montserrat', sans-serif);
    color: var(--process-text);
    margin-bottom: var(--size-4, 1rem);
  }

  @media (max-width: 768px) {
    .process-section__subtitle {
      font: normal normal 600 16px/20px var(--font-heading, 'Montserrat', sans-serif);
    }
  }

  .process-section__description {
    margin-bottom: var(--size-10, 2.5rem);
  }

  .process-section__description p:last-child {
    margin-bottom: 0;
  }

  /* ==========================================================================
   Overview Section
   ========================================================================== */

  .process-overview {
  }

  .process-overview__title {
    font: normal normal 600 18px/1.4 var(--font-heading, sans-serif);
    color: var(--process-text);
    margin-bottom: var(--size-5, 1.25rem);
  }

  /* ==========================================================================
   Overview Tabs (Desktop)
   ========================================================================== */

  .process-overview__tabs {
    display: none;
  }

  @media (min-width: 768px) {
    .process-overview__tabs {
      display: block;
    }

    .process-overview__accordion {
      display: none;
    }
  }

  .process-overview__tabs-nav {
    display: flex;
    gap: 0;
    margin-bottom: var(--size-4, 1rem);
    position: relative;
  }

  /* Animated underline indicator */
  .process-overview__tabs-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--underline-left, 0);
    width: var(--underline-width, 0);
    height: 4px;
    background-color: var(--process-accent);
    border-radius: 2px;
    transition: left 0.3s ease, width 0.3s ease;
    pointer-events: none;
  }

  .process-overview__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--size-3, 0.75rem);
    padding: 16px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--process-border);
    cursor: pointer;
    transition: all var(--process-transition);
    min-width: 120px;
    width: 100%;
    position: relative;
  }

  .process-overview__tab:hover .process-overview__tab-label {
    color: var(--process-text);
  }

  .process-overview__tab.is-active .process-overview__tab-label {
    color: var(--process-text);
    opacity: 1;
  }

  .process-overview__tab .process-overview__tab-label {
    opacity: 0.7;
  }

  button.process-overview__tab img {
    opacity: 0.4;
    transition: opacity var(--process-transition);
  }

  button.process-overview__tab.is-active img {
    opacity: 1;
  }

  .process-overview__tab-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-overview__tab-icon img,
  .process-overview__tab-icon svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .process-overview__tab-label {
    font: normal normal 600 16px/20px 'Montserrat', sans-serif;
    letter-spacing: 0px;
    color: #000000;
    text-align: center;
    transition: color var(--process-transition), font-weight var(--process-transition);
  }

  .process-overview__tabs-content {
    padding: var(--size-3, 0.75rem) 0;
  }

  @media (min-width: 769px) {
    .process-overview__tabs-content {
      padding-top: 37px;
      padding-bottom: 60px;
    }
  }

  .process-overview__panel {
    display: none;
    font: normal normal 400 15px/1.6 var(--font-body, sans-serif);
    color: var(--process-text-light);
  }

  .process-overview__panel.is-active {
    display: block;
  }

  /* ==========================================================================
   Overview Accordion (Mobile)
   ========================================================================== */

  .process-overview__accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 40px;
  }

  @media (min-width: 768px) {
    .process-overview__accordion {
      display: none;
      padding-bottom: 0;
    }
  }

  /* ==========================================================================
   Phases Grid
   ========================================================================== */

  .process-phases {
    display: grid;
    gap: var(--size-5, 1.25rem);
  }

  /* 2 phases: side by side on desktop */
  .process-phases[data-count="2"] {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .process-phases[data-count="2"] {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* 3+ phases: first two side by side, rest full width */
  @media (min-width: 768px) {

    .process-phases[data-count="3"],
    .process-phases[data-count="4"],
    .process-phases[data-count="5"] {
      grid-template-columns: 1fr 1fr;
    }

    .process-phases[data-count="3"] .process-phase:nth-child(3),
    .process-phases[data-count="4"] .process-phase:nth-child(3),
    .process-phases[data-count="4"] .process-phase:nth-child(4),
    .process-phases[data-count="5"] .process-phase:nth-child(5) {
      grid-column: 1 / -1;
    }
  }

  /* ==========================================================================
   Phase Card
   ========================================================================== */

  .process-phase {
    background: transparent linear-gradient(180deg, #E6E0CE 0%, #FAFAFA 100%) 0% 0% no-repeat padding-box;
    border-radius: 25px;
    padding: 30px 24px 30px 30px;
  }

  .process-phase__title {
    font: normal normal 500 22px/1.3 var(--font-heading, sans-serif);
    color: var(--process-text);
    margin-bottom: var(--size-5, 1.25rem);
  }

  .process-phase__items {
    display: flex;
    flex-direction: column;
  }

  /* ==========================================================================
   Accordion Item (Shared)
   ========================================================================== */

  .process-accordion-item {
    border-bottom: 1px solid var(--process-accent);
  }

  .process-accordion-item:last-child {
    border-bottom: none;
  }

  .process-accordion-item__trigger {
    display: flex;
    align-items: center;
    gap: var(--size-3, 0.75rem);
    width: 100%;
    padding: var(--size-3, 0.75rem) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--process-transition);
  }

  .process-accordion-item__trigger:hover {
    color: var(--process-accent);
  }

  .process-accordion-item__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-accordion-item__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .process-accordion-item__label {
    flex: 1;
    font: normal normal 600 20px/24px 'Montserrat', sans-serif;
    letter-spacing: 0px;
    color: #2D2D2D;
  }

  .process-accordion-item__plus {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
  }

  .process-accordion-item__plus::before,
  .process-accordion-item__plus::after {
    content: '';
    position: absolute;
    background: #2d2d2d;
    transition: transform var(--process-transition);
  }

  .process-accordion-item__plus::before {
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1.5px;
    transform: translateY(-50%);
  }

  .process-accordion-item__plus::after {
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 1.5px;
    transform: translateX(-50%);
  }

  /* Open state */
  .process-accordion-item.is-open .process-accordion-item__plus::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
  }

  /* Slower, smoother accordion expand — ease-out-expo curve feels more natural
     than a standard ease for body-of-text reveals.
     The duration is set per-item from JS via --process-accordion-duration so that
     perceived speed stays consistent regardless of content length (a fixed 0.7s
     would feel "too fast" on tall content because the same time has to cover
     more pixels). The fallback 0.7s is used only if JS hasn't run yet. */
  .process-accordion-item__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--process-accordion-duration, 0.7s) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .process-accordion-item.is-open .process-accordion-item__content {
    grid-template-rows: 1fr;
  }

  .process-accordion-item__inner {
    overflow: hidden;
    padding-bottom: 0;
    transition: padding-bottom var(--process-accordion-duration, 0.7s) cubic-bezier(0.16, 1, 0.3, 1);
  }

  .process-accordion-item.is-open .process-accordion-item__inner {
    padding-bottom: var(--size-4, 1rem);
  }

  .process-accordion-item__inner p,
  .process-accordion-item__inner ul,
  .process-accordion-item__inner ol {
    font: normal normal 400 14px/1.6 var(--font-body, sans-serif);
    color: var(--process-text-light);
    margin: 0;
  }

  .process-accordion-item__inner a {
    font: inherit;
  }

  /* Add left padding when there's an icon */
  .process-accordion-item__trigger:has(.process-accordion-item__icon)+.process-accordion-item__content .process-accordion-item__inner {
    padding-left: calc(32px + var(--size-3, 0.75rem));
  }

  /* ==========================================================================
   PDF Download
   ========================================================================== */

  .process-phase__pdf {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2, 0.5rem);
    margin-top: var(--size-4, 1rem);
    padding-top: var(--size-3, 0.75rem);
    font: normal normal 400 13px/1 var(--font-body, sans-serif);
    color: var(--process-text-light);
    text-decoration: none;
    transition: color var(--process-transition);
  }

  .process-phase__pdf:hover {
    color: var(--process-text);
  }

  .process-phase__pdf svg {
    flex-shrink: 0;
  }

  /* ==========================================================================
   Responsive
   ========================================================================== */

  @media (max-width: 767px) {
    .process-overview__title {
      font-size: 16px;
    }

    .process-overview__tab-label {
      font: normal normal 600 16px/18px 'Montserrat', sans-serif;
      letter-spacing: 0px;
      color: #2D2D2D;
    }

    .process-phase__title {
      font: normal normal 500 22px/25px 'Montserrat', sans-serif;
    }

    .process-accordion-item__label {
      font: normal normal 600 16px/18px 'Montserrat', sans-serif;
      letter-spacing: 0;
    }

    .process-accordion-item__icon {
      width: 48px;
      height: 48px;
    }
  }

  /* ==========================================================================
   Reduced Motion
   ========================================================================== */

  @media (prefers-reduced-motion: reduce) {

    .process-overview__tab,
    .process-accordion-item__trigger,
    .process-accordion-item__content,
    .process-accordion-item__plus::before,
    .process-accordion-item__plus::after,
    .process-phase__pdf {
      transition: none;
    }
  }