/* ==== Outlaw Events Styles – Fancy Calendar Cards ==== */ .oc-event-header { font-size: 1.8em; color: #9c0c05; font-weight: bold; text-align: center; margin: 40px 0 20px; } /* Grid layout for event cards */ .oc-custom-events { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 40px; } /* Individual event box */ .oc-event-box { background: #1a1a1a; border: 1px solid #9c0c05; border-radius: 12px; padding: 12px; width: calc(25% - 20px); display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; } @media (max-width: 1024px) { .oc-event-box { width: calc(33.333% - 20px); } } @media (max-width: 768px) { .oc-event-box { width: calc(50% - 20px); } } @media (max-width: 480px) { .oc-event-box { width: 100%; } } /* Calendar image + overlay */ .calendar-wrapper { position: relative; width: 64px; height: 64px; margin-bottom: 10px; } .calendar-icon { width: 64px; height: 64px; } .month { position: absolute; top: 6px; left: 0; width: 100%; font-size: 11px; font-weight: bold; text-transform: uppercase; color: white; z-index: 2; } .day { position: absolute; top: 28px; left: 0; width: 100%; font-size: 22px; font-weight: bold; color: white; z-index: 2; } /* Venue text */ .oc-venue { color: #ffffff; font-size: 15px; font-weight: bold; margin: 8px 0; } /* Tickets + Hotels buttons */ .oc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .oc-actions a img { height: 48px; width: auto; border-radius: 6px; } /* Prevent paragraph spacing inside event shortcodes */ .oc-custom-events p { margin: 0; padding: 0; }