/* HiLTUS UI — firminis sluoksnis: grafinis elementas ir logotipas.
 *
 * Identitetas grafinį elementą vadina PAGRINDINIU elementu visose komunikacijos
 * priemonėse. Formos ir kompozicija keičiamos laisvai, bet 45 laipsnių kampas ir
 * spalviškumas — ne. Kitas kampas jau ne HiLTUS.
 *
 * Elementas yra FONAS, ne iliustracija: antraštės juostoje ir titulinyje taip,
 * per vidurį teksto ne. Sąrašuose ir lentelėse jo nėra — ten jis trukdytų skaityti.
 */

/* Juosta, kurioje elementas gyvena. Turinys visada virš jo (z-index). */
.hi-brandbar {
  position: relative;
  overflow: hidden;
  background: var(--hiltus-navy);
  color: #fff;
  border-radius: var(--r);
  padding: var(--sp-6) var(--sp-5);
}

.hi-brandbar > * { position: relative; z-index: 1; }

.hi-brandbar a { color: var(--hiltus-cyan); }

/* Formos. Apvalinti stačiakampiai, pasukti lygiai 45°.
   Kampo keisti negalima — tai vienintelė nekeičiama elemento savybė. */
.hi-shape {
  position: absolute;
  z-index: 0;
  border-radius: 14px;
  transform: rotate(45deg);
  pointer-events: none;
}

/* Perėjimai eina iš spalvos į skaidrumą — taip jie tirpsta į bet kurį foną,
   ir šviesų, ir tamsų, nepridedant spalvos, kurios identitete nėra. */
.hi-shape--cyan { background: linear-gradient(to bottom, var(--hiltus-cyan), rgb(2 171 180 / 0%)); }
.hi-shape--green { background: linear-gradient(to bottom, var(--hiltus-green), rgb(151 195 85 / 0%)); }
.hi-shape--light { background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0%)); }

/* Trys paruošti dydžiai — kad kiekvienas nesigalvotų savo. */
.hi-shape--lg { width: 120px; height: 300px; }
.hi-shape--md { width: 90px; height: 230px; }
.hi-shape--sm { width: 70px; height: 170px; }

/* „V" forma — antroji logotipo figūra. Tas pats 45° kampas. */
.hi-chevron {
  position: absolute;
  z-index: 0;
  width: 140px;
  height: 140px;
  border-right: 26px solid currentColor;
  border-bottom: 26px solid currentColor;
  border-bottom-right-radius: 18px;
  transform: rotate(45deg);
  opacity: .3;
  pointer-events: none;
}

/* Telefone kompozicija supaprastinama: viena forma vietoj trijų. Elementas yra
   fonas, o mažame ekrane trys formos jau ne fonas, o triukšmas. */
@media (max-width: 639px) {
  .hi-brandbar .hi-shape:nth-of-type(n+2),
  .hi-brandbar .hi-chevron { display: none; }
  .hi-brandbar .hi-shape { opacity: .5; }
}

/* ---- Logotipas ---------------------------------------------------------
 * Proporcijos, kompozicija, šriftai ir formos NEGALI būti keičiami. Reikia kito
 * dydžio — mastelis, ne perpiešimas. Todėl čia tik dydis ir niekas daugiau.
 *
 * Paties SVG čia DAR NĖRA. Vektorius ištrauktas iš identiteto PDF ir guli
 * `hiltus-brandas` skill'o `assets/logotipas-p2.svg`, bet tai viso puslapio failas —
 * prieš naudojant reikia apkarpyti iki paties ženklo. Perpiešti negalima.
 */

.hi-logo {
  display: inline-block;
  height: 32px;
  width: auto;
}

.hi-logo--sm { height: 24px; }
.hi-logo--lg { height: 48px; }

/* Apsauginis tarpas: pusė ženklo aukščio iš visų pusių. */
.hi-logo-slot { display: inline-flex; align-items: center; padding: .5em; }