/*
 * The Proplab Pro download page (proplab-home/src/main/kotlin/pages/ProDownload.kt). Dark, as
 * everything Pro is, and scoped to `.pro-dl` so none of it reaches the rest of the site.
 */

.pro-dl {
    --pro-dl-bg: #0a0e16;
    --pro-dl-surface: #141a26;
    --pro-dl-text: #f3f5f9;
    --pro-dl-muted: #b4bccb;
    --pro-dl-faint: #7d8799;
    --pro-dl-line: rgba(255, 255, 255, 0.14);
    --pro-dl-blue: #1f5cff;
    --pro-dl-blue-hover: #3a71ff;
    --pro-dl-link: #4d82ff;
    --pro-dl-gutter: clamp(20px, 4vw, 56px);

    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pro-dl-bg);
    color: var(--pro-dl-text);
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

.pro-dl a { color: inherit; }
.pro-dl a:focus-visible,
.pro-dl button:focus-visible { outline: 2px solid var(--pro-dl-link); outline-offset: 3px; }

/* Header */

.pro-dl-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 28px var(--pro-dl-gutter);
}

.pro-dl-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.pro-dl-logo img { height: 26px; width: auto; display: block; }

.pro-dl-logo-pro {
    padding-left: 14px;
    border-left: 1px solid var(--pro-dl-line);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--pro-dl-text);
}

/* The hero: text on the left, the photo on the right fading into the background */

.pro-dl-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 8px var(--pro-dl-gutter) 40px;
}

.pro-dl-photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 64%;
    z-index: 0;
}

.pro-dl-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    filter: brightness(0.74) saturate(0.95) contrast(1.04);
}

.pro-dl-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--pro-dl-bg) 0%, rgba(10, 14, 22, 0.78) 22%, rgba(10, 14, 22, 0.15) 55%, rgba(10, 14, 22, 0.25) 100%),
        linear-gradient(0deg, var(--pro-dl-bg) 0%, rgba(10, 14, 22, 0) 30%);
}

.pro-dl-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
}

.pro-dl-badge {
    display: inline-block;
    margin: 0 0 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: var(--pro-dl-text);
}

.pro-dl-heading {
    margin: 0 0 20px;
    font-size: clamp(34px, 3.8vw, 52px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.pro-dl-intro {
    margin: 0 0 28px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.45;
    color: var(--pro-dl-text);
}

/* Actions: downloads, then the web app, then the account line */

.pro-dl-actions { display: flex; flex-direction: column; }
.pro-dl-downloads { order: 1; display: flex; flex-direction: column; align-items: flex-start; }
.pro-dl-web { order: 2; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--pro-dl-line); max-width: 280px; }
.pro-dl-account { order: 3; margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--pro-dl-text); }

.pro-dl-downloads-heading { display: none; }

.pro-dl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 220px;
    min-height: 46px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.pro-dl-button + .pro-dl-button { margin-top: 14px; }

.pro-dl-button-primary { background: var(--pro-dl-blue); color: #fff; }
.pro-dl .pro-dl-button-primary { color: #fff; }
.pro-dl-button-primary:hover { background: var(--pro-dl-blue-hover); }

.pro-dl-button-disabled {
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--pro-dl-line);
    color: var(--pro-dl-faint);
    font-weight: 400;
    cursor: not-allowed;
}

.pro-dl-link,
.pro-dl-account a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.pro-dl-link { margin-top: 10px; font-size: 13px; }

.pro-dl-unavailable { margin: 0; max-width: 420px; font-size: 14px; line-height: 1.55; color: var(--pro-dl-text); }

.pro-dl-web-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.pro-dl .pro-dl-web-link { color: var(--pro-dl-link); }
.pro-dl-web-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pro-dl-arrow { font-size: 15px; }

/* Icons, drawn by masks so they take the text colour */

.pro-dl-icon {
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--pro-dl-icon) center / contain no-repeat;
    mask: var(--pro-dl-icon) center / contain no-repeat;
}

.pro-dl-icon-apple {
    --pro-dl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}

.pro-dl-icon-windows {
    --pro-dl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4.5 10 3.4v7.9H2zM11.2 3.2 22 1.8v9.5H11.2zM2 12.7h8v7.9l-8-1.1zM11.2 12.7H22v9.5l-10.8-1.4z'/%3E%3C/svg%3E");
}

.pro-dl-icon-browser {
    --pro-dl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Phones: the photo behind the heading; the web app first, since a phone cannot run the desktop app */

@media (max-width: 767.98px) {
    .pro-dl-header { padding-top: 20px; padding-bottom: 20px; }
    .pro-dl-logo img { height: 22px; }

    .pro-dl { overflow-x: hidden; }
    .pro-dl-main { align-items: flex-start; padding-top: 8px; padding-bottom: 40px; overflow: visible; }

    .pro-dl-photo { width: 100%; height: 560px; inset: -76px 0 auto 0; }
    .pro-dl-photo img { object-position: 70% center; filter: brightness(0.6) saturate(0.95); }
    .pro-dl-photo::after {
        background: linear-gradient(180deg, rgba(10, 14, 22, 0.55) 0%, rgba(10, 14, 22, 0.6) 45%, var(--pro-dl-bg) 100%);
    }

    .pro-dl-content { max-width: none; }
    .pro-dl-heading { font-size: 30px; margin-bottom: 12px; }
    .pro-dl-intro { font-size: 15px; margin-bottom: 24px; }

    .pro-dl-web { order: 1; margin: 0; padding: 0; border: 0; max-width: none; }
    .pro-dl-account { order: 2; margin: 22px 0 0; padding-bottom: 26px; border-bottom: 1px solid var(--pro-dl-line); }
    .pro-dl-downloads { order: 3; align-items: stretch; margin-top: 26px; }

    .pro-dl-downloads-heading { display: block; margin: 0 0 12px; font-size: 15px; font-weight: 500; }

    .pro-dl-web-link {
        width: 100%;
        justify-content: center;
        min-height: 46px;
        border-radius: 12px;
        background: var(--pro-dl-blue);
    }
    .pro-dl .pro-dl-web-link { color: #fff; }
    .pro-dl-web-link .pro-dl-icon-browser { display: none; }
    .pro-dl-web-link:hover { text-decoration: none; background: var(--pro-dl-blue-hover); }

    .pro-dl-button { width: 100%; min-width: 0; }
    .pro-dl-link { align-self: flex-start; }

}