/* Food calorie page overrides. Core components come from site, comparison, and calculator styles. */

.food-calorie-hero-media {
    position: relative;
    height: 392px;
    min-height: 0;
    overflow: hidden;
}

.food-calorie-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    object-fit: cover;
}

.food-calorie-hero-tags {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.food-calorie-hero-tags .comparison-pill {
    position: absolute;
    width: auto;
    border-color: color-mix(in srgb, white 76%, var(--border));
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    box-shadow: 0 12px 28px rgba(18, 24, 40, 0.16);
    backdrop-filter: blur(12px);
    white-space: nowrap;
}

.food-calorie-hero-tags .comparison-pill:nth-child(1) { top: 9%; left: 7%; transform: rotate(-3deg); }
.food-calorie-hero-tags .comparison-pill:nth-child(2) { top: 19%; right: 6%; transform: rotate(2deg); }
.food-calorie-hero-tags .comparison-pill:nth-child(3) { top: 46%; left: 5%; transform: rotate(1deg); }
.food-calorie-hero-tags .comparison-pill:nth-child(4) { right: 7%; bottom: 19%; transform: rotate(-2deg); }
.food-calorie-hero-tags .comparison-pill:nth-child(5) { bottom: 8%; left: 27%; transform: rotate(3deg); }

.food-calorie-serving-section {
    width: min(980px, calc(100% - 32px));
}

.food-calorie-serving-section .section-heading {
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.food-calorie-serving-section .section-heading h2 {
    width: 100%;
    white-space: nowrap;
}

.food-calorie-serving-section .section-heading p {
    max-width: 68ch;
    margin-right: auto;
    margin-left: auto;
}

.food-calorie-table-stage {
    width: min(100%, 760px);
    margin-inline: auto;
    padding: 0;
    border-color: color-mix(in srgb, var(--accent-strong) 28%, var(--border));
}

.food-calorie-table {
    min-width: 620px;
    table-layout: auto;
}

.food-calorie-table .food-calorie-serving-column {
    width: auto;
}

.food-calorie-table .food-calorie-short-column {
    width: 1%;
}

.food-calorie-table thead th,
.food-calorie-table thead th:first-child {
    padding: 18px;
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.food-calorie-table tbody th,
.food-calorie-table tbody td {
    vertical-align: middle;
}

.food-calorie-table tbody th[scope="row"] {
    font-weight: 500;
}

.food-calorie-table thead th:nth-child(n + 2),
.food-calorie-table tbody td {
    white-space: nowrap;
}

.food-calorie-table tbody tr.is-default {
    background: color-mix(in srgb, var(--accent-strong) 7%, transparent);
}

.food-portion-section.calorie-guidance {
    align-items: start;
}

.food-portion-calculator.calorie-calculator {
    position: static;
    top: auto;
    width: min(100%, 520px);
    justify-self: end;
}

.food-portion-input-row {
    display: flex;
    align-items: end;
    gap: 10px;
}

.food-portion-input-row .food-portion-field {
    flex: 1;
}

.food-portion-input-row .button {
    flex: 0 0 auto;
}

.food-portion-calculator .calculator-field-control {
    width: min(100%, 220px);
}

.food-portion-calculator .calculator-field input {
    width: 9ch;
}

.food-portion-result.calculator-result {
    padding-bottom: 0;
}

.food-portion-result .calculator-result-main {
    padding: 20px;
}

.food-portion-result .food-portion-macros div {
    padding: 8px 2px 6px;
    border-top: 1px solid var(--border);
}

.food-portion-result .food-portion-macros div:first-child {
    border-top: 1px solid var(--border);
}

.food-portion-result .food-portion-macros {
    gap: 6px;
}

.food-portion-note,
.food-portion-error {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.food-portion-note {
    font-size: 0.78rem;
    font-style: italic;
    text-align: center;
}

.food-portion-error {
    color: var(--danger);
    font-weight: 700;
}

.food-kibora-cta {
    margin-top: var(--space-section-tight);
}

.food-calculator-cta.closing-cta {
    background: var(--surface-strong);
    color: var(--text);
    box-shadow: none;
}

.food-calculator-cta.closing-cta p {
    color: var(--muted);
}

.food-calculator-cta .section-label {
    margin-bottom: 12px;
}

.food-related-section .comparison-related-logo img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.food-calories-index-section .comparison-related-logo {
    overflow: hidden;
}

.food-calories-index-section .comparison-related-logo img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.food-calories-index-section .comparison-related-copy p {
    color: var(--muted);
    font-weight: 700;
}

.food-related-section {
    margin-top: -50px;
}

.food-related-section .section-heading h2 {
    max-width: 100%;
    font-size: clamp(2rem, 4vw, 3.1rem);
}

.food-related-section .comparison-related-copy p {
    color: var(--muted);
    font-weight: 700;
}

.food-related-section .text-link {
    color: var(--muted);
    font-weight: 400;
}

.food-source-section .calorie-paper-abstract {
    margin-bottom: 12px;
}

.food-source-section .calorie-paper-section {
    padding-top: 0;
}

html[data-theme="dark"] .food-calorie-hero-media img {
    filter: brightness(0.84) saturate(0.9);
}

@media (max-width: 680px) {
    .food-calorie-serving-section .section-heading h2 {
        white-space: normal;
    }

    .food-calorie-hero-media {
        height: 300px;
        min-height: 0;
    }

    .food-related-section .section-heading h2 {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .food-calorie-hero-tags .comparison-pill {
        padding: 8px 10px;
        font-size: 0.72rem;
    }

    .food-portion-input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .food-portion-input-row .button {
        width: 100%;
    }
}