/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./assets/css/blocks/expandable_content/view.css ***!
  \***************************************************************************************************************************************************************************************************/
[data-expandable-content='tabs'] .expandable-content__panel {
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Lock tab font-weight regardless of aria-selected state. A stray utility
   class (aria-selected:font-bold), a cached HTML class list, or Tailwind v4's
   --tw-font-weight custom property can all sneak weight back in and cause
   the active label to wrap differently from inactive ones. Nail all vectors:
   explicit weight + reset the custom property + disable browser faux-bold.
   Active state shows via color (aria-selected:text-brand-red) + underline. */
[data-expandable-content='tabs'] [role='tab'],
[data-expandable-content='tabs'] [role='tab'][aria-selected='true'],
[data-expandable-content='tabs'] [role='tab'][aria-selected='false'] {
  font-weight: 500 !important;
  --tw-font-weight: 500 !important;
  font-synthesis-weight: none;
}

[data-expandable-content='tabs'] .expandable-content__panel.is-entering {
  opacity: 0;
  transform: translateY(0.5rem);
}

[data-expandable-content='accordion'] .expandable-content__accordion-panel {
  overflow: hidden;
  transition: height 220ms ease;
}

[data-expandable-content='accordion'] details:not([open]) .expandable-content__accordion-panel {
  height: 0;
}

[data-expandable-content='accordion'] .expandable-content__accordion-panel-inner {
  min-height: 0;
}

/* Toggle the + icon to a − when the item is open. Hides the vertical bar of
   the plus glyph; the horizontal bar remains as the minus. */
[data-expandable-content='accordion'] details[open] .expandable-content__accordion-icon-vertical {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  [data-expandable-content='accordion'] .expandable-content__accordion-icon-vertical {
    transition: opacity 150ms ease;
  }
}

/* Carousel arrows at boundaries: dim and stop pointer events so users get
   visual feedback that they've reached the start or end of the tab list. */
[data-expandable-content='tabs'] [data-carousel-prev][aria-disabled='true'],
[data-expandable-content='tabs'] [data-carousel-next][aria-disabled='true'] {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  [data-expandable-content='tabs'] .expandable-content__panel,
  [data-expandable-content='tabs'] .expandable-content__panel.is-entering,
  [data-expandable-content='accordion'] .expandable-content__accordion-panel,
  [data-expandable-content='accordion'] .expandable-content__accordion-panel-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Carousel mode on mobile: only the active tab renders visibly; inactive tabs
   stay in the accessibility tree but are visually hidden. Scoped to < md so
   that at md+ the tab's own utility classes (padding, border, layout) apply
   without an md-override rule having to re-state each property — the selector
   chain here outranks single-class utilities on specificity. */
@media (max-width: 767.98px) {
  [data-expandable-content='tabs'][data-mobile-layout='carousel'] [role='tab'][aria-selected='false'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 768px) {
  /* First tab aligns its text with the content column beneath. Skipped in
     equalized mode (centered text in equal slots — asymmetric padding on tab 1
     would visually shift it left of the others). */
  [data-expandable-content='tabs'] [role='tablist']:not([data-tab-layout='equalized']) > [role='tab']:first-child {
    padding-left: 0;
  }
}

/* Editor preview: tab UI is replaced with a labeled list of every panel so the
   author can see what each tab contains while editing. */
[data-expandable-editor-preview='true'] [role='tablist'],
[data-expandable-editor-preview='true'] [data-carousel-prev],
[data-expandable-editor-preview='true'] [data-carousel-next],
[data-expandable-editor-preview='true'] [data-carousel-counter] {
  display: none !important;
}

[data-expandable-editor-preview='true'] .expandable-content__panel {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.015);
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-expandable-editor-preview='true'] .expandable-content__panel:first-of-type {
  margin-top: 0;
}

[data-expandable-editor-preview='true'] .expandable-content__editor-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: #d52b1e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.25rem;
}