/* ============================================================
   franco-media.com - shared components used across multiple page
   types. TASK-N05 Block B4, 05-09-2026.

   Extracted from home.css (Block B3), where they were first built,
   because Brain's ruling of 05-09-2026 made the two-column layout
   (main content + right sidebar with the banner slot and Articles
   récents widget) the standing pattern for: home, all blog articles
   (B5), the blog listing page, category archive pages, and the
   client profile (this block). Kept in one file so every future
   block enqueues this instead of re-declaring the same rules -
   .chip is included too, since the profile hero chip and the
   related-articles chip both need it and it is identical to the
   home article-card chip.

   Values unchanged from home.css - this is a relocation, not a
   redesign. No visual change to the home page.
   ============================================================ */

/* ---------- Category grid (.cats/.cat/.badge) ----------
   Moved from home.css in TASK-N19 slice 5, unchanged (ruling BM): now
   loaded sitewide (this file is already a dependency of home.css and
   enqueued unconditionally on every page), so the launcher panel and
   the mobile nav overlay can reuse the exact same design language as
   the home grid. No value changed - this is a relocation, not a
   redesign, and the home page's own rendering is unaffected. */

/* TASK-N19B (ruling BO): badge/icon presentation strengthened - larger
   icon, tint background one step stronger via color-mix (no new token),
   full accent stroke kept. Grid itself unchanged here; mobile 3-across
   compaction lives in header-footer.css, scoped to the launcher panel
   and the mobile nav overlay only, not this shared desktop grid. */
.cats{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  margin-top:26px;
}
.cat{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  padding:20px 14px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:11px;
  color:inherit;
  text-decoration:none;
  transition:border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.cat:hover{
  border-color:var(--acc);
  box-shadow:var(--shadow-raised);
}
.cat .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--acc-tint) 90%, var(--acc) 10%); /* N28 (DZ2A): was 80/20 */
  color:var(--acc);
}
.cat:hover .badge{ background:var(--acc); color:#fff; }
/* TASK-N19d (ruling BT2): on hover and focus-visible, the icon itself goes
white on the accent-filled badge. White already exists in the deployed
hover rule above, this just makes sure the icon (.ico, the Lucide svg's
currentColor ancestor) picks it up too, instead of staying at its resting
colour and disappearing into the accent fill (clearest on Shopping). No
new hex, no new tokens (AQ2). Resting state unchanged. */
.cat:hover .badge .ico, .cat:focus-visible .badge .ico{ color:#fff; }
.cat .badge svg{ width:28px; height:28px; stroke:currentColor; display:block; }
.cat b{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:15.5px;
  color:var(--os-heading);
}
/* TASK-N19c (ruling BQ4): on hover the label goes to the rubrique accent,
   matching the badge. :visited is pinned to the same resting ink colour so
   a previously-clicked tile never falls back to the browser's default
   visited-link grey - this is the "never grey" ruling, not a design
   change. Badge hover itself is untouched (still full accent, see above). */
.cat:hover b, .cat:focus-visible b{ color:var(--os-heading); } /* N28 (DY4): an accent never carries text under 18px bold, the label stays ink on hover */
.cat:visited b{ color:var(--os-heading); }
/* TASK-N25b (ruling DD4): the note rule is scoped to the note span only. As
   .cat span it also hit the badge and its .ico wrapper (both spans, same
   specificity, later rule), so every resting icon inherited this muted grey
   instead of the badge's rubrique accent. Hover was unaffected because the
   N19d rule above is more specific. Nothing else changes, no new hex, no new
   token (AQ2). */
.cat > span:not(.badge){
  font-family:var(--font-body);
  font-size:var(--size-caption);
  line-height:1.35;
  color:var(--os-muted);
}

.chip{
  align-self:flex-start;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--os-link);
  background:var(--os-tint);
  padding:4px 10px;
  border-radius:var(--radius-pill);
}

.split{
  display:grid;
  grid-template-columns:1fr var(--sidebar-width);
  gap:var(--split-gap);
  align-items:start;
  margin-top:26px;
}

.rail{ display:flex; flex-direction:column; gap:20px; }
.slot{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.slot img{
  display:block;
  width:300px;
  height:250px;
  border-radius:var(--radius-sm);
  object-fit:cover;
}
.slot .note{
  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);
}
.widget{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  padding:20px 22px;
}
.widget .hd{
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--os-line);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--os-muted);
}
.widget ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.widget a{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:16px;
  line-height:1.25;
  color:var(--os-heading);
}
.widget a:hover{ color:var(--os-link); }
.widget span{
  display:block;
  margin-top:3px;
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  font-size:var(--size-caption);
  color:var(--os-muted);
}

@media (max-width:768px){
  .split{ grid-template-columns:1fr; gap:0; }
  .rail{ margin-top:var(--space-13); gap:16px; }
  .slot img{ width:100%; height:auto; aspect-ratio:6 / 5; }
}

/* TASK-N27 (DH2): moved here from client-profile.css so every page that prints an ECF form gets it; SEND is dark-teal filled sitewide, one rule.
   Existing Easy Contact Form Pro output, lightly rescoped to the new
   tokens so it doesn't clash with the old plugin defaults. The form
   itself (fields, validation, captcha, mail-kill) is untouched -
   this only touches colour/spacing to match the card it now sits in. */
