/* ----------------------------------------------------------------------
   login-split.css -- "Split + Announcements" login variant.
   Loaded AFTER login.css, so it reuses the form / notice / SSO styling and
   only adds the full-bleed two-column layout + the announcements panel.
   Rendered when core/pages/login/split is the active variant (fullPage).
   ---------------------------------------------------------------------- */

/* Full-bleed canvas (header.tpl suppresses the portal chrome for fullPage).
   The base `body { display:flex }` (apple-theme.css) would shrink a block-level
   child to its content width, so force the full-bleed body back to block.
   NOTE: class names deliberately avoid the `-split` / `-aside` suffixes —
   apple-layout.css hides `[class$="-aside"]` inside `[class$="-split"]` and
   collapses the grid when the website sub-nav is off. */
body.mt-login-fullpage { display: block; margin: 0; }
.mt-loginscreen {
    display: grid;
    grid-template-columns: 1fr 2fr;   /* aside 1/3 : form 2/3 */
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text-primary);
}

/* ---- Left: brand + welcome + announcements ---- */
.mt-ls-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 52px;
    background: var(--color-surface-secondary);
    border-right: 1px solid var(--color-border);
    min-width: 0;
}

.mt-ls-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text-primary);
}
.mt-ls-brand:hover { color: var(--color-text-primary); text-decoration: none; }
.mt-ls-brand img { height: 28px; width: auto; display: block; }
.mt-ls-brand-mark {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mt-ls-brand-mark svg { width: 17px; height: 17px; }
.mt-ls-brand-name {
    font-size: var(--text-h6);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.mt-ls-copy { margin: 28px 0 24px; max-width: 420px; }
.mt-ls-copy h2 {
    font-size: var(--text-h4);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    color: var(--color-text-primary);
}
.mt-ls-copy p {
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Gap between the welcome block and the announcements; the panel itself
   centers its content vertically (justify-content), so this controls how much
   empty space lands at the top/bottom on tall viewports. */
.mt-ls-news { margin-top: 140px; }
.mt-ls-news-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.mt-ls-news-head h3 {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin: 0;
}
.mt-ls-news-head a {
    font-size: var(--text-base);
    color: var(--color-accent);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.mt-ls-news-head a:hover { opacity: 0.8; text-decoration: none; }
.mt-ls-news-head a svg { width: 13px; height: 13px; }

.mt-ls-news-list { display: flex; flex-direction: column; gap: 12px; }
.mt-ls-news-item {
    display: flex; flex-direction: column; gap: 5px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.mt-ls-news-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    text-decoration: none;
}
.mt-ls-news-title {
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    letter-spacing: -0.012em;
    line-height: 1.35;
    color: var(--color-text-primary);
}
.mt-ls-news-item:hover .mt-ls-news-title { color: var(--color-accent); }
.mt-ls-news-excerpt {
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mt-ls-news-date {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
.mt-ls-news-empty {
    padding: 22px 18px; text-align: center;
    background: var(--color-surface);
    border: 0.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

/* ---- Right: sign-in form ---- */
.mt-ls-main {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 32px;
}
.mt-ls-card { width: 100%; max-width: 380px; }

/* Left-align the shared .page-header inside the split card (login.css centers it) */
.mt-ls-card .page-header { text-align: left; margin-bottom: 24px; }
.mt-ls-card .page-header h1 { font-size: var(--text-h4); }
.mt-ls-card .page-subtitle { margin: 0; max-width: none; }

/* The auth card chrome from login.css isn't used here -- the form sits
   directly in the pane -- so neutralize its wrapper if present. */
.mt-ls-card .auth-card-wrap { max-width: none; margin: 0; }
.mt-ls-card .auth-card { background: transparent; border: 0; border-radius: 0; padding: 0; }

/* ---- Info panel side (admin "Info panel on the right" option swaps columns) ---- */
.mt-loginscreen.is-info-right { grid-template-columns: 2fr 1fr; }
.mt-loginscreen.is-info-right .mt-ls-main  { order: 1; }
.mt-loginscreen.is-info-right .mt-ls-panel { order: 2; border-right: none; border-left: 1px solid var(--color-border); }

/* ---- Responsive: stack under 900px ---- */
@media (max-width: 900px) {
    /* Mobile: show only the sign-in form; hide the info/announcements panel. */
    .mt-loginscreen, .mt-loginscreen.is-info-right { grid-template-columns: 1fr; }
    .mt-ls-panel { display: none; }
    .mt-ls-main { padding: 36px 24px; }
}