/* ============================================================
   franco-media.com - client profile page (breadcrumbs, profile
   hero, contact card, description, gallery, related articles).
   TASK-N05 Block B4, 05-09-2026. Values from BUILD-SPEC.md sections
   5, 7, 8, 9 and reference/02-client-profile-desktop-1440.html.
   Only loaded on pages using the "SIG - Client profile" template
   (see gpcf_enqueue_styles()). Reuses .chip/.split/.rail/.slot/
   .widget from shared-components.css - nothing redefined here.
   ============================================================ */

.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:var(--page-gutter);
  padding-right:var(--page-gutter);
}

/* ---------- 8 · Breadcrumb chips ---------- */

.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:24px 0 0;
  flex-wrap:nowrap;
}
.crumbs a,
.crumbs .here{
  flex:0 0 auto;
  white-space:nowrap;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  letter-spacing:.4px;
  padding:6px 13px;
  border-radius:var(--radius-pill);
  border:1px solid var(--os-line);
  background:var(--os-card);
  color:var(--os-link);
}
.crumbs a:hover{ background:var(--os-tint); }
.crumbs .here{
  background:var(--os-link);
  border-color:var(--os-link);
  color:#fff;
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.crumbs .sep{
  flex:0 0 auto;
  display:inline-flex;
  color:var(--os-muted);
  opacity:.7;
}
.crumbs .sep svg{ width:14px; height:14px; }

/* ---------- Profile hero ---------- */

.phero{
  margin-top:18px;
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.phero .shot{
  aspect-ratio:21 / 8;
  background:var(--os-sunken);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--os-muted);
}
.phero .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.phero .meta{
  padding:24px 30px 26px;
  display:flex;
  align-items:flex-end;
  gap:20px;
}
.phero h1{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:46px;
  line-height:1.05;
  letter-spacing:-1.1px;
  color:var(--os-heading);
}
.phero p{
  margin:8px 0 0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.45;
  color:var(--os-muted);
  max-width:60ch;
}
/* N41 (HG2): the status banner of a profile (field gpcf_status), under the title */
.phero .pstatus{
  display:inline-block;
  margin:12px 0 0;
  padding:6px 14px;
  border:1px solid var(--os-highlight);
  border-radius:var(--radius-pill);
  background:var(--os-tint-warm);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  line-height:1.5;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--os-heading);
  max-width:none;
}

/* ---------- Layout ---------- */

.main{ display:flex; flex-direction:column; gap:var(--space-13); min-width:0; }
.desc h2,
section > h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h2);
  line-height:var(--lh-h2);
  color:var(--os-heading);
}
.desc h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading-2); /* N40 (H1) */
}
.eyebrow{
  margin:0 0 6px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:13.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--os-link);
}

/* ---------- 5 · Contact card ---------- */

.contact{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-top:5px solid var(--os-link);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-floating);
  overflow:hidden;
}
.contact .hd{ padding:22px 30px 0; }
.contact .hd h2{
  color:var(--os-heading); /* N40 (E4): was the parent theme's #222, now on the token */
  font-family:var(--font-display); /* TASK-N21b item 8: the contact h2 sits in .hd, not directly under a section, so it never matched the "section > h2" display rule and fell back to the parent theme's serif */
  font-weight:var(--weight-display);
}
.contact .form{ padding:18px 30px 28px; } /* TASK-N21: the old .grid/.left/.rule three-column layout is gone, the .left column's content moved into the sidebar contact card and its secondary blocks (ruling BQ7), so .contact now carries only the ECF Pro form */

/* ---------- D01 contact card (TASK-N21, 07 Templates slice 7, spec 5a/5b) ---------- */

