/* Chart page: hide theme hero on small screens; extra top space on desktop result. */
@media (max-width: 1000px) {
    .page-template-page-chart-php .page-hero-section,
    .page-template-page-chart .page-hero-section {
        display: none !important;
    }
    /* Scroll under the fixed 86px bar, not with document-flow padding
       (padding would scroll away and the chart would tuck under the menu). */
    html:has(.page-template-page-chart-php),
    .page-template-page-chart-php {
        overflow: hidden;
        height: 100%;
        height: 100dvh;
        padding-top: 0 !important;
    }
    .hd-chart-page-main {
        position: fixed;
        top: 86px;
        top: calc(86px + env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 1.25rem;
    }
    .hd-chart-result,
    .hd-chart-result.mt-4 {
        margin-top: 0 !important;
        padding-top: 1.25rem;
    }
    .hd-chart-result-name {
        display: none !important;
    }
}

@media (min-width: 1001px) {
    .hd-chart-result,
    .hd-chart-result.mt-4 {
        margin-top: 1.5rem !important;
        padding-top: 50px;
    }
}

/* Result layout: match legacy Get_Your_Chart (image + property table). */
.hd-chart-result-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hd-chart-result-image img {
    max-width: 100%;
    height: auto;
}

.hd-chart-result-info .table th,
.hd-chart-result-info .table td {
    vertical-align: middle;
    padding: 0.75rem 0.9rem;
}

.hd-chart-result-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hd-chart-result-actions .btn {
    width: 100%;
}

/* <= 999px: image, table, then buttons stacked at the bottom */
@media (max-width: 999px) {
    .hd-chart-result-layout {
        flex-direction: column;
    }
    .hd-chart-result-actions {
        flex-direction: column;
    }
}

/* >= 1000px: image left, table right, two buttons in a row under the table */
@media (min-width: 1000px) {
    .hd-chart-result-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    .hd-chart-result-image {
        flex: 0 0 58.333%;
        max-width: 58.333%;
        padding-right: 1rem;
    }
    .hd-chart-result-info {
        flex: 1 1 41.667%;
        max-width: 41.667%;
    }
    .hd-chart-result-actions {
        flex-direction: row;
    }
    .hd-chart-result-actions .btn {
        flex: 1 1 0;
        width: auto;
    }
}