:root {
    --White: hsl(0, 0%, 100%);
    --Stone100: hsl(30, 54%, 90%);
    --Stone150: hsl(30, 18%, 87%);
    --Stone600: hsl(30, 10%, 34%);
    --Stone900: hsl(24, 5%, 18%);
    --Brown800: hsl(14, 45%, 36%);
    --Rose800: hsl(332, 51%, 32%);
    --Rose50: hsl(330, 100%, 98%);
    --Blue: hsl(228, 45%, 44%); 
    --ShadowColor: rgb(from var(--Rose50) r g b / 0.5);
}

* {
    box-sizing: border-box; 
    font-family: 'Outfit', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center; /* Vertikálne centrovanie */
    min-height: 100vh;
    width: 100%;
    margin-block-start: clamp(0rem, 16vw - 6rem, 7.7rem);
    margin-inline: 0;
    gap: 0.5rem;
}

img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;    /* Zabezpečí, že sa obrázok pri zmene pomeru nezdeformuje */
    border-radius: clamp(0rem, (100vw - 30rem) * 5, 0.75rem);
}

h2 {
    font-family: 'Young Serif', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--Brown800);
    margin: 0;
}

.recipe-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Vertikálne centrovanie */
    margin: 0 auto; /* Toto kartu vycentruje vodorovne */
    width: 100%;
    max-width: clamp(24rem, 100%, 46rem);
    background-color: var(--White);
    border-radius: clamp(0rem, (100vw - 30rem) * 5, 1.5rem);
    padding-block-end: 1.75rem;
}

.image {
    display: block;
    height: auto;
    margin: 0 auto;
    padding-block-start: clamp(0rem, 10vw - 4rem, 2.5rem);    
    padding-inline: clamp(0rem, 10vw - 4rem, 2.5rem);
}

.recipe-page {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-inline-start: clamp(2rem, 3vw, 2.5rem);
    padding-block-start: clamp(2.25rem, 5vw, 2.3rem);
    padding-inline-end: clamp(1.75rem, 5vw, 2.4rem);
    padding-block-end: 2.2rem;
}

.recipe-page h1 {
    margin: 0;
    font-family: 'Young Serif', sans-serif;
    font-weight: 400;
    font-size: clamp(2.25rem, 3vw, 2.5rem);
    color: var(--Stone900);
    line-height: 1;
}

.recipe-page p {
    margin: 0;
    padding-block-start: 1.45rem;
    line-height: 1.5;
    color: var(--Stone900);
    font-weight: 400;
}

.preparation-time {
    display: flex;
    flex-direction: column;    
    align-items: flex-start;
    width: 82.6%;
    background-color: var(--Rose50);
    box-shadow: 
        0.01rem -0.25rem var(--ShadowColor);
    border-radius: 0.5rem;
    margin-inline: clamp(2rem, 5vw, 2.5rem);   
    padding-block-start: clamp(1.15rem, 2vw, 1.4rem);
    padding-inline-start: clamp(1.5rem, 2vw, 1.75rem);
}

