/* ICS member flip (P83, 2026-11-05). Team and advisor cards on /ve-chung-toi/ (121) and /en/about-us/ (2895).
 * Card = the original flip: uploads/ics-motion/ics-flip.css + ics-flip.js (unchanged). Front: photo or initials, name, role.
 * Back: description (placeholder when empty), Facebook/LinkedIn icons only when the URL exists, black square close button.
 * Card height = max(front, back). Grid rows size to the tallest card: no fixed heights, no 4:5 box on the back. */
html body #ab-team-grid#ab-team-grid, html body #ab-adv-grid#ab-adv-grid { grid-auto-rows: auto !important; grid-template-rows: none !important; align-items: stretch !important; }
html body #ab-team-grid#ab-team-grid > .ics-member, html body #ab-adv-grid#ab-adv-grid > .ics-member { height: auto !important; min-height: 0 !important; min-width: 0 !important; aspect-ratio: auto !important; }
html body .ics-member > .ics-flip__inner { height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; -webkit-mask: none !important; mask: none !important; }
html body .ics-member .ics-flip__front, html body .ics-member .ics-flip__back { aspect-ratio: auto !important; min-height: 0 !important; }
html body .ics-member .ics-flip__media { aspect-ratio: 4 / 5 !important; height: auto !important; }
html body .ics-member .ics-flip__back { display: flex !important; flex-direction: column !important; padding: 16px 16px 0 !important; }
html body .ics-member .ics-flip__panel { flex: 1 1 auto; box-sizing: border-box; aspect-ratio: auto !important; height: auto !important; min-height: 0; margin: 0; padding: 60px 22px 22px !important; overflow: visible !important; -webkit-mask: none !important; mask: none !important; border-radius: 8px; }
html body .ics-member .ics-flip__text { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
html body .ics-member .ics-flip__nb { display: flex !important; flex-wrap: wrap; gap: 12px; margin: auto 0 0 !important; padding: 8px 0 16px !important; background: transparent; }
html body .ics-member .ics-flip__nb:not(:has(a[href])) { display: none !important; }
html body .ics-member .ics-flip__social-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; border-radius: 0; background: #000; color: #fff; text-decoration: none; }
html body .ics-member .ics-flip__social-link svg { display: block; width: 22px; height: 22px; }
html body .ics-member .ics-flip__close { position: absolute; top: 8px; right: 8px; z-index: 4; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; cursor: pointer; appearance: none; -webkit-appearance: none; }
html body .ics-member .ics-flip__close::before, html body .ics-member .ics-flip__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
html body .ics-member .ics-flip__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
html body .ics-member .ics-flip__close:not(:focus-visible), html body .ics-member .ics-flip__social-link:not(:focus-visible) { outline: none; }
html body .ics-member .ics-flip__close:focus-visible, html body .ics-member .ics-flip__social-link:focus-visible { outline: 3px solid #ed1d85; outline-offset: 3px; }
/* Shared portrait placeholder (members without a featured image, e.g. advisors today): initials centred in the photo box, pink ground. Rules carried over from ics-member-deck.css (P49). */
html body .ics-member .ics-flip__media { container-type: inline-size; }
html body .ics-member .ics-flip__media:has(> .ics-member__initials) { background: #ffb2db !important; }
html body .ics-member .ics-member__initials { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; box-sizing: border-box; font-family: 'EB Garamond', Georgia, serif; font-weight: 600; font-size: 46cqw; line-height: 1; color: #302f29; text-align: center; white-space: nowrap; overflow: hidden; pointer-events: none; }
/* The card root is never a focus target (the close button is). Stop the site-wide focus/:has() outlines from framing the whole card while it is flipped (pink frame seen on the back, P83 verification). */
html body .ics-member.ics-flip, html body .ics-member.ics-flip:focus, html body .ics-member.ics-flip:focus-visible { outline: none !important; }

/* H22 flip focus ring (2026-11-05). Keyboard focus target of a member card is its toggle (1px until :focus-visible, see uploads ics-flip.css). Ring the whole card while the toggle has keyboard focus. Click, flip logic, hit area and layout unchanged. Tokens from H18 (ics-form-a11y.css :root). */
html body .ics-member.ics-flip:has(> .ics-flip__toggle:focus-visible) {
  outline: var(--ics-focus-width, 3px) solid var(--neutral-1000, #111);
  outline-offset: var(--ics-focus-offset, 2px);
  border-radius: 8px;
  box-shadow: 0 0 0 calc(var(--ics-focus-width, 3px) + var(--ics-focus-offset, 2px) + var(--ics-focus-halo, 3px)) var(--white, #fff);
}

/* H77 flip toggle hidden (2026-11-05). The toggle stays the keyboard focus target, but it is always visually hidden (1px clip) in every state, so its label (ics-flip.css:101 focus-visible pill) and its UA focus ring never show. Keyboard focus is shown by the card ring (H22 block above). Beats ics-flip.css:100-101 and the a11y 44px touch-target rules. */
html body .ics-member.ics-flip > .ics-flip__toggle.ics-flip__toggle,
html body .ics-member.ics-flip > .ics-flip__toggle.ics-flip__toggle:hover,
html body .ics-member.ics-flip > .ics-flip__toggle.ics-flip__toggle:focus,
html body .ics-member.ics-flip > .ics-flip__toggle.ics-flip__toggle:focus-visible,
html body .ics-member.ics-flip > .ics-flip__toggle.ics-flip__toggle:active,
html body .ics-member.ics-flip.is-flipped > .ics-flip__toggle.ics-flip__toggle {
  position: absolute !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
  width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; max-width: 1px !important; max-height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; outline: none !important; z-index: 0 !important;
}