/*
 * Hero sekcia stránok (template-parts/titlebar-collection.php).
 *
 * screen.min.css dáva od 1199.98px textu 30 % a obrázku 40 % — spolu 70 %,
 * takže vpravo ostávalo ~30 % prázdneho miesta (pri 1425px viewporte 427px)
 * a obrázok pôsobil malý a odsunutý do stredu. Do 1199.98px je pomer 40/60,
 * teda v poriadku, chyba bola len na širokých monitoroch.
 *
 * Tu pomer dopĺňame na 34/66 a obrázku dávame nižší pomer strán, aby sa
 * kompozícia fotky nerezala zhora a zdola (zdroj je takmer štvorcový,
 * Diamond_academy_header.webp má 1399×1124).
 *
 * Zámerne cez .titlebar-collection--page: tú istú .titlebar-collection
 * používa aj category-header.php a nechceme siahať na kategórie ani na
 * collection-hero-split. Rovnako zámerne bez !important — pravidlá zo
 * split layoutu majú vyššiu špecificitu a musia ostať silnejšie.
 */

@media (min-width: 1199.98px) {

  .titlebar-collection--page .content-column {
    width: 34%;
    /* Text drží pokope v strede; .lead má inak margin-top: auto, ktorý
       odtlačí popis až na spodok a nechá pod nadpisom veľkú dieru. */
    justify-content: center;
  }

  .titlebar-collection--page .content-column .lead {
    margin-top: 1.25rem;
  }

  .titlebar-collection--page picture {
    width: 66%;
  }

  /* Bez tohto by výšku sekcie určoval text a obrázok by sa pri šírke ~940px
     orezal na pomer cez 2:1. Strop max-height: 100vh zo screen.min.css
     ostáva v platnosti pre veľmi široké monitory. */
  .titlebar-collection--page img {
    aspect-ratio: 1.45 / 1;
  }
}