/* salonek - kulaty stul */
.loungebox {container-type:inline-size; margin:0 0 var(--spacing-15, 1.5rem); padding:var(--spacing-15, 1.5rem) 0 var(--spacing-075, .75rem); border:solid var(--tgl-pri10, #D6DEEB); border-width:.25rem 0 1px; font-size:1rem;}
.loungebox h2 {margin:0 0 var(--spacing-1, 1rem); font-size:var(--rs-h4, 1.5rem); text-align:center; text-transform:uppercase}

.loungebox-list {position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:var(--spacing-15, 1.5rem); padding:0 0 var(--spacing-075, .75rem)}
.loungebox-item {flex:0 0 auto; width:100%}
@container (width > 18em){.loungebox-item {flex:1 1 auto; width:8.5em; max-width:50%}}
@container (width > 28em){.loungebox-item {flex:1 0 8.5em; max-width:33%}}
@container (width > 38em){.loungebox-item {flex:0 0 8.5em; max-width:none}}
.loungebox-list .person-foto {width:var(--spacing-5, 5rem); height:var(--spacing-5, 5rem); margin:0 auto .25rem; box-shadow:0 .25rem .5rem 0 var(--tgl-black-o10, #0000001a)}
.loungebox-list h3 {margin:0; font-weight:600; font-size:1em; line-height:1.25; font-family:inherit}
.loungebox-list h3 br {display:none}
.loungebox-list h3 small {display:block; margin:.25rem 0 0; font-weight:400; font-size:87.5%; color:var(--tgl-neutral90, #2B3135)}
.loungebox-person {text-align:center; cursor:pointer}
.loungebox-person:after {content:'PROFIL'; display:table; margin:.5rem auto 0; padding:0 1rem; border:1px solid var(--tgl-pri20, #A7B9D9); border-radius:var(--radius-s, .25rem); font-weight:600; font-size:75%; line-height:2; color:var(--tgl-pri80, #122E5B); background:var(--tgl-pri05b, #EDF2F9)}
.loungebox-person:hover::after { background:var(--tgl-pri10, #D6DEEB)}
.loungebox-person h3 {color:var(--tgl-pri80, #122E5B)}
.loungebox-detail {display:none; position:absolute; top:0; left:0; bottom:0; right:0; z-index:1; background:var(--tgl-white-o50, #FFFFFF80); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
.active .loungebox-detail {display:block}

.loungebox-detail {cursor:pointer}
.loungebox-detail-in {position:sticky; top:4rem; display:grid; grid-template-columns:var(--spacing-5, 5rem) auto 1.25em; gap:var(--spacing-075, .75rem); width:100%; padding:var(--spacing-15, 1.5rem); border:1px solid var(--tgl-pri10, #D6DEEB); border-radius:var(--radius-m, .5rem); color:var(--tgl-neutral90, #2B3135); background:var(--tgl-pri05b, #EDF2F9); box-shadow:0 .5rem 1rem var(--tgl-black-o10, #0000001a); box-sizing:border-box}
.loungebox-detail-in:before {content:''; grid-row:1; grid-column:3; display:block; width:1.25em; height:1.25em; background:url('/u/icon/000/close-i.svg') no-repeat 50% 50% / contain; filter:var(--filter-tgl-pri30); }
.loungebox-detail:hover .loungebox-detail-in:before {filter:var(--filter-tgl-pri60)}
.loungebox-detail .person-foto {grid-row:1; grid-column:1}
.loungebox-detail h3 {grid-row:1; grid-column:2; font-size:1.25em}
.loungebox-detail h3 small {margin:0}
.loungebox-detail p {grid-row:2; grid-column:1 / 4; margin:0; font-size:1em; line-height:1.6}
@container (width > 28em) {
.loungebox-detail-in {top:2rem; grid-template-columns:var(--spacing-7, 7rem) 1fr 1.25em;}
.loungebox-detail .person-foto {grid-row:1 / 4; width:var(--spacing-7, 7rem); height:var(--spacing-7, 7rem)}
.loungebox-detail p {grid-column:2 / 4}
}