/* Lavvolna /muzyka/ — common catalog/player layout */

/* The site's normal .container has 1200px max-width with 30px side padding.
   Keep exactly the same geometry here: 1200px outer box / 1140px content. */
.muzyka-page .catalog-content-section > .container,
.muzyka-page .catalog-player-container{
    width:100%;
    max-width:1200px;
    padding-left:30px;
    padding-right:30px;
    box-sizing:border-box;
    margin-left:auto;
    margin-right:auto;
}

.muzyka-page .catalog-content-section{
    padding:0 0 18px;
    background:var(--cream);
    margin-top:-16px;
}

.muzyka-page .catalog-content-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:8px;
}

.muzyka-page .catalog-content-heading .content-title{
    margin:0;
    color:#663366;
    font-size:30px;
}

.muzyka-page .catalog-heading-wave{
    color:#663366;
    font-size:24px;
    letter-spacing:5px;
    white-space:nowrap;
}

.muzyka-page .catalog-intro{
    width:100%;
    max-width:1140px;
    color:#333;
    font-size:15px;
    line-height:1.62;
}

.muzyka-page .catalog-intro p{margin:0 0 12px}

/* The whole text + image block is always exactly the same 1140px
   content width. Only the image column changes from 320x240 to 240x320. */
.muzyka-page .catalog-info-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:22px;
    align-items:start;
    width:100%;
    max-width:1140px;
    margin-top:12px;
}

.muzyka-page .catalog-info-left{min-width:0}

.muzyka-page .catalog-info-card{
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#ffffdf;
    box-sizing:border-box;
}

.muzyka-page .catalog-info-part{padding:0}
.muzyka-page .catalog-info-part+.catalog-info-part{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #ddd;
}

.muzyka-page .catalog-info-title{
    font-size:13px;
    font-weight:700;
    color:#663366;
    margin-bottom:9px;
}

.muzyka-page .catalog-info-value{
    font-size:15px;
    line-height:1.55;
    color:#333;
}

.muzyka-page .catalog-photo-placeholder{
    width:320px;
    height:240px;
    border:1px solid #ddd;
    border-radius:10px;
    overflow:hidden;
    background:#faf7fb;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}

.muzyka-page .catalog-photo-placeholder.catalog-photo-vertical{
    width:240px;
    height:320px;
}

.muzyka-page .catalog-photo-placeholder.catalog-photo-horizontal{
    width:320px;
    height:240px;
}

.muzyka-page .catalog-photo-placeholder img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    flex:0 0 auto;
}

.muzyka-page .catalog-choice{
    width:100%;
    max-width:1140px;
    box-sizing:border-box;
    margin-top:10px;
    padding:10px 14px;
    border-left:4px solid #663366;
    background:#f8f3f8;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:15px;
    line-height:1.45;
}

.muzyka-page .catalog-choice strong{color:#663366}
.muzyka-page .catalog-player-heading{margin-bottom:-12px!important}

/* Every player on /muzyka/ uses the same 1140px content width on desktop.
   The existing player.css mobile 100vw rule remains authoritative on phones. */
.muzyka-page .music-player{
    width:100%;
    max-width:1140px;
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:700px){
    .muzyka-page .catalog-content-section > .container,
    .muzyka-page .catalog-player-container{
        padding-left:0;
        padding-right:0;
    }

    .muzyka-page .catalog-info-grid{
        grid-template-columns:1fr;
    }

    .muzyka-page .catalog-content-section{padding-top:10px}
    .muzyka-page .catalog-intro{font-size:16px}
    .muzyka-page .catalog-heading-wave{display:none}

    .muzyka-page .catalog-photo-placeholder.catalog-photo-vertical{
        width:240px;
        height:320px;
        max-width:100%;
    }

    .muzyka-page .catalog-photo-placeholder.catalog-photo-horizontal{
        width:320px;
        height:240px;
        max-width:100%;
    }

    .muzyka-page .music-player{
        max-width:none;
    }
}