/* Tickaboo — /guides/childcare-social-media-ideas/
 *
 * Linked by hand from the page head, and site.js by hand before </body>,
 * as every nested route must (current.md 17b).
 * Built 8 September 2026. Phase 4 guide 6.
 *
 * Chrome and shared blocks live in components.css. Only page-specific
 * rules are here. Every color-mix() carries a solid fallback first.
 */

/* ═══════════════════════════════════════════════════════════════════
   THE FEED
   Nine tiles. Seven show no child at all, one shows a child inside a
   clearing ring, one is an educator. That ratio IS the page's argument,
   so the drawing has to be countable at a glance.
   Abstract figures only. Never a face (current.md §10).
   ═══════════════════════════════════════════════════════════════════ */
.ill--feed {
  --sf-screen: #F7F4EF;
  --sf-tile: #E9F1E8;
  --sf-tile-kid: #DDEADC;
  --sf-object: #BFD4C3;
  --sf-figure: #9BB4A4;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ill--feed {
    --sf-screen: color-mix(in srgb, var(--color-paper) 30%, var(--color-surface-tint));
    --sf-tile: color-mix(in srgb, var(--color-surface) 44%, var(--color-surface-tint));
    --sf-tile-kid: color-mix(in srgb, var(--color-surface) 70%, var(--color-surface-tint));
    --sf-object: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface-tint));
    --sf-figure: color-mix(in srgb, var(--color-primary) 44%, var(--color-surface-tint));
  }
}

.sf__phone { fill: var(--sf-screen); stroke: var(--color-border); stroke-width: 1.5; }
.sf__bar, .sf__barfoot { fill: var(--color-primary); }
.sf__avatar { fill: var(--color-surface-tint); opacity: 0.85; }
.sf__barline { fill: none; stroke: var(--color-surface-tint); stroke-width: 3.4; stroke-linecap: round; opacity: 0.75; }

.sf__tile { fill: var(--sf-tile); }
.sf__tile--kid { fill: var(--sf-tile-kid); }

/* The objects inside the tiles. Deliberately simple: the drawing has to
   read as "nine posts, mostly not children" at thumbnail size, so any
   detail beyond a recognisable silhouette works against it. */
.sf__art, .sf__hands, .sf__stem {
  fill: none;
  stroke: var(--sf-object);
  stroke-width: 4;
  stroke-linecap: round;
}
.sf__blob, .sf__plate, .sf__leaf { fill: var(--sf-object); }
.sf__book, .sf__tray, .sf__quote, .sf__card { fill: var(--sf-object); }
.sf__food { fill: var(--color-surface-tint); }
.sf__quoteline, .sf__cardline {
  fill: none;
  stroke: var(--color-surface-tint);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.9;
}
.sf__head, .sf__body, .sf__staff { fill: var(--sf-figure); }
/* The one child in the grid sits inside a clearing ring, so the tile
   reads as "cleared" rather than as an exception to the rule. */
.sf__ring { fill: none; stroke: var(--color-primary); stroke-width: 2.6; }

/* ═══════════════════════════════════════════════════════════════════
   THE IDEAS
   Four groups, each a numbered list. Two columns on desktop so thirty
   items do not become a scroll, and the groups keep their own headings
   so the list reads as sorted rather than as a dump.
   ═══════════════════════════════════════════════════════════════════ */
.si-groups {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
@media (min-width: 880px) { .si-groups { grid-template-columns: 1fr 1fr; } }

.si-group {
  padding: clamp(1.4rem, 2.8vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
}
.si-group h3 {
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.0625rem;
}
.si-list { margin: 0; padding-left: 1.35rem; display: grid; gap: 0.7rem; }
.si-list li { color: var(--color-muted); font-size: 0.9375rem; line-height: 1.55; }
.si-list li::marker { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; }

.si-note {
  max-width: 62ch;
  margin: clamp(1.75rem, 3vw, 2.25rem) auto 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.si-ideas .section-lead,
.si-week .section-lead { max-width: 66ch; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════
   OUR OWN NUMBERS
   Called out rather than run into prose, because they are first-party
   and small-sample and both of those facts have to be visible.
   ═══════════════════════════════════════════════════════════════════ */
.si-nums { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.8rem; }
.si-nums li {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--color-surface-tint);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.si-nums__v {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-dark);
  margin-bottom: 0.15rem;
}

/* ═══════════════════════════════════════════════════════════════════
   THE ORDERED FLOW INSIDE THE DARK DRENCH
   ═══════════════════════════════════════════════════════════════════ */
.si-flow {
  margin: 1.5rem 0 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.95rem;
}
.si-flow li {
  color: rgba(245,235,224,0.82);
  color: color-mix(in srgb, var(--color-dark-ink) 82%, transparent);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.si-flow li::marker { color: var(--color-accent-2); font-family: var(--font-heading); font-weight: 700; }
.si-flow strong { color: var(--color-dark-ink); }
.si-flow a { color: var(--color-accent-2); }

.si-punch {
  margin-top: 1.6rem;
  color: var(--color-dark-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  max-width: 34ch;
}