/* Website typography, palette and spacing retained from services.html.
   Artwork uses the common 148 x 238 master artboard, preserving relative heights. */
.phead--strategies{padding-top:76px;padding-bottom:56px}
.phead--strategies h1{margin:0}
.strategy-explorer{padding:0 72px 76px}
.strategy-pieces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-3);border-bottom:1px solid var(--rule-3)}
.strategy-piece{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:26px 14px 30px;background:transparent;border:0;color:var(--muted);cursor:pointer;text-align:center;transition:background-color var(--hover-fade) ease,color var(--hover-fade) ease}
.strategy-piece+.strategy-piece{border-left:1px solid var(--rule-3)}
.strategy-piece::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform var(--hover-fade) ease}
.strategy-piece:hover,.strategy-piece[aria-expanded="true"]{color:var(--fg);background:var(--slot-tint)}
.strategy-piece:hover::after,.strategy-piece[aria-expanded="true"]::after{transform:scaleX(1)}
.strategy-piece:focus-visible{outline:1px solid var(--gold);outline-offset:-6px}
.strategy-piece img{display:block;width:148px;height:238px;max-width:100%;object-fit:contain;transition:filter var(--hover-fade) ease}
.strategy-piece:hover img,.strategy-piece[aria-expanded="true"] img{filter:drop-shadow(0 0 22px var(--gold-glow))}
.strategy-piece__name{font:400 11px/1.4 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.strategy-piece__strategy{font:400 21px/1.3 'Marcellus',serif;min-height:82px;max-width:180px;text-wrap:balance}
.strategy-detail{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;padding:44px 0 0;min-height:230px;animation:pwrSoftUp .38s cubic-bezier(0.16,1,0.3,1) both}
.strategy-detail[hidden]{display:none}
.strategy-detail:focus-visible{outline:1px solid var(--gold);outline-offset:12px}
.strategy-detail .eyebrow{margin-bottom:18px}
.strategy-detail h2{font:400 30px/1.25 'Marcellus',serif;letter-spacing:-.006em;margin:0;text-wrap:balance}
.strategy-detail__copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.strategy-detail__copy p{margin:0;max-width:62ch}
.strategy-detail__subtitle{font:400 21px/1.3 'Marcellus',serif;color:var(--fg);text-wrap:pretty}
.strategy-detail__pending{font:400 15px/1.75 'Jost',sans-serif;color:var(--dim)}
@media(prefers-reduced-motion:reduce){.strategy-detail{animation:none}.strategy-piece,.strategy-piece::after,.strategy-piece img{transition:none}}

/* Relative chess values; these are not measured strategy-efficiency scores. */
.strategy-power{display:flex;flex-direction:column;gap:9px;width:100%;max-width:148px;margin-top:auto;padding-top:9px}
.strategy-power__label{display:flex;align-items:baseline;justify-content:space-between;gap:9px;font:400 11px/1.4 'Jost',sans-serif;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.strategy-power__label b{font-weight:500;color:var(--gold-bright)}
.strategy-power__bars{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;height:4px}
.strategy-power__bars i{display:block;background:var(--rule-4)}
.strategy-power__bars i.is-lit{background:var(--gold)}
.strategy-power__priority{display:block;height:4px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold-soft)}
.strategy-power-note{margin:18px 0 0;font:400 12px/1.6 'Jost',sans-serif;letter-spacing:.02em;color:var(--dim)}


/* King introduction reuses the existing detail grid, artboard, type and gutters. */
.strategy-king{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center;margin:0 var(--page-gutter) 56px;padding:44px 0 56px;border-top:1px solid var(--rule-3);border-bottom:1px solid var(--rule-3)}
.strategy-king__piece{display:flex;flex-direction:column;align-items:center;gap:18px}
.strategy-king__piece img{display:block;width:148px;height:238px;max-width:100%;object-fit:contain}
.strategy-king__copy{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.strategy-king__copy p{margin:0}
.strategy-explorer__intro{display:flex;flex-direction:column;gap:18px;margin-bottom:30px;max-width:62ch}
.strategy-explorer__intro p{margin:0}
@media(max-width:850px){
  .strategy-king{grid-template-columns:minmax(0,1fr);gap:24px;padding:30px 0 44px}
  .strategy-king__copy{max-width:100%}
}


/* Connected disclosures. Motion is measured in JS so hidden text never
   reflows visibly and card geometry shares one timing curve. */
.strategy-explorer .strategy-pieces{display:flex;align-items:stretch}
.strategy-entry{display:flex;flex:1 1 0;min-width:0;overflow:hidden}
.strategy-entry+.strategy-entry{border-left:1px solid var(--rule-3)}
.strategy-entry .strategy-piece{flex:1 1 auto;min-width:0;width:100%;border:0;justify-content:flex-start}
.strategy-piece__meta{display:flex;flex:1;flex-direction:column;align-items:center;gap:18px;width:100%;min-width:0}
.strategy-piece__action{font:400 var(--type-label)/1.5 'Jost',sans-serif;color:var(--gold-bright);text-decoration:underline;text-underline-offset:4px}
.strategy-pieces.has-open .strategy-entry:not(.is-open){flex:0 0 88px}
.strategy-pieces.has-open .strategy-entry:not(.is-open) .strategy-piece__meta{position:absolute;opacity:0;visibility:hidden;pointer-events:none}
.strategy-entry.is-open{flex:1 1 0;background:var(--surface)}
.strategy-entry.is-open .strategy-piece{flex:0 0 35%;min-width:148px;max-width:240px;background:var(--slot-tint)}
.strategy-entry .strategy-detail{position:relative;display:flex;flex:1 1 0;min-width:0;overflow:hidden;flex-direction:column;justify-content:center;gap:26px;margin:0;padding:56px 30px 30px;border-left:1px solid var(--gold-soft);animation:none}
.strategy-entry .strategy-detail[hidden]{display:none}
.strategy-entry .strategy-detail h2{text-wrap:pretty}
.strategy-detail__close{position:absolute;top:18px;right:18px;border:1px solid var(--rule-3);border-radius:999px;background:transparent;color:var(--muted);padding:9px 14px;cursor:pointer;font:400 var(--type-label)/1.4 'Jost',sans-serif}
.strategy-detail__close:hover{color:var(--fg);border-color:var(--gold-soft)}
.strategy-detail__close:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* Keep the compact artwork in the same 238px slot as the full cards.
   Its width follows the card continuously; its alignment never switches. */
@media(max-width:850px){
  .strategy-explorer .strategy-pieces{flex-direction:column}
  .strategy-pieces .strategy-entry,.strategy-pieces.has-open .strategy-entry:not(.is-open){flex:none;flex-direction:column}
  .strategy-entry+.strategy-entry{border-left:0;border-top:1px solid var(--rule-3)}
  .strategy-entry .strategy-piece,.strategy-entry.is-open .strategy-piece{display:grid;grid-template-columns:148px minmax(0,1fr);grid-template-areas:'art name' 'art meta';gap:9px 26px;padding:22px 26px;min-width:0;max-width:none;flex:none;text-align:left;justify-items:start;align-content:center}
  .strategy-entry .strategy-piece img{grid-area:art;width:148px;height:238px}
  .strategy-entry .strategy-piece__name{grid-area:name;align-self:end}
  .strategy-entry .strategy-piece__meta,.strategy-pieces.has-open .strategy-entry:not(.is-open) .strategy-piece__meta{grid-area:meta;position:static;opacity:1;visibility:visible;pointer-events:auto;gap:9px;align-items:flex-start;align-self:start}
  .strategy-entry .strategy-piece__strategy{min-height:0;max-width:none}
  .strategy-entry .strategy-power{margin:0}
  .strategy-entry .strategy-detail{flex:none;border-left:0;border-top:1px solid var(--gold-soft)}
}
@media(max-width:600px){
  .strategy-entry .strategy-piece,.strategy-entry.is-open .strategy-piece{grid-template-columns:88px minmax(0,1fr);gap:9px 18px;padding:22px 14px}
  .strategy-entry .strategy-piece img{width:88px;height:148px}
  .strategy-entry .strategy-detail{padding:56px 22px 30px}
}

/* Prevent scroll anchoring from following moving cards during measurement. */
html.strategy-motion{overflow-anchor:none}

/* Anchor the artwork to one baseline while neighboring cards narrow. */
.strategy-entry{position:relative}
@media(min-width:851px){
  .strategy-explorer .strategy-pieces{height:var(--strategy-row-height,auto)}
  .strategy-entry{min-height:0}
  .strategy-entry .strategy-piece{min-height:0}
  .strategy-entry .strategy-detail{min-height:0;overflow-y:auto;justify-content:safe center}
  .strategy-entry .strategy-detail>div{flex-shrink:0;min-width:0;overflow-wrap:anywhere}
  .strategy-entry .strategy-piece>img{flex:0 0 auto;object-position:center bottom}
  .strategy-entry .strategy-piece>.strategy-piece__name{flex:0 0 auto}
}

/* v012: readable, consistently placed summaries and a clear selected card. */
:root .strategy-explorer .strategy-entry.is-open{border-color:var(--gold-soft)}
:root .strategy-entry .strategy-detail{justify-content:flex-start}
:root .strategy-entry .strategy-detail__copy{gap:24px}
:root .strategy-entry .strategy-detail__copy p{font-size:var(--type-lead);line-height:1.7;color:var(--fg)}
:root .strategy-entry .strategy-detail__copy:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
@media(min-width:851px){
  :root .strategy-entry .strategy-detail{overflow-y:hidden}
  :root .strategy-entry .strategy-detail>.strategy-detail__copy{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}

/* v013: a shorter desktop row, with the same measured height in every state. */
@media(min-width:851px){
  :root .strategy-explorer .strategy-entry .strategy-piece{padding:24px 14px;gap:16px}
  :root .strategy-explorer .strategy-entry .strategy-piece>img{width:110px;height:176px}
  :root .strategy-explorer .strategy-piece__meta{gap:12px}
  :root .strategy-explorer .strategy-piece__strategy{max-width:min(180px,100%);overflow-wrap:anywhere}
  :root .strategy-explorer .strategy-power{padding-top:12px;gap:8px}
}
@media(min-width:1251px){
  :root .strategy-explorer #piece-queen-loss .strategy-power{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:212px;gap:8px 12px;text-align:left}
  :root .strategy-explorer #piece-queen-loss .strategy-power__label:first-child{grid-column:1/-1}
  :root .strategy-explorer #piece-queen-loss .strategy-power__label:nth-child(2){grid-column:1;grid-row:2}
  :root .strategy-explorer #piece-queen-loss .strategy-power__label:nth-child(4){grid-column:2;grid-row:2}
  :root .strategy-explorer #piece-queen-loss .strategy-power__label:not(:first-child){flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px}
  :root .strategy-explorer #piece-queen-loss .strategy-power__bars:nth-child(3){grid-column:1;grid-row:3}
  :root .strategy-explorer #piece-queen-loss .strategy-power__bars:nth-child(5){grid-column:2;grid-row:3}
}

/* v015: efficacy belongs to the expanded summary, not the chess card. */
:root .strategy-explorer .strategy-piece__action{margin-top:auto}
:root .strategy-explorer .strategy-detail .strategy-power{flex:none;max-width:none;margin:0;padding:0 0 18px;border-top:0;border-bottom:1px solid var(--card-line);gap:8px;text-align:left}
:root .strategy-explorer .strategy-detail .strategy-power--dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
:root .strategy-explorer .strategy-detail .strategy-power--dual>.strategy-power__label:first-child{grid-column:1/-1}
:root .strategy-explorer .strategy-detail .strategy-power--dual>.strategy-power__label:nth-child(2){grid-column:1;grid-row:2}
:root .strategy-explorer .strategy-detail .strategy-power--dual>.strategy-power__label:nth-child(4){grid-column:2;grid-row:2}
:root .strategy-explorer .strategy-detail .strategy-power--dual>.strategy-power__bars:nth-child(3){grid-column:1;grid-row:3}
:root .strategy-explorer .strategy-detail .strategy-power--dual>.strategy-power__bars:nth-child(5){grid-column:2;grid-row:3}
@media(max-width:1100px){
  :root .strategy-explorer .strategy-detail .strategy-power--dual{display:flex;flex-direction:column}
}
@media(max-width:850px){
  :root .strategy-explorer .strategy-piece__action{margin-top:0}
}

/* Keep the restored row close to its previous height, with room for the summary. */
@media(min-width:851px){
  :root .strategy-explorer .strategy-pieces{min-height:560px}
  /* Two pixels of room prevent a fractional-height overflow scrollbar. */
  :root .strategy-explorer .strategy-entry .strategy-detail{padding-bottom:14px}
  :root .strategy-explorer .strategy-detail__copy{scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent}
}

/* v017: center the chess artwork and strategy title as a stable desktop group. */
@media(min-width:851px){
  :root .strategy-explorer .strategy-entry .strategy-piece{justify-content:center}
  :root .strategy-explorer .strategy-piece__name{position:absolute;top:24px;left:0;right:0}
  :root .strategy-explorer .strategy-piece__meta{flex:0 0 120px;height:120px;gap:0}
  :root .strategy-explorer .strategy-piece__strategy{min-height:0}
  :root .strategy-explorer .strategy-piece__action{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
  :root .strategy-explorer .strategy-pieces.has-open .strategy-entry:not(.is-open) .strategy-piece__meta{position:static;overflow:hidden}
  :root .strategy-explorer .strategy-pieces.has-open .strategy-entry:not(.is-open) .strategy-piece__action{visibility:hidden}
}
@media(min-width:851px) and (max-width:1250px){
  :root .strategy-explorer .strategy-piece__meta{flex-basis:180px;height:180px}
}
@media(max-width:850px){
  :root .strategy-explorer .strategy-piece__action{grid-column:2;justify-self:start}
}