/*
 * Alot Content landing slot (5:2).
 *
 * SSR reserves the final geometry before JavaScript runs. The CSS-only skeleton
 * and the DivKit surface occupy the same 5:2 box, so replacing one with the other
 * cannot move the heading below or contribute to layout shift.
 */
.content-placement {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 0;
    overflow: hidden;
    contain: layout paint;
    border-radius: 12px;
    background: transparent;
}

.content-placement[hidden] {
    display: none !important;
}

.content-placement--landing-5x2 {
    position: relative;
    aspect-ratio: 5 / 2;
    background: transparent;
}

.content-placement--landing-5x2 .content-placement__surface {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
}

.content-placement--ready .content-placement__surface {
    opacity: 1;
}

.content-placement__skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(circle at 88% 25%, rgba(255, 255, 255, .13) 0 9%, transparent 9.5%),
        radial-gradient(circle at 78% 115%, rgba(164, 119, 255, .18) 0 28%, transparent 28.5%),
        linear-gradient(120deg, #17244d 0%, #372467 52%, #5a3278 100%);
    transition: opacity 180ms ease-out, visibility 180ms ease-out;
}

.content-placement__skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .08) 58%, transparent 72%);
    animation: content-placement-shimmer 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.content-placement__skeleton > span {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.content-placement__skeleton-badge { top: 16%; left: 5%; width: 21%; height: 8%; }
.content-placement__skeleton-title { top: 35%; left: 5%; width: 48%; height: 14%; }
.content-placement__skeleton-copy { top: 56%; left: 5%; width: 39%; height: 7%; }
.content-placement__skeleton > .content-placement__skeleton-cta { top: 72%; left: 5%; width: 18%; height: 13%; background: rgba(255, 215, 115, .3); }

.content-placement--ready .content-placement__skeleton {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.content-placement--unavailable {
    background: transparent;
}

.content-placement--unavailable .content-placement__skeleton {
    display: none;
}

.content-placement--unavailable .content-placement__surface {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@keyframes content-placement-shimmer {
    to { transform: translateX(110%); }
}

/* Fallback for browsers without aspect-ratio: an in-flow pseudo-element
 * computes 40% from the slot's own responsive width, not from its wider parent. */
@supports not (aspect-ratio: 5 / 2) {
    .content-placement--landing-5x2::before {
        content: "";
        display: block;
        padding-top: 40%;
    }
}

.content-placement--landing-5x2::after {
    content: attr(data-disclosure);
    position: absolute;
    z-index: 3;
    right: 8px;
    bottom: 6px;
    display: block;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    text-align: right;
    background: rgba(16, 20, 38, .72);
    pointer-events: none;
}

.content-placement--landing-5x2[data-disclosure=""]::after {
    content: none;
}

/* The existing landing grid switches to desktop at 768px. This 5:2
 * placement is desktop-only; mobile may get a separate placement later. */
@media (max-width: 767px) {
    .content-placement--landing-5x2 {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .content-placement--landing-5x2 {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .content-placement--landing-5x2 {
        max-width: 840px;
    }
}

@media (min-width: 1440px) {
    .content-placement--landing-5x2 {
        max-width: 960px;
    }
}

@media (max-width: 375px) {
    .content-placement {
        margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-placement,
    .content-placement *,
    .content-placement__skeleton::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Compact desktop-only placement between Feed and How-to links. It occupies
 * zero width until DivKit has rendered, then reveals from left to right. */
.content-placement--header-navpromo {
    position: relative;
    display: none;
    align-self: center;
    flex: 0 0 0;
    width: 0;
    height: 40px;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    opacity: 0;
    contain: layout paint;
    transition:
        width 320ms cubic-bezier(.22, 1, .36, 1),
        flex-basis 320ms cubic-bezier(.22, 1, .36, 1),
        opacity 170ms ease-out;
}

.content-placement--header-navpromo .content-placement__surface {
    width: 144px;
    height: 40px;
    transform: translateX(-10px) scale(.96);
    transform-origin: left center;
    opacity: 0;
    transition: transform 320ms cubic-bezier(.22, 1.18, .36, 1), opacity 180ms ease-out 35ms;
}

/* The web renderer sizes a wrap-content DivKit root to its children even when
 * the host surface is fixed. Stretch that single renderer root to the 40px
 * surface so DivKit's vertical alignment is evaluated against the menu row. */
.content-placement--header-navpromo .content-placement__surface > * {
    height: 100% !important;
}

.content-placement--header-navpromo.content-placement--ready {
    flex-basis: 144px;
    width: 144px;
    opacity: 1;
}

.content-placement--header-navpromo.content-placement--ready .content-placement__surface {
    transform: translateX(0) scale(1);
    opacity: 1;
}

@media (min-width: 1200px) {
    .content-placement--header-navpromo { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .content-placement--header-navpromo,
    .content-placement--header-navpromo .content-placement__surface {
        transition: none !important;
        transform: none !important;
    }
}

/* First item in the desktop Favorites list. The 3:2 skeleton reserves the
 * final responsive geometry while Content resolves, so the project list does
 * not jump when DivKit replaces it. */
.content-placement--favorites-first {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 7px 0;
    border-radius: 5px;
    background: transparent;
}

.content-placement--favorites-first .content-placement__surface {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
}

.content-placement--favorites-first .content-placement__surface > * {
    width: 100% !important;
    height: 100% !important;
}

.content-placement--favorites-first.content-placement--ready .content-placement__surface {
    opacity: 1;
}

.content-placement--favorites-first::after {
    content: attr(data-disclosure);
    position: absolute;
    right: 8px;
    bottom: 7px;
    z-index: 3;
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: rgba(16, 20, 38, .72);
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
}

.content-placement--favorites-first[data-disclosure=""]::after {
    content: none;
}

/* no_fill and terminal failures must not leave a blank pseudo-project. */
.content-placement--favorites-first.content-placement--unavailable {
    display: none !important;
}

@supports not (aspect-ratio: 3 / 2) {
    .content-placement--favorites-first::before {
        content: "";
        display: block;
        padding-top: 66.6667%;
    }
}

@media (max-width: 991px) {
    .content-placement--favorites-first {
        display: none !important;
    }
}

/* Authenticated Profile left rail. The slot reserves its final 1:2 geometry
 * while Content resolves and disappears entirely on no_fill/failure. */
.content-placement--profile-left {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 2;
    margin: 0;
    border-radius: 16px;
    background: transparent;
}

.content-placement--profile-left .content-placement__surface {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
}

.content-placement--profile-left .content-placement__surface > * {
    width: 100% !important;
    height: 100% !important;
}

.content-placement--profile-left.content-placement--ready .content-placement__surface {
    opacity: 1;
}

.content-placement--profile-left::after {
    content: attr(data-disclosure);
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 3;
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: rgba(16, 20, 38, .72);
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
}

.content-placement--profile-left[data-disclosure=""]::after {
    content: none;
}

.content-placement--profile-left.content-placement--unavailable {
    display: none !important;
}

@supports not (aspect-ratio: 1 / 2) {
    .content-placement--profile-left::before {
        content: "";
        display: block;
        padding-top: 200%;
    }
}

@media (max-width: 991px) {
    .content-placement--profile-left {
        display: none !important;
    }
}