/**
 * Top 10 Recruiters page components (dac-top10-*).
 *
 * The hero and container come from resources.css, which this sheet declares as a
 * dependency. Everything here is the page below the board: the rules band and the
 * closing call to action. The board itself is styled by the dac-leaderboard plugin.
 *
 * Structure lives in Bricks so Tyler can edit copy and order in the builder. Only
 * the styling lives here, keyed off the classes typed into each element.
 */

/* ── Board section ───────────────────────────────────────────────────── */

/*
 * The board sits on its own section between the hero and the closing CTA. It carries
 * dac-spotlight-section for the white ground and this class for the spacing, because the
 * shared 96px section rhythm stacked on top of the board's own inset and left a ~140px
 * dead band under the hero. The board reads as belonging to the hero, so it opens tight
 * and closes with normal section separation.
 */
.dac-top10-board {
    /*
     * Tinted, not white. The board is a white card now, and a white card on a white section is
     * just a floating border -- the shadow and the radius only read against a ground.
     */
    background: #EEF2F8;
    padding: clamp(40px, 5vw, 64px) 0 clamp(44px, 5vw, 60px);
}

/* ── Rules band ──────────────────────────────────────────────────────── */

.dac-top10-rules {
    background: var(--dac-bg);
    padding: 72px 0;
}

.dac-top10-rules__head {
    max-width: 620px;
    margin: 0 0 40px;
}

.dac-top10-rules__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--dac-dark);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.dac-top10-rules__intro {
    font-size: 1.0625rem;
    color: var(--dac-muted);
    line-height: 1.65;
    margin: 0;
}

.dac-top10-rules__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dac-top10-rule {
    background: var(--dac-white);
    border: 1px solid var(--dac-border);
    border-radius: var(--dac-radius-md);
    padding: 28px 24px;
}

.dac-top10-rule__eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--dac-blue);
    margin: 0 0 14px;
}

.dac-top10-rule__title {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--dac-dark);
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0 0 10px;
}

.dac-top10-rule__body {
    font-size: 0.9375rem;
    color: var(--dac-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Closing call to action ──────────────────────────────────────────── */

/*
 * Last section on the page. The 80px desktop / 56px mobile bottom padding is the
 * standing footer-clearance rule (known_hazards H003) -- never take it to 0.
 */
/* Same ground as the board section above it, so the two read as one page. */
.dac-top10-cta {
    background: #EEF2F8;
    padding: 60px 0 80px;
}

/*
 * Shares the board's 940px measure. The board is narrower than the 1200px container on
 * purpose, and a full-width panel underneath it made the two blocks read as misaligned
 * rather than as one column.
 */
.dac-top10-cta__panel {
    position: relative;
    overflow: hidden;
    /*
     * width:100% is load bearing. Bricks containers are flex with align-items:flex-start,
     * so a max-width alone lets the panel shrink to its content and the green dots land
     * on top of the copy.
     */
    width: 100%;
    margin-inline: auto;
    max-width: 940px;
    border-radius: var(--dac-radius-lg, 16px);

    /*
     * Bricks tags every brxe element with .bricks-lazy-hidden, which carries
     * `background-image: none !important` until its lazy observer clears it.
     * A gradient is a background-image, so it never survives on the element
     * itself. Background COLOR is untouched, so the navy base paints here and
     * the gradient rides on ::before, which the class does not reach.
     */
    background-color: var(--dac-navy);
    padding: 56px 48px;
}

.dac-top10-cta__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(112deg, var(--dac-navy) 0%, var(--dac-blue) 100%);
    pointer-events: none;
}

/*
 * The green-dots motif: flat solid circles radiating from the corner. Both dots
 * come from one pseudo-element -- the large circle is the box, the smaller one
 * is a spread-shrunk box-shadow -- because ::before is spent on the gradient.
 * Alpha is baked into the colors so the two dots can differ in weight.
 */
.dac-top10-cta__panel::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -46px;
    right: -34px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(39, 189, 104, 0.85);            /* --dac-green at 85% */
    box-shadow: -87px 107px 0 -43px rgba(39, 189, 104, 0.7);
    pointer-events: none;
}

.dac-top10-cta__content {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.dac-top10-cta__title {
    font-size: clamp(1.625rem, 3.4vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0 0 14px;
}

.dac-top10-cta__body {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.65;
    margin: 0 0 28px;
}

/* Colored pill always takes a white label. */
/* Two classes so this beats Bricks' own single-class .bricks-button base. */
.dac-top10-cta .dac-top10-cta__btn,
.dac-top10-cta .dac-top10-cta__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 32px;
    border-radius: var(--dac-radius-pill);
    background: var(--dac-green);
    color: #fff;
    font-family: var(--dac-font);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.dac-top10-cta .dac-top10-cta__btn:hover {
    background: var(--dac-green-hover);
    color: #fff;
}

.dac-top10-cta .dac-top10-cta__btn:active { transform: translateY(1px); }

.dac-top10-cta .dac-top10-cta__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .dac-top10-rules__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .dac-top10-board { padding: 40px 0 44px; }
    .dac-top10-rules { padding: 56px 0; }
    .dac-top10-rules__grid { grid-template-columns: 1fr; }
    .dac-top10-rules__head { margin-bottom: 28px; }

    .dac-top10-cta { padding: 56px 0 56px; }
    .dac-top10-cta__panel { padding: 40px 28px; }
    .dac-top10-cta__panel::after {
        width: 104px;
        height: 104px;
        top: -34px;
        right: -26px;
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .dac-top10-rule { padding: 22px 20px; }
    .dac-top10-cta .dac-top10-cta__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dac-top10-cta .dac-top10-cta__btn { transition: none; }
}