/* ==========================================================================
   Blender add-on page
   Design tokens, the site header, and the button system live in brand.css,
   which this file assumes is loaded first.
   ========================================================================== */

/* This page does not load styles.min.css, so the browser's default body margin
   and content-box sizing have to be cleared here. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.omni {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.blender-main {
    flex: 1 0 auto;
}

/* ==========================================================================
   Hero — centred, matching the pricing page's sub-page pattern
   ========================================================================== */

.blender-hero {
    padding: var(--s9) 0 var(--s7);
    text-align: center;
}

.blender-hero h1 {
    max-width: 620px;
    margin: 0 auto var(--s4);
    color: var(--text);
    font-size: clamp(34px, 4.4vw, 48px);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
}

.blender-hero p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
}

/* Capability chips. Same shape as the format chips on the home page: a
   hairline box on the surface, not a pill, and no colour. */
.blender-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2);
    margin: var(--s5) 0 0;
    padding: 0;
    list-style: none;
}

.blender-specs li {
    padding: 6px var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.4;
}

/* ==========================================================================
   Install card
   ========================================================================== */

.blender-install {
    padding-bottom: var(--s9);
}

.install-card {
    display: flex;
    max-width: 520px;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    /* Tighter at the foot than the head so the version line reads as sitting
       at the bottom of the card rather than floating in the middle of it. */
    padding: var(--s7) var(--s6) var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    text-align: center;
}

.install-mark {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.install-mark img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* No supporting line under this heading. "Drag and Drop into Blender" already
   says what to do, so a sentence repeating it just pushed the control down. */
.install-card h2 {
    margin: 0 0 var(--s6);
    color: var(--text);
    font-size: 20px;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}

.ext-detail-download {
    width: 100%;
}

/* --------------------------------------------------------------------------
   The drag target — the one chromatic control on the site.

   brand.css keeps the palette neutral on purpose, and the App Store stars are
   otherwise the only colour. This button is a deliberate exception: it is a
   drag source, not a link, and Blender's own extensions site uses the same
   blue for the same gesture, so people arrive already knowing what it is. The
   dashed edge is the affordance that says "pick me up" rather than "click me",
   which is why it is not the standard .btn.
   -------------------------------------------------------------------------- */

.install-card {
    --blender-accent: hsl(204, 100%, 62%);
    --blender-accent-bg: hsla(204, 100%, 55%, 0.12);
    --blender-accent-bg-hover: hsla(204, 100%, 55%, 0.2);
}

.btn-install-drag {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    border: 0;
    border-radius: var(--r-md);
    outline: 2px dashed var(--blender-accent);
    outline-offset: -2px;
    background: var(--blender-accent-bg);
    color: var(--blender-accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    transition: background-color 150ms ease;
}

.btn-install-drag:hover {
    background: var(--blender-accent-bg-hover);
    cursor: move;
}

.btn-install-drag:focus-visible {
    outline: 2px solid var(--blender-accent);
    outline-offset: 2px;
}

.btn-install-drag svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Set while a drag is in flight so the control reads as "in hand". */
.btn-install-drag-group.is-dragging {
    opacity: 0.5;
}

/* The fallback route, not a caption on the button, so it needs real air above
   it rather than sitting tucked under the control. */
.install-secondary {
    margin: var(--s5) 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
}

.install-secondary a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong);
}

.install-secondary a:hover {
    text-decoration-color: var(--text);
}

/* Metadata, not an instruction. It sits at the foot of the card at the
   smallest step in the scale so it is available without competing with the
   two things people came here to do. */
.install-status {
    margin: var(--s7) 0 0;
    color: var(--text-3);
    font-size: 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 620px) {
    .blender-hero {
        padding: var(--s7) 0 var(--s6);
    }

    .install-card {
        padding: var(--s6) var(--s5);
    }

    .blender-install {
        padding-bottom: var(--s7);
    }
}