/*
 * Login page (/login) — standalone page styles (not a block; this is a
 * one-off page template, see page-login.php). Card/button structure and
 * spacing intentionally mirror
 * template-parts/blocks/rebrand/connect-grid/connect-grid.php exactly
 * (p-8 = 32px, gap-6 = 24px, pt-16 = 64px), since these cards are the same
 * visual system as the /about page. Loaded only on /login — see
 * maxio_login_refresh_styles() in functions.php.
 */

.login-refresh {
    background: #F8F7F7;
    padding: 56px 24px 80px;
}
.login-refresh a:focus-visible,
.login-refresh button:focus-visible {
    outline: 2px solid #0042FF;
    outline-offset: 2px;
}

.login-refresh__sub {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4;
    color: #62605F;
    margin-top: 24px; /* matches connect-grid's h2 -> body gap (mb-6) */
    max-width: 60ch;
}
.login-refresh__sub a {
    color: #0042FF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Cards ---------- */
.login-refresh__cards {
    margin-top: 56px; /* connect-grid's mb-14 */
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .login-refresh__cards {
        margin-top: 64px; /* connect-grid's md:mb-16 */
    }
}
@media (min-width: 900px) {
    .login-refresh__cards {
        grid-template-columns: 1fr 1fr 1.25fr;
        grid-template-rows: auto 1fr auto;
        column-gap: 24px;
        row-gap: 0;
    }
}
.login-refresh__card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (min-width: 900px) {
    .login-refresh__card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
    }
}
.login-refresh__card-head {
    align-self: start;
    padding: 32px 32px 0;
}
/* Title uses .text-compact-02 + font-medium (applied in markup) — same
   classes connect-grid.php's card heading uses. */
.login-refresh__card .login-refresh__card-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #8C898A;
    margin-top: 6px;
}
/* Description uses .text-body-l (applied in markup) — same class
   connect-grid.php's card description uses. This rule only adds layout. */
.login-refresh__card-desc {
    padding: 0 32px;
    margin: 32px 0;
}
.login-refresh__card-foot {
    background-image: url("../rebrand/connect-grid/pattern-ascii.svg");
    background-size: cover;
    background-position: center;
    padding: 64px 32px 32px;
    display: flex;
}
/* Default white only when no custom bg-* utility class is present on this
   element — otherwise this same-specificity rule would win the cascade tie
   against the bg-* class purely by loading later, regardless of which
   color was actually chosen. */
.login-refresh__card-foot:not([class*="bg-"]) {
    background-color: #fff;
}
.login-refresh__card-foot .r-maxio-button,
.login-refresh__card-foot .rebrand-button {
    align-self: flex-start;
}

/* ---------- Secondary links row ---------- */
.login-refresh__after {
    margin-top: 48px;
    border-top: 1px solid #D0C8C5;
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    align-items: center;
    font-size: 16px;
    font-weight: 300;
    color: #62605F;
}
.login-refresh__after a {
    color: #0042FF;
    text-decoration: underline;
    text-underline-offset: 2px;
}