/* A tool on a guide, a how-to post or a comparison page (inc/embed-tools.php).
   The tool box itself is styled by tools.css / army-core.css; this sheet only
   spaces the block and styles the one line above it. Colours are theme tokens,
   so light and dark need nothing extra. */

.embed-tool {
    scroll-margin-top: 5rem;
}
.embed-tool--top {
    margin-bottom: 3rem;
}
.embed-tool--after-intro,
.embed-tool--after-steps,
.embed-tool--bottom {
    margin-block: 2.5rem;
}
.embed-tool__lead {
    margin: 0 0 .75rem;
    font-size: 1.0625rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--color-text-primary, inherit);
}

/* Alternatives and compare pages: a band right under the hero. */
.embed-tool-band {
    padding: 1.5rem 1rem 0;
}
.embed-tool-band__inner {
    max-width: 56rem;
    margin-inline: auto;
}

/* The YouTube form keeps its own card look; only the stage padding of the
   tool page (a full-width section) is dropped when it sits in text. */
.syt-input-stage--embedded {
    padding: 0;
    background: none;
}
.syt-input-stage--embedded .input-row {
    margin: 0;
    padding: 0;
    max-width: none;
}

@media (max-width: 640px) {
    .embed-tool--top { margin-bottom: 2rem; }
    .embed-tool--after-intro,
    .embed-tool--after-steps,
    .embed-tool--bottom { margin-block: 2rem; }
    .embed-tool__lead { font-size: 1rem; }
}

/* The older tools and the YouTube form draw their own framed box; the army
   wrapper must not add a second frame around it (same rule army-core.css has
   for the audio-to-text widget). */
.army-tool:has(> .tool-box),
.army-tool:has(> .syt-input-stage) {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}
.embed-tool-band .embed-tool--top { margin-bottom: 0; }