/**
 * PREZENTARE GENERALĂ
 *
 * Acest fișier se ocupă de schema (layout) website-ului. În loc să setăm
 * schemele componentelor una câte una, vom crea un sistem separat
 * care are un singur scop—să-i spună fiecărui element
 * ce dimensiune trebuie să aibă și unde să apară.
 *
 * Class-ele declarate aici pot fi alocate oricărui container
 * pentru a le da mărimea corectă și pentru a le face să acționeze cum trebuie.
 */


/**
 * CUPRINS
 *
 * SCHEMĂ
 * Elemente.................Regulile de dimensionare a containerelor.
 * Modifiers..............Regulile care modifică schema, de ex. float-uri.
 *
 * CULOARE
 * Culoare orizontale....Regulile whitespace-ului orizontal dintre containeri.
 *
 * HELPERI
 * Clearfix...............Un class care poate fi atribuit floated container-ilor.
 */





/*------------------------------------*\
  #SCHEMĂ
\*------------------------------------*/

/**
 * 1. Când avem nevoie de un culoar (gutter) vertical între doi containeri
 * folosim aceste classe. Acestea se ajustează automat astfel că
 * sar jumătate din whitespace-ul dintre două elemente. Când două elemente
 * sunt plasate alăturat, între ele apare un culoar de mărime adecvată
 * în mod automat. Pentru un efect complet, trebuie să float-ăm
 * un element spre stânga și pe celălalt spre dreapta folosind class-ele corecte.
 *
 * 2. Dacă vrei să centrezi orizontal un element, folosește acest class.
 *
 * 3. Dacă trebuie să float-ezi un element, aceste classe te vor ajuta.
 * Nu uita să atribui class-ul .clearfix
 * din secțiunea HELPERI din container.
 */

.layout__item--full-width               { width: 100%; }

.layout__item--70-percent               { width: 70%; }

.layout__item--50-percent               { width: 50%; }

.layout__item--50-percent-w-gutter      { width: calc(50% - 1.071rem); } /* [1] */


.layout__item--content-w-sticked-footer { min-height: calc(100vh - 80px); }


.layout__item--centered-horizontally { /* [2] */
  margin-left:  auto;
  margin-right: auto;
}


.layout__item--floated-left  { float: left; } /* [3] */

.layout__item--floated-right { float: right; }/* [3] */





/*------------------------------------*\
  #CULOARE
\*------------------------------------*/

.gutter--horizontal-small { margin-bottom: 2.142rem; }

.gutter--horizontal-big   { margin-bottom: 2.857rem; }





/*------------------------------------*\
  #HELPERI
\*------------------------------------*/

.clearfix:after {
  content:  "";
  display:  table;
  clear:    both;
}