/* ==========================================================================
   LESESOMMER 2026
   POPUP.CSS
   ========================================================================== */

#popup-overlay{
    position:fixed;
    inset:0;
    z-index:var(--z-popup-overlay);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-4);
    background:var(--color-overlay);
    backdrop-filter:blur(8px);
}

#popup-overlay[hidden]{
    display:none !important;
}

#popup{
    position:relative;
    z-index:var(--z-popup);
    width:var(--popup-width);
    max-width:var(--popup-max-width);
    display:grid;
    grid-template-columns:minmax(300px,340px) 1fr;
    gap:var(--space-8);
    padding:var(--popup-padding);
    border-radius:var(--popup-radius);
    background:var(--color-card);
    box-shadow:var(--shadow-strong);
}

#popup-close{
    position:absolute;
    top:var(--space-4);
    right:var(--space-4);
    z-index:2;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-round);
    font-size:2rem;
    line-height:1;
    color:var(--color-text);
    background:rgba(255,255,255,.85);
    box-shadow:var(--shadow-soft);
}

#popup-close:hover{
    transform:scale(1.06);
}

.popup-covers{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:310px;
}

.popup-cover-image{
    display:block;
    width:100%;
    max-width:var(--popup-cover-width);
    height:auto;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-medium);
}

.popup-covers[data-cover-count="2"],
.popup-covers[data-cover-count="3"]{
    width:300px;
    min-width:300px;
}

.popup-covers[data-cover-count="2"] .popup-cover-image,
.popup-covers[data-cover-count="3"] .popup-cover-image{
    position:absolute;
    width:155px;
    max-width:none;
    transform-origin:center bottom;
    transition:
        transform var(--duration-base) var(--ease-soft),
        filter var(--duration-base) var(--ease-standard);
}

.popup-covers[data-cover-count="2"] .popup-cover-image:nth-child(1){
    transform:translateX(-44px) rotate(-7deg);
    z-index:1;
}

.popup-covers[data-cover-count="2"] .popup-cover-image:nth-child(2){
    transform:translateX(44px) rotate(7deg);
    z-index:2;
}

.popup-covers[data-cover-count="3"] .popup-cover-image:nth-child(1){
    transform:translateX(-76px) translateY(12px) rotate(-10deg);
    z-index:1;
}

.popup-covers[data-cover-count="3"] .popup-cover-image:nth-child(2){
    transform:translateY(-4px);
    z-index:3;
}

.popup-covers[data-cover-count="3"] .popup-cover-image:nth-child(3){
    transform:translateX(76px) translateY(12px) rotate(10deg);
    z-index:2;
}

.popup-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-right:var(--space-8);
}

#popup-headline{
    margin-bottom:var(--space-2);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-black);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-primary);
}

#popup-subheadline{
    margin-bottom:var(--space-4);
    font-size:var(--font-size-md);
    font-weight:var(--font-weight-bold);
    color:var(--color-secondary-dark);
}

#popup-title{
    margin-bottom:var(--space-2);
    font-family:var(--font-heading);
    font-size:clamp(1.75rem,4vw,var(--font-size-xl));
    line-height:var(--line-height-tight);
    font-weight:var(--font-weight-black);
    color:var(--color-text);
}

#popup-author{
    margin-bottom:var(--space-4);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-bold);
    color:var(--color-muted);
}

#popup-description{
    margin-bottom:var(--space-6);
    font-size:var(--font-size-base);
    line-height:var(--line-height-base);
    color:var(--color-text);
}

#popup-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-height:var(--button-height);
    padding:0 var(--button-padding-x);
    border-radius:var(--button-radius);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-light);
    background:var(--color-primary);
    box-shadow:var(--shadow-medium);
}

#popup-button:hover{
    background:var(--color-primary-dark);
    transform:translateY(-2px);
}

#popup.is-inactive{
    width:min(560px,calc(100vw - 2rem));
    grid-template-columns:1fr;
}

#popup.is-inactive .popup-content{
    padding-right:0;
}

#popup.is-inactive #popup-description{
    max-width:none;
}

/* How it works popup */

#how-overlay{
    position:fixed;
    inset:0;
    z-index:105;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    background:rgba(20,35,45,.55);
    backdrop-filter:blur(8px);
}

#how-overlay[hidden]{
    display:none !important;
}

#how-popup{
    position:relative;
    width:min(520px,calc(100vw - 2rem));
    padding:2rem;
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--shadow-strong);
}

#how-close{
    position:absolute;
    top:1rem;
    right:1rem;
    width:40px;
    height:40px;
    border-radius:999px;
    background:rgba(255,255,255,.85);
    box-shadow:var(--shadow-soft);
    font-size:1.75rem;
}

#how-title{
    margin-bottom:1rem;
    font-size:2rem;
    font-weight:900;
}

#how-steps{
    display:grid;
    gap:.75rem;
    margin-left:1.25rem;
    list-style:decimal;
}

#how-steps li{
    padding-left:.35rem;
}

#how-hint{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    margin-top:1.5rem;
    padding:1rem;

    border-radius:16px;
    background:rgba(255,214,107,.22);
    border:1px solid rgba(242,140,40,.28);
}

#how-hint-text{
    flex:1;
    font-size:.95rem;
    line-height:1.45;
    color:var(--color-text);
}

#how-hint-button{
    flex:0 0 auto;

    min-height:44px;
    padding:0 1.15rem;

    border-radius:999px;

    font-size:.875rem;
    font-weight:700;

    color:var(--color-text-light);
    background:var(--color-primary);

    box-shadow:var(--shadow-soft);

    transition:
        transform var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard);
}

#how-hint-button:hover{
    transform:translateY(-2px);
    background:var(--color-primary-dark);
}

#how-hint-button:disabled{
    cursor:default;
    transform:none;
    opacity:.65;
}

#how-tip{
    margin-top:1.25rem;
    font-weight:700;
    color:var(--color-primary-dark);
}