/* ── Gentona Light (převzato z ročníku 2025) ── */
@font-face {
  font-family: 'Gentona';
  src: url('fonts/gentona-light.woff2') format('woff2'),
       url('fonts/gentona-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --blue:  #3a56af;   /* modrá plocha plakátu */
  --green: #92ce73;   /* texty na plakátu */
  --navy:  #272960;   /* poděkování + loga v patičce */
}

html {
  background-color: var(--blue);
}

body {
  font-family: 'Gentona', Georgia, serif;
  font-weight: 300;
  color: var(--green);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

/* ══════════════════════════════════════════
   PLAKÁT
   --u = proporční jednotka odvozená z návrhu
   (1 u = 1 % šířky plakátu, shora omezená
   výškou okna, aby se kompozice vešla)
   ══════════════════════════════════════════ */
.poster {
  --u: clamp(5px, min(1vw, 0.92vh), 14px);

  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  flex-direction: column;
  padding: calc(5.16 * var(--u)) 5.6% calc(10.87 * var(--u));

  background-color: var(--blue);
  background-image: url('images/butterfly-portrait.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* na šířku se používá širší výřez stejné fotografie */
@media (min-aspect-ratio: 1/1) {
  .poster {
    background-image: url('images/butterfly-wide.jpg');
  }
}

/* přechod fotografie do modré plochy */
.poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(58, 86, 175, 0) 58%,
    var(--blue) 78%
  );
}

.poster > * {
  position: relative;
  z-index: 2;
}

/* ── Logo ── */
.poster__logo {
  font-size: 0;
  font-weight: inherit;
  text-align: center;
}

.poster__logo img {
  width: calc(18.32 * var(--u));
  height: auto;
  margin: 0 auto;
}

/* ── Spodní blok: akce, QR kódy, 1000 statečných ──
   Každý QR kód patří ke své akci (na mobilu stojí přímo
   pod ní), na desktopu se skládají do řady podle návrhu. */
.board {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: calc(3 * var(--u));
  row-gap: calc(1.9 * var(--u));
}

/* Texty akcí smí v prvním řádku přesáhnout přes prostřední
   sloupec, aby se na užších obrazovkách zbytečně nelámaly. */
.event--sura  { grid-row: 1; grid-column: 1 / 3; align-self: end; justify-self: start; }
.event--barta { grid-row: 1; grid-column: 2 / 4; align-self: end; justify-self: end; text-align: right; }
.qr--sura     { grid-row: 2; grid-column: 1; align-self: start; justify-self: start; }
.board__mid   { grid-row: 2; grid-column: 2; align-self: start; text-align: center; }
.qr--barta    { grid-row: 2; grid-column: 3; align-self: start; justify-self: end; }

.event__title {
  font-weight: 300;
  font-size: calc(4.308 * var(--u));
  line-height: 1.157;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.event__tickets {
  margin-top: calc(0.55 * var(--u));
  font-size: max(11px, calc(1.339 * var(--u)));
  line-height: 1.196;
}

.event__tickets a,
.board__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

.event__tickets a:hover,
.board__text a:hover {
  color: #fff;
}

/* ── QR kódy ── */
.qr {
  display: block;
  width: calc(17.64 * var(--u));
  transition: opacity .2s linear;
}

.qr img {
  width: 100%;
  height: auto;
}

.qr:hover {
  opacity: .82;
}

/* ── 1000 statečných ── */
.board__logo {
  width: calc(17.03 * var(--u));
  height: auto;
  margin: 0 auto;
}

.board__text {
  margin-top: calc(2.37 * var(--u));
  font-size: max(12px, calc(1.991 * var(--u)));
  line-height: 1.193;
}

/* ══════════════════════════════════════════
   PODĚKOVÁNÍ
   ══════════════════════════════════════════ */
.thanks {
  background-color: #fff;
  color: var(--navy);
  padding: 5.9% 5.6% 6.4%;
  text-align: center;
}

.thanks__title {
  font-weight: 300;
  font-size: clamp(1.9rem, 5.59vw, 5rem);
  line-height: 1.1;
}

.thanks__row {
  margin-top: 7.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.8%;
}

.thanks__row--partners {
  gap: 1.2%;
}

.thanks__logo {
  flex: 0 0 auto;
  width: auto;
}

.thanks__logo--osa   { height: clamp(46px, 6.68vw, 96px); }
.thanks__logo--p6    { height: clamp(43px, 6.27vw, 90px); }
.thanks__logo--k     { height: clamp(46px, 6.81vw, 98px); }
.thanks__logo--mango { height: clamp(28px, 4.18vw, 60px); }

.thanks__text {
  text-align: left;
  font-size: clamp(0.85rem, 1.4vw, 1.25rem);
  line-height: 1.35;
}

/* ══════════════════════════════════════════
   NAVIGACE ROČNÍKŮ
   ══════════════════════════════════════════ */
.year-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 8px 15px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.year-nav::-webkit-scrollbar {
  display: none;
}

.year-nav ul {
  list-style: none;
  font-size: 0;
  white-space: nowrap;
}

.year-nav .navItem {
  display: inline-block;
  vertical-align: top;
}

.year-nav a {
  display: block;
  height: 28px;
  width: 56px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color .2s linear, color .2s linear;
}

.year-nav a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

.year-nav .navItem.active a {
  background-color: var(--green);
  color: var(--blue);
}

/* ══════════════════════════════════════════
   MOBIL
   ══════════════════════════════════════════ */
@media (max-width: 700px) {

  .poster {
    min-height: 0;
    padding: 0 6% 10vw;
    background-image: url('images/butterfly-portrait.jpg');
    background-size: 100% auto;      /* fotografie je 111,8 vw vysoká */
    background-position: center top;
  }

  .poster::after {
    background-image: linear-gradient(
      to bottom,
      rgba(58, 86, 175, 0) 71vw,
      var(--blue) 88vw
    );
  }

  .poster__logo {
    padding-top: 10.5vw;
  }

  .poster__logo img {
    width: 32vw;
  }

  /* Na mobilu jde vše pod sebe v pořadí, v jakém je to
     v HTML: akce – její QR kód – druhá akce – její QR kód. */
  .board {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 37vw;
  }

  .event--sura,
  .event--barta,
  .qr {
    align-self: flex-start;
  }

  .event--barta {
    text-align: left;
    margin-top: 9vw;
  }

  .event__title {
    font-size: clamp(1.9rem, 8.4vw, 3rem);
  }

  .event__tickets {
    margin-top: 2.6vw;
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
  }

  .qr {
    width: 42vw;
    margin-top: 6vw;
  }

  .board__mid {
    align-self: stretch;
    margin-top: 12vw;
  }

  .board__logo {
    width: 52vw;
  }

  .board__text {
    margin-top: 5vw;
    font-size: clamp(0.95rem, 4.2vw, 1.25rem);
  }

  .year-nav {
    padding: 6px 8px;
  }

  .year-nav a {
    width: 44px;
    height: 24px;
    font-size: 11px;
    line-height: 24px;
  }

  .thanks {
    padding: 14vw 6% 16vw;
  }

  .thanks__title {
    font-size: clamp(1.9rem, 11vw, 3rem);
  }

  .thanks__row {
    margin-top: 12vw;
    flex-wrap: wrap;
    gap: 6vw;
  }

  .thanks__row--partners {
    gap: 8vw;
  }

  .thanks__logo--osa   { height: 15vw; }
  .thanks__logo--p6    { height: 14vw; }
  .thanks__logo--k     { height: 15vw; }
  .thanks__logo--mango { height: 9vw; }

  .thanks__text {
    width: 100%;
    text-align: center;
    font-size: clamp(0.85rem, 3.6vw, 1.05rem);
  }
}