/* ==========================================================================
   social-media-guide.css — the five explanatory diagrams for
   /restaurant-social-media-guide.html. Added 2026-09-10.

   THE MOTION CONTRACT, AND WHY IT IS INVERTED
   -------------------------------------------
   Every rule in this file describes the FINISHED diagram. Nothing here hides
   anything. Motion lives entirely in @keyframes that are attached only when
   BOTH of these are true:

       html.smg-motion          — set by JS, only when the reader has not asked
                                  for reduced motion and IntersectionObserver
                                  exists;
       .smg[data-play="true"]   — set per diagram, only while that diagram is
                                  actually on screen.

   Every animation uses `both`, so its own 0% frame supplies the start state and
   its 100% frame is the state the element already had. Remove either class and
   the element is instantly back to the finished diagram — nothing is cancelled
   mid-way and stranded invisible.

   This is deliberately the opposite of the .mg-fig pattern used by the other
   article guides, which hides start states under `.motion-on` and releases them
   once. That pattern cannot replay, and on 2026-09-06 a variant of it shipped a
   tall blank gap on the costing guide. Here, the failure mode of "the script
   never runs" is simply "no animation".

   REPLAY
   ------
   These are workflow explainers, not entrance flourishes, so they replay when a
   diagram leaves the viewport and comes back. The observer watches each diagram
   container, not an outer section.

   PALETTE
   -------
   Nothing invented: navy #16213e / #0a1930 and gold #d4a84b are the homepage
   and header values; the easing is the site's cubic-bezier(0.22,1,0.36,1).
   ========================================================================== */

.smg {
  --smg-navy: #16213e;
  --smg-deep: #0a1930;
  --smg-gold: #d4a84b;
  --smg-gold-dim: rgba(212, 168, 75, 0.16);
  --smg-line: rgba(212, 168, 75, 0.28);
  --smg-text: #e9ecf1;
  --smg-dim: #a7b0be;
  --smg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  margin: 2rem 0 2.25rem;
  padding: 1.5rem 1.25rem 1.375rem;
  border: 1px solid rgba(212, 168, 75, 0.18);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--smg-navy) 0%, var(--smg-deep) 100%);
  color: var(--smg-text);
  overflow: hidden;
}

.mg-body .smg-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--smg-gold);
  margin: 0 0 0.25rem;
}

.mg-body .smg-sub {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--smg-dim);
  margin: 0 0 1.25rem;
}

.mg-body .smg-foot {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--smg-dim);
  margin: 1.125rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(212, 168, 75, 0.14);
}

.mg-body .smg-foot strong { color: #d9dee6; font-weight: 600; }

/* ==========================================================================
   Diagram 1 — the social-to-customer path
   A vertical timeline at every width. Seven stages will not fit across 920px
   without dropping to type nobody can read, and the stage names are the point.
   ========================================================================== */

.mg-body .smg-path { position: relative; margin: 0; padding: 0 0 0 2.25rem; list-style: none; }

/* The spine. Drawn as a real element rather than a border so it can be
   animated by scaleY without touching layout. */
.mg-body .smg-path::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--smg-line), rgba(212, 168, 75, 0.1));
  transform-origin: top center;
}

.mg-body .smg-step { position: relative; padding: 0 0 1.375rem; }
.mg-body .smg-step:last-child { padding-bottom: 0; }

.mg-body .smg-step::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 5px;
  width: 20px;
  height: 20px;
  margin-left: 0;
  border-radius: 50%;
  background: var(--smg-deep);
  border: 2px solid var(--smg-gold);
  box-shadow: 0 0 0 4px rgba(10, 25, 48, 0.9);
}

.mg-body .smg-step-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.25rem;
}

.mg-body .smg-step-note { font-size: 0.875rem; line-height: 1.6; color: var(--smg-dim); margin: 0; }

/* The seventh stage is the one people skip, so it is marked, not just listed. */
.mg-body .smg-step.is-review .smg-step-name { color: var(--smg-gold); }
.mg-body .smg-step.is-review::before { background: var(--smg-gold); }

.mg-body .smg-loop {
  display: block;
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: var(--smg-gold);
}

/* ==========================================================================
   Diagram 2 — the four content pillars
   ========================================================================== */

.mg-body .smg-pillars {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .mg-body .smg-pillars { grid-template-columns: 1fr 1fr; } }

