/*
 * Custom styles for every page on Textile Index.
 * Add plain CSS below this comment, without <style> tags.
 * This stylesheet is linked after the site's existing styles.
 * Normal CSS specificity and !important rules still apply.
 * Use body[data-content-id="..."] to target the entire knowledge page,
 * including images, headings, and side panels outside the article text.
 * Every page also has body[data-page-path="..."] for targeting by URL path.
 *
 * Examples (inactive until copied below this comment):
 *
 * All article subheadings:
 * .prose h2 { color: #176b63; }
 *
 * Cotton page only:
 * body[data-content-id="CNT-000001"] h2 { color: #176b63; }
 *
 * Hemp page only:
 * body[data-content-id="CNT-000012"] h2 { color: #845b35; }
 *
 * Any page by its exact URL path (including the trailing slash):
 * body[data-page-path="/en/"] h2 { color: #176b63; }
 */
/* Home Page */
body[data-page-path="/en/"] .topic-discovery{
    margin-top: -80px;
}
body[data-page-path="/en/"] .hero-inner {
    padding-bottom: 130px;
}

/* Topics pages */
body[data-content-id="CNT-000001"] img.stage-illustration {
    width: 100%;
    object-fit: cover;
    height: auto;
}
body[data-content-id="CNT-000001"] figure.application-figure img {
    width: 100%;
    object-fit: cover;
    height: auto;
}
body[data-content-id="CNT-000001"] figure.application-figure {
    margin: 10px auto 20px;
}
body[data-content-id="CNT-000001"] figure.application-figure figcaption {
    font-size: 12px;
}
body[data-content-id="CNT-000001"] .flow-arrow{
    inset-block-start: 135px;
}

/* others */


/* Tablet */
@media (max-width: 1024px) {
body[data-content-id="CNT-000001"] .flow-arrow{
    display: none;
}
body[data-content-id="CNT-000001"] .state-flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
body[data-content-id="CNT-000001"] .state-flow li {
        grid-template-columns: 15px minmax(0, 1fr);
        gap: 0 0px;
    }
}


/* Mobile */
@media (max-width: 767px) {
body[data-content-id="CNT-000001"] .state-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}