/*
 * Native replacement for jQuery UI Tabs/Accordion, used by b13/container's "tabs"/"tabsWrapper"/
 * "accordion" CTypes. Driven entirely by Public/Javascript/bgm-tabs-accordion.js's own class names
 * (".bgm-tabs"/".bgm-accordion"); no jQuery UI wrapper classes remain.
 *
 * Tabs.html/Accordion.html render via Container's own "Extensions/Containers/Layouts/
 * Default.html" -- unconditionally wraps every instance in "<div class="container">" with no
 * "container-fluid" ancestor and no colPos branching, so every ".bgm-tabs"/".bgm-accordion" is a
 * direct child of its OWN ".container" regardless of nesting depth. The negative margin below
 * cancels that container's 15px padding to sit flush with its outer edge.
 *
 * Deliberately NOT reproduced: the old jQuery UI accordion widget's "overflow: auto" on panels --
 * real panels can hold whole 3-column containers, nested accordions, a News list plugin, etc.,
 * and an implicit-height overflow would silently clip/scroll any of that.
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer organisms {
  /* ">" (direct child) scopes this to the TOP-level case only -- nested instances (accordion
     inside a tabsWrapper) must NOT get this, they already sit correctly without it. */
  .container > .bgm-tabs,
  .container > .bgm-accordion {
    margin-inline: -15px;
  }
  /* The collapsing panel above a freshly clicked item makes the browser's scroll anchoring shift
     scrollY mid-"smooth" scroll, so the item ends ~20px off the target position that
     bgm-tabs-accordion.js's scrollToActive() computes. */
  .bgm-accordion {
    overflow-anchor: none;
    max-width: 58.625rem;
    margin-inline: auto;
  }
  .bgm-accordion:has(table) {
    max-width: none;
  }
  /* Narrow viewports (matches "bgmTabsAccordion.breakpoint" in bgm-tabs-accordion.js): reset back
     to 0 rather than re-adding an equal padding -- letting the ".container"'s own 15px be the sole
     source of inset. */
  @media (max-width: 640px) {
    .container > .bgm-tabs,
    .container > .bgm-accordion {
      margin-inline: 0;
    }
  }
  /* ".tabs-selector" is the synthesized nav bar (built by bgm-tabs-accordion.js only once the
     instance enters tabs mode -- absent entirely in accordion mode/narrow viewports).
     Figma pill design (node 1453:11335): one bordered pill, active tab fills flush to the
     container's own rounded ends regardless of position -- "overflow: hidden" on the container
     clips every "a"'s own border-radius to the pill shape instead of hand-rounding first/last. */
  .tabs-selector {
    margin-block-end: var(--gap-xxl);
    margin-inline: auto;
    width: fit-content;
    list-style-type: none;
    padding: 0;
    display: flex;
    align-items: center;
    border: var(--border-default-width, 2px) solid var(--color-primary-orange);
    border-radius: var(--border-radius-button);
    overflow: hidden;
  }
  .maincontents .tabs-selector li {
    text-indent: 0;
    margin-left: 0;
  }
  .maincontents .tabs-selector li::before {
    content: normal;
  }
  .tabs-selector a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--padding-button-l-r);
    border-radius: calc(var(--border-radius-button) - var(--border-default-width, 2px));
    font-weight: var(--font-weight-button);
    color: var(--color-primary-orange);
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
  }
  .tabs-selector a:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: -4px;
  }
  .tabs-selector a.active {
    background-color: var(--color-primary-orange);
    color: var(--shade-white);
  }
  /* One shared card wrapper per header+panel pair (injected once at init, see
     bgm-tabs-accordion.js) -- the ONLY element carrying background/border/radius/shadow for an
     item, instead of header and panel each owning their own copy stitched together via a
     ":has()" snap hack (that made the header's own corners/border pop off the instant "active"
     toggled, a frame before the panel had even started growing -- felt broken). Now it's one
     shape-stable box that simply grows/shrinks in height as its panel's grid-rows transition
     runs, chrome never changes. Figma glass-card accordion (node 3818:20410), same "glass"
     pattern as 6-molecules/card.scss (border/background/shadow/blur copied from there). */
  .bgm-accordion__item {
    margin-top: var(--gap-m);
  }
  .bgm-accordion__item:first-child {
    margin-top: 0;
  }
  .bgm-accordion__item {
    border-radius: var(--border-radius-default);
    border: var(--border-default-width, 2px) solid var(--surface-border, #F5F5F5);
    background: var(--surface-bg);
    box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
    backdrop-filter: blur(30px);
    overflow: hidden;
  }
  /* Tabs mode: header is hidden (inline "display: none" in JS, replaced by ".tabs-selector"
     above), so only the item whose panel is currently active should look like a card -- every
     other item must be fully invisible (no border/shadow residue, no margin), otherwise N-1 empty
     glass-card slivers would stack up below the pill nav. "&.bgm-tabs.-tabs-mode >" (direct
     child), not a descendant selector -- this file explicitly supports nesting (Accordion-in-Tab,
     Tab-in-Tab, confirmed live in the DB, see file header comment), and a descendant selector here
     would incorrectly also strip a nested INNER ".bgm-accordion"'s items of their chrome. */
  .bgm-tabs.-tabs-mode > .bgm-accordion__item {
    margin-top: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  /* Tabs mode: panel content sits chrome-less (no glass card, no padding) -- spacing to the
     pill nav comes solely from ".tabs-selector"'s margin-block-end (Figma gap-xxl). */
  .bgm-tabs.-tabs-mode > .bgm-accordion__item > .bgm-accordion__panel > .bgm-accordion__panel-inner > .bgm-accordion__panel-content {
    padding: 0;
  }
  /* Figma list accordion (node 1891:21347, backend "layout" = 0, default): no card chrome, 2px divider
     lines between items. Spacing lives on header-top/item-bottom (never header-bottom), so the
     collapsing panel is the only thing that changes height -- no jump on toggle. ">" keeps nested
     accordions on their own variant. */
  .bgm-accordion.-divided > .bgm-accordion__item {
    margin-top: 0;
    padding-bottom: var(--gap-l);
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }
  .bgm-accordion.-divided > .bgm-accordion__item + .bgm-accordion__item {
    border-top: var(--border-default-width, 2px) solid var(--shade-grey-100);
  }
  .bgm-accordion.-divided > .bgm-accordion__item:last-child {
    padding-bottom: 0;
  }
  .bgm-accordion.-divided > .bgm-accordion__item > .bgm-accordion__header {
    padding: var(--gap-l) 0 0;
  }
  .bgm-accordion.-divided > .bgm-accordion__item:first-child > .bgm-accordion__header {
    padding-top: 0;
  }
  .bgm-accordion.-divided > .bgm-accordion__item > .bgm-accordion__panel > .bgm-accordion__panel-inner > .bgm-accordion__panel-content {
    padding: var(--text-gap-h4) var(--accordion-text-gap-end) 0 0;
  }
  .bgm-accordion__header {
    display: flex;
    padding: var(--padding-m);
  }
  .bgm-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: var(--gap-m);
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-h1-h6);
    line-height: 1.2;
    text-align: left;
    color: var(--body-text-color);
    cursor: pointer;
    transition: color 200ms ease;
  }
  .bgm-accordion__trigger::before {
    content: "\e06d";
    font-family: "lucide";
    flex-shrink: 0;
    font-size: 24px;
    transition: transform 250ms ease-in-out;
  }
  .bgm-accordion__trigger:hover, .bgm-accordion__trigger.active {
    color: var(--color-primary-orange);
  }
  .bgm-accordion__trigger {
    /* Only the actual ACTIVE state rotates the icon -- hover changes color but not the icon. */
  }
  .bgm-accordion__trigger.active::before {
    transform: rotate(180deg);
  }
  /* Height-0-to-auto accordion transition: the well-established CSS grid "0fr -> 1fr" trick
     (Chrome 107+/Firefox 66+/Safari 16.4+ -- comparable baseline to ":has()" above, no new
     support risk). "panel" itself (kept as the id-bearing anchor-link target, see
     bgm-tabs-accordion.js's ensureNav()) becomes the grid container; its "&__panel-inner" child
     (injected once at init, wraps the original rendered content) is the actual grid item --
     "overflow: hidden" on it is what makes the row track collapsible to 0 (turns off the item's
     automatic min-size, which otherwise would be its content's height and hold the row open). */
  .bgm-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease-in-out;
  }
  .bgm-accordion__panel.active {
    grid-template-rows: 1fr;
  }
  .bgm-accordion__panel-inner {
    overflow: hidden;
  }
  .bgm-accordion__panel-content {
    padding: var(--text-gap-h4) var(--padding-m) var(--padding-m) var(--padding-m);
  }
  .bgm-accordion__panel-content > :last-child {
    margin-bottom: 0;
  }
  /* Figma: body text stops short of the chevron, 125px from the item's right edge in every variant
     (card: 32px padding + 93px). A fixed gap instead of a percentage, so it also holds in a narrow
     column; capped at 20% so it can't eat a small container. Accordion only -- tabs reuse the
     "&__panel-content" class and must stay full width; child selectors keep nested tabs inside an
     accordion out too. */
  .bgm-accordion:not(.-divided) > .bgm-accordion__item > .bgm-accordion__panel > .bgm-accordion__panel-inner > .bgm-accordion__panel-content {
    padding-inline-end: max(var(--accordion-text-gap-end), var(--padding-m));
  }
  @media (prefers-reduced-motion: reduce) {
    .bgm-accordion__panel {
      transition: none;
    }
  }
}