/* Ingredient guides (task 823.47): /ingredients and /ingredients/<slug>. Colors come from site.css (light and dark);
   the cups-to-grams tables reuse conversions.css's .conv-table. Classes start with "ig-". */
.ig-jump { margin: 0 0 16px; }
.ig-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ig-card { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.ig-card:hover { border-color: var(--accent); color: var(--ink); }
.ig-card-title { font: 700 1.1rem/1.25 var(--serif); }

.ig-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; margin: 0 0 8px; }
@media (min-width: 760px) { .ig-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ig-cols .panel { min-width: 0; }
.ig-cols h2 { margin: 0 0 .4em; }
.ig-times { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: .93rem; }
.ig-times caption { text-align: left; padding: 0 0 4px; }
.ig-times th, .ig-times td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ig-times thead th { font-weight: 600; }
.ig-times tbody th { font-weight: 500; }
.ig-safety { margin: 6px 0 10px; padding-left: 1.1em; }
.ig-safety li { margin-bottom: 4px; }
.ig-swaps { margin: 0 0 8px; padding-left: 1.1em; max-width: 76ch; }
.ig-swaps li { margin-bottom: 6px; }
.ig-conv { display: flex; flex-wrap: wrap; gap: 16px; }
.ig-conv .table-wrap { position: relative; flex: 1 1 240px; max-width: 360px; }
.ig-conv-table { width: 100%; }
.ig-sub { font: 700 .78rem var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin: 18px 0 6px; }
.ig-more { columns: 2 260px; column-gap: 24px; margin: 0 0 10px; padding-left: 1.1em; }
.ig-more li { margin-bottom: 6px; break-inside: avoid; }
.ig-note { max-width: 76ch; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; margin: 18px 0 8px; }
.ig-sources { padding-left: 1.1em; max-width: 76ch; }
.ig-sources li { margin-bottom: 4px; overflow-wrap: anywhere; }