.ccard{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-floating);
  padding:26px 24px;
  margin-bottom:var(--space-13);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.ccard h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:21px;
  line-height:1.25;
  color:var(--os-heading);
}
.ccard .rows{ display:flex; flex-direction:column; gap:10px; }
.ccrow{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:68px;
  padding:10px 14px;
  border:1.5px solid var(--os-dark-teal);
  border-radius:var(--radius-card);
  color:inherit;
  transition:background var(--duration-base) var(--ease);
}
a.ccrow:hover{ background:var(--os-tint); }
a.ccrow:hover .lab{ color:var(--os-text); } /* N28 (DY3C): muted on the tint measures 4.38:1, the text colour 13.99:1 */
.ccrow.ccrow-static{ border-color:var(--os-line); }
.ccrow .ico{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--os-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--os-dark-teal);
}
.ccrow .ico svg{ width:20px; height:20px; }
.ccrow .txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ccrow .lab{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:15px;
  color:var(--os-muted);
}
.ccrow .val{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-body); /* TASK-N21d (ruling CG, Fabrice's desktop pass): was var(--size-card-title) 19px, which wrapped a standard number onto two lines in the 340px card. var(--size-body) 16px is the nearest existing smaller token that fits one line (the next one up, var(--size-lead) 17.5px, leaves 1px and wraps longer numbers). No new token. */
  line-height:var(--lh-card-title);
  color:var(--os-dark-teal);
  text-wrap:balance; /* TASK-N21c (ruling CD), kept by TASK-N21d as the fallback for exceptional values only: a wrapped number splits into two similar halves instead of stranding its last digit group on line two */
  overflow-wrap:anywhere; /* TASK-N21b item 1: the number wraps to a second line instead of being cut by an ellipsis, size unchanged (breaks at spaces first, mid-number only if a value has none and still cannot fit) */
}
.ccrow .chev{ flex:0 0 auto; color:var(--os-muted); }
.ccrow .chev svg{ width:18px; height:18px; display:block; }
.ccard .cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  border-radius:var(--radius-sm);
  background:var(--os-dark-teal); /* TASK-N21 token close-out: dark teal now comes from the Ocean Sunset token reserved for this wiring since TASK-N15, no new hex, AQ2 */
  color:#fff;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:18px;
  transition:background var(--duration-base) var(--ease);
}
.ccard .cta:hover{ background:var(--os-heading); } /* existing universal hover-darken token */
.ccard .foot{
  margin:4px -24px -26px;
  padding:18px 24px 22px;
  border-radius:0 0 var(--radius-card) var(--radius-card);
  background:color-mix(in srgb, var(--os-pearl-aqua) 18%, white); /* D01's own rgba(148,210,189,.18): pearl-aqua at 18% over white, computed from the token rather than a new hex */
  border-top:1px solid color-mix(in srgb, var(--os-ink-black) 10%, white);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ccard .frow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.45;
  color:var(--os-text);
}
.ccard .frow .ico{ flex:0 0 auto; color:var(--os-dark-teal); margin-top:2px; }
.ccard .frow .ico svg{ width:16px; height:16px; display:block; }
.ccard .frow a{
  color:var(--os-dark-teal);
  padding:5px 0; /* TASK-N21b item 4, revised by ruling CB: the hit area is capped at the row pitch (21px line + 10px gap = 31px), not the 44px floor ... */
  margin:-5px 0; /* ... cancelled by the negative margin, so the row's visual size is unchanged. Each link's tap area grows 5px above and below, so neighbouring rows' areas meet in the middle of the gap and never overlap. Recorded, scoped deviation from the 44px floor for dense secondary text links only, every primary control keeps 44px or more. */
}
.ccard .frow a:hover{ color:var(--os-heading); }
/* TASK-N21b item 3: no link underline anywhere inside the contact card (the parent theme underlines every <a>). */
.ccard a,
.ccard a:hover,
.ccard a:focus-visible{ text-decoration:none; }

.csecondary{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:var(--space-13);
}

.line{
  display:flex;
  gap:11px;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.5;
  color:var(--os-text);
}
.line .ico{ flex:0 0 auto; color:var(--os-link); margin-top:3px; }
.line .ico svg{ width:18px; height:18px; display:block; }
.line a{ color:var(--os-link); text-decoration:underline; text-underline-offset:2px; }
.line a:hover{ color:var(--os-heading); }
/* TASK-N22 (CB2d): the menu-PDF link in the profile's secondary block gets a 44px hit area. The line is 23.25px high (15.5px x 1.5), 10.5px of padding above and below makes 44.25px, and the equal negative margin cancels it, so the line's visual size and the 14px gap to its neighbours are unchanged. The neighbours' hit areas meet this one in the gap, they do not overlap it. */
.csecondary .line a{ padding:10.5px 0; margin:-10.5px 0; }
.line .hours{ color:var(--os-muted); font-size:14.5px; }

