/* Content plan card: self-contained hero visual. Swap #contentPlan for real client samples later. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 44px 0 40px; }
.cp-card { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 6px; padding: 18px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cp-top h3 { font-size: 26px; line-height: 1.1; }
.cp-count { font-size: 12px; font-weight: 600; color: var(--brass); border: 1px solid rgba(201, 164, 94, 0.5); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.cp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cp-dow { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dark); padding: 0 2px 4px; }
.cp-cell { min-height: 84px; border: 1px solid var(--line-dark); border-radius: 3px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.cp-cell.off { border-color: transparent; }
.cp-day { font-size: 10px; line-height: 1; color: var(--muted-dark); padding: 1px 1px 0; }
.cp-cell.off .cp-day { opacity: 0.4; }
.cp-tile { flex: 1; background: var(--ink-3); border: 1px solid var(--line-dark); border-radius: 3px; padding: 4px 4px 5px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; opacity: 0; animation: cp-in 0.35s ease-out forwards; animation-delay: calc(var(--i) * 45ms + 120ms); }
.cp-tile.today { border-color: var(--brass); }
.cp-title { font-size: 9.5px; line-height: 1.25; color: var(--paper); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.cp-st { align-self: flex-start; font-size: 8.5px; font-weight: 600; line-height: 1; padding: 3px 5px; border-radius: 999px; border: 1px solid var(--line-dark); white-space: nowrap; transition: color 0.4s, border-color 0.4s, background 0.4s; }
.st-posted { color: var(--muted-dark); background: rgba(246, 241, 231, 0.06); border-color: transparent; }
.st-scheduled { color: var(--brass); border-color: rgba(201, 164, 94, 0.7); }
.st-editing { color: var(--paper); border-color: rgba(246, 241, 231, 0.35); }
.st-filmed { color: rgba(246, 241, 231, 0.6); border-style: dashed; }
.cp-now { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--paper); border-top: 1px solid var(--line-dark); padding-top: 12px; }
.cp-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); flex: none; }
.cp-list { display: none; list-style: none; margin: 0; padding: 0; }
.cp-list li { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-dark); }
.cp-list li:first-child { border-top: 0; }
.cp-list .d { font-size: 12px; color: var(--muted-dark); }
.cp-list .t { font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.cp-list li.today .d { color: var(--brass); }
.cp-list .cp-st { font-size: 10px; padding: 4px 8px; }

/* floating cards */
.cp-float { position: absolute; z-index: 3; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 12px 16px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6); line-height: 1.25; }
.cp-float b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; }
.cp-float span { font-size: 12.5px; color: var(--muted-light); }
.cp-f1 { top: 0; left: -22px; }
.cp-f2 { right: -40px; top: 44%; }
.cp-f3 { bottom: 0; left: 14%; display: flex; align-items: center; gap: 10px; }
.cp-f3 svg { width: 22px; height: 22px; flex: none; color: var(--brass-deep); }
.cp-f3 b { font-size: 19px; }

@keyframes cp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 959px) {
  .cp { max-width: none; padding: 0; }
  .cp-floats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .cp-float { position: static; flex: 1 1 150px; }
}
@media (max-width: 639px) {
  .cp-grid, .cp-now { display: none; }
  .cp-list { display: block; }
  .cp-float { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-tile { animation: none; opacity: 1; }
  .cp-st { transition: none; }
}