/* Tum's Here – article cards + carousel (home page, article page, /articles) */
.acard{display:flex;flex-direction:column;background:var(--white);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-width:0;scroll-snap-align:start;transition:transform .45s var(--ease),box-shadow .45s}
.acard:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)}
.acard .im{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(140deg,var(--navy),var(--navy-3))}
.acard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.acard:hover .im img{transform:scale(1.06)}
.acard .im .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-l)}
.acard .im .ph svg{width:44px;height:55px;opacity:.85}
.acard .series{position:absolute;left:12px;top:12px;font:500 12px/1.2 var(--f-head);background:var(--gold);color:var(--navy);border-radius:999px;padding:4px 10px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.acard .tg{font:500 12.5px/1.3 var(--f-head);color:var(--gold-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard h3{font-size:17px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard p{font-size:13.5px;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .go{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted);border-top:1px dashed var(--line)}
.acard .go .arr{width:28px;height:28px}

/* carousel: native horizontal scroll (swipe on phones) + arrow buttons on wider screens */
.arail{position:relative;margin-top:28px}
.arail-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 20px) / 4);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px 4px 26px;margin-inline:-4px}
.arail-track::-webkit-scrollbar{display:none}
.arail-btn{position:absolute;top:calc(50% - 30px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:opacity .3s,background .3s,transform .3s var(--ease)}
.arail-btn:hover{background:var(--gold);border-color:var(--gold)}
.arail-btn[disabled]{opacity:0;pointer-events:none}
.arail-btn.prev{left:-22px}.arail-btn.next{right:-22px}
.arail-btn .ic{width:20px;height:20px}
.arail-dots{display:flex;justify-content:center;gap:6px;margin-top:-8px}
.arail-dots i{width:7px;height:7px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
.arail-dots i.on{width:22px;background:var(--gold)}
@media (max-width:1100px){.arail-track{grid-auto-columns:calc((100% - 2 * 20px) / 3)}}
@media (max-width:820px){.arail-track{grid-auto-columns:calc((100% - 20px) / 2)}.arail-btn{display:none}}
@media (max-width:560px){.arail-track{grid-auto-columns:82%;gap:14px}}
@media (prefers-reduced-motion:reduce){.arail-track{scroll-behavior:auto}.acard,.acard .im img{transition:none}}

/* /articles grid */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.agrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.agrid{grid-template-columns:1fr}}