/* Picture cards (config/spot_cards.php): same idea, three looks: side (picture left), flip (bigger picture right, links as a list),
   band (picture filling the right half under a fade). Pictures slowly zoom; without one, a moving colour panel with a floating icon. */
.sc-pair { padding: 22px 0; }
.sc-pair-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sc-onboard .sc-pair-in { padding: 0; }
/* One colour: the theme colour (owner 2026-10-09: "maintain one color. the theme color"); the per-card colours in spot_defs() are not used. */
.sc { --k: var(--bf-navy, #1e3a5f) !important; --k2: #0f2742 !important; }
.sc { position: relative; display: flex; gap: 14px; align-items: stretch; border: 1px solid #e6e8ec; border-radius: 16px; padding: 12px; background: #fff; min-width: 0; overflow: hidden;
  transition: box-shadow .2s, border-color .2s, transform .2s; }
.sc:hover { border-color: color-mix(in srgb, var(--k) 30%, #e6e8ec); box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--k) 80%, transparent); transform: translateY(-2px); }
.sc-pic { position: relative; flex: 0 0 132px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92);
  background: linear-gradient(135deg, var(--k2), var(--k), var(--k2)); background-size: 220% 220%; animation: scShift 9s ease-in-out infinite; min-height: 120px; }
.sc-img { position: absolute; inset: 0; background-size: cover; background-position: center; animation: scZoom 14s ease-in-out infinite alternate; }
.sc-pic.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35)); }
.sc-float { position: relative; z-index: 1; font-size: calc(40px*var(--bf-type,1)); animation: scFloat 3.6s ease-in-out infinite; text-shadow: 0 6px 18px rgba(0,0,0,.25); }
.sc-pic.has-photo .sc-float { font-size: calc(22px*var(--bf-type,1)); position: absolute; left: 10px; bottom: 8px; }
@keyframes scShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes scZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes scFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sc-b { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.sc-b small { font-size: calc(11px*var(--bf-type-sm,1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--k); }
.sc-b h3 { margin: 0; font-size: calc(17px*var(--bf-type,1)); font-weight: 800; color: #1f2937; line-height: 1.25; }
.sc-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.sc-tools a { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; background: #f5f7fa; color: #374151; text-decoration: none;
  font-size: calc(12.5px*var(--bf-type-sm,1)); font-weight: 600; min-width: 0; transition: background .15s, color .15s, transform .15s; }
.sc-tools a span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-tools a i { color: var(--k); font-size: calc(15px*var(--bf-type,1)); transition: transform .2s; flex: none; }
.sc-tools a:hover { background: var(--k); color: #fff; transform: translateY(-1px); }
.sc-tools a:hover i { color: #fff; transform: scale(1.18) rotate(-6deg); }

/* flip: links as a list with arrows, bigger picture on the right */
.sc-flip .sc-pic { flex-basis: 168px; }
.sc-flip .sc-tools { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.sc-flip .sc-tools a { background: none; padding: 6px 4px; border-radius: 8px; border-bottom: 1px solid #f0f2f5; }
.sc-flip .sc-tools a:last-child { border-bottom: 0; }
.sc-flip .sc-go { color: #b6bcc6 !important; font-size: calc(12px*var(--bf-type,1)) !important; }
.sc-flip .sc-tools a:hover { background: color-mix(in srgb, var(--k) 8%, #fff); color: var(--k); transform: translateX(3px); }
.sc-flip .sc-tools a:hover i { color: var(--k); transform: none; }

/* band: the picture fills the right half and fades into the card; links as chips */
.sc-band { padding: 16px 18px; min-height: 150px; }
.sc-band .sc-pic { flex: 0 0 40%; margin: -16px -18px -16px 0; border-radius: 0 15px 15px 0; min-height: 0; }   /* own column: never under the text (owner 2026-10-09) */
.sc-band .sc-pic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 28%); }
.sc-band .sc-pic.has-photo::after { display: none; }
.sc-band .sc-float { position: absolute; right: 22px; bottom: 16px; left: auto; z-index: 2; }
.sc-band .sc-b { max-width: none; }
.sc-band .sc-pic:not(.has-photo) { flex-basis: 30%; }
.sc-band .sc-pic:not(.has-photo)::before { display: none; }
.sc-band .sc-pic:not(.has-photo) .sc-float { right: auto; left: 50%; bottom: auto; top: 50%; margin: -20px 0 0 -20px; }
.sc-band .sc-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-band .sc-tools a { background: rgba(255,255,255,.92); border: 1px solid #e6e8ec; border-radius: 999px; padding: 6px 11px; box-shadow: 0 2px 8px -4px rgba(15,23,42,.18); }
.sc-band .sc-tools a span { flex: none; white-space: normal; }

@media (max-width: 991.98px) { .sc-pair-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .sc { gap: 10px; padding: 10px; }
  .sc-pic { flex-basis: 64px; min-height: 0; } .sc-flip .sc-pic { flex-basis: 84px; }
  .sc-float { font-size: calc(24px*var(--bf-type,1)); }
  .sc-tools a { padding: 6px 7px; gap: 5px; font-size: calc(11.5px*var(--bf-type-sm,1)); }
  .sc-tools a span { white-space: normal; overflow: visible; line-height: 1.2; }
  .sc-band { padding: 12px; } .sc-band .sc-pic { flex-basis: 34%; margin: -12px -12px -12px 0; } .sc-band .sc-pic:not(.has-photo) { flex-basis: 18%; } .sc-band .sc-pic:not(.has-photo) .sc-float { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sc-pic, .sc-img, .sc-float { animation: none; } .sc, .sc-tools a { transition: none; } }