.mg-body .smg-pillar {
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid rgba(212, 168, 75, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.mg-body .smg-pillar h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.0625rem;
  color: #fff;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mg-body .smg-pillar h4 i { font-size: 0.8125rem; color: var(--smg-gold); }

.mg-body .smg-pillar ul { margin: 0; padding: 0 0 0 1rem; }

.mg-body .smg-pillar li {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--smg-dim);
  margin: 0 0 0.3125rem;
}

/* ==========================================================================
   Diagram 3 — the weekly workflow
   ========================================================================== */

.mg-body .smg-flow {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: smgstep;
}

@media (min-width: 560px) { .mg-body .smg-flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .mg-body .smg-flow { grid-template-columns: repeat(4, 1fr); } }

.mg-body .smg-task {
  position: relative;
  padding: 0.875rem 0.875rem 0.875rem 1rem;
  border: 1px solid rgba(212, 168, 75, 0.14);
  border-left: 3px solid rgba(212, 168, 75, 0.22);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.03);
}

.mg-body .smg-task-n {
  font-family: 'Montserrat', sans-serif;
  /* 11px floor. At 10px this was the only text in any diagram small enough to
     be a readability problem, and it was caught at every breakpoint. */
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--smg-gold);
  display: block;
  margin: 0 0 0.25rem;
}

.mg-body .smg-task h4 {
  font-family: 'Playfair Display', serif;
  font-size: 0.9375rem;
  color: #fff;
  margin: 0 0 0.3125rem;
  line-height: 1.3;
}

.mg-body .smg-task p { font-size: 0.8125rem; line-height: 1.55; color: var(--smg-dim); margin: 0; }

.mg-body .smg-owner {
  display: inline-block;
  margin: 0.5rem 0 0;
  padding: 0.1875rem 0.5rem;
  border-radius: 4px;
  background: var(--smg-gold-dim);
  color: var(--smg-gold);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Diagram 4 — activity signals versus journey signals
   ========================================================================== */

.mg-body .smg-signals { display: grid; gap: 0.875rem; grid-template-columns: 1fr; }

@media (min-width: 640px) { .mg-body .smg-signals { grid-template-columns: 1fr 1fr; } }

.mg-body .smg-col {
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid rgba(212, 168, 75, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.mg-body .smg-col.is-journey { border-color: rgba(212, 168, 75, 0.38); }

.mg-body .smg-col h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #fff;
  margin: 0 0 0.125rem;
}

.mg-body .smg-col .smg-coltag {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smg-dim);
  margin: 0 0 0.75rem;
}

.mg-body .smg-col.is-journey .smg-coltag { color: var(--smg-gold); }

.mg-body .smg-col ul { margin: 0; padding: 0; list-style: none; }

.mg-body .smg-col li {
  position: relative;
  padding: 0 0 0 1.125rem;
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--smg-dim);
}

/* A shape difference, not only a colour difference: activity items take a
   hollow marker and journey items a filled one, so the two lists stay
   distinguishable without relying on colour. */
.mg-body .smg-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--smg-dim);
}

.mg-body .smg-col.is-journey li::before {
  background: var(--smg-gold);
  border-color: var(--smg-gold);
}

/* ==========================================================================
   Diagram 5 — running the venue + filling the venue
   ========================================================================== */

.mg-body .smg-eq {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  align-items: stretch;
  text-align: center;
}

@media (min-width: 760px) {
  .mg-body .smg-eq { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
}

.mg-body .smg-half {
  padding: 1.125rem 1rem;
  border: 1px solid rgba(212, 168, 75, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.mg-body .smg-half h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.0625rem;
  color: #fff;
  margin: 0 0 0.375rem;
}

.mg-body .smg-half p { font-size: 0.8125rem; line-height: 1.55; color: var(--smg-dim); margin: 0; }

.mg-body .smg-op {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--smg-gold);
  line-height: 1;
}

.mg-body .smg-join {
  padding: 1.125rem 1rem;
  border: 1px solid rgba(212, 168, 75, 0.4);
  border-radius: 12px;
  background: rgba(212, 168, 75, 0.07);
}

.mg-body .smg-join h4 { color: var(--smg-gold); }

/* SPECIFICITY NOTE
   Every selector above is scoped under .mg-body deliberately. The article shell
   declares `.mg-body p, .mg-body li { font-size: 1.0625rem; color: #374151 }`
   at specificity 0,1,1, which outranks a bare `.smg-*` class however late this
   file is linked. Without the prefix the diagrams rendered with dark-grey body
   text on a navy panel — caught by measuring computed colour, not by looking,
   because the panels themselves were styled correctly and the result merely
   looked a little washed out.

   ==========================================================================
   MOTION
   Everything below applies only when JS has confirmed motion is wanted AND the
   diagram is on screen. Nothing above depends on any of it.
   ========================================================================== */

@keyframes smg-spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes smg-node  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes smg-dot   { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes smg-rule  { from { border-left-color: rgba(212,168,75,0.22); } 45% { border-left-color: var(--smg-gold); } to { border-left-color: rgba(212,168,75,0.22); } }
@keyframes smg-token { from { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } to { opacity: 0; transform: translateY(var(--smg-travel, 260px)); } }
@keyframes smg-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,168,75,0.45); } 70% { box-shadow: 0 0 0 14px rgba(212,168,75,0); } 100% { box-shadow: 0 0 0 0 rgba(212,168,75,0); } }
@keyframes smg-slidein-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes smg-slidein-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* --- Diagram 1 ----------------------------------------------------------- */
.smg-motion .smg[data-play="true"] .smg-path::before {
  animation: smg-spine 900ms var(--smg-ease) both;
}
.smg-motion .smg[data-play="true"] .smg-step {
  animation: smg-node 420ms var(--smg-ease) both;
  animation-delay: calc(160ms + (var(--smg-i, 0) * 150ms));
}
.smg-motion .smg[data-play="true"] .smg-step::before {
  animation: smg-dot 320ms var(--smg-ease) both;
  animation-delay: calc(160ms + (var(--smg-i, 0) * 150ms));
}
/* The single travelling signal. Decorative and aria-hidden in the markup. */
.mg-body .smg-token {
  position: absolute;
  left: 5px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--smg-gold);
  box-shadow: 0 0 10px 2px rgba(212, 168, 75, 0.55);
  opacity: 0;
}
.smg-motion .smg[data-play="true"] .smg-token {
  animation: smg-token 2600ms var(--smg-ease) 260ms both;
}

