/* About · ownership (patterns/gioi-thieu-own.php): centred head, four ownership cards and a hold button
   (Hold Button idea). Each card has two status lines: the "before" one shows first, the "--own" one once the visitor
   has held the button (class is-own, set by assets/js/sections/ab-own.js). The paragraph .ab-hold__done holds the
   button's label after a completed hold; it is read by the script and shown only in the editor. */
.ab-own{
  --ab-own-hold:1.2s;
  --ab-own-lift:calc(var(--s-1) * -1);
  --ab-own-blur:var(--s-1);
  --ab-own-under:-1;
  --ab-own-over:1;                  /* the line with its end rings sits over the edges of both buttons */
  --ab-own-gap:var(--s-8);          /* hold button ↔ booking button, the dashed line fills it */
  --ab-own-dot:var(--s-3);          /* ring at each end: half the budget slider knob, centred on the button edge */
  --ab-own-dash:var(--s-1);
  --ab-own-line:2px;                /* ds-ok: dashed line thickness */
  --ab-own-draw:var(--dur-morph);
  --ab-own-cta-w:calc(var(--s-9) * 4); /* wider than the booking button: the end of its opening */
  --ab-own-rest:0 4px 0 var(--accent-edge); /* ds-ok: the core Button rest shadow of theme.json (styles.elements.button.shadow), so the held button sits on the same base as the booking one */
}
.ab-own .page > *,.ab-own__head > *,.ab-keys > *,.ab-key > *,.ab-key__t > *{margin:0}
.ab-own__in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--gap-head)}

/* head */
.ab-own__head{display:grid;justify-items:center;gap:var(--gap-text);margin-inline:auto;text-align:center}
.ab-own h2{font-size:var(--t-2xl)}
.ab-own h2 strong{font-weight:inherit;color:var(--accent)}
.ab-own__head > p:not(.mono){max-width:var(--measure);color:var(--ink-2)}

/* cards: icon circle (::before) and icon (::after) from the card's modifier class */
.ab-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid);width:100%}
.ab-key{position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:start;gap:var(--s-3);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);transition:border-color var(--dur-m),transform var(--dur-m) var(--ease-out)}
.ab-key::before{content:"";width:var(--ctl);height:var(--ctl);border-radius:var(--r-pill);background:var(--paper-2);transition:background-color var(--dur-m)}
.ab-key::after{content:"";position:absolute;top:calc(var(--gap-card-s) + (var(--ctl) - var(--s-5)) / 2);left:calc(var(--gap-card-s) + (var(--ctl) - var(--s-5)) / 2);width:var(--s-5);height:var(--s-5);background:var(--ink-2);-webkit-mask:var(--ab-own-icon) center / contain no-repeat;mask:var(--ab-own-icon) center / contain no-repeat;transition:background-color var(--dur-m)}
.ab-key--pen{--ab-own-icon:url(../../../icons/pen.svg?ver=7e3b1c7d)}
.ab-key--list{--ab-own-icon:url(../../../icons/list.svg?ver=1b055ffd)}
.ab-key--lock{--ab-own-icon:url(../../../icons/lock.svg?ver=433d53f0)}
.ab-key--headset{--ab-own-icon:url(../../../icons/headset.svg?ver=38e07b2f)}
.ab-key__t{display:grid;gap:var(--s-1)}
.ab-key__name{font:600 var(--t-m)/1.3 var(--font-body);color:var(--ink)}
.ab-key__sub{font-size:var(--t-xs);color:var(--ink-3)}
.ab-key__st{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-xs);color:var(--ink-3)}
.ab-key__st::before{content:"";flex:none;width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--warn)}
.ab-key__st--own{display:none}
.ab-key.is-own{border-color:var(--accent-fill);transform:translateY(var(--ab-own-lift))}
.ab-key.is-own::before{background:var(--accent-fill)}
.ab-key.is-own::after{background:var(--on-accent)}
.ab-key.is-own .ab-key__st{display:none}
.ab-key.is-own .ab-key__st--own{display:flex;color:var(--accent)}
.ab-key.is-own .ab-key__st--own::before{background:var(--good)}

/* hold button: a fill rises while it is held */
.ab-own .ab-hold .wp-block-button__link{position:relative;isolation:isolate;min-height:calc(var(--ctl) + var(--s-3));padding:0 var(--s-7);border:1px solid var(--accent-fill);border-radius:var(--r-pill);background:var(--card);color:var(--accent);font:600 var(--t-m)/1 var(--font-body);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:none;transform:none;transition:background-color var(--dur-m),color var(--dur)}
.ab-own .ab-hold .wp-block-button__link:hover,.ab-own .ab-hold .wp-block-button__link:active{box-shadow:none;transform:none}
.ab-own .ab-hold .wp-block-button__link::before{content:"";position:absolute;inset:0;z-index:var(--ab-own-under);background:var(--accent-fill);transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--dur-m) var(--ease-out)}
.ab-own .ab-hold .is-down::before{transform:scaleY(1);transition:transform var(--ab-own-hold) linear}
.ab-own .ab-hold .is-down,.ab-own .ab-hold .is-done{color:var(--on-accent)}
.ab-own .ab-hold .is-done{background:var(--accent-fill)}
.ab-hold__lbl{transition:filter var(--dur-m),opacity var(--dur-m)}
/* the next button (booking) appears after the hold, linked to it by a dashed line with a dot at each end: the line
   draws from the hold button towards it, then the button shows (phones: stacked, the line runs down) */
