/* Electronic Sawyer cards (mu-plugin kemble-esawyer) */
.ew-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; margin: 12px 0 22px; padding: 18px; border-radius: 18px; background: linear-gradient(120deg, #1f3f5c, #2f5f86 60%, #c9a227); color: #fff; font-family: var(--font-ui); animation: ew-fade 0.8s var(--ease) both; }
@media (max-width: 700px) { .ew-hero { grid-template-columns: 1fr; } }
@keyframes ew-fade { from { opacity: 0; transform: translateY(10px); } }
.entry-content .ew-shot { display: block; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.35); background-image: none; padding: 0; margin: 0; color: #fff; }
.ew-shot img { display: block; width: 100%; transition: transform 0.8s var(--ease); } .ew-shot:hover img { transform: scale(1.04); }
.ew-shot span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; font-size: 11.5px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); }
.ew-kicker { margin: 0 0 4px !important; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.85; color: #fff; }
.entry-content .ew-hero h2 { margin: 0 0 6px !important; color: #fff; font-size: 26px; } .ew-lede { margin: 0 0 12px !important; font-size: 14px; line-height: 1.5; color: #fff; opacity: 0.92; max-width: none !important; }
.ew-instant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ew-instant label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #f0d27a; }
.ew-instant input { font: inherit; font-size: 15px; font-weight: 400; width: 150px; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; outline: none; } .ew-instant input:focus { border-color: #f0d27a; background: rgba(255,255,255,0.2); } .ew-instant input.is-bad { border-color: #ff7b7b; animation: ew-shake 0.3s; } .ew-instant input::placeholder { color: rgba(255,255,255,0.7); }
@keyframes ew-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ew-go { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--accent-strong); cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s; } .ew-go:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); } .ew-go-soft { background: rgba(255,255,255,0.18); color: #fff; }
.ew-hint { flex-basis: 100%; font-size: 11.5px; opacity: 0.8; }
.entry-content h3.ew-h { margin: 22px 0 10px; font-size: 18px; }
.ew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; font-family: var(--font-ui); }
.entry-content .ew-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); text-decoration: none; background-image: none; color: var(--ink); padding: 0; margin: 0; opacity: 0; transform: translateY(12px); animation: ew-in 0.5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; }
@keyframes ew-in { to { opacity: 1; transform: none; } }
.entry-content .ew-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--ink); }
.ew-band { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: linear-gradient(120deg, var(--c, #1f3f5c), color-mix(in srgb, var(--c, #1f3f5c) 70%, #fff)); color: #fff; }
.ew-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,0.25); } .ew-ext { font-size: 16px; opacity: 0.85; }
.ew-pic { display: block; aspect-ratio: 3 / 1.5; overflow: hidden; background: #e8e1cf; } .ew-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .ew-card:hover .ew-pic img { transform: scale(1.06); }
.ew-card-body { display: block; padding: 12px 14px 14px; } .ew-card-body b { display: block; font-family: var(--font-serif); font-size: 17px; color: var(--accent-strong); margin-bottom: 4px; } .ew-card-body span { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .ew-hero, .entry-content .ew-card { animation: none; opacity: 1; transform: none; } }