/* ==============================
   BARVY TÝMŮ
============================== */

:root {
  --vedeni:      #e02020;
  --vedeni-tymu: #e07820;
  --technik:     #c0306a;
  --helper:      #28a050;
  --builder:     #b8cc20;
  --eventer:     #0878a0;
  --grafik:      #18a898;
  --dev:         #a040e0;
  --zkusebni:    rgba(240, 238, 248, 0.32);
}

/* ==============================
   HERO
============================== */

.tym-hero {
  position: relative;
  height: 52vh;
  min-height: 380px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.tym-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('pictures/background.png');
  background-size: cover;
  background-position: center 30%;
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

.tym-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 11, 18, 0.55) 0%,
    rgba(8, 11, 18, 0.72) 60%,
    rgba(8, 11, 18, 1) 100%
  );
}

.tym-hero__content {
  position: relative;
  z-index: 2;
  padding-top: 80px;
}

.tym-hero__sub {
  max-width: 480px;
  margin: 0 auto;
}

/* ==============================
   LAYOUT
============================== */

.tym-main {
  padding-bottom: 80px;
}

.tym-section {
  padding: 64px 24px 0;
}

.tym-section__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.tym-section__header {
  margin-bottom: 36px;
}

.tym-section__title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  margin-top: 10px;
}

.tym-section__desc {
  font-size: 14.5px;
  color: var(--muted);
}

/* ==============================
   BADGE (štítek sekce)
============================== */

.tym-badge {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 14px;
}

