/* V15 final polish: mobile stability, product cards, object/variant UX, PDF-ready form styling */
:root { --ft-blue:#03345A; --ft-blue-2:#1269AA; --ft-yellow:#FFD045; --ft-border:#d7e3ef; }

html, body { max-width: 100%; overflow-x: clip; }
body { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

.content-wrapper { width: min(1180px, calc(100% - 40px)); }

/* Result hero: keep contrast clean */
.result-hero .eyebrow,
.form-intro .eyebrow,
.advice-cta .eyebrow { color: #fff !important; opacity: .96; letter-spacing: .12em; }
.result-hero p { color: rgba(255,255,255,.94); }

/* Top calculation area: no cropped stepper, tighter rhythm */
.calculation-top-frame { padding: 18px 0 0; background:#fff; }
.calculation-top-frame .status-widget-wrapper,
.calculation-top-frame .status-widget,
.status-widget-wrapper,
.status-widget { overflow: visible !important; }
.calculation-top-inner { margin-top: 6px; }
.calculation-top-inner .backlink,
.calculation-top-inner .back-link,
.calculation-top-inner a { overflow-wrap: anywhere; }
.form-intro { margin-top: 14px; padding: clamp(32px, 4vw, 56px) 24px; text-align:center; }
.form-intro h1 { max-width: 980px; margin-left:auto; margin-right:auto; }
.form-intro p { max-width: 760px; margin-left:auto; margin-right:auto; }

/* Make variant cards feel more like a planning assistant */
.method-card, .internal-link-grid a, .variant-result-card, .object-result-box, .variant-result-box,
.object-data-box, .variant-panel, .water-calculation-block, .meat-calculation-block, .shared-factor-box {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.method-card:hover, .internal-link-grid a:hover, .variant-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,35,55,.10);
}

/* Result products: stable desktop and mobile */
.product-results { width: 100%; }
.result-header { gap: 16px; align-items: flex-end; }
.result-products { overflow: visible; }
.product-link-container {
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
    text-decoration: none !important;
}
.product-link-container .product-title,
.product-link-container .product-meta { overflow-wrap: anywhere; hyphens: auto; }
.result-image { object-fit: contain; width: 100%; max-height: 280px; }

/* Better form rhythm */
.multi-step-form-container input,
.multi-step-form-container select,
.multi-step-form-container textarea {
    min-height: 46px;
    font-size: 1rem;
}
.multi-step-form-container textarea { line-height: 1.45; }
.form-guide a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Object and variant tables/cards */
.object-data-grid.input-elements-container,
.input-elements-container.object-data-grid { display:grid; gap: 16px; }
.variant-panel-head .eyebrow { color: var(--ft-blue-2); }
.compact-help { border-left: 4px solid var(--ft-yellow); background:#fffdf2; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }

/* Footer readability */
.site-footer a { text-underline-offset: 4px; }
.site-footer .footer-inner { gap: 28px; }

@media (max-width: 900px) {
    .content-wrapper { width: min(100% - 28px, 760px); }
    .result-header { flex-direction: column; align-items: stretch; }
    .result-header .link-button { width: 100%; text-align: center; }
    .result-products, .result-products.flex-row { flex-direction: column !important; align-items: stretch; }
    .product-link-container, .product-link-container.w-30 { width: 100% !important; max-width: 100%; }
    .result-image { max-height: 360px; }
    .hero-actions, .seo-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .content-wrapper { width: calc(100% - 24px); }
    .calculation-top-frame { padding-top: 10px; }
    .calculation-top-inner { width: calc(100% - 24px); }
    .form-intro { border-radius: 0; margin-left: -12px; margin-right: -12px; padding: 32px 18px; }
    .form-intro h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; }
    .form-intro p { font-size: 1.05rem; line-height: 1.55; }

    .result-hero { padding: 28px 18px; display:flex; flex-direction:column; align-items:stretch; gap: 18px; }
    .result-hero h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.08; }
    .result-hero form, .result-hero button, .pdf-disabled-note { width: 100%; }
    .result-hero .btn { width: 100%; min-height: 54px; }

    .calculation-summary, .variant-result-box, .object-result-box, .result-wrapper { padding: 18px !important; }
    .calculation-line { overflow-wrap:anywhere; word-break: normal; }
    .variant-result-grid, .object-result-grid { grid-template-columns: 1fr !important; }

    .product-results .eyebrow { font-size: .86rem; }
    .product-results h2 { font-size: clamp(2rem, 8vw, 2.75rem); }
    .result-products { padding: 16px !important; border-radius: 22px; }
    .product-link-container { padding: 20px !important; border: 1px solid var(--ft-border); box-shadow: 0 10px 24px rgba(0,35,55,.06); }
    .product-label { left: 18px; top: 18px; }
    .product-title { font-size: 1.35rem; line-height: 1.18; }
    .product-meta { font-size: 1.05rem; line-height: 1.4; }
    .product-link-container .btn { min-height: 56px; font-size: 1.05rem; display:flex; align-items:center; justify-content:center; }

    .object-data-box, .variant-panel, .water-calculation-block, .meat-calculation-block, .shared-factor-box { padding: 16px; }
    .input-elements-container, .object-data-grid.input-elements-container { grid-template-columns: 1fr !important; }
    .multi-step-form-container input,
    .multi-step-form-container select,
    .multi-step-form-container textarea { width:100%; min-height: 52px; }

    .internal-link-grid { grid-template-columns: 1fr !important; }
    .site-footer { padding-bottom: 80px; }
    .site-footer .footer-inner { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
    .content-wrapper { width: calc(100% - 18px); }
    .form-intro { margin-left:-9px; margin-right:-9px; }
    .product-link-container { padding: 16px !important; }
    .result-image { max-height: 310px; }
}