/* ==========================================================================
   social-media/smcv.css — THE FIVE PROFILE SCENES
   Linked only by /doctor/social-media.html.

   Same vocabulary as every other service page's drawings: the well, its
   ground, its hairline grid and its hue tokens (--h / --hs / --he / --hd)
   come from gads-services/gsvc.css unchanged.

   WHY THE OBJECT IS A PROFILE, NOT AN AD
   Every drawing on this site pictures where the money lands:
     Google Ads      a search results page
     Landing Page    a browser window showing one page
     Website         a browser with a menu, a catalogue, a dashboard
     Meta Ads        a phone showing a FEED — an ad between other people's posts
     SOCIAL MEDIA    a PROFILE — the thing a customer opens before they call
   This is the only service on the site with no ad in it at all, so there is
   no "Sponsored" label anywhere in this file. What these five draw is the
   page somebody lands on when they look the business up, and whether it
   looks alive.

     1 igfb    the Instagram profile: bio, highlights, and a grid that is posted
     2 yt      a channel: banner, videos with thumbnails, Shorts shelf
     3 lipage  a LinkedIn company page: about, a document post, employees
     4 igper   a personal profile: the person, not the brochure
     5 liper   a founder's LinkedIn: headline, featured, a post that travelled

   SCALE. Nothing is in px; everything is em off the well's own width.
   ========================================================================== */


/* ==========================================================================
   1 · THE SHARED OBJECT — a profile screen
   ========================================================================== */
.cv-sm{ display:flex; flex-direction:column; gap:.45em; padding:.9em .8em; }

.sm-screen{ flex:1; min-height:0; display:flex; flex-direction:column;
  border-radius:1em; background:#fff; border:1.5px solid var(--he);
  box-shadow:0 .5em 1.4em rgba(15,27,61,.09); overflow:hidden; }

.sm-top{ flex:none; display:flex; align-items:center; gap:.4em;
  padding:.4em .58em; border-bottom:1px solid var(--he); background:#F7F9FD; }
.sm-app{ flex:none; display:flex; align-items:center; gap:.3em;
  font-size:.46em; font-weight:800; letter-spacing:-.02em; color:var(--hd); }
.sm-app s{ width:1em; height:1em !important; border-radius:.28em; background:var(--h); flex:none; }
.sm-handle{ flex:1; min-width:0; font-style:normal; font-size:.4em; font-weight:650;
  color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sm-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.32em;
  padding:.5em .55em; overflow:hidden; }
.sm-grow{ flex:1 1 auto; min-height:0; }

/* the profile head: picture, name, the three counts, the bio */
.sm-head{ flex:none; display:flex; align-items:center; gap:.45em; }
.sm-pfp{ flex:none; width:2.4em; height:2.4em !important; border-radius:50%;
  background:var(--hs); border:1.5px solid var(--he); }
.sm-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.16em; }
.sm-meta b{ font-size:.46em; font-weight:800; color:var(--ink); line-height:1.2; }
.sm-counts{ display:flex; gap:.5em; }
.sm-counts span{ display:flex; gap:.2em; align-items:baseline; }
.sm-counts em{ font-style:normal; font-size:.4em; font-weight:800; color:var(--hd); }
.sm-counts i{ font-style:normal; font-size:.32em; color:var(--ink-4); }
.sm-bio{ font-size:.38em; line-height:1.45; color:var(--ink-3); }