.tym-badge--vedeni      { background: rgba(224, 32,  32,  0.14); border: 1px solid rgba(224, 32,  32,  0.3); color: #e02020; }
.tym-badge--vedeni-tymu { background: rgba(224, 120, 32,  0.14); border: 1px solid rgba(224, 120, 32,  0.3); color: #e07820; }
.tym-badge--technik     { background: rgba(192, 48,  106, 0.14); border: 1px solid rgba(192, 48,  106, 0.3); color: #c0306a; }
.tym-badge--helper      { background: rgba(40,  160, 80,  0.14); border: 1px solid rgba(40,  160, 80,  0.3); color: #28a050; }
.tym-badge--builder     { background: rgba(184, 204, 32,  0.14); border: 1px solid rgba(184, 204, 32,  0.3); color: #b8cc20; }
.tym-badge--eventer     { background: rgba(8,   120, 160, 0.14); border: 1px solid rgba(8,   120, 160, 0.3); color: #0878a0; }
.tym-badge--grafik      { background: rgba(24,  168, 152, 0.14); border: 1px solid rgba(24,  168, 152, 0.3); color: #18a898; }
.tym-badge--dev         { background: rgba(160,  64, 224, 0.14); border: 1px solid rgba(160,  64, 224, 0.3); color: #a040e0; }

/* ==============================
   NADPISY SEKCÍ — barvy
============================== */

.tym-title--vedeni      { color: var(--vedeni); }
.tym-title--vedeni-tymu { color: var(--vedeni-tymu); }
.tym-title--technik     { color: var(--technik); }
.tym-title--helper      { color: var(--helper); }
.tym-title--builder     { color: var(--builder); }
.tym-title--eventer     { color: var(--eventer); }
.tym-title--grafik      { color: var(--grafik); }
.tym-title--dev         { color: var(--dev); }

/* ==============================
   GRID
============================== */

.tym-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
}

/* ==============================
   KARTA ČLENA
============================== */

.tym-card {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  min-width: 210px;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.25s;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.25s;
  cursor: default;
}

.tym-card:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

/* hover barva borderu podle týmu */
.tym-card--vedeni:hover   { border-color: rgba(224, 32,  32,  0.4); }
.tym-card--technik:hover  { border-color: rgba(192, 48,  106, 0.4); }
.tym-card--helper:hover   { border-color: rgba(40,  160, 80,  0.4); }
.tym-card--builder:hover  { border-color: rgba(184, 204, 32,  0.4); }
.tym-card--eventer:hover  { border-color: rgba(8,   120, 160, 0.4); }
.tym-card--grafik:hover   { border-color: rgba(24,  168, 152, 0.4); }
.tym-card--dev:hover      { border-color: rgba(160,  64, 224, 0.4); }
.tym-card--zkusebni:hover { border-color: rgba(240, 238, 248, 0.18); }

/* ==============================
   SKIN OBRÁZEK
============================== */

.tym-card__skin-wrap {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
}

.tym-card__skin {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  image-rendering: pixelated;
  max-width: none;
}

/* ==============================
   TĚLO KARTY
============================== */

.tym-card__body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tym-card__role {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tym-card__name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==============================
   ROLE BARVY
============================== */

.tym-role--vedeni      { color: var(--vedeni); }
.tym-role--technik     { color: var(--technik); }
.tym-role--helper      { color: var(--helper); }
.tym-role--builder     { color: var(--builder); }
.tym-role--eventer     { color: var(--eventer); }
.tym-role--grafik      { color: var(--grafik); }
.tym-role--dev         { color: var(--dev); }
.tym-role--zkusebni    { color: var(--zkusebni); }

/* zkušební — jméno taky šedé */
.tym-card--zkusebni .tym-card__name {
  color: rgba(240, 238, 248, 0.45);
}

/* zkušební — skin trochu průhledný */
.tym-card--zkusebni .tym-card__skin-wrap {
  opacity: 0.6;
}

/* ==============================
   LEFT ACCENT LINKA
============================== */

.tym-card--vedeni   { box-shadow: inset 3px 0 0 var(--vedeni); }
.tym-card--technik  { box-shadow: inset 3px 0 0 var(--technik); }
.tym-card--helper   { box-shadow: inset 3px 0 0 var(--helper); }
.tym-card--builder  { box-shadow: inset 3px 0 0 var(--builder); }
.tym-card--eventer  { box-shadow: inset 3px 0 0 var(--eventer); }
.tym-card--grafik   { box-shadow: inset 3px 0 0 var(--grafik); }
.tym-card--dev      { box-shadow: inset 3px 0 0 var(--dev); }
.tym-card--zkusebni { box-shadow: inset 3px 0 0 rgba(240,238,248,0.15); }

/* hover musí zachovat accent linku */
.tym-card--vedeni:hover   { box-shadow: inset 3px 0 0 var(--vedeni),   0 14px 40px rgba(0,0,0,0.45); }
.tym-card--technik:hover  { box-shadow: inset 3px 0 0 var(--technik),  0 14px 40px rgba(0,0,0,0.45); }
.tym-card--helper:hover   { box-shadow: inset 3px 0 0 var(--helper),   0 14px 40px rgba(0,0,0,0.45); }
.tym-card--builder:hover  { box-shadow: inset 3px 0 0 var(--builder),  0 14px 40px rgba(0,0,0,0.45); }
.tym-card--eventer:hover  { box-shadow: inset 3px 0 0 var(--eventer),  0 14px 40px rgba(0,0,0,0.45); }
.tym-card--grafik:hover   { box-shadow: inset 3px 0 0 var(--grafik),   0 14px 40px rgba(0,0,0,0.45); }
.tym-card--dev:hover      { box-shadow: inset 3px 0 0 var(--dev),       0 14px 40px rgba(0,0,0,0.45); }
.tym-card--zkusebni:hover { box-shadow: inset 3px 0 0 rgba(240,238,248,0.15), 0 14px 40px rgba(0,0,0,0.45); }

/* ==============================
   ODDĚLOVAČ MEZI SEKCEMI
============================== */

.tym-section + .tym-section {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 64px;
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 640px) {
  .tym-grid {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .tym-card {
    width: 100%;
    min-width: 0;
  }

  .tym-hero { height: 44vh; }
}