/* About · aims (patterns/gioi-thieu-values.php): section head and four aims in a core Accordion (one open at a time).
   Wide screens: tall panels side by side, icon and name written upwards; the open panel widens, turns brand colour and
   fades its text in (Accordion Gallery). Narrow screens: stacked rows, the open one shows its text below.
   The icon comes from the item's class (ic-bag · ic-donut · ic-list · ic-headset). assets/js/sections/ab-values.js opens
   the panel under the mouse and keeps one panel open. */
.ab-values{
  --ab-values-h:calc(var(--s-9) * 4);
  --ab-values-rail:calc(var(--s-9) - var(--s-3));
  --ab-values-body:calc(var(--s-9) * 4 - var(--gap-card));
  --ab-values-grow:5;
  --ab-values-ic:var(--s-5);
  --ab-values-ic-o:.8;
  --ab-values-snap:0s; /* visibility flips at once (after the fade when closing) */
  --ab-values-track:-0.025em;
}
/* minmax(0,1fr): each body keeps its full width inside its (clipping) panel, so the accordion's min-content width is
   four open panels; an auto column grows to that and pushes the whole section past the right edge of the page */
.ab-values > .page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-head)}
.ab-values .page > *,.ab-values__head > *{margin:0}

.ab-values__head{display:grid;gap:var(--gap-text)}
.ab-values h2{font-size:var(--t-2xl)}
.ab-values h2 strong{font-weight:inherit;color:var(--accent)}
.ab-values__head p{max-width:var(--measure);color:var(--ink-2)}

/* panels */
.ab-values__acc{display:flex;gap:var(--gap-grid);height:var(--ab-values-h)}
.ab-values__acc > .wp-block-accordion-item{position:relative;display:flex;flex:1 1 0;min-width:0;margin:0;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);color:var(--ink);overflow:hidden;
  transition:flex-grow var(--dur-morph) var(--ease-out),background-color var(--dur-m),color var(--dur-m),border-color var(--dur-m)}
.ab-values__acc > .wp-block-accordion-item.is-open{flex-grow:var(--ab-values-grow);border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.ab-values__acc .wp-block-accordion-item > *{margin:0}

/* the rail: icon at the top, name written upwards (hidden once the panel is open) */
.ab-values__acc .wp-block-accordion-heading{flex:none;display:flex;width:var(--ab-values-rail);font:700 var(--t-xl)/1 var(--font-display);letter-spacing:normal;color:inherit}
.ab-values__acc .wp-block-accordion-heading__toggle{flex-direction:column;justify-content:space-between;align-items:center;height:100%;padding:var(--gap-card-s) 0;color:inherit}
.ab-values__acc .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{text-decoration:none}
.ab-values__acc .wp-block-accordion-heading__toggle::before{content:"";flex:none;width:var(--ab-values-ic);height:var(--ab-values-ic);background:currentColor;opacity:var(--ab-values-ic-o);-webkit-mask:var(--ab-values-icon) center / contain no-repeat;mask:var(--ab-values-icon) center / contain no-repeat}
.ab-values__acc .wp-block-accordion-heading__toggle-title{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity var(--dur-m)}
.ab-values__acc > .is-open .wp-block-accordion-heading__toggle-title{opacity:0}
.ab-values__acc .ic-bag{--ab-values-icon:url(../../../icons/bag.svg?ver=f2eab5ea)}
.ab-values__acc .ic-donut{--ab-values-icon:url(../../../icons/donut.svg?ver=40ff100d)}
.ab-values__acc .ic-list{--ab-values-icon:url(../../../icons/list.svg?ver=1b055ffd)}
.ab-values__acc .ic-headset{--ab-values-icon:url(../../../icons/headset.svg?ver=38e07b2f)}

/* the body: always laid out at its full width (the closed panel clips it), faded in after the panel has widened.
   Spaced with margins: core zeroes the padding of a closed panel, which would shift the text while it fades out. */
.ab-values__acc .wp-block-accordion-panel{flex:none;display:grid;align-content:end;justify-items:start;gap:var(--gap-stack);width:var(--ab-values-body);margin:var(--gap-card) var(--gap-card) var(--gap-card) 0;
  visibility:hidden;opacity:0;transition:opacity var(--dur-m) var(--ease-out),visibility var(--ab-values-snap) linear var(--dur-m)}
.ab-values__acc .wp-block-accordion-panel[hidden]{content-visibility:visible}
.ab-values__acc > .is-open > .wp-block-accordion-panel{visibility:visible;opacity:1;transition:opacity var(--dur-m) var(--ease-out) var(--dur-m),visibility var(--ab-values-snap)}
.ab-values__acc .wp-block-accordion-panel > *{margin:0}
.ab-values__t{font:800 var(--t-2xl)/1 var(--font-display);letter-spacing:var(--ab-values-track);text-wrap:balance}
.ab-values__d{font-size:var(--t-l)}
.ab-values__list{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.ab-values__list li{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--t-s)}
.ab-values__list li::before{content:"";flex:none;width:var(--s-4);height:var(--s-4);margin-top:calc(var(--s-1) / 2);background:currentColor;-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat}
.ab-values__acc .is-style-arrow-link a{gap:var(--s-2);color:inherit}
.ab-values__acc .is-style-arrow-link a::after{width:var(--s-4);height:var(--s-4)}

/* editor: every body stays visible beside its rail, so each word can be edited */
.editor-styles-wrapper .ab-values__acc{flex-direction:column;height:auto}
.editor-styles-wrapper .ab-values__acc > .wp-block-accordion-item{flex:none}
.editor-styles-wrapper .ab-values__acc .wp-block-accordion-panel{flex:1 1 auto;width:auto;visibility:visible;opacity:1}

@media (max-width: 991px){
  .ab-values__acc{flex-direction:column;height:auto}
  .ab-values__acc > .wp-block-accordion-item{flex:none;flex-direction:column}
  .ab-values__acc .wp-block-accordion-heading{width:auto}
  .ab-values__acc .wp-block-accordion-heading__toggle{flex-direction:row;justify-content:flex-start;gap:var(--s-4);padding:var(--s-4) var(--gap-card-s)}
  .ab-values__acc .wp-block-accordion-heading__toggle-title{writing-mode:horizontal-tb;transform:none}
  .ab-values__acc .wp-block-accordion-panel{display:none;width:auto;margin:0 var(--gap-card-s) var(--gap-card-s)}
  .ab-values__acc > .is-open > .wp-block-accordion-panel{display:grid}
}
@media (prefers-reduced-motion: reduce){
  .ab-values__acc > .wp-block-accordion-item,.ab-values__acc .wp-block-accordion-heading__toggle-title,.ab-values__acc .wp-block-accordion-panel,.ab-values__acc > .is-open > .wp-block-accordion-panel{transition:none}
}