.map{
  height:132px;
  border-radius:var(--radius-sm);
  background:var(--os-sunken);
  border:1px dashed var(--os-line);
  overflow:hidden;
}
.map iframe{ width:100%; height:100%; border:0; display:block; }

.socials{ display:flex; flex-wrap:wrap; gap:8px; } /* TASK-N38: up to seven icons, wraps on a phone */
.socials a{
  position:relative; /* TASK-N21b item 4: anchor for the enlarged hit area below */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  border:1px solid var(--os-line);
  color:var(--os-link);
}
.socials a::after{
  content:"";
  position:absolute;
  inset:-3px; /* TASK-N21c (ruling CD): 44px hit area. An absolutely positioned ::after is measured from the PADDING box (38px inside the 1px border), so -3px each side gives 38 + 6 = 44px, the N21b value of -2px gave 42px. Visual size (40px) unchanged. */
}
.socials a:hover{ background:var(--os-tint); }
.socials a svg{ width:18px; height:18px; }

/* TASK-N23 ride-along (CK3): the base .btn rule, .btn svg, .btn-accent and its
   hover were removed here after a fresh caller search found no use on the profile template
   (the only class="btn" in the theme is the article's fiche link, styled by .fiche .btn in article.css). */

/* ---------- 4 · Description (wraps the real post_content) ---------- */

.desc p{
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:var(--size-article-body);
  line-height:var(--lh-article-body);
  color:var(--os-text);
  max-width:70ch;
}
.desc img{ max-width:100%; height:auto; border-radius:var(--radius-md); }

/* ---------- Gallery ---------- */

.gal{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:18px;
}
.gal .gal-item{
  display:block;
  aspect-ratio:1 / 1;
  background:var(--os-sunken);
  border:1px solid var(--os-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:zoom-in;
}
.gal .gal-item:focus-visible{ outline:2px solid var(--os-accent); outline-offset:2px; }
/* TASK-N38 (GG4): photos 17 onward wait behind the button on every screen, photos 9 to 16 only on a phone (media query below). */
.gal-wrap:not(.is-open) .gal-item.is-x16{ display:none; }
.gal-more{
  display:block;
  margin:20px auto 0;
  min-height:44px;
  padding:10px 24px;
  border:1px solid var(--os-link);
  border-radius:var(--radius-md);
  background:var(--os-card);
  color:var(--os-link);
  font:inherit;
  font-weight:var(--weight-bold);
  cursor:pointer;
}
.gal-more:hover{ background:var(--os-tint); color:var(--os-link-hover); }
.gal-more:focus-visible{ outline:2px solid var(--os-accent); outline-offset:2px; }
.gal-wrap.is-open .gal-more{ display:none; }
.gal-more--phone{ display:none; }
.gal-dialog{
  max-width:min(96vw,1400px);
  max-height:96vh;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.gal-dialog::backdrop{ background:rgba(var(--os-ink-rgb),.86); }
.gal-dialog .gal-full{
  display:block;
  max-width:min(96vw,1400px);
  max-height:min(88vh,calc(100vh - 150px)); /* N39: room above for the close button and below for the previous and next buttons */
  width:auto;
  height:auto;
  margin:0 auto;
  border-radius:var(--radius-md);
  background:var(--os-sunken);
}
.gal-close{
  position:absolute;
  top:-48px;
  right:0;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-md);
  background:var(--on-dark-fill);
  color:var(--on-dark);
  cursor:pointer;
}
.gal-close:hover{ background:var(--on-dark-border); }
.gal-close:focus-visible{ outline:2px solid var(--on-dark); outline-offset:2px; }
/* TASK-N39 (GU2 6): previous and next buttons under the photo, never over it. Same dark-glass look as the close button, 44px targets, label plus chevron (the existing Lucide file, turned round for the previous button). */
.gal-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  min-width:min(92vw,360px);
}
.gal-prev,
.gal-next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-md);
  background:var(--on-dark-fill);
  color:var(--on-dark);
  font:inherit;
  font-size:var(--size-floor);
  font-weight:var(--weight-bold);
  line-height:1.2;
  cursor:pointer;
}
.gal-prev .ico,
.gal-next .ico{ display:inline-flex; }
.gal-prev .ico{ transform:scaleX(-1); }
.gal-prev:hover,
.gal-next:hover{ background:var(--on-dark-border); }
.gal-prev:focus-visible,
.gal-next:focus-visible{ outline:2px solid var(--on-dark); outline-offset:2px; }
body.gal-lock{ overflow:hidden; }
.gal img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Related articles ---------- */

