/* =====================================================================
 *  discover.css — layout for the Discover pages: articles_list.php,
 *  article.php and training.php. Colors, type, buttons, cards, the
 *  background video and the footer come from oweili.css.
 * ===================================================================== */
main { position: relative; z-index: 2; }
.d-wrap { max-width: 1200px; margin: 0 auto; padding: calc(var(--nav-h) + var(--space-xl)) var(--space-lg) var(--space-2xl); }

/* page head */
.d-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-xl); }
.d-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 5px 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid rgba(var(--rgb-accent),0.2); font-size: var(--fs-min); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-sm); }
.d-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.d-head h1 { font-size: var(--fs-hero); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 var(--space-sm); }
.d-head p { font-size: var(--fs-subtitle); color: var(--color-body); margin: 0; }

/* switch between the three article types (chips, so they stay rounded) */
.type-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin: 0 0 var(--space-xl); }
.type-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; text-decoration: none; color: var(--color-dark); background: var(--color-surface); border: 1px solid var(--color-border-strong); transition: background var(--ease), color var(--ease); }
.type-pill:hover { background: var(--color-hover-light); color: var(--color-dark); }
.type-pill.on { background: var(--color-dark); color:var(--color-on-dark); border-color: var(--color-dark); }
.type-pill:focus-visible, .a-card:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* article cards: 4 columns desktop, 2 tablet, 1 phone — image area 200px (design system card) */
.a-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.a-card { display: flex; flex-direction: column; text-decoration: none; color: var(--color-dark); }
.a-card:hover { color: var(--color-dark); }
.a-card .card-media img { transition: transform 0.5s; }
.a-card:hover .card-media img { transform: scale(1.04); }
.card-media.none { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--rgb-accent),0.08), rgba(var(--rgb-primary),0.08)); }
.card-media.none svg { width: 44px; height: 44px; stroke: var(--color-accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-body { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.a-title { font-size: var(--fs-subtitle); font-weight: 700; line-height: 1.4; color: var(--color-dark); }
.a-card:hover .a-title { color: var(--color-accent); }
.a-date { font-size: var(--fs-caption); color: var(--color-body); }
.a-more { margin-top: auto; padding-top: var(--space-xs); font-size: var(--fs-label); font-weight: 700; color: var(--color-accent); }

/* empty state */
.d-empty { max-width: 640px; margin: 0 auto; }
.d-empty .btn { margin-top: var(--space-md); }

/* gentle rise-in (only with JavaScript on, so nothing is ever hidden without it) */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { animation: ow-riseUp 0.8s cubic-bezier(0.22,1,0.36,1) both; }

@media (max-width: 1024px) { .a-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .d-wrap { padding: calc(var(--nav-h) + var(--space-md)) var(--space-sm) var(--space-xl); } .a-grid { gap: var(--space-sm); } }
@media (max-width: 560px) { .a-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } .js .reveal.in { animation: none; } }