/* ============================================================
   KORTIT (INFO + AINESOSAT)
   ============================================================ */
.recipe-info-card,
.ingredients-card {
    margin: 1.5rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-family: system-ui, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ============================================================
   COLLAPSIBLE HEADER
   ============================================================ */
.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0.6rem 0;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
}

.collapsible-header .icon {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

.icon-svg,
.chevron-svg {
    width: 22px;
    height: 22px;
}

.collapsible-header .title {
    flex-grow: 1;
    text-align: left;
}

/* Piilotetaan chevron desktopilla */
@media (min-width: 768px) {
    .collapsible-header .chevron {
        display: none;
    }
}

/* ============================================================
   COLLAPSIBLE CONTENT
   ============================================================ */
.collapsible-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.collapsible-content.open {
    padding-top: 0.5rem;
}

@media (min-width: 768px) {
    .collapsible-content.desktop-open {
        max-height: none !important;
        padding-top: 0.5rem;
    }
}

/* ============================================================
   RAVINTOARVOT
   ============================================================ */
.nutrition-row {
    margin-bottom: 0.4rem;
    line-height: 1.4;
    font-size: 0.95rem;
}

/* ============================================================
   MONTIGNAC
   ============================================================ */
.montignac-block {
    margin-top: 1rem;
}

.montignac-badge {
    display: inline-block;
    background: #444;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.montignac-explainer {
    font-size: 0.9rem;
    color: #555;
}

.montignac-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    margin: 6px 0;
    color: #fff;
}

/* Ei sovellu */
.montignac-badge:not([data-phase]) {
    background: #b71c1c; /* tumma punainen */
}

/* Vaihe 1 */
.montignac-badge[data-phase="1"] {
    background: #2e7d32; /* vihreä */
}

/* Vaihe 2 */
.montignac-badge[data-phase="2"] {
    background: #1565c0; /* sininen */
}

/* Tuntematon */
.montignac-badge[data-phase="x"] {
    background: #616161; /* harmaa */
}



/* ============================================================
   AINESOSAT
   ============================================================ */
.ingredients-card ul {
    margin: 0;
    padding-left: 1.2rem;
}

.ingredients-card li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* ============================================================
   LÄHDE
   ============================================================ */
.article-source {
    margin-top: 1.5rem;
    font-style: italic;
    color: #555;
}

/* ============================================================
   GI-LAATIKKO
   ============================================================ */
.gi-box {
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 1rem 1.2rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    max-width: 360px;
    font-family: system-ui, sans-serif;
}

.gi-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    font-size: 1.05rem;
}

.gi-label {
    font-weight: 600;
    color: #444;
}

.gi-value {
    font-weight: 700;
    color: #222;
}

.gi-phase {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    color: white;
}

.phase-vr {
    background: #2ecc71;
}

.phase-h {
    background: #f1c40f;
    color: #000;
}

.phase-kielletty {
    background: #e74c3c;
}