/*
 * Labs Scheduling widget — Figma widget_labs_scheduling_layout (set
 * 1896:24857). Desktop = fixed 456×470 neutral-light shell, cards pinned to
 * the top and footer to the bottom (1896:24494); the hero layout swaps to a
 * white shell with full-bleed art and a frosted panel (1896:25545). Mobile
 * drops the shell: mono section header + stacked cards (1907:26833).
 */

.shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Fluid for the dashboard grid (Figma breakpoints 2831:26984): instances
     * render 437-564px wide, 464-468px tall. 464px floor = smallest breakpoint
     * slot; height fills the grid row when the parent sizes it. */
    width: 100%;
    min-height: 464px;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-neutral-light);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-sm);
}

/* Card slot — 10px inset has no spacing token (Figma pt/px 10, gap 10). */
.wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    padding: 10px 10px 0;
}

.bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    align-items: flex-start;
    width: 100%;
    padding: 0 var(--spacing-20);
}

/* Note + button pair between the card and the footer (Context 1896:24977). */
.context {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    align-items: flex-start;
    width: 100%;
}

.contextCard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    align-items: flex-start;
    width: 100%;
}

.contextButtons {
    display: flex;
    gap: var(--spacing-12);
    align-items: flex-start;
    width: 100%;
}

.contextButtons button {
    flex: 1 1 0;
    width: auto;
    min-width: 1px;
}

.contextDivider {
    width: 100%;
    height: 1px;
    background-color: var(--border-color-light);
}

/* Awaiting composite (2128:13044): vial product photo centered in the free
 * space between the status card(s) and the footer. Exact photo dimensions are
 * not extractable while the use-case nodes are Code Connect-mapped — the img
 * renders at its exported size, centered, and is clipped by the shell. */
.productArt {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.productArtImg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Hero layout (1896:25545): white shell, photo bg, frosted content card. */
.heroShell {
    position: relative;
    justify-content: space-between;
    padding: var(--spacing-20);
    overflow: visible;
    background-color: var(--color-bg-base-light);
}

/* Figma stretches the art to the shell (no object-fit in the layer). */
.heroBg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: bottom;
    border-radius: var(--border-radius-sm);
    pointer-events: none;
}

/* Frosted panel — 40% white + 32px ambient shadow are Figma one-offs
 * (rgba(255,255,255,0.4), 0 0 32 rgba(0,0,0,0.1)). */
.heroCard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    align-items: flex-start;
    width: 100%;
    padding: var(--spacing-28);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}

/* position: relative keeps copy/CTA above the absolutely-positioned art. */
.heroCopy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: center;
    width: 100%;
    text-align: center;
}

.heroIcon {
    width: 24px;
    height: 24px;
}

.heroTitle {
    font-feature-settings: 'case' 1;
}

.heroCta {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Hero footer sits on the shell's own 20px padding (1907:26565 drops the
 * part's 14px bottom padding). */
.heroShell .heroFooter {
    padding-bottom: 0;
}

/* Mobile hero content card (1907:28051): left-aligned copy over layered art. */
.mobileRoot[data-layout='hero'] .heroCard {
    gap: var(--spacing-18);
    padding: var(--spacing-20) var(--spacing-16) var(--spacing-20) var(--spacing-20);
    overflow: hidden;
    background-color: transparent;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-md);
    box-shadow: none;
}

.mobileRoot[data-layout='hero'] .heroCopy {
    align-items: flex-start;
    text-align: left;
}

.mobileRoot[data-layout='hero'] .heroCta {
    justify-content: flex-start;
}

.heroMobileBg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--color-bg-neutral-light);
    border-radius: var(--border-radius-md);
    pointer-events: none;
}

/* Figma art placement on the mobile card (1907:28051 inner images). */
.heroMobileBack {
    position: absolute;
    top: -91.82%;
    left: -5.3%;
    width: 174.31%;
    height: 244.68%;
    max-width: none;
}

.heroMobileFront {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Mobile: no shell — mono header + stacked cards (1907:26833). */
.mobileRoot {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: flex-start;
    width: 362px;
}

.mobileHeader {
    display: flex;
    gap: var(--spacing-16);
    align-items: center;
    width: 100%;
}

.mobileHeaderDivider {
    flex: 1 1 0;
    min-width: 1px;
    height: 1px;
    background-color: var(--border-color-alpha-black-10);
}

/* Mobile press feedback (Figma interaction annotation on 1907:26833, applies
 * to every mobile card): scale to 103% while pressed, settle back to 100%
 * with ease-in-out. Duration is not specified in the annotation. */
.mobileRoot > *:not(.mobileHeader) {
    transition: transform 0.2s ease-in-out;
}

.mobileRoot > *:not(.mobileHeader):active {
    transform: scale(1.03);
}