/*
   Shared catalogue layout for modules.php and quizzes.php.
   Loaded after page-local styles so both pages use the same visual rules.
*/

.mods-page,
.qz-page {
  background: var(--clr-bg-alt);
  min-height: 100vh;
  padding-block: 5.5rem 4rem;
}

.mods-page .container,
.qz-page .container {
  max-width: 74rem;
}

.mods-hero,
.qz-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.mods-hero__back,
.qz-hero__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-muted);
  margin-bottom: 1rem;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.mods-hero__back:hover,
.qz-hero__back:hover {
  color: var(--clr-primary);
}

.mods-hero h1,
.qz-hero h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: .5rem;
  color: var(--clr-heading, var(--clr-text));
}

.mods-hero p,
.qz-hero p {
  color: var(--clr-muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 48rem;
  margin-inline: auto;
}

.mods-switch,
.qz-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}

.mods-switch__label,
.qz-switch__label {
  font-size: .78rem;
  color: var(--clr-muted);
  font-weight: 800;
  margin-inline-end: .2rem;
}

.mods-switch__pill,
.qz-switch__pill,
.mods-tab,
.qz-tab,
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: 99px;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-bg);
  color: var(--clr-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.mods-switch__pill,
.qz-switch__pill {
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem .85rem;
}

.mods-tab,
.qz-tab {
  font-size: .8125rem;
  font-weight: 700;
  padding: .35rem .9rem;
}

.mods-switch__pill:hover,
.qz-switch__pill:hover,
.mods-tab:hover,
.qz-tab:hover,
.page-btn:hover:not(.page-btn--disabled):not(.page-btn--active) {
  border-color: var(--c, var(--clr-primary));
  color: var(--c, var(--clr-primary));
  background: var(--clr-primary-lt);
  transform: translateY(-1px);
}

.mods-switch__pill.active,
.qz-switch__pill.active,
.mods-tab.active,
.qz-tab.active,
.page-btn--active {
  background: var(--c, var(--clr-primary));
  border-color: var(--c, var(--clr-primary));
  color: #fff;
  font-weight: 800;
  cursor: default;
}

.mods-tab__count,
.qz-tab__count {
  font-weight: 600;
  opacity: .86;
  font-size: .72rem;
}

.mods-toolbar,
.qz-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: .75rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.mods-tabs,
.qz-tabs {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}

.qz-difftabs {
  position: relative;
  padding-inline-start: .75rem;
  margin-inline-start: .4rem;
}

.qz-difftabs::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--clr-border);
}

.qz-diff--easy.active { --c: #16a34a; }
.qz-diff--med.active { --c: #b7791f; }
.qz-diff--hard.active { --c: #dc2626; }

.mods-sort,
.qz-sort {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline-start: auto;
}

.mods-sort label,
.qz-sort label,
.mods-count,
.qz-count,
.pag-info {
  font-size: .8rem;
  color: var(--clr-muted);
  font-weight: 600;
  white-space: nowrap;
}

.mods-count strong,
.qz-count strong,
.pag-info strong {
  color: var(--clr-primary);
}

.mods-sort select,
.qz-sort select {
  font-size: .82rem;
  font-family: inherit;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: .3rem .6rem;
  background: var(--clr-bg);
  color: var(--clr-text);
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.mods-sort select:focus,
.qz-sort select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.mods-grid,
.qz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.mod-card,
.qz-card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  color: var(--clr-text);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition), background var(--transition);
}

.mod-card:hover,
.qz-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, var(--clr-primary)) 55%, var(--clr-border));
}

.mod-card__head,
.qz-card__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem .75rem;
  border-bottom: 3px solid var(--accent, var(--clr-primary));
  background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
}

.mod-card__icon,
.qz-card__icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-sm);
  background: var(--clr-primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.mod-card__unit,
.mod-card__views,
.qz-card__unit,
.qz-card__attempts,
.qz-card__bar-label {
  font-size: .68rem;
  color: var(--clr-muted);
}

.mod-card__unit,
.qz-card__unit {
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}

.mod-card__body,
.qz-card__body {
  padding: .9rem 1.1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .58rem;
}

.mod-card__title-ar,
.qz-card__title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--clr-heading, var(--clr-text));
  margin: 0;
}

