/* CP exams list (view=exams): Listening tests as a responsive card grid.
   Loaded only by the exams list view. Every selector is scoped to .cpx-exams (classes cpx-*), so no global or Bootstrap
   class is restyled and the exam, result and other pages are not affected.
   Colours: site brand teal #00b6b7 for accents; buttons use deeper teals of the same hue so white text meets WCAG AA
   (#007f84 = 4.8:1, hover #006e72 = 6.1:1; white on #00b6b7 would only be 2.5:1). */
.cpx-exams{--cpx-brand:#00b6b7;--cpx-btn:#007f84;--cpx-btn-hover:#006e72;--cpx-ink:#1f2937;--cpx-muted:#4b5563;--cpx-line:#e5e7eb;--cpx-tint:#e8f8f8;--cpx-gap:24px;color:var(--cpx-ink)}
.cpx-exams__head{margin:8px 0 28px}
/* the site's user.css sets every h1/h2 with !important (18px/17px); only these two scoped headings are sized here */
.cpx-exams .cpx-exams__title{margin:0 0 8px;font-size:26px!important;font-weight:700;line-height:1.25;color:var(--cpx-ink)}
.cpx-exams__intro{margin:0;max-width:62ch;font-size:1rem;line-height:1.6;color:var(--cpx-muted)}
.cpx-exams__empty{margin:0;padding:16px 20px;border:1px solid var(--cpx-line);border-radius:12px;background:#f9fafb;color:var(--cpx-muted)}

/* Grid: 4 / 3 / 2 / 1 columns; items stretch, so all cards in a row have the same height */
.cpx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cpx-gap);margin:0 0 32px;padding:0;list-style:none}
@media (max-width:1199.98px){.cpx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899.98px){.cpx-grid{grid-template-columns:repeat(2,minmax(0,1fr));--cpx-gap:20px}}
@media (max-width:599.98px){.cpx-grid{grid-template-columns:minmax(0,1fr)}.cpx-exams .cpx-exams__title{font-size:22px!important}.cpx-exams__head{margin-bottom:22px}}
.cpx-grid__item{display:flex;min-width:0;margin:0;padding:0}

/* Card: white, light border, rounded, soft shadow; the action row always sits at the bottom */
.cpx-card{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--cpx-line);border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);transition:box-shadow .2s ease,border-color .2s ease}
.cpx-card:hover,.cpx-card:focus-within{border-color:#d1d5db;box-shadow:0 4px 14px rgba(15,23,42,.10),0 1px 3px rgba(15,23,42,.06)}
.cpx-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--cpx-tint);border-bottom:3px solid var(--cpx-brand)}
.cpx-card__icon{flex:0 0 auto;width:44px;height:44px;padding:8px;box-sizing:border-box;border-radius:50%;background:#fff;color:var(--cpx-btn)}
.cpx-card__tag{display:inline-block;padding:3px 10px;border:1px solid rgba(0,127,132,.35);border-radius:999px;background:#fff;color:var(--cpx-btn-hover);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.cpx-card__body{flex:1 1 auto;padding:18px 20px 6px}
.cpx-exams .cpx-card__title{margin:0 0 12px;font-size:20px!important;font-weight:700;line-height:1.3}
.cpx-card__title a{color:var(--cpx-ink);text-decoration:none;border-radius:4px}
.cpx-card__title a:hover{color:var(--cpx-btn-hover);text-decoration:underline;text-underline-offset:3px}
.cpx-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cpx-card__meta li{margin:0;padding:4px 10px;border-radius:6px;background:#f3f4f6;color:var(--cpx-muted);font-size:.875rem;line-height:1.4;white-space:nowrap}
.cpx-card__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding:16px 20px 20px}

/* Buttons */
.cpx-btn{display:inline-flex;flex:1 1 0;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:8px 14px;box-sizing:border-box;border:1px solid var(--cpx-btn);border-radius:8px;font-size:.9375rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.cpx-btn--wide{flex-basis:100%}
.cpx-btn--primary{background:var(--cpx-btn);color:#fff}
.cpx-btn--primary:hover{background:var(--cpx-btn-hover);border-color:var(--cpx-btn-hover);color:#fff}
.cpx-btn--secondary{background:#fff;color:var(--cpx-btn)}
.cpx-btn--secondary:hover{background:var(--cpx-tint);border-color:var(--cpx-btn-hover);color:var(--cpx-btn-hover)}

/* Keyboard focus */
.cpx-exams a:focus-visible{outline:3px solid var(--cpx-brand);outline-offset:2px}
.cpx-btn:focus-visible{outline:3px solid var(--cpx-brand);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.cpx-card,.cpx-btn{transition:none}}

/* Pager under the cards (view=exams, more than 20 exams). Scoped to .cpx-pager inside .cpx-exams: the site's global .pagination
   styles and every other Joomla list are untouched. Same teal as the card buttons; the current page is filled. */
.cpx-pager{margin:-8px 0 32px;text-align:center}
.cpx-pager__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.cpx-pager__list li{margin:0;padding:0}
.cpx-pager__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 14px;box-sizing:border-box;border:1px solid var(--cpx-line);border-radius:8px;background:#fff;color:var(--cpx-btn);font-size:.9375rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.cpx-exams a.cpx-pager__link:hover{border-color:var(--cpx-btn-hover);background:var(--cpx-tint);color:var(--cpx-btn-hover);text-decoration:none}
.cpx-pager__link.is-current{border-color:var(--cpx-btn);background:var(--cpx-btn);color:#fff}
.cpx-pager__link.is-disabled{border-color:var(--cpx-line);background:#f9fafb;color:#9ca3af;cursor:default}
.cpx-pager__link:focus-visible{outline:3px solid var(--cpx-brand);outline-offset:2px}
.cpx-pager__status{margin:12px 0 0;color:var(--cpx-muted);font-size:.875rem}
@media (max-width:599.98px){.cpx-pager__list{gap:6px}.cpx-pager__link{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){.cpx-pager__link{transition:none}}