/*
 * Portfólio na titulní stránce - úpravy proti šabloně.
 *
 * Načítá se AŽ ZA style.css, takže přebíjí pravidla šablony. Ta počítala
 * se čtyřmi ručně vybranými obrázky stejného formátu a název akce ukazovala
 * jen při najetí myší (opacity: 0 -> 1). U fotek přímo z galerie to nefunguje:
 *
 *   - fotky ze závodů jsou na šířku i na výšku, takže mřížka byla roztřepaná,
 *   - na dotykovém displeji není "najetí myší", takže názvy akcí nebyly
 *     vidět vůbec a sekce působila jako mřížka náhodných fotek.
 *
 * Řešení: jednotný poměr stran s object-fit: cover a název vypsaný natrvalo
 * přes tmavý přechod, který je čitelný nad světlou i tmavou fotkou. Hover
 * zůstává jako zvýraznění, ne jako jediná cesta k informaci.
 */

/* Dlaždice je celá odkaz a zároveň rám s pevným poměrem stran. */
#portfolio .portfolio-odkaz {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #e4e4e4;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Prohlížeče bez aspect-ratio (starší Safari) - poměr přes padding. */
@supports not (aspect-ratio: 4 / 3) {
  #portfolio .portfolio-odkaz {
    height: 0;
    padding-bottom: 75%;
  }
}

/*
 * Fotka vyplní rám bez ohledu na orientaci - na výšku i na šířku.
 * Kotví se na všechny strany rámu, takže `top: -30px` z hover pravidla
 * šablony se nemá kde projevit (přebíjí ho pravidlo níž).
 */
#portfolio .portfolio-odkaz img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Šablona na hover posouvala fotku o 30 px nahoru a odkrývala zelený pruh.
   Tady se místo toho fotka lehce přiblíží - rám zůstane vyplněný. */
#portfolio .portfolio-item:hover .portfolio-odkaz img,
#portfolio .portfolio-odkaz:focus img {
  top: 0;
  transform: scale(1.06);
}

/*
 * Popiska je vidět vždy. Přechod místo plné zelené plochy: nad tmavou fotkou
 * i nad přepáleným nebem zůstane bílý text čitelný a fotka není zakrytá.
 */
#portfolio .portfolio-item .portfolio-odkaz .portfolio-info {
  opacity: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 16px 14px 16px;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0) 100%);
  z-index: 3;
  transition: background ease-in-out 0.3s;
}

#portfolio .portfolio-item:hover .portfolio-odkaz .portfolio-info {
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.05) 100%);
}

/* Názvy akcí jsou různě dlouhé („HBC Pardubice Finálový turnaj - Světlá nad
   Sázavou 19. 6. 2022"), proto ořez na dva řádky, ať dlaždice nekolísají. */
#portfolio .portfolio-item .portfolio-odkaz .portfolio-info h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zelený proužek dole jako signál, že je dlaždice klikací. */
#portfolio .portfolio-odkaz::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #2dc997;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease-in-out;
  z-index: 4;
}

#portfolio .portfolio-item:hover .portfolio-odkaz::after,
#portfolio .portfolio-odkaz:focus::after {
  transform: scaleX(1);
}

/* Viditelný focus pro ovládání klávesnicí - šablona ho neřešila. */
#portfolio .portfolio-odkaz:focus-visible {
  outline: 3px solid #2dc997;
  outline-offset: 3px;
}

/* Filtrů je teď sedm místo dvou, na úzkém displeji se musí zalomit čitelně. */
#portfolio #portfolio-flters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 575px) {
  #portfolio #portfolio-flters li {
    padding: 9px 13px 10px 13px;
    font-size: 13px;
    margin: 0 4px 8px 4px;
  }

  #portfolio .portfolio-item .portfolio-odkaz .portfolio-info h4 {
    font-size: 15px;
  }
}

/* Kdo si nepřeje animace, dostane statickou verzi. */
@media (prefers-reduced-motion: reduce) {
  #portfolio .portfolio-odkaz img,
  #portfolio .portfolio-odkaz::after,
  #portfolio .portfolio-item .portfolio-odkaz .portfolio-info {
    transition: none;
  }

  #portfolio .portfolio-item:hover .portfolio-odkaz img {
    transform: none;
  }
}