/* GORJE-055: login page in front of sd-gorje.si. Light winter background, the animated Svizec, the form on a white card.
   Phone: Svizec on top, then the text and the form. Computer: text and form left, Svizec right. */
html { background: var(--led); }
body { margin: 0; color: var(--noc); font-family: var(--f-tekst); }
.v-zaslon { display: flex; align-items: center; min-height: calc(100svh - var(--glava-h) - 48px); padding-block: 24px 40px; }
.v-mreza { display: grid; gap: 8px; }
.v-levo { display: grid; gap: 28px; justify-items: start; }
.v-besedilo { display: grid; gap: 16px; max-width: 640px; }
.v-besedilo h1, .v-besedilo p { margin: 0; }
.v-besedilo p { max-width: 34em; }

/* Svizec: video 666 x 542 with a transparent background; the pause button sits next to him (WCAG 2.2.2) */
.v-svizec { position: relative; justify-self: center; width: min(78vw, 320px); }
.v-oder { aspect-ratio: 666 / 542; cursor: pointer; }
.v-oder video { display: block; width: 100%; height: 100%; }
.v-pavza { position: absolute; right: 0; bottom: 4px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(30, 52, 68, .72); color: var(--bela); cursor: pointer;
  transition: background-color 160ms ease, scale calc(120ms * var(--gib, 1)) var(--ease-out, ease); -webkit-tap-highlight-color: transparent; }
.v-pavza:active { scale: .94; }
.v-pavza:focus-visible { outline: 3px solid var(--jezero); outline-offset: 2px; }
.v-pavza svg { width: 18px; height: 18px; }
.v-pavza .ik-tece { display: none; }
.v-pavza[aria-pressed="true"] .ik-tece { display: block; }
.v-pavza[aria-pressed="true"] .ik-pavza { display: none; }
@media (hover: hover) and (pointer: fine) { .v-pavza:hover { background: rgba(30, 52, 68, .88); } }
@media (prefers-reduced-motion: reduce) { .v-pavza { display: none; } }

/* the form card */
.v-okno { display: grid; gap: 16px; width: min(100%, 400px); margin: 0; padding: 24px;
  border-radius: var(--r-kartica); background: var(--bela); box-shadow: var(--senca-kartica); }
.v-okno h2 { margin: 0; }
.v-okno .vnos { box-shadow: inset 0 0 0 1.5px var(--crta); }
.v-okno .vnos:focus { box-shadow: inset 0 0 0 2px var(--jezero), 0 0 0 3px var(--bela), 0 0 0 5px var(--jezero); }
.v-okno .gumb { width: 100%; }
.v-opomba { margin: 0; color: var(--megla); }
.v-sporocilo { margin: 0; padding: 12px 16px; border-radius: var(--r-polje); background: #FBEDEC; color: var(--napaka);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.45; }
.v-sporocilo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* GORJE-081: the calling card on / (zgradi.py, vizitka): the white card holds the club and its sections instead of the form */
.v-nad { margin: 0 0 -4px; color: var(--megla); }
.v-klub { gap: 14px; }
.v-sporti { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v-sporti li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--led);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.v-sedez { margin: 0; color: var(--megla); }
.v-sedez a { color: var(--noc); }

.v-noga { padding-block: 12px; color: var(--megla); background: var(--sneg); }

@media (min-width: 768px) {
  .v-svizec { width: min(60vw, 420px); }
}
@media (min-width: 1024px) {
  .v-mreza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .v-svizec { order: 2; width: min(100%, 620px); }
  .v-besedilo h1 { font-size: clamp(56px, 5.2vw, 84px); }
}