/* Theme */
:root {
  --bg: #1f1f1f;
  --panel: #2a2a2a;
  --border: #6b7280;
  --text: #e5e7eb;
  --muted: #d1d5db;
  --accent: #f6c20f;
  --gap: 20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  border-radius: 0.375rem;
}

.wrap { width: min(1100px, 92vw); margin-inline: auto; }
.title { text-align: center; color: #ffffff; font-weight: 800; letter-spacing: .02em; margin: 1.5rem 0 1rem; font-size: clamp(1.75rem, 4vw, 3rem); }

/* Slider */
.slider { margin-block: .5rem 2rem; }
.slider__viewport { overflow: hidden; padding-block: .5rem 0; }
.slider__track { display: flex; gap: var(--gap); will-change: transform; transition: transform .45s ease; padding: 0; margin: 0; list-style: none; }

/* Card */
.card { flex: 0 0 auto; border: 1px solid #9ca3af33; border-radius: 0.375rem; background: #262626; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.card__media { display: block; overflow: hidden; border-bottom: 1px solid #9ca3af33; }
.card__media img { width: 100%; height: 220px; object-fit: cover; transform: scale(1); transition: transform .5s ease; display: block; border-radius: 0.375rem;}
.card__media:hover img { transform: scale(1.08); }
.card__body { padding: 1rem 1rem 1.25rem; display: grid; gap: .75rem; }
.card__title { color: #ffffff; margin: 0; font-size: 1.35rem; font-weight: 800; }
.card__text { margin: 0; color: #d1d5db; line-height: 1.5; max-width: 55ch; }
.btn { justify-self: start; display: inline-block; padding: .6rem 1rem; border: 1px solid #ccc; border-radius: 0.375rem; color: #ccc; text-decoration: none; background: transparent; transition: background .2s ease, color .2s ease, transform .06s ease; }
.btn:hover { background: #ccc; color: #111; }
.btn:active { transform: translateY(1px); }

/* Controls */
.slider__controls { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .75rem; margin-top: 1rem; }
.nav { appearance: none; border: 2px solid color: #ccc; background: transparent; color: var(--text); padding: .5rem .9rem; font-size: 1rem; cursor: pointer; border-radius: 0.375rem;}
.nav:hover { background: #ccc; color: #111; }

.pager { display: flex; gap: .5rem; align-items: center; }
.pager button { min-width: 36px; padding: .4rem .6rem; border: 1px solid color: #fff; border-radius: 0.375rem; background: transparent; color: var(--text); cursor: pointer; }
.pager button[aria-current="page"] { background: #ccc; color: #111; }

.cta { justify-self: end; text-decoration: none; padding: 0.5rem 1.3rem; border: 1px solid color: #ccc; border-radius: 0.375rem; color: var(--text); background-color: darkgreen;}
.cta:hover { background: darkolivegreen; color: #111; }

@media (max-width: 800px) { .card__media img { height: 200px; } }
@media (max-width: 580px) {
  .slider__controls { grid-template-columns: auto 1fr auto; }
  .cta { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}