.preparation-time h2 {
    color: var(--Rose800);
    font-weight: 600;
    font-size: 1.25rem;
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

.preparation-time ul {
    margin: 0;
    padding-block-start: 0.85rem;
    list-style-position: outside; /* Odrážka je mimo textu (štandard) */
    padding-inline-start: 0.45rem;    /* Priestor, v ktorom "bývajú" odrážky */
    padding-inline-end: 2rem;
    padding-block-end: clamp(1.5rem, 5vw, 1.85rem);
}

.preparation-time li {
    margin: 0;
    padding-inline-start: 2rem;
    color: var(--Stone600);
    list-style: none;      /* Skryje pôvodnú bodku */
    position: relative;    /* Základňa pre novú bodku */    
    line-height: clamp(2.6rem, -1.5vw, 2.5rem);
}

.preparation-time li::before {
    content:"\2022"; /* Nova bodka */
    position: absolute;    /* Umožní hýbať bodkou nezávisle od textu */
    color: var(--Rose800);
    /* CENTROVANIE BODKY: */
    inset-inline-start: 0;               /* Bodka úplne vľavo v tom paddingu */
    inset-block-start: 50%;              /* Posunie bodku do stredu výšky */
    transform: translateY(-50%); /* Presne vycentruje stred bodky na stred riadkov */
    font-size: 1.25rem;     /* Veľkosť bodky */
    line-height: 1;
}

.preparation-time li:first-child {
    line-height: 1.455;
    display: list-item;
}

.preparation-time li:last-child {
    margin-block-end: 0; /* Odstránenie spodného marginu pri poslednej položke */
    line-height: 1.455;
}

.ingredients {   
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-block-start: clamp(1.5rem, -1.5vw + 2rem, 1.75rem);
    padding-inline-start: clamp(2rem, 3.5vw, 2.5rem);
    padding-inline-end: 2rem;
}

.ingredients ul {
    margin: 0;
    padding-block-start: 0.855rem;
    list-style-position: outside; /* Odrážka je mimo textu (štandard) */
    padding-inline-start: 0.45rem;    /* Priestor, v ktorom "bývajú" odrážky */
    padding-inline-end: 2rem;
    padding-block-end: clamp(1.5rem, 5vw, 1.85rem);
}

.ingredients li {
    margin: 0;
    padding-inline-start: 2.05rem; /* Priestor pre bodku vľavo */
    color: var(--Stone600);
    list-style: none;      /* Skryje pôvodnú bodku */
    position: relative;    /* Základňa pre novú bodku */    
    line-height: clamp(2.02rem, -1.5vw, 2.45rem);
}

.ingredients li::before {
    content:"\2022"; /* Nova bodka */
    position: absolute;    /* Umožní hýbať bodkou nezávisle od textu */
    color: var(--Brown800);
    /* CENTROVANIE BODKY: */
    inset-inline-start: 0;               /* Bodka úplne vľavo v tom paddingu */
    inset-block-start: 50%;              /* Posunie bodku do stredu výšky */
    transform: translateY(-50%); /* Presne vycentruje stred bodky na stred riadkov */
    font-size: 1.25rem;     /* Veľkosť bodky */
    line-height: 1;
}

.ingredients li:last-child {
    margin-block-start: 0.18rem;
    margin-block-end: 0; /* Odstránenie spodného marginu pri poslednej položke */
    line-height: 1.5;
}

.separator {
    height: 0.0625rem;
    background-color: var(--Stone150);
    width: clamp(calc(100% - 5rem), -2vw + 100%, calc(100% - 4rem)); /* Zabezpečí, že box nepretečie kvôli marginu */ 
    margin-block-start: clamp(0.15rem, -1vw + 0.8rem, 0.5rem); 
    margin-inline-start: clamp(2rem, 1.5vw, 2.5rem);
}

.instructions {   
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-block-start: clamp(1.7rem, -1.5vw + 2rem, 1.75rem);
    padding-inline-start: clamp(2rem, 3.5vw, 2.5rem);
    padding-inline-end: clamp(2rem, 3.5vw, 2.5rem);
}

.instructions ol {
    margin: 0;
    padding-block-start: 1.125rem;
    padding-inline-start: 0.5rem;
    list-style-position: outside; /* Odrážka je mimo textu (štandard) */
    list-style-type: none; /* Vypne čísla s pätkami */
    counter-reset: instructions-counter; /* Vytvorí počítadlo */
    padding-block-end: clamp(1.4rem, 3.5vw, 1.755rem);    
}

.instructions li {
    margin: 0;
    counter-increment: instructions-counter; /* Každý riadok zvýši číslo o 1 */
    position: relative;    /* Základňa pre nove cislo */
    padding-inline-start: 1.95rem;  /* Priestor pre cislo vľavo */
    color: var(--Stone600);
    line-height: 1.505;
    margin-block-end: 0.5rem;
}

/* 3. Vytvorenie vlastného čísla pomocou ::before */
.instructions li::before {
    content: counter(instructions-counter) "."; /* Tu sa zobrazí 1., 2., atď. */
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.3rem; 
    font-size: 1rem;     /* Veľkosť cisla */
    font-family: 'Outfit', sans-serif; /* Vynúti čistý font */
    font-weight: 700;
    color: var(--Brown800);
    line-height: 1;
}

.instructions li:first-child {
    line-height: 1.5;
    margin-block-end: 0.45rem;
}

.instructions li:last-child {
    margin-block-end: 0;
}

.separator-second {
    display: block;      /* Zabezpečí, že sa prvok vykreslí */
    height: 0.0625rem;
    background-color: var(--Stone150);
    border: none;
    
    /* ZÁKLAD PRE MOBIL */
    width: 83%;
    margin-inline-start: 2rem;
    margin-block-start: 0.5rem;
    margin-block-end: 1.5rem;
}

.nutrition {   
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-block-start: clamp(0.15rem, -1.5vw, 0.2rem);
    padding-inline-start: clamp(2rem, 3vw, 2.5rem);
    padding-inline-end: clamp(2rem, 3vw, 2.5rem);
}

.nutrition h2 {
    padding-block-end: 0.15rem;
}

.nutrition p {
    line-height: 1.5;
    margin: 0;
    margin-block-start: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-block-start: 0.9rem;
}

tr {
    border-block-end: 0.0625rem solid var(--Stone100);
    line-height: 1.65;
}

td {
    padding-block-start: 0.6rem;
    padding-block-end: 0.7rem;    
}

tr:first-child {
    line-height: 1.5;      
}


tr:last-child {
    border-block-end: none;
}

td:first-child {
    padding-inline-start: 2rem; 
    width: 50%;     
    color: var(--Stone600);
    font-weight: 400;
}

td:last-child {
    color: var(--Brown800);
    font-weight: 700;  
    padding-inline-start: 0.5rem;      
}

.attribution { 
    font-size: 0.6875rem; 
    text-align: center; 
}

.attribution-link { 
    color: var(--Blue); 
}

/* Desktop Styles (Larger screens (min-width: 768px) (tablety a desktopy)) */
@media (min-width: 48rem)  /* 48rem = 768px*/ {
    body {
        background-color: var(--Stone100);
    }

    .preparation-time {
        width: 89.15%;
    }

    .separator-second {
        width: 89.15%;
        margin-inline-start: 2.5rem;
        margin-block-start: 0.2rem;
    }    
}