.tools-hub-archive,
.tools-hub-single {
    max-width: var(--global-content-width);
    padding-inline: var(--global-content-edge-padding);
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-left: auto;
    margin-right: auto;
}

.tools-hub-archive__header,
.tools-hub-single__header {
    margin-bottom: 2rem;
}

.tools-hub-archive__intro,
.tools-hub-single__intro {
    color: var(--global-palette4);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 70ch;
}

.tools-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tools-hub-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--global-palette7, #e5e7eb);
    border-radius: 0.75rem;
    background: var(--global-palette9, #fff);
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tools-hub-card:hover {
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.tools-hub-card__icon {
    margin: 1.25rem 1.25rem 0;
}

.tools-hub-card__icon img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 0.75rem;
}

.tools-hub-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    padding: 1.25rem;
}

.tools-hub-card__title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--global-palette3);
}

.tools-hub-card__excerpt {
    margin: 0;
    color: var(--global-palette5);
    font-size: 0.95rem;
    line-height: 1.55;
}

.tools-hub-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 700;
    color: var(--global-palette2);
}

/* Leadership-authored content (FAQs, notes, etc.) shown under the tool. */
.tools-hub-single__content {
    max-width: 75ch;
    margin: 3rem auto 0;
}

.tools-hub-single__content > *:first-child {
    margin-top: 0;
}

.tools-hub-single__content h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.75rem;
    line-height: 1.25;
    color: var(--global-palette3);
}

.tools-hub-single__content h3 {
    margin: 2rem 0 0.5rem;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--global-palette3);
}

.tools-hub-single__content p,
.tools-hub-single__content li {
    color: var(--global-palette4);
    font-size: 1.05rem;
    line-height: 1.65;
}

.tools-hub-single__content details {
    border: 1px solid var(--global-palette7, #e5e7eb);
    border-radius: 0.75rem;
    padding: 0 1.25rem;
    margin: 0.75rem 0;
    background: var(--global-palette9, #fff);
}

.tools-hub-single__content details[open] {
    padding-bottom: 0.5rem;
}

.tools-hub-single__content summary {
    cursor: pointer;
    padding: 1.1rem 0;
    font-weight: 700;
    color: var(--global-palette3);
    list-style: none;
}

.tools-hub-single__content summary::-webkit-details-marker {
    display: none;
}

.tools-hub-single__content summary::after {
    content: "+";
    float: right;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--global-palette2);
}

.tools-hub-single__content details[open] summary::after {
    content: "\2013";
}

.tools-hub-single__back {
    margin-top: 2.5rem;
}

/* The embedded tools are self-contained; the wrapper just keeps them from
   inheriting unexpected flow styles when dropped inside article content. */
.nowl-tool-embed {
    clear: both;
}

/* Full width: break out of the article column to the viewport edges,
   and lift the tool's own internal max-width cap so it can fill the space.
   !important because the blog template's generated Kadence CSS constrains all
   post-content children (max-width 650px) with unpredictable specificity. */
.nowl-tool-embed--full {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Custom: break out of the article column up to the chosen max width, centered. */
.nowl-tool-embed--custom {
    width: min(var(--nowl-tool-max-width, 1120px), 100vw) !important;
    max-width: none !important;
    margin-left: calc(50% - min(var(--nowl-tool-max-width, 1120px), 100vw) / 2) !important;
    margin-right: calc(50% - min(var(--nowl-tool-max-width, 1120px), 100vw) / 2) !important;
}

.nowl-tool-embed--full > :not(style):not(script),
.nowl-tool-embed--custom > :not(style):not(script) {
    max-width: none;
}

/* Share / open-tool actions bar */
.nowl-tool-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tools-hub-single__header .nowl-tool-actions {
    margin-top: 1.25rem;
}

/* The pasted tool controls its own internal spacing, but its outer margin
   collapses into ours and bloats the gap before the actions bar. Neutralize
   the wrapper's direct children so the spacing around the actions bar is
   predictable and owned here. */
.nowl-tool-embed > :not(.nowl-tool-actions):not(style):not(script) {
    margin-top: 0;
    margin-bottom: 0;
}

.nowl-tool-embed .nowl-tool-actions {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* Keep the actions clear of the viewport edge when the tool breaks out. */
.nowl-tool-embed--full > .nowl-tool-actions,
.nowl-tool-embed--custom > .nowl-tool-actions {
    padding-inline: var(--global-content-edge-padding, 1rem);
}

.nowl-tool-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--global-palette7, #e5e7eb);
    border-radius: 0.5rem;
    background: var(--global-palette9, #fff);
    color: var(--global-palette3);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.nowl-tool-action:hover {
    border-color: var(--global-palette2);
    color: var(--global-palette2);
}

.nowl-tool-action i {
    font-size: 1.15rem;
}

.nowl-tool-action--copied {
    border-color: var(--global-palette2);
    color: var(--global-palette2);
}