/* =====================================================================================================
   N46l fixes v1. Pixel, desk 10, for Brain's N46l round, rulings OJ3, OK3 and OL4 (N46k is live: v4 CSS, build BI2).
   Mockup: P:\SIG\02 Franco-Media\Agents\Pixel\TEMPLATE - N46l fixes v1 (08-11-2026).html
   Report: P:\SIG\02 Franco-Media\Agents\Pixel\DONE - N46l fixes v1 (08-11-2026).md

     1. People card on a WPBakery inner row, selected by the extra class gpcf-people (OL4 2)
     2. Brand ground for an on-dark logo, both logo tiles (OK3)
     3. (removed in the N46l build under Brain's line OM1: Fabrice keeps the back button as it is; Pixel's original PART 3 is not shipped)
     4. Hub h1: no automatic hyphen (item 5)

   This file is NEW and sits after n46k.css, which holds the N46k v4 rules: it does not replace them, it adds to them.
   Tokens of tokens.css only: no hex, no important flag, no new token, no new font. A raw length is used only where the
   brief gives it (the 120 px portrait, the 2 px ring).
   LOAD ORDER: last of all, after n46k.css (n46j.css, n46j-brand.css, n46i-boxes.css before it). Every rule starts with
   body or an id, or carries one more class than the rule it replaces.
   ===================================================================================================== */


/* ----- 1. People card (OL4 2) ------------------------------------------------------------------------ */
/* Use: add the class gpcf-people to a WPBakery inner row (vc_row_inner) of 1/4 columns, each column a vc_single_image
   then a text block (name, role, an optional link, one line each). Nothing else on the page changes.
   n46c.css turns every row of image plus text columns into a grid of cards: the row grid, the card (white, hairline,
   --radius-card, overflow hidden), a 4 / 3 figure with the picture contained, 100 % of the width. The card stays as
   it is (same tokens, same padding). The figure, the picture and the row grid are taken back for the people row.
   The selectors below repeat the n46c selectors and add the class gpcf-people: one more class than the rule replaced,
   so they win without a flag. The two long groups (:has) are the n46c ones, copied. */
/* the row: four across (n46c: three, two under 1024 px, one under 600 px) */
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people:has(> .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6) > .vc_column-inner > .wpb_wrapper > .wpb_single_image ~ :is(h2, h3, h4, h5, h6, p, .wpb_text_column), > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6) > .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column) ~ .wpb_single_image){
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
/* the figure: no 4 / 3 box, no frame under the picture, the portrait centred above the name */
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_single_image{
  order:-1;
  margin:0;
  padding:var(--space-9) var(--space-5) var(--space-3);
  aspect-ratio:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border-bottom:0;
}
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_single_image figure.vc_figure{
  display:flex;
  width:auto;
  height:auto;
  margin:0;
  align-items:center;
  justify-content:center;
}
/* the portrait: a fixed 120 px box, round, a 2 px ring in the rubrique accent. The WPBakery oval wrapper
   (vc_box_outline_circle: its padding, its grey and turquoise frame) is reset to nothing: the ring is the only edge. */
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_single_image .vc_single_image-wrapper{
  box-sizing:border-box;
  display:block;
  flex:none;
  width:120px;
  height:120px;
  aspect-ratio:1;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  box-shadow:0 0 0 2px var(--acc-deep, var(--os-link));
  overflow:hidden;
}
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_single_image .vc_single_image-wrapper img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:1;
  object-fit:cover;
  object-position:50% 30%;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  box-shadow:none;
}
/* the text: the name bold on its own line, the role on its own line (the editor's line breaks), a plain text link */
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_text_column{
  padding:0 var(--space-5);
}
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_text_column p{
  margin:0;
  font-size:var(--size-small);
  line-height:1.45;
  color:var(--os-muted);
  text-align:center;
  overflow-wrap:break-word;
}
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_text_column p strong{
  display:block;
  font-size:var(--size-card-title);
  font-weight:var(--weight-bold);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_text_column p a{
  color:var(--os-link);
  font-weight:var(--weight-bold);
  text-decoration:underline;
  text-underline-offset:3px;
}
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_text_column p a:hover,
body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6):has(> .vc_column-inner > .wpb_wrapper > .wpb_single_image):has(> .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column)) > .vc_column-inner > .wpb_wrapper > .wpb_text_column p a:focus-visible{
  color:var(--os-link-hover);
}
/* under 1024 px and on a phone: two across (n46c: two, then one under 600 px). At 390 px a card is about 165 px wide:
   the 120 px portrait, the name on one or two lines. */
@media (max-width:1024px){
  body :is(.entry-content, .abody, .desc) .vc_row.gpcf-people:has(> .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6) > .vc_column-inner > .wpb_wrapper > .wpb_single_image ~ :is(h2, h3, h4, h5, h6, p, .wpb_text_column), > .wpb_column:is(.vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6) > .vc_column-inner > .wpb_wrapper > :is(h2, h3, h4, h5, h6, p, .wpb_text_column) ~ .wpb_single_image){
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}


/* ----- 2. Brand ground for an on-dark logo (OK3) ------------------------------------------------------ */
/* On a profile page with brand colours (n46j-brand.css prints --brand-1 on the body style) a logo flagged on dark
   (gpcf_logo_on_dark: the tiles carry is-dark) sits on --brand-1 in both tiles: the title block tile (.clogo) and the
   CTA block tile (.gpcf-cta__logo). A page without brand colours keeps today's tiles (the chrome ground in the title
   block, the panel itself in the CTA block). In the CTA block the hairline of the tile stays, so the tile still shows
   on a strip that is also the brand colour. */
body[style*="--brand-1:"] .phero .tside .clogo.is-dark{
  background:var(--brand-1);
  border-color:var(--brand-1);
}
body[style*="--brand-1:"] aside.gpcf-cta .gpcf-cta__logo.is-dark{
  background:var(--brand-1);
  border:1px solid var(--on-dark-border);
}


/* ----- 4. Hub h1: no automatic hyphen (item 5) -------------------------------------------------------- */
/* style.css sets hyphens:auto on every .pagehead h1 and page-header.css caps the h1 at 22ch, so a long word at the end
   of a line is cut ("Phu-ket"). On the hub header the h1 breaks between words only. */
body .pagehead.pagehead-hub h1{
  hyphens:manual;
}