.mod-card__title-fr,
.mod-card__desc,
.qz-card__desc {
  color: var(--clr-muted);
  line-height: 1.55;
  margin: 0;
}

.mod-card__title-fr {
  font-size: .82rem;
  font-style: italic;
  font-family: 'Inter', sans-serif;
}

.mod-card__desc,
.qz-card__desc {
  font-size: .8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mod-card__desc { -webkit-line-clamp: 3; }
.qz-card__desc { -webkit-line-clamp: 2; }

.mod-card__langs,
.qz-card__badges {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

.mod-card__lang-badge,
.qz-badge,
.mod-card__tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 800;
  padding: .2rem .6rem;
  border-radius: 99px;
  background: var(--clr-surface);
  color: var(--clr-muted);
  border: 1px solid transparent;
}

.mod-card__tag {
  margin-inline-start: auto;
  align-self: flex-start;
  font-size: .66rem;
  white-space: nowrap;
}

.mod-card__lang-badge--ar,
.qz-badge--lang-ar,
.mod-card__tag--comp {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.mod-card__lang-badge--fr,
.qz-badge--lang-fr {
  background: #fdf4ff;
  color: #7e22ce;
  border-color: #f5d0fe;
}

.mod-card__tag--fav {
  background: #fef2f2;
  color: #e11d48;
  border-color: #fbcfe8;
}

.mod-card__meta,
.qz-card__stats {
  border-top: 1px solid var(--clr-border);
}

.mod-card__meta {
  display: flex;
  gap: .75rem;
  font-size: .72rem;
  color: var(--clr-muted);
  padding-top: .5rem;
  flex-wrap: wrap;
}

.mod-card__meta span,
.qz-card__attempts {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.qz-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .4rem;
  padding: .6rem 0;
}

.qz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font-size: .68rem;
  color: var(--clr-muted);
  text-align: center;
}

.qz-stat__val {
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-heading, var(--clr-text));
  line-height: 1;
}

.qz-stat__lbl { font-size: .62rem; }

.qz-card__bar {
  height: 4px;
  border-radius: 99px;
  background: var(--clr-surface);
  overflow: hidden;
}

.qz-card__bar-fill {
  height: 100%;
  width: 60%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--clr-primary), #6366f1);
}

.mod-card__actions,
.qz-card__action {
  padding: .75rem 1.1rem 1rem;
}

.mod-card__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.mod-card__actions .btn,
.qz-card__action .btn {
  flex: 1;
  width: 100%;
  justify-content: center;
  font-size: .8rem;
  padding: .45rem .7rem;
  min-height: 2.35rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .6rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
}

