/* ============================================================================
   Druhý klient ve světlém režimu dema (demo-skins.js nastaví data-skin).
   Plochy, čáry a texty se míchají s neutrální břidlicovou místo s barvou
   značky, spodní lišta je tmavá.
   ========================================================================== */
[data-skin="club"][data-theme="light"] {
  --neutral-base: #46535B;
  --neutral-ink: #FFFFFF;

  --bg: color-mix(in oklab, var(--neutral-base) 5%, #F3F6F7);
  --surface: #FFFFFF;
  --surface-2: color-mix(in oklab, var(--neutral-base) 5%, #FFFFFF);
  --surface-sunk: color-mix(in oklab, var(--neutral-base) 7%, #F2F5F6);

  --line: color-mix(in oklab, var(--neutral-base) 13%, #E4EAEA);
  --line-strong: color-mix(in oklab, var(--neutral-base) 26%, #D3DDDD);

  --text: color-mix(in oklab, var(--neutral-base) 26%, #0E1A1F);
  --text-2: color-mix(in oklab, var(--neutral-base) 22%, #5B7178);
  --text-3: color-mix(in oklab, var(--neutral-base) 14%, #8A9BA0);

  --scrim: rgba(6, 32, 38, .42);
}

/* Tmavá spodní lišta. */
[data-skin="club"][data-theme="light"] .navbar {
  background: var(--neutral-base);
  border-color: color-mix(in oklab, var(--neutral-ink) 12%, transparent);
}
[data-skin="club"][data-theme="light"] .navbtn {
  color: color-mix(in oklab, var(--neutral-ink) 64%, transparent);
}
[data-skin="club"][data-theme="light"] .navbtn[aria-current="page"] {
  color: var(--neutral-ink);
}

/* --- Hero s fotkou klubu (Domů a záhlaví menu Více) ---------------------
   Fotka klubu pod břidlicovým závojem a rovné spodní rohy. */
[data-skin="club"][data-theme="light"] {
  --ph-veil-top: color-mix(in oklab, var(--neutral-base) 58%, transparent);
  --ph-veil-mid: color-mix(in oklab, var(--neutral-base) 66%, transparent);
  --ph-veil-bot: color-mix(in oklab, var(--neutral-base) 70%, #0B1114);
}
[data-skin="club"][data-theme="light"] .field--photo,
[data-skin="club"][data-theme="light"] .drawer .field {
  border-radius: 0;
  background:
    linear-gradient(180deg, var(--ph-veil-top) 0%, var(--ph-veil-mid) 55%, var(--ph-veil-bot) 100%),
    var(--ph-photo, url(../img/club/club.jpg)) center / cover no-repeat;
}
[data-skin="club"][data-theme="light"] .field--photo::before,
[data-skin="club"][data-theme="light"] .drawer .field::before {
  display: none;
}
[data-skin="club"][data-theme="light"] .field--photo {
  --ph-photo: url(../img/club/gym.jpg);
  padding-top: calc(52px + var(--sp-2));
}

/* Název klubu uprostřed, zvoneček vpravo a stejně široký prázdný sloupec vlevo. */
.ph-brand {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  column-gap: var(--sp-3);
  align-items: center;
}
.ph-wordmark {
  justify-self: center;
  min-width: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .02em;
  color: #FFFFFF;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.ph-place {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-3);
}
.ph-place .field__place { color: rgba(255, 255, 255, .92); font-weight: 600; }
.ph-greet { margin-top: var(--sp-6); font-weight: 400; }

.ph-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.ph-tierpill {
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ph-valid { font-size: var(--fs-body); color: rgba(255, 255, 255, .9); }
.ph-valid b, .ph-renew b { color: #FFFFFF; font-weight: 700; }
.ph-meter {
  height: 6px;
  margin-top: var(--sp-4);
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
}
.ph-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ph-renew {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .9);
}
.ph-members { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }

/* --- Tvary druhého klienta -------------------------------------------------
   Pole formuláře jako pilulka (radius-control) a žádné „kapkové“ karty:
   aplikace má jeden poloměr karet. */
[data-skin="club"][data-theme="light"] .input,
[data-skin="club"][data-theme="light"] .select {
  border-radius: var(--r-pill);
}
[data-skin="club"][data-theme="light"] .card--drop,
[data-skin="club"][data-theme="light"] .card--drop-alt,
[data-skin="club"][data-theme="light"] .entrykey {
  border-radius: var(--r-lg);
}

/* --- Spodní lišta: vstupní kód je poslední položka ve stejné výšce -----
   (Domů · Rezervace · Obchod · Více · Vstupní kód). */
[data-skin="club"][data-theme="light"] .navbtn--hero { order: 9; }
[data-skin="club"][data-theme="light"] .navbtn--hero .navbtn__ic {
  width: 40px;
  height: 32px;
  margin-top: 0;
  border-radius: var(--r-sm);
  box-shadow: none;
}