/* Accordion — loaded ONLY on the two templates that call snippet("accordion")
   (templates/service.php, templates/service-showcase.php) via a conditional
   <link> in snippets/head.php. It used to be @imported into main.css, which
   shipped 3.4KB of it to every page on the site.

   Wrapped in @layer bespoke so precedence is IDENTICAL to when it was imported
   with layer(bespoke). Cascade layers are document-scoped and main.css declares
   the layer order, so joining `bespoke` from a separate stylesheet works — do
   NOT unwrap this, or it becomes unlayered and outranks every layer.

   Contains no @apply, which is why it can be served standalone without passing
   through Tailwind. Keep it that way. */

@layer bespoke {

  .accord-slider {
    margin: var(--spacing-5-l) auto;
    max-width: 68rem;
  }

  .accord-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
  }

  /* Buttons row - styled like nav-bar */
  .accord-buttons {
    display: inline-flex;
    gap: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
    width: fit-content;
    margin: 0 auto;
    padding: calc(var(--spacing-1) * 1.2);
    background-color: color-mix(in oklab, var(--nav-item-bg) var(--nav-item-bgPC), transparent);
    -webkit-backdrop-filter: blur(var(--blur, 20px));
    backdrop-filter: blur(var(--blur, 20px));
    border-radius: var(--radius-lg, 0.5rem);
    filter: saturate(var(--saturate));
  }

  .accordion-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-3);
    background-color: color-mix(in oklab, var(--nav-item-bg) 60%, transparent);
    border: none;
    border-radius: var(--radius-lg, 0.5rem);
    cursor: pointer;
    text-align: center;
    font-size: var(--text-sm);
  
    letter-spacing: 0.1cqb;
    line-height: 1.1;
    color: var(--nav-text);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    transition-duration: 0.4s;
    transition-property: color, background-color, box-shadow, transform;
    transition-timing-function: ease-in-out;
  }

  .accordion-button:hover {
    background-color: color-mix(in oklab, var(--nav-item-bg) 80%, transparent);
    transition-duration: 0.2s;
  }

  .accordion-button.accord-active {
    background-color: color-mix(in oklab, var(--nav-item-bg-current) 65%, transparent);
    filter: saturate(300%);
  }

  .accord-button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
  }

  .accordion-button-icon {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    flex-shrink: 0;
  }

  .accordion-button-text {
    font-size: var(--text-sm);
    text-align: center;
  }

  /* Panels */
  .accordion-panels {
    position: relative;
    display: grid;
  }

  .accordion-panel {
    width: 100%;
    grid-area: 1 / 1;
  }

  .accordion-content {
    padding: var(--spacing-5);
    background-color: var(--color-background, #fff);
    border: 1px solid var(--color-6, #e5e7eb);
    border-radius: var(--border-radius, 0.25rem);
  }

  .accordion-image {
    margin-bottom: var(--spacing-5);
  }

  .accordion-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius, 0.25rem);
    display: block;
  }

  .accordion-text h3 {
    margin-bottom: var(--spacing-4);
    font-size: var(--text-xl);
  }

  .accordion-description p {
    margin-bottom: var(--spacing-4);
  }

  .accordion-description p:last-child {
    margin-bottom: 0;
    margin-top: var(--spacing-5);
    font-size: var(--text-sm);
  }

  /* Fade transitions */
  .panel-enter {
    transition: opacity 0.4s ease-out;
  }

  .panel-enter-start {
    opacity: 0;
  }

  .panel-enter-end {
    opacity: 1;
  }

  .panel-leave {
    transition: opacity 0.3s ease-in;
  }

  .panel-leave-start {
    opacity: 1;
  }

  .panel-leave-end {
    opacity: 0;
  }

  /* Responsive Design */
  @media screen and (min-width: 768px) {
    .accordion-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-6-xl);
      align-items: start;
    }

    .accordion-image {
      margin-bottom: 0;
    }
  }

  @media screen and (max-width: 767px) {
    .accord-buttons {
      gap: var(--spacing-1);
      padding: var(--spacing-1);
    }

    .accordion-button {
      padding: var(--spacing-1) var(--spacing-2);
    }

    .accordion-button-icon {
      width: 2rem;
      height: 2rem;
    }

    .accordion-button-text {
      font-size: var(--text-xs);
    }

    .accordion-content {
      padding: var(--spacing-4);
    }
  }
}