/* ============================================================
   WEB DESIGN BRISBANE — page CTAs
   ------------------------------------------------------------
   One reusable pill button with two variants:
     --on-dark   : white solid → inverts to outline-white on hover
     --on-light  : black solid → inverts to outline on hover
   Plus the per-location placement for the four section CTAs
   (built / for-who / industries / after-FAQ). Each places a
   "main" instance for desktop and an "alt" instance for the
   stacked breakpoints, toggled by media queries.
   ============================================================ */

.wdb-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    line-height: 1;
    border-radius: var(--radius);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-primary),
                color var(--duration-fast) var(--ease-primary),
                border-color var(--duration-fast) var(--ease-primary);
}
.wdb-pill--on-dark { background: var(--color-white); color: var(--color-black2); border-color: var(--color-white); }
.wdb-pill--on-dark:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.wdb-pill--on-light { background: var(--color-black2); color: var(--color-white); border-color: var(--color-black2); }
.wdb-pill--on-light:hover { background: transparent; color: var(--color-black2); border-color: var(--color-greyish); }


/* ── BUILT (dark): desktop in the left text column; tablet/mobile below the
   animated bar-icon, centred ── */
.wdb-built__cta--main,
.wdb-built__cta--alt { display: none; }
@media (min-width: 1024px) {
    .wdb-built__cta--main { display: inline-flex; align-self: flex-start; margin-top: var(--space-6); }
}
@media (max-width: 1023px) {
    .wdb-built__cta--alt { display: flex; width: fit-content; margin: var(--space-6) auto 0; }
}
@media (max-width: 767px) {
    .wdb-built__cta--alt { order: 3; }   /* below the icon (icon is order 2 here) */
}


/* ── FOR-WHO (light): desktop/tablet bottom-left of the title column;
   mobile after the body copy, centred ── */
.wdb-forwho__cta--main,
.wdb-forwho__cta--alt { display: none; }
@media (min-width: 768px) {
    .wdb-forwho__title-col { display: flex; flex-direction: column; justify-content: space-between; }
    .wdb-forwho__cta--main { display: inline-flex; align-self: flex-start; margin-top: var(--space-7); }
}
@media (max-width: 767px) {
    .wdb-forwho__cta--alt { display: flex; width: fit-content; margin: var(--space-7) auto 0; }
}


/* ── INDUSTRIES (dark): desktop in the sticky content column, pinned to the
   bottom (space-between) so it rides along in view; tablet bottom of the
   content column; mobile after the accordions, centred ── */
.wdb-industries__cta--main,
.wdb-industries__cta--alt { display: none; }
@media (min-width: 768px) {
    .wdb-industries__cta--main { display: inline-flex; align-self: flex-start; margin-top: var(--space-7); }
}
@media (min-width: 1024px) {
    /* content is already position:sticky (wdb-block2.css); make it a viewport-tall
       flex column so the heading/intro sit at the top and the CTA at the bottom,
       with the section padding remaining below it */
    .wdb-industries__content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(100vh - var(--pad-top-nav));
        box-sizing: border-box;
        padding-bottom: var(--space-8);
    }
    .wdb-industries__cta--main { margin-top: var(--space-7); }
}
@media (max-width: 767px) {
    .wdb-industries__cta--alt { display: flex; width: fit-content; margin: var(--space-8) auto 0; }
}


/* ── AFTER FAQ (light): always, centred ── */
.wdb-faq__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-9);
}