@layer page {
.pg-home .volunteer-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 32px); margin-top: var(--s7); }
.pg-home .volunteer-task { min-width: 0; max-width: none; }
.pg-home .task-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s4); width: 100%; height: 100%; padding: var(--s6) var(--s5) var(--s5); text-align: center; touch-action: manipulation; transition: transform var(--d-quick) var(--ease-out); }
.pg-home .task-tile::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 30px 52px -20px color-mix(in srgb, var(--ink) 60%, transparent), 0 8px 18px color-mix(in srgb, var(--ink) 24%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--d-quick) var(--ease-out); }
.pg-home .task-tile:active::after { opacity: 1; }
@media (hover: hover) { .pg-home .task-tile:hover::after { opacity: 1; } }
.pg-home .task-title { font-family: var(--font-action); font-size: clamp(1.75rem, 2.9vw, 2.5rem); font-weight: 600; line-height: 1.08; text-wrap: balance; }
.pg-home .task-cue { display: grid; place-items: center; flex: none; width: 52px; height: 52px; margin-top: auto; border: 2px solid transparent; border-radius: 50%; background: var(--teal); color: var(--yellow); transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.pg-home .task-cue .ui-glyph { transition: transform var(--d-quick) var(--ease-out); }
.pg-home .task-tile:active .task-cue { background: var(--orange); color: var(--ink); }
@media (hover: hover) { .pg-home .task-tile:hover .task-cue { background: var(--orange); color: var(--ink); } }
.pg-home .task-tile .cg-door .cg-orange { transform-origin: 9px 24px; }
.pg-home .task-tile .cg-phone .cg-orange { transform-origin: 22px 26px; }
.pg-home .task-tile .cg-phone path:not(.cg-orange) { transform-origin: 30px 22px; }
.pg-home .task-tile .cg-sign { transform-origin: 50% 100%; }
@media (max-width: 767px) {
.pg-home .volunteer-tasks { grid-template-columns: 1fr; margin-top: var(--s5); }
.pg-home .task-tile { flex-direction: row; gap: var(--s3); min-height: 120px; padding: var(--s4); text-align: left; }
.pg-home .task-tile > .campaign-icon { width: clamp(64px, 22vw, 96px); height: clamp(64px, 22vw, 96px); }
.pg-home .task-title { flex: 1; min-width: 0; font-size: clamp(1.5rem, 7vw, 2.25rem); }
.pg-home .task-cue { width: 44px; height: 44px; margin: 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.pg-home .task-tile:hover { transform: translateY(-6px); }
.pg-home .task-tile:hover .task-cue .ui-glyph { transform: translateX(3px); }
.pg-home .task-tile:hover .cg-door .cg-orange { animation: task-door 640ms var(--ease-out); }
.pg-home .task-tile:hover .cg-phone .cg-orange { animation: task-ring 640ms ease-in-out; }
.pg-home .task-tile:hover .cg-phone path:not(.cg-orange) { animation: task-call 640ms var(--ease-out); }
.pg-home .task-tile:hover .cg-sign { animation: task-bob 640ms var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) {
.pg-home .task-tile:active { transform: translateY(-2px); }
.pg-home .task-tile:is(:active, :focus-visible) .cg-door .cg-orange { animation: task-door 640ms var(--ease-out); }
.pg-home .task-tile:is(:active, :focus-visible) .cg-phone .cg-orange { animation: task-ring 640ms ease-in-out; }
.pg-home .task-tile:is(:active, :focus-visible) .cg-phone path:not(.cg-orange) { animation: task-call 640ms var(--ease-out); }
.pg-home .task-tile:is(:active, :focus-visible) .cg-sign { animation: task-bob 640ms var(--ease-out); }
@keyframes task-door { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(.74); } 78% { transform: scaleX(1.05); } }
@keyframes task-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-11deg); } 30% { transform: rotate(9deg); } 45% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
@keyframes task-call { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14); } }
@keyframes task-bob { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-8px) rotate(-3deg); } 70% { transform: translateY(2px) rotate(2deg); } }
}
@media (forced-colors: active) and (hover: hover) { .pg-home .task-tile:hover { outline: 2px solid Highlight; outline-offset: -3px; } }
}