/*
 * Landing pages (post type: landing_page)
 *
 * Loaded only on single landing pages (see functions.php). The layout itself is
 * the YOOtheme Builder Template "Single Landing Page"; this file handles sizing.
 *
 * Everything derives from one measure, --sdad-lp-a: the outer width of the album
 * art frame. The design values (725px frame, 30px gap, 534px logo, 120px logo
 * offset, ~20px white border) are applied as ratios of that measure, so the whole
 * widget scales with the viewport height and stays centred without scrolling.
 * The frame reaches the full 725px only on very tall screens.
 */

.sdad-lp {
    /* Site header height: navbar items have min-height 80px on desktop and mobile. */
    --sdad-lp-header: 80px;
    --sdad-lp-vh: 100vh;
    --sdad-lp-a: clamp(220px, calc((var(--sdad-lp-vh) - var(--sdad-lp-header)) * 0.36), 725px);
}

@supports (height: 100dvh) {
    .sdad-lp {
        --sdad-lp-vh: 100dvh;
    }
}

/* Album art in a white frame */
.sdad-lp .sdad-lp-art {
    box-sizing: border-box;
    width: var(--sdad-lp-a);
    max-width: 100%;
    margin: 0 auto;
    padding: calc(var(--sdad-lp-a) * 0.038);
    background: #fff;
}

.sdad-lp .sdad-lp-art .el-link {
    display: block;
}

.sdad-lp .sdad-lp-art .el-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Listen button */
.sdad-lp .sdad-lp-cta {
    margin-top: calc(var(--sdad-lp-a) * 0.041);
}

.sdad-lp .sdad-lp-cta .uk-button {
    box-sizing: border-box;
    width: var(--sdad-lp-a);
    max-width: 100%;
    padding: 0 1em;
    line-height: calc(var(--sdad-lp-a) * 0.165);
    font-size: clamp(11px, calc(var(--sdad-lp-a) * 0.048), 34px);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logo */
.sdad-lp .sdad-lp-logo {
    margin-top: calc(var(--sdad-lp-a) * 0.166);
}

.sdad-lp .sdad-lp-logo .el-image {
    width: calc(var(--sdad-lp-a) * 0.737);
    max-width: 100%;
    height: auto;
}