/**
 * Accordion Component Styles
 *
 * Variants: ambience (light beige) | ambience_dark (medium beige) |
 *           trust (dark maroon, white text) | academy (warm brown)
 */

/* -------------------------------------------------------
 * Component-scoped custom properties (defaults = ambience)
 * ------------------------------------------------------- */
.accordion {
  --acc-bg:            var(--ambience, #ebe6e1);
  --acc-text:          var(--trust, #550a2d);
  --acc-hover-bg:      var(--ambience-200, #f3f0ed);
  --acc-hover-text:    var(--attitude-600, #996096);
  --acc-focus-border:  var(--accent, #fa263a);
  --acc-padding:       var(--spacing-350, 28px);
  --acc-gap:           40px;
  --acc-content-gap:   var(--spacing-400, 32px);
  --acc-border-radius: var(--border-radius-m, 4px);
}

.accordion--ambience_dark {
  --acc-bg:         var(--ambience-500, #dbd4ce);
  --acc-hover-bg:   var(--ambience-200, #f3f0ed);
  --acc-hover-text: var(--attitude-500, #cc80c8);
}

.accordion--trust {
  --acc-bg:           var(--trust-500, #440824);
  --acc-text:         var(--white, #ffffff);
  --acc-hover-bg:     var(--trust, #550a2d);
  --acc-hover-text:   var(--white, #ffffff);
  --acc-focus-border: var(--accent-500, #c81e2e);
}

.accordion--academy {
  --acc-bg:           var(--academy-300, #c0a57b);
  --acc-hover-bg:     var(--academy-200, #d4c0a1);
  --acc-hover-text:   var(--attitude-700, #664064);
  --acc-focus-border: var(--accent-500, #c81e2e);
}

/* -------------------------------------------------------
 * Base / wrapper
 * ------------------------------------------------------- */
.accordion {
  background-color: var(--acc-bg);
  border-radius: var(--acc-border-radius);
  color: var(--acc-text);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  width: 100%;
}

.accordion::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 300ms, content-visibility 300ms;
  transition-behavior: allow-discrete;
}

.accordion[open]::details-content {
  block-size: auto;
}

/* Focus ring via :has() — outlines the whole card when summary is focused */
.accordion:has(.accordion__header:focus-visible) {
  outline: var(--border-width-bold, 4px) solid var(--acc-focus-border);
  outline-offset: 0;
}

/* -------------------------------------------------------
 * Header (summary)
 * ------------------------------------------------------- */
.accordion__header {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 32px;
  list-style: none;
  padding: var(--acc-padding);
}

/* Remove default marker in all browsers */
.accordion__header::-webkit-details-marker {
  display: none;
}

.accordion__header::marker {
  display: none;
}

.accordion__header:focus-visible {
  outline: none; /* outline handled on .accordion via :has() */
}

/* Hover: lighten background + shift text colour */
.accordion:hover {
  background-color: var(--acc-hover-bg);
  border-radius: var(--acc-border-radius);
}

/* -------------------------------------------------------
 * Headline text
 * ------------------------------------------------------- */
.accordion__headline {
  flex: 1 0 0;
  font-feature-settings: 'zero';
  font-size: var(--text-h5);
  font-weight: 700;
  letter-spacing: -0.312px;
  line-height: 1.3;
  min-width: 0;
  transition: color 0.3s ease-in-out;
}


.accordion:hover .accordion__headline {
  color: var(--acc-hover-text);
}
/* -------------------------------------------------------
 * Toggle icon (36 × 36)
 * ------------------------------------------------------- */
.accordion__icon {
  flex-shrink: 0;
  height: 36px;
  transform-origin: center;
  width: 36px;
  transition: transform 0.3s ease-in-out;
}

.accordion__icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.accordion[open] .accordion__icon {
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .accordion__icon {
    transition: none;
  }
}

/* -------------------------------------------------------
 * Expanded content area
 * ------------------------------------------------------- */
.accordion__content {
  display: flex;
  flex-direction: column;
  gap: var(--acc-content-gap);
  padding: var(--acc-gap) var(--acc-padding) var(--acc-padding);
  overflow: hidden;
}

/* -------------------------------------------------------
 * Image slot
 * ------------------------------------------------------- */
.accordion__image {
  width: 100%;
}

.accordion__image img {
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* -------------------------------------------------------
 * Body text
 * ------------------------------------------------------- */
.accordion__body {
  font-size: var(--text-paragraph-m);
  font-weight: 400;
  letter-spacing: -0.22px;
  line-height: 1.5;
  max-width: 860px;
}

/* CTA button is rendered via the Button component (bosch:button). */