.form .ecf-form{ font-family:var(--font-body); }
.form .ecf-form label{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--os-muted);
}
.form .ecf-form input[type="text"],
.form .ecf-form input[type="email"],
.form .ecf-form input[type="tel"],
.form .ecf-form select,
.form .ecf-form textarea{
  font-family:var(--font-body);
  font-size:15.5px;
  border-radius:var(--radius-sm);
  border:1px solid var(--os-line);
}
.form .ecfbutton{
  background:var(--os-dark-teal) !important;
  border-color:var(--os-dark-teal) !important;
  border-radius:var(--radius-sm) !important;
  font-family:var(--font-body) !important;
  font-weight:var(--weight-bold) !important;
}
.form .ecfbutton:hover{ background:var(--os-heading) !important; border-color:var(--os-heading) !important; }

/* ---------- (moved from client-profile.css in TASK-N27) D02 "B" closing band (TASK-N21, 07 Templates slice 7, spec 5d, rulings BK/BL) ---------- */

.rel + .closing{ margin-top:var(--card-gap); } /* TASK-N21b item 5: the box can now stand without the related-cards row above it */
.closing{
  background:var(--os-tint); /* TASK-N21: a generic neutral tint, not one rubrique's own accent-tint (D02's #ECF0F0 is literally --accent-shopping-tint, specific to that demo client's own category) */
  border-radius:var(--radius-card);
  padding:36px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.closing .ico{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--os-card);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--os-dark-teal);
}
.closing .ico svg{ width:28px; height:28px; }
.closing 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);
  max-width:46ch;
}
.closing .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 32px;
  border-radius:var(--radius-sm);
  background:var(--os-dark-teal);
  color:#fff;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:18px;
  transition:background var(--duration-base) var(--ease);
}
.closing .cta:hover{ background:var(--os-heading); }

@media (max-width:768px){
  .closing{ padding:28px 20px; }
}

/* ---------- Language note after a card title (TASK-N38, GC3) ----------
   Printed only when a card shows an original that has no translation in the
   page language ("in English", "en anglais", "на английском"). */
.lang-note{
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  font-size:var(--size-caption);
  letter-spacing:0;
  color:var(--os-muted);
  white-space:nowrap;
}

/* ---------- Easy Contact Form notification widget (TASK-N38, E2) ----------
   The "You received 1 new Email" corner widget the ECF Pro plugin prints on
   profile pages. Its Global Settings page has no switch for it, so it is
   hidden here for every visitor. !important: the plugin's own script sets the
   widget's display inline when it opens it. */
#ecf-notifications-email-bottom-right{ display:none !important; }

/* ---------- Audio player time tooltip (TASK-N38, F2) ----------
   The plugin sets a 36 px width for "0:00", so a time over one hour
   ("1:23:45") ran out of the box. A minimum width in em lets it grow. */
.mejs-time-float,
.mejs__time-float{
  min-width:4.5em;
  box-sizing:border-box;
  padding:0 4px;
  white-space:nowrap;
}

/* ---------- Parallax rows (TASK-N38, F4) ----------
   A WPBakery row with a parallax background is positioned from the window
   width by script and ran 15 px past the screen on a phone (281203 RU). The
   row clips sideways, the page does not. overflow-x:clip does not make the row
   a scroll container; the hidden line is the fallback for an older browser. */
.vc_row[data-vc-parallax],
.vc_row.vc_general.vc_parallax{
  overflow-x:hidden;
  overflow-x:clip;
}
.vc_parallax{ max-width:100%; }

/* ============================================================
   TASK-N40 (D, rulings HI3 and HI4): the FAQ component (inc/faq.php), details and
   summary, the same look as the advertising rates page (the values of rates.css
   .faq, repeated here because that sheet loads on the rates pages only). Printed on
   hubs, client profiles and default pages. Existing tokens only.
   ============================================================ */

.gpcf-faq 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);
}
.gpcf-faq .faq{ margin-top:26px; max-width:880px; display:flex; flex-direction:column; gap:10px; }
.gpcf-faq details{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  padding:0 22px;
}
.gpcf-faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:17px;
  line-height:1.3;
  color:var(--os-heading);
}
.gpcf-faq summary::-webkit-details-marker{ display:none; }
.gpcf-faq summary .qt{ flex:1; }
.gpcf-faq summary .ico{ display:inline-flex; flex:0 0 auto; color:var(--os-link); }
.gpcf-faq summary .qi svg{ width:22px; height:22px; stroke:currentColor; }
.gpcf-faq summary .chev svg{ width:20px; height:20px; stroke:currentColor; }
.gpcf-faq details[open] summary .chev{ transform:rotate(180deg); }
.gpcf-faq details[open] > summary{ position:relative; }
.gpcf-faq details[open] > summary::before{
  content:"";
  position:absolute;
  left:-22px;
  top:50%;
  width:4px;
  height:24px;
  margin-top:-12px;
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  background:var(--os-accent);
}
.gpcf-faq summary:focus-visible{ outline:3px solid var(--os-dark-teal); outline-offset:3px; }
.gpcf-faq .ans{ padding:0 0 18px; }
.gpcf-faq .ans p{ margin:0; font-family:var(--font-body); font-size:16px; line-height:1.65; max-width:70ch; color:var(--os-text); }
.gpcf-faq .ans p + p{ margin-top:12px; }
@media (max-width:768px){
  .gpcf-faq details{ padding:0 18px; }
  .gpcf-faq summary{ font-size:16px; padding:6px 0; }
  .gpcf-faq details[open] > summary::before{ left:-18px; }
}