/* highlights — the row that tells you a profile is looked after */
.sm-hl{ flex:none; display:flex; gap:.34em; }
.sm-hl span{ flex:none; display:flex; flex-direction:column; align-items:center; gap:.14em; }
.sm-hl s{ width:1.3em; height:1.3em !important; border-radius:50%;
  background:#F3F6FA; border:1px solid var(--he); }
.sm-hl i{ font-style:normal; font-size:.28em; color:var(--ink-4); }

/* the grid — the point of scene 1: it is posted, not abandoned */
.sm-grid{ display:grid; grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:1fr; gap:.2em; }
.sm-grid span{ border-radius:.22em; background:var(--hs);
  border:1px solid var(--he); display:grid; place-items:center; }
.sm-grid span.is-reel::after{ content:""; width:0; height:0; margin-left:.1em;
  border-left:.4em solid var(--hd);
  border-top:.26em solid transparent; border-bottom:.26em solid transparent; opacity:.75; }
.sm-grid span.is-new{ background:#fff; border-style:dashed; }

.sm-note{ flex:none; display:flex; align-items:center; gap:.42em;
  font-family:var(--mono); font-size:.36em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); }
.sm-note::before,.sm-note::after{ content:""; flex:1; height:1px; background:var(--he); }
.sm-note.is-on{ color:var(--hd); }

.sm-chips{ display:flex; flex-wrap:wrap; gap:.24em; }
.sm-chip{ font-size:.36em; font-weight:700; color:var(--hd); background:var(--hs);
  padding:.26em .5em; border-radius:99px; white-space:nowrap; }
.sm-lines{ display:flex; flex-direction:column; gap:.18em; }

/* the reply row — community management, drawn */
.sm-reply{ flex:none; display:flex; align-items:center; gap:.32em;
  padding:.3em .4em; border-radius:.36em; background:#F7F9FD; border:1px solid var(--he); }
.sm-reply s{ flex:none; width:.9em; height:.9em !important; border-radius:50%; background:var(--h); }
.sm-reply span{ flex:1; min-width:0; font-size:.34em; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-reply u{ flex:none; text-decoration:none; font-size:.3em; font-weight:800; color:#0C5A25;
  background:#E3F3E9; border-radius:.22em; padding:.2em .38em; }


/* ==========================================================================
   2 · 02 YOUTUBE — a channel, its videos and its Shorts shelf
   ========================================================================== */
.cv-sm2 .sm-banner{ flex:none; width:100%; height:1.9em; border-radius:.36em;
  background:linear-gradient(105deg, var(--hs) 0%, #fff 60%, var(--hs) 100%);
  border:1px solid var(--he); }
.cv-sm2 .sm-vids{ display:flex; flex-direction:column; gap:.26em; }
.cv-sm2 .sm-vid{ display:flex; gap:.34em; align-items:center; }
.cv-sm2 .sm-thumb{ flex:none; width:32%; aspect-ratio:16/9; border-radius:.24em;
  background:var(--hs); border:1px solid var(--he); display:grid; place-items:center; }
.cv-sm2 .sm-thumb::after{ content:""; width:0; height:0; margin-left:.1em;
  border-left:.36em solid var(--hd);
  border-top:.24em solid transparent; border-bottom:.24em solid transparent; opacity:.8; }
.cv-sm2 .sm-vt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.14em; }
.cv-sm2 .sm-vt b{ font-size:.36em; font-weight:700; color:var(--ink-2); line-height:1.3; }
.cv-sm2 .sm-vt i{ font-style:normal; font-size:.3em; color:var(--ink-4); }
.cv-sm2 .sm-shorts{ display:flex; gap:.24em; }
.cv-sm2 .sm-shorts span{ flex:1; aspect-ratio:9/16; max-height:2.6em; border-radius:.24em;
  background:var(--hs); border:1px solid var(--he); }


/* ==========================================================================
   3 · 03 / 05 LINKEDIN — a document post, and what it reached
   ========================================================================== */
.cv-sm3 .sm-post, .cv-sm5 .sm-post{ display:flex; flex-direction:column; gap:.24em;
  padding:.4em; border-radius:.42em; background:#fff; border:1px solid var(--he);
  min-height:0; }
.cv-sm3 .sm-doc, .cv-sm5 .sm-doc{ flex:1; min-height:2.2em; width:100%; border-radius:.26em;
  background:var(--hs); border:1px solid var(--he);
  display:flex; align-items:flex-end; padding:.3em; gap:.2em; }
.cv-sm3 .sm-doc i, .cv-sm5 .sm-doc i{ flex:1; border-radius:.1em; background:rgba(255,255,255,.85); }
.cv-sm3 .sm-doc i:nth-child(1){ height:42%; }
.cv-sm3 .sm-doc i:nth-child(2){ height:70%; }
.cv-sm3 .sm-doc i:nth-child(3){ height:54%; }
.cv-sm5 .sm-doc i:nth-child(1){ height:36%; }
.cv-sm5 .sm-doc i:nth-child(2){ height:82%; }
.cv-sm5 .sm-doc i:nth-child(3){ height:60%; }
.cv-sm3 .sm-eng, .cv-sm5 .sm-eng{ display:flex; gap:.44em; }
.cv-sm3 .sm-eng span, .cv-sm5 .sm-eng span{ display:flex; flex-direction:column; }
.cv-sm3 .sm-eng b, .cv-sm5 .sm-eng b{ font-size:.42em; font-weight:800; color:var(--hd);
  letter-spacing:-.02em; line-height:1.05; }
.cv-sm3 .sm-eng i, .cv-sm5 .sm-eng i{ font-style:normal; font-size:.28em; color:var(--ink-4); }

/* 05 only: the featured strip a founder's profile carries */
.cv-sm5 .sm-feat{ display:flex; gap:.26em; }
.cv-sm5 .sm-feat span{ flex:1; height:1.5em; border-radius:.24em; background:var(--hs);
  border:1px solid var(--he); }