/* Frontend styles: themes + animations */
.ablocks{ width:100%; display:flex; flex-direction:column; gap:20px; position:relative; }
.ablock{ display:flex; gap:20px; align-items:center; padding:16px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; width:100%; }
.ablock:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.ablock-media img{ width:120px; height:120px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.12); }
.ablock-title{ margin:0 0 6px; font-size:20px; font-weight:700; }
.ablock-text{ margin:0; font-size:15px; line-height:1.4; opacity:.95; }
.ablock-empty{ opacity:.7; text-align:center; padding:16px; border:1px dashed rgba(255,255,255,.2); border-radius:12px; }
.ablock--reveal{ opacity:0; transform: translateY(8px); }
.ablock--reveal.is-in{ opacity:1; transform: translateY(0); transition: opacity .45s ease, transform .45s ease; }

/* STANDARD */
.ablocks--standard .ablock{ background:#0b1220; color:#e5e7eb; }
.ablocks--standard .ablock:hover{ background:#0f172a; }

/* HALLOWEEN */
.ablocks--halloween .ablock{ background:#0b0b10; color:#fef3c7; border-color: rgba(253,186,116,.25); }
.ablocks--halloween .ablock:hover{ background:#14141c; box-shadow:0 10px 30px rgba(253,186,116,.15); }
.ablocks--halloween .ablock-title{ color:#fdba74; }

/* CHRISTMAS */
.ablocks--christmas .ablock{ background:#0f1a14; color:#e6fffa; border-color: rgba(74,222,128,.2); }
.ablocks--christmas .ablock:hover{ background:#14251b; box-shadow:0 10px 30px rgba(74,222,128,.18); }
.ablocks--christmas .ablock-title{ color:#86efac; }
.ablocks--christmas .ablocks-snow{ pointer-events:none; position:absolute; inset:0; background-image: radial-gradient(white 1px, transparent 2px); background-size: 6px 6px; opacity:.08; animation: snowmove 16s linear infinite; }
@keyframes snowmove { from{ background-position:0 0; } to{ background-position:0 200px; } }

@media (max-width: 640px){
  .ablock{ flex-direction:column; align-items:flex-start; }
  .ablock-media img{ width:100%; height:180px; }
}