/* TODO architecture v roadmapě 
udělat screenshot, vypnout border-box a porovnat to ve fotopí/pxlburger
*/

/***** GENERIC *****/
* {
    box-sizing: border-box;
}

html {
    font-family: "Fira Sans", "Helvetica Neue", "Arial", sans-serif;
    --main-padding: 1.25rem;
}

@media (min-width: 40rem) {
    html {
        --main-padding: 3rem;
        --main-margin-bottom: 0; /* TODO: je to tu omylem nebo to má nějakou logiku, že je to až od 40rem??? */
    }
}

body {
    background-color: #172523;
    color: #ffffff; /*při pohledu na web je i bílá barva textu hodně dominantní, proto se ji hodí dát jako výchozí */
    
    background-image: linear-gradient(to top, rgb(0, 0, 0), rgb(0 0 0 / 0%) 37.5rem);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;

    margin: 0;
}
a:hover {
    color: #f6766c;
    
    -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
       -o-transform: scale(1.05);
          transform: scale(1.05);
}

a {
    color: #f6766c;
    /* text-decoration: none; -- původně jsem si myslel, že to tam není, ale při zoomu tam prostě je teňounký*/
    font-weight: 800;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}


img {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: 1rem;
}

p {
    max-width: 29.125rem;
    margin-bottom: var(--main-margin-bottom);
}

p,
li {
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 0;
}

ul {
    padding-left: 1.75rem;
    margin-top: 0;
    margin-bottom: var(--main-margin-bottom);
}

ul li {
    list-style-type: "— ";
}

h1,
h2,
h3 {
    font-family: "Fira Mono", "Times New Roman", Times, serif;
    font-weight: bold;
}

h1 {
    color: #f6766c;
    font-size: 4rem;
    line-height: 1.125; /* 4.5rem děleno 4rem ; bezrozměrná jednotka; line-height bude 0.6546 násobek 110px */
    margin-top: 14.25rem;
    margin-bottom: 0.5rem;
    /*nepsat takto: margin: 2rem 0 0.5rem; klidně rozepisovat ty hodnoty -bottom, -top ; potřebuju hned při pohledu vedet, o co jde */
}

@media (min-width: 40rem) {
    h1 {
        font-size: 6.875rem;
        line-height: 1;
        margin-top: 7.5rem;
        margin-bottom: 1.5rem;
    }
}


h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-top: 0; /* $$$ */
    margin-bottom: 0.5rem;
}

@media (min-width: 40rem) {
    h2 {
        font-size: 4rem;
        margin-top: 0; /* $$$ */
        margin-bottom: 1rem;
    }
}

h3 {
    font-size: 2.25rem;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

@media (min-width: 40rem) {
    h3 {
        font-size: 2.375rem;
    }
}

.layout{
    background-image: url(plamenaci.webp);
    background-size: 19.125rem;
    background-repeat: no-repeat;
    background-position: left 2.75rem top 4.25rem;

    max-width: 90rem; 
    margin: 0 auto; 

}

@media (min-width: 40rem) {
    .layout{
        background-size: 34rem;
        background-position: right 0 top 2rem;

    }
}

@media (min-width: 72rem) {
    .layout{
        background-image: url(plamenaci.webp);
        background-size: 42.375rem;
        background-position: right -5px top 6rem;

    }
}

.caption {
    color: #f6766c;
    font-family: "Fira Sans", "Helvetica Neue", "Arial", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.25em;
    font-weight: 800;
    line-height: 1.625;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
    border-left: 2px solid currentColor;
    padding-left: 1rem;
    padding-block: 0.1875rem;
}

@media (min-width: 40rem) {
    .caption {
        display: flex;
        column-gap: 1rem;
        align-items: center;

        font-size: 1.375rem;
        line-height: 1.272727;

        border-left: none;

        padding-left: 0;
        padding-block: 0;

        margin-bottom: 1rem;
    }

    .caption::before {
        background-color: currentColor;

        content: "";
        height: 2px; /*úvaha je o tom, jestli pokud si to někdo potřebuje zvětšit, tak jestli je tam ta čára vůbec potřeba. Jinak by se to mohlo hodit do remu a důraz by byl na obsahu textu, ne na zdobení */
        width: 72px;
    }
}

.caption--white {
    color: #ffffff;
}

@media (min-width: 40rem) {
    .caption--white {
        margin-bottom: 1.5rem; /* TODO nechat bottom nebo zvětšin mg top h1 a tohle úplně smazat? Nechat, protože h1 tu bude a .caption může zmizet - menší důležitost. */
    }
}

/***** COMPONENTS *****/

/* TODO převést na třídu
mrknout na to, jestli nevytvořit obecnou třídu, která má stejné vlastnosti jako např. tato - */
.main {
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 40rem) {
    .main {
        max-width: calc(69.5rem + 2 * 3rem);
    }
}

.navigation {
    margin: 1rem 0.75rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.navigation__link {
    text-align: right; /* Ošetřujeme tím situaci, pokud by se text zalomil na více řádků, tak to bude zalomené podle logiky věci - doprava. Bez toho se zalomený text hodí výchozím stylem - doleva */
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
}

.introduction {
    display: flow-root; /* řeší margin collapsing h1 - tohle zabrání všem jejím marginům, aby vylezly ven - margin h1 se deleguje na jejího rodiče */
    padding-left: var(--main-padding);
    padding-right: var(--main-padding); /*aby se to zalamovalo dřív a plameňák nezasahoval do textu, tak tam dát padding-right 9.5rem??? */
    margin-left: auto;
    margin-right: auto;

    max-width: calc(69.5rem + 2 * 3rem);
}

.introduction__paragraph{
    padding-bottom: 1rem;
}

.section {
    margin-bottom: 4rem;
}

@media (min-width: 40rem) {
    .section {
        margin-bottom: 6rem;
    }
}

/*
*
* PROJECT
*
*/

.project {
    display: flex;
    flex-direction: column;

    max-width: 36rem;

    margin-top: 1.5rem; /* $$$ */
    margin-bottom: 2.125rem;
}

@media (min-width: 60rem) {
    .project {
        max-width: initial;

        flex-direction: row;
        column-gap: 3rem;

        margin-top: 2rem; /* $$$ */ /* obecně ale zadávat spíše mg bottom, ať to je jednodušší */
        margin-bottom: 4rem;
    }
    .project:nth-child(odd) {
        flex-direction: row-reverse;
    }
}

.project__description {
    display: contents;
}

@media (min-width: 60rem) {
    .project__description {
        display: block;

        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: min-content;
    }
}

.project__description :last-child {
    margin-bottom: var(--main-margin-bottom);
}

.project__name {
    order: -2;
}

.project__image {
    order: -1;
    margin-bottom: 1.5rem;
}

.project__anchor:hover {
    color: white;

}

@media (min-width: 60rem) {
    .project__image {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: 40.5rem;

        margin-bottom: var(--main-margin-bottom);
    }
}

.project__header {
    margin-bottom: 1.5rem;
}

@media (min-width: 40rem) {
    .project__header {
        margin-bottom: 2rem;
    }
}

@media (min-width: 40rem) {
    .project__text {
        margin-bottom: 2.125rem;
    }
}

/*
*
* CONTACTS 
*
*/

.contacts {
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5.75rem;

    max-width: calc(69.5rem + 2 * var(--main-padding));
}

.contacts__content {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.contacts__text {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: min-content; /*nebo zde může být tvrdá hodnota, číslo, délka, centa */
}

.contacts__photo {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 12rem; /*mohly by tu být i px, ale obrázek se nebude zvětšovat při zvětšení písma - teď (při remech) se to zvětšuje  */
}