/* Training page fixes (aesthetic review findings 31 and 32).
   Loaded after css/style.css by pages/training.html only (the page has no inline style blocks). */

/* Finding 32 (a): the markup is <ul class="service-features">, but style.css 1063 only styles
   .service-features ul (a nested list), so the real ul kept its disc and the li::before tick drew as well,
   and style.css 1097 centred the text. Left-aligned items with a fixed 1.25rem tick box. */
ul.service-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.services-section ul.service-features li {
    list-style: none;
    text-align: left;
    padding: 0.5rem 0 0.5rem 1.75rem;
}

.services-section ul.service-features li::before {
    content: '\2713';
    left: 0;
    width: 1.25rem;
    text-align: center;
}

/* Finding 32 (b): .package-features is defined three times (style.css 1363, 2570 and 6480). The last one turns
   the tick into a bullet and makes the li a flex row, but position: absolute; left: 0 from the first two still
   applies, so the orange dot sat on top of the first letter. One scoped definition: a tick in a fixed box. */
.packages-section .package-features li {
    display: block;
    position: relative;
    padding: 0.75rem 0 0.75rem 2rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.packages-section .package-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 1.25rem;
    margin: 0;
    text-align: center;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.4;
}

/* Finding 31: Specialised Workflow cards and the Software-Specific cards share one card component. The software
   cards carry the existing .workflow-card class (style.css 1403 to 1419) instead of a second set of rules.
   Learn More buttons sit at the card bottom with space above them. */
.workflows-section .workflow-card,
.software-section .workflow-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
}

.workflows-section .workflow-card p,
.software-section .workflow-card p {
    flex-grow: 1;
    margin-bottom: 1.25rem;
}

.workflows-section .workflow-card .btn-secondary,
.software-section .workflow-card .btn-secondary {
    margin-top: auto;
    align-self: flex-start;
}

/* Seven workflow cards in an auto-fit grid left Footwear alone on the last row. A wrapping flex row with a fixed
   card basis keeps the last row centred: 1 per row below 600px, 2 from 600px, 3 from 768px, 4 from 1100px. */
.workflows-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
}

.workflows-grid .workflow-card {
    flex: 0 0 100%;
}

@media (min-width: 600px) {
    .workflows-grid .workflow-card {
        flex-basis: calc((100% - var(--grid-gap)) / 2);
    }
}

@media (min-width: 768px) {
    .workflows-grid .workflow-card {
        flex-basis: calc((100% - 2 * var(--grid-gap)) / 3);
    }
}

@media (min-width: 1100px) {
    .workflows-grid .workflow-card {
        flex-basis: calc((100% - 3 * var(--grid-gap)) / 4);
    }
}

/* Three narrow columns (768 to 1099px) left no room for Transportation at 1.5rem, and the global word-break:
   break-word under 769px (style.css 7302 and 7340) tore it mid-word. Slightly smaller titles, whole words. */
.workflows-grid .workflow-card h3 {
    word-break: normal;
    overflow-wrap: normal;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    .workflows-grid .workflow-card h3 {
        font-size: 1.25rem;
    }
}

/* .software-section, .software-grid and .software-card had no CSS at all: a left-aligned plain block with the
   buttons touching the next heading. Centred heading, section padding and a 2 by 2 grid (one column on phones). */
.software-section {
    padding: 4rem 0;
    background-color: var(--bg-secondary);
}

.software-section h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.software-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    max-width: 880px;
    margin: 0 auto;
}

@media (max-width: 599.98px) {
    .software-grid {
        grid-template-columns: 1fr;
    }
}

/* Finding 32 (c): the service card titles wrap to one or two lines, so the price pills sat at different
   heights. Reserve two lines for the title from 1100px, where the four cards sit in one row. */
@media (min-width: 1100px) {
    .services-grid .service-card h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(2 * 1.3em);
        line-height: 1.3;
    }
}