/* Zutaten kártya/doboz */
.ingredients-card{
    border:1px solid #0001;
    border-radius:16px;
    padding:1rem;
    margin:1rem 0 2rem;
    background:var(--bh-white);
    box-shadow:0 8px 24px #0000000d;
}

/* Fejléc: cím + adag állító */
.ingredients-card__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.ingredients-card__title{
    margin:0;
    font-family:Helvetica, Arial, sans-serif;
    font-weight:800;
    letter-spacing:-0.02em;
    text-transform:uppercase;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

/* Adag-állító blokk */
.servings-control{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-family:'Jost','Oswald',sans-serif;
}

.servings-control__label{
    font-size:1rem;
    white-space:nowrap;
}

.servings-control__value{
    min-width:2ch;
    text-align:center;
    font-variant-numeric: tabular-nums;
    font-weight:600;
}

.servings-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid #0002;
    background:#fff;
    cursor:pointer;
    font-size:1.1rem;
    line-height:1;
    transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.servings-btn:hover{ background:#00000008; border-color:#0003; }
.servings-btn:active{ transform:scale(0.96); }

/* Lista (egysoros, levegős) */
.ingredients-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns: 1fr;
    gap:.4rem .75rem;
    font-family:'Jost','Oswald',sans-serif;
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    line-height:1.5;
}

/* Sor struktúra: mennyiség + alapanyag + megjegyzés */
.ingredient-row{
    display:flex;
    align-items:baseline;
    gap:.5rem;
}

.ingredient-amt{
    min-width:7.5ch;
    white-space:nowrap;
    font-variant-numeric: tabular-nums;
}

.ingredient-name{
    flex:1;
}

.ingredient-note{
    color:#0008;
    font-style:italic;
}

/* Kis képernyőn a fejléc tördelhető */
@media (max-width: 600px){
    .ingredients-card__header{
        flex-direction:column;
        align-items:flex-start;
        gap:.75rem;
    }
}

/* -------------------------------
   Bauhaus lépéslista – kör badge-ek
   ------------------------------- */
.bh-steps{
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.bh-steps li{
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 1rem;
}
.bh-steps li::before{
    counter-increment: step;
    content: counter(step);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bh-black);
    color: var(--bh-white);
    display: grid; place-items: center;
    font-family: 'Oswald','Jost',sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

/* TIP doboz – teljes szélesség a 2. oszlopban, badge sosem takarja a szöveget */
.bh-steps .step-note{
    /* állítható méretek – a padding mindig követi a badge-et */
    --tip-left: 1rem;       /* jelvény bal eltolása a doboz szélétől */
    --tip-min-width: 56px;  /* jelvény minimális szélessége (felirat miatt) */
    --tip-pad-x: .9rem;     /* NAGYOBB belső vízszintes padding a badge-ben */
    --tip-pad-y: .25rem;    /* függőleges belső padding a badge-ben */
    --tip-gap: .6rem;       /* távolság a jelvény és a szöveg között */

    grid-column: 2 / -1;
    position: relative;
    margin-top: .6rem;
    padding: .75rem 1rem .75rem
    calc(var(--tip-left) + var(--tip-min-width) + (2 * var(--tip-pad-x)) + var(--tip-gap));
    border: 1px solid #0001;
    border-radius: 12px;
    background: #fff;
    font-size: .95em;       /* kicsit kisebb */
    font-style: italic;     /* dőlt szöveg */
    line-height: 1.6;
    text-align: left;
    word-break: normal;
    overflow-wrap: anywhere;
}
.bh-steps .step-note::before{
    content: "tipp";
    position: absolute;
    left: var(--tip-left);
    top: .75rem;
    display: inline-grid;
    place-items: center;
    min-height: 28px;
    min-width: var(--tip-min-width);
    padding: var(--tip-pad-y) var(--tip-pad-x);
    border-radius: 999px;
    background: var(--bh-black);
    color: var(--bh-white);
    font-family: 'Oswald','Jost',sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}

/* Mobil finomítás */
@media (max-width: 600px){
    .bh-steps li{ grid-template-columns: 36px 1fr; }
    .bh-steps li::before{ width: 36px; height: 36px; }

    .bh-steps .step-note{
        --tip-left: .75rem;
        --tip-min-width: 48px;
        --tip-pad-x: .75rem;
        --tip-pad-y: .2rem;
        --tip-gap: .5rem;
    }
}

/* Alternatíva: kontúros (outline) badge
.bh-steps--outline li::before{
  background: transparent;
  color: var(--bh-black);
  border: 2px solid var(--bh-black);
}
*/