.rel{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* TASK-N21: D02 "B" closing-band grid, was 2 columns */
  gap:var(--card-gap);
  margin-top:18px;
}
.rel .card{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;
  flex-direction:column; /* TASK-N21: vertical card, was horizontal */
  color:inherit;
  transition:box-shadow var(--duration-base) var(--ease);
}
.rel .card:hover{ box-shadow:var(--shadow-floating); }
.rel .card .ph{
  aspect-ratio:16 / 9; /* TASK-N21: full-width photo on top, was a fixed 150px side column */
  background:var(--os-sunken);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--os-text); /* N28 (DY3C): muted on sunken measures 4.42:1 */
}
.rel .card .ph.ph-photo{ padding:0; }
.rel .card .ph.ph-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.rel .card .body{ padding:16px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.rel .card h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
/* TASK-N21: the <time> row is dropped (D02's B card shows no date) -
   gpcf_related_card() no longer renders it, so .rel .card time is
   removed rather than left dead. */

/* TASK-N27: the ECF override and the D02 closing band moved to shared-components.css (DH2). */

/* ---------- Mobile (390px) ---------- */

@media (max-width:768px){
  .wrap{ padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }

  .crumbs{ font-size:var(--size-chrome); padding-top:18px; }
  .crumbs a, .crumbs .here{ font-size:var(--size-chrome); }
  .crumbs .sep svg{ width:13px; height:13px; }

  .phero .shot{ aspect-ratio:4 / 3; }
  .phero .meta{ padding:18px; flex-direction:column; align-items:flex-start; gap:8px; }
  .phero h1{ font-size:30px; letter-spacing:-.6px; }
  .phero p{ font-size:16px; }

  .contact .form{ padding:14px 18px 22px; }
  .contact .hd{ padding:20px 18px 0; }
  .socials a{ width:46px; height:46px; border-radius:var(--radius-md); }
  .socials a svg{ width:19px; height:19px; }

  .ccard{ padding:20px 18px; }
  .ccard .foot{ margin:4px -18px -20px; padding:16px 18px 20px; }

  .gal{ grid-template-columns:1fr 1fr; }
  .gal-wrap:not(.is-open) .gal-item.is-x8{ display:none; }
  .gal-more--phone{ display:block; }
  .gal-close{ top:8px; right:8px; }
  .rel{ grid-template-columns:1fr; }

}

/* ============================================================
   TASK-N40 (E2, E3, F, ruling HI5): "Other locations" under the contact card, and the
   excerpt line on the related article cards. Existing tokens only.
   ============================================================ */

.rel .card, .rel .card:hover, .rel .card:focus{ text-decoration:none; }
.rel .card .excerpt{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}
.branches{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-floating);
  padding:22px 24px;
  min-width:0;
}
.branches h3{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading-2);
}
.branches ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.branches li{ display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px solid var(--os-line); margin:0; }
.branches li:first-child{ padding-top:0; border-top:0; }
.branches li b{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  color:var(--os-heading);
}
.branches li span{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:1.45;
  color:var(--os-text);
}
.branches li svg{ flex:0 0 auto; margin-top:2px; stroke:currentColor; color:var(--os-link); }
.branches a{ color:var(--os-link); }
.branches a:hover{ color:var(--os-link-hover); }
@media (max-width:768px){
  .branches{ padding:20px 18px; }
}