.page-btn--disabled {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.page-btn--ellipsis {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.page-btn--nav { font-size: 1.1rem; }
.pag-info { text-align: center; margin-bottom: .75rem; }

html[data-theme="dark"] .mods-page,
html[data-theme="dark"] .qz-page {
  background: var(--dark-bg, #101820) !important;
  color: var(--dark-text, #e8eef5) !important;
}

html[data-theme="dark"] .mods-hero h1,
html[data-theme="dark"] .qz-hero h1,
html[data-theme="dark"] .mod-card__title-ar,
html[data-theme="dark"] .qz-card__title,
html[data-theme="dark"] .qz-stat__val {
  color: var(--dark-heading, #f6f9fc) !important;
}

html[data-theme="dark"] .mods-hero p,
html[data-theme="dark"] .qz-hero p,
html[data-theme="dark"] .mods-hero__back,
html[data-theme="dark"] .qz-hero__back,
html[data-theme="dark"] .mods-switch__label,
html[data-theme="dark"] .qz-switch__label,
html[data-theme="dark"] .mods-sort label,
html[data-theme="dark"] .qz-sort label,
html[data-theme="dark"] .mods-count,
html[data-theme="dark"] .qz-count,
html[data-theme="dark"] .pag-info,
html[data-theme="dark"] .mod-card__title-fr,
html[data-theme="dark"] .mod-card__desc,
html[data-theme="dark"] .qz-card__desc,
html[data-theme="dark"] .mod-card__unit,
html[data-theme="dark"] .mod-card__views,
html[data-theme="dark"] .mod-card__meta,
html[data-theme="dark"] .qz-card__unit,
html[data-theme="dark"] .qz-card__attempts,
html[data-theme="dark"] .qz-card__bar-label,
html[data-theme="dark"] .qz-stat {
  color: var(--dark-muted, #c3ceda) !important;
}

html[data-theme="dark"] .mods-toolbar,
html[data-theme="dark"] .qz-toolbar,
html[data-theme="dark"] .mod-card,
html[data-theme="dark"] .qz-card {
  background: var(--dark-surface, #1a2633) !important;
  border-color: var(--dark-line, rgba(148, 171, 195, .26)) !important;
  color: var(--dark-text, #e8eef5) !important;
  box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .mod-card:hover,
html[data-theme="dark"] .qz-card:hover {
  background: var(--dark-surface-2, #203041) !important;
  border-color: var(--dark-line-strong, rgba(172, 192, 214, .38)) !important;
  box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .mod-card__head,
html[data-theme="dark"] .qz-card__head {
  background: var(--dark-surface-2, #203041) !important;
  border-bottom-color: var(--accent, var(--dark-link, #9cc9f5)) !important;
}

html[data-theme="dark"] .mod-card__icon,
html[data-theme="dark"] .qz-card__icon,
html[data-theme="dark"] .qz-card__bar,
html[data-theme="dark"] .mod-card__lang-badge,
html[data-theme="dark"] .qz-badge,
html[data-theme="dark"] .mod-card__tag {
  background: rgba(125, 183, 240, .14) !important;
  border-color: rgba(156, 201, 245, .28) !important;
  color: var(--dark-heading, #f6f9fc) !important;
}

html[data-theme="dark"] .mod-card__lang-badge--ar,
html[data-theme="dark"] .qz-badge--lang-ar,
html[data-theme="dark"] .mod-card__tag--comp {
  background: rgba(96, 165, 250, .18) !important;
  border-color: rgba(147, 197, 253, .34) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .mod-card__lang-badge--fr,
html[data-theme="dark"] .qz-badge--lang-fr {
  background: rgba(192, 132, 252, .18) !important;
  border-color: rgba(216, 180, 254, .34) !important;
  color: #f0ddff !important;
}

html[data-theme="dark"] .mod-card__tag--fav {
  background: rgba(225, 29, 72, .18) !important;
  border-color: rgba(251, 113, 133, .36) !important;
  color: #ffd1dc !important;
}

html[data-theme="dark"] .mod-card__meta,
html[data-theme="dark"] .qz-card__stats {
  border-top-color: var(--dark-line, rgba(148, 171, 195, .26)) !important;
}

html[data-theme="dark"] .mods-switch__pill,
html[data-theme="dark"] .qz-switch__pill,
html[data-theme="dark"] .mods-tab,
html[data-theme="dark"] .qz-tab,
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .mods-sort select,
html[data-theme="dark"] .qz-sort select {
  background: var(--dark-surface, #1a2633) !important;
  border-color: var(--dark-line, rgba(148, 171, 195, .26)) !important;
  color: var(--dark-heading, #f6f9fc) !important;
}

html[data-theme="dark"] .mods-switch__pill:hover,
html[data-theme="dark"] .qz-switch__pill:hover,
html[data-theme="dark"] .mods-tab:hover,
html[data-theme="dark"] .qz-tab:hover,
html[data-theme="dark"] .page-btn:hover:not(.page-btn--disabled):not(.page-btn--active) {
  background: var(--dark-surface-2, #203041) !important;
  border-color: var(--dark-line-strong, rgba(172, 192, 214, .38)) !important;
  color: #fff !important;
}

html[data-theme="dark"] .mods-switch__pill.active,
html[data-theme="dark"] .qz-switch__pill.active,
html[data-theme="dark"] .mods-tab.active,
html[data-theme="dark"] .qz-tab.active,
html[data-theme="dark"] .page-btn--active {
  background: #356b9c !important;
  border-color: #356b9c !important;
  color: #fff !important;
}

html[data-theme="dark"] .mods-tab__count,
html[data-theme="dark"] .qz-tab__count {
  color: #fff !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .mods-grid,
  .qz-grid { grid-template-columns: 1fr; }

  .mods-toolbar,
  .qz-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .mods-sort,
  .qz-sort {
    margin-inline-start: 0;
    width: 100%;
  }
}