.ab-own .ab-hold-row{gap:0;flex-wrap:nowrap;align-items:center}
.ab-own .ab-hold .wp-block-button__link.is-done,.ab-own .ab-hold .wp-block-button__link.is-done:hover{box-shadow:var(--ab-own-rest)}
.ab-own .ab-hold__cta{position:relative;margin-inline-start:var(--ab-own-gap)}
.ab-own .ab-hold__cta .wp-block-button__link{min-height:calc(var(--ctl) + var(--s-3))}
.ab-own .ab-hold__cta::before{content:"";position:absolute;z-index:var(--ab-own-over);top:50%;right:calc(100% - var(--ab-own-dot) / 2);width:calc(var(--ab-own-gap) + var(--ab-own-dot));height:var(--ab-own-dot);transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(circle closest-side,var(--card) calc(100% - var(--ab-own-line)),var(--accent-fill) calc(100% - var(--ab-own-line)) 96%,transparent) left / var(--ab-own-dot) 100% no-repeat,
    radial-gradient(circle closest-side,var(--card) calc(100% - var(--ab-own-line)),var(--accent-fill) calc(100% - var(--ab-own-line)) 96%,transparent) right / var(--ab-own-dot) 100% no-repeat,
    repeating-linear-gradient(90deg,var(--accent-fill) 0 var(--ab-own-dash),transparent 0 calc(var(--ab-own-dash) * 2)) center / calc(100% - var(--ab-own-dot) * 2) var(--ab-own-line) no-repeat}
.js .ab-own .ab-hold-row:not(.is-owned) .ab-hold__cta{visibility:hidden;max-width:0;margin-inline-start:0}
/* wide screens: the booking button takes no room before the hold (the hold button stays centred), then opens while the line draws */
.ab-own .ab-hold-row.is-owned .ab-hold__cta{animation:ab-own-open var(--ab-own-draw) var(--ease-out) both}
@keyframes ab-own-open{from{max-width:0;margin-inline-start:0}to{max-width:var(--ab-own-cta-w);margin-inline-start:var(--ab-own-gap)}}
.js .ab-own .ab-hold-row:not(.is-owned) .ab-hold__cta::before{clip-path:inset(0 100% 0 0)}
.js .ab-own .ab-hold-row:not(.is-owned) .ab-hold__cta .wp-block-button__link{opacity:0;transform:translateX(calc(var(--s-4) * -1))}
.ab-own .ab-hold-row.is-owned .ab-hold__cta::before{animation:ab-own-draw var(--ab-own-draw) var(--ease-out) both}
.ab-own .ab-hold-row.is-owned .ab-hold__cta .wp-block-button__link{animation:ab-own-join var(--dur-m) var(--ease-out) var(--ab-own-draw) both}
@keyframes ab-own-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ab-own-join{from{opacity:0;transform:translateX(calc(var(--s-4) * -1))}}
@media (max-width: 640px){
  .ab-own .ab-hold-row{flex-direction:column;align-items:center}
  .ab-own .ab-hold__cta,.js .ab-own .ab-hold-row:not(.is-owned) .ab-hold__cta{max-width:none;margin-inline-start:0;margin-block-start:var(--ab-own-gap)} /* phones: its room is kept, so nothing below moves */
  .ab-own .ab-hold-row.is-owned .ab-hold__cta{animation:none}
  .ab-own .ab-hold__cta::before{top:auto;bottom:calc(100% - var(--ab-own-dot) / 2);right:auto;left:50%;width:var(--ab-own-dot);height:calc(var(--ab-own-gap) + var(--ab-own-dot));transform:translateX(-50%);
    background:radial-gradient(circle closest-side,var(--card) calc(100% - var(--ab-own-line)),var(--accent-fill) calc(100% - var(--ab-own-line)) 96%,transparent) top / 100% var(--ab-own-dot) no-repeat,
      radial-gradient(circle closest-side,var(--card) calc(100% - var(--ab-own-line)),var(--accent-fill) calc(100% - var(--ab-own-line)) 96%,transparent) bottom / 100% var(--ab-own-dot) no-repeat,
      repeating-linear-gradient(180deg,var(--accent-fill) 0 var(--ab-own-dash),transparent 0 calc(var(--ab-own-dash) * 2)) center / var(--ab-own-line) calc(100% - var(--ab-own-dot) * 2) no-repeat}
  .js .ab-own .ab-hold-row:not(.is-owned) .ab-hold__cta::before{clip-path:inset(0 0 100% 0)}
  .js .ab-own .ab-hold-row:not(.is-owned) .ab-hold__cta .wp-block-button__link{transform:translateY(calc(var(--s-4) * -1))}
  .ab-own .ab-hold-row.is-owned .ab-hold__cta::before{animation-name:ab-own-draw-down}
  .ab-own .ab-hold-row.is-owned .ab-hold__cta .wp-block-button__link{animation-name:ab-own-join-down}
}
@keyframes ab-own-draw-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ab-own-join-down{from{opacity:0;transform:translateY(calc(var(--s-4) * -1))}}
@media (prefers-reduced-motion: reduce){
  .ab-own .ab-hold-row.is-owned .ab-hold__cta::before,.ab-own .ab-hold-row.is-owned .ab-hold__cta .wp-block-button__link{animation:none}
}
.ab-own .is-swap .ab-hold__lbl{filter:blur(var(--ab-own-blur));opacity:0}
.ab-own .ab-hold__done{display:none}

@media (max-width: 991px){
  .ab-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  .ab-key,.ab-key::before,.ab-key::after,.ab-hold__lbl{transition:none}
}
/* editor: show both status lines and the "after hold" label so every word can be edited */
.editor-styles-wrapper .ab-key__st--own{display:flex;color:var(--accent)}
.editor-styles-wrapper .ab-own .ab-hold__done{display:block;font-size:var(--t-xs);color:var(--ink-3)}