/* ============================== Festival Widget Base ============================== */ .festival-widget { max-width: 1100px; margin: 0 auto; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 10px; } /* Widget Title */ .festival-widget .widget-title, .festival-widget h2 { text-align: center; font-size: 26px; font-weight: 800; margin-bottom: 25px; color: #8b0000; } /* ============================== Month Blocks ============================== */ .festival-month-block { margin-bottom: 40px; } .festival-month { background: linear-gradient(90deg, #a47c00, #d4af37); color: #fff; padding: 14px; margin-bottom: 20px; text-align: center; font-size: 18px; letter-spacing: .5px; border-radius: 8px; } /* ============================== Festival Grid ============================== */ .festival-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; } /* ============================== Festival Card ============================== */ .festival-item { background: #fff8e5; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 14px; transition: transform .2s ease, box-shadow .2s ease; } .festival-item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); } .festival-item article { display: flex; gap: 14px; align-items: flex-start; } /* ============================== Festival Image (Wide Rectangle) ============================== */ .festival-thumb { flex: 0 0 120px; } .festival-thumb img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; display: block; background: #fff; } /* ============================== Festival Content ============================== */ .festival-content { flex: 1; min-width: 0; } .festival-name { margin: 0; font-size: 16px; font-weight: 700; } .festival-name a { color: #8b0000; text-decoration: none; } .festival-name a:hover { text-decoration: underline; } .festival-date { font-size: 14px; color: #333; margin-top: 6px; } .festival-lunar { font-size: 13px; color: #666; margin-top: 2px; } /* ============================== View More Button ============================== */ .festival-more { text-align: center; margin-top: 18px; } .festival-more a { background: #8b0000; color: #fff; padding: 10px 18px; border-radius: 30px; display: inline-block; text-decoration: none; font-size: 14px; transition: background .2s ease; } .festival-more a:hover { background: #a10000; } /* ============================== Mobile Optimization ============================== */ @media (max-width: 768px) { .festival-list { grid-template-columns: 1fr; } .festival-thumb { flex: 0 0 90px; } .festival-thumb img { width: 90px; height: 60px; } .festival-month { font-size: 16px; padding: 12px; } .festival-name { font-size: 15px; } .festival-item article { align-items: center;   /* vertically center image with text */ } .festival-thumb { display: flex; align-items: center; justify-content: center; } }