/* --- Diagram 2 ----------------------------------------------------------- */
.smg-motion .smg[data-play="true"] .smg-pillar {
  animation: smg-node 460ms var(--smg-ease) both;
  animation-delay: calc(120ms + (var(--smg-i, 0) * 110ms));
}

/* --- Diagram 3 ----------------------------------------------------------- */
.smg-motion .smg[data-play="true"] .smg-task {
  animation: smg-node 400ms var(--smg-ease) both,
             smg-rule 900ms var(--smg-ease) both;
  animation-delay: calc(100ms + (var(--smg-i, 0) * 130ms)),
                   calc(100ms + (var(--smg-i, 0) * 130ms));
}

/* --- Diagram 4 ----------------------------------------------------------- */
.smg-motion .smg[data-play="true"] .smg-col {
  animation: smg-node 460ms var(--smg-ease) both;
  animation-delay: calc(120ms + (var(--smg-i, 0) * 320ms));
}

/* --- Diagram 5 ----------------------------------------------------------- */
.smg-motion .smg[data-play="true"] .smg-eq > *:nth-child(1) {
  animation: smg-slidein-l 560ms var(--smg-ease) 120ms both;
}
.smg-motion .smg[data-play="true"] .smg-eq > *:nth-child(2),
.smg-motion .smg[data-play="true"] .smg-eq > *:nth-child(4) {
  animation: smg-node 360ms var(--smg-ease) 420ms both;
}
.smg-motion .smg[data-play="true"] .smg-eq > *:nth-child(3) {
  animation: smg-slidein-r 560ms var(--smg-ease) 120ms both;
}
.smg-motion .smg[data-play="true"] .smg-join {
  animation: smg-node 420ms var(--smg-ease) 700ms both,
             smg-pulse 1400ms var(--smg-ease) 1050ms 1 both;
}

/* Belt and braces. The global motion-guard.css already collapses every
   animation to 0.01ms under reduced motion, and site JS never adds .smg-motion
   in that case — but a diagram that animates for a reader who asked it not to
   is bad enough to be worth stopping twice. */
@media (prefers-reduced-motion: reduce) {
  .smg-motion .smg[data-play="true"] * { animation: none !important; }
  .mg-body .smg-token { display: none; }
}

/* ==========================================================================
   Full-width infographic band.

   These sit BETWEEN .mg-body blocks, not inside one, so unlike every rule
   above they are deliberately NOT prefixed with .mg-body — there is no
   .mg-body ancestor to match, and nothing here competes with the article
   shell's paragraph rules.

   Single column at every width. The article's two-column .mg-band puts a note
   beside the picture, which would leave an infographic about 440px wide; the
   labels on these are the point, so they get the full measure.
   ========================================================================== */

.smg-figband {
  max-width: 920px;
  margin: 2.25rem auto 2.5rem;
  padding: 0 1rem;
}

.smg-figband figure { margin: 0; }

.smg-figband img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #16213e;
}

.smg-figband figcaption {
  font-size: 0.6875rem;
  font-style: italic;
  color: #9CA3AF;
  line-height: 1.5;
  margin-top: 0.45rem;
  letter-spacing: 0.01em;
}