/*
    ---------------------------
    # IMPORTANT: layout
    ---------------------------
*/
/* INFO: frontend-header */
#frontend {--header-height: 110px;background-color: var(--color-background);}
@media only screen and (max-width: 1366px){
    #frontend {--header-height: 100px;}
}
@media only screen and (max-width: 768px){
    #frontend {--header-height: 90px;}
}
/* OK: frontend-content */
#frontend-content{display: flex;flex-direction: column;gap: var(--gap-xl);}
#frontend-content > :first-child:not(.nomargin){margin-top: var(--gap-xl);}
#frontend-content > :last-child:not(.nomargin){margin-bottom: var(--gap-xl);}
@media only screen and (max-width: 1366px){
    #frontend-content > :first-child:not(.nomargin){margin-top: var(--gap-lg);}
    #frontend-content > :last-child:not(.nomargin){margin-bottom: var(--gap-lg);}
    #frontend-content{gap: var(--gap-lg);}
}
@media only screen and (max-width: 768px){
    #frontend-content > :first-child:not(.nomargin){margin-top: var(--gap);}
    #frontend-content > :last-child:not(.nomargin){margin-bottom: var(--gap);}
    #frontend-content{gap: var(--gap);}
}
/* OK: frontend-footer */
#frontend-footer{background-color: var(--color-black);}
#frontend-footer > [class^="package"]{background-color: var(--color-black);display: flex;align-items: flex-start;gap: var(--gap-xl);justify-content: space-between;padding: calc(var(--padding-xl) * 2) 0;color: var(--color-black-lightness);}
#frontend-footer > [class^="package"] > .info{display: flex;flex-direction: column;gap: var(--gap-lg);width: 500px;}
#frontend-footer > [class^="package"] > .info > .name{font: var(--h-font);color: var(--color-white);font-size: var(--h-font-size-sm);}
#frontend-footer > [class^="package"] > .info > .description{color: var(--color-black-lightness);}
#frontend-footer > [class^="package"] > nav {width: 500px;display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap-sm);}
#frontend-footer > [class^="package"] > nav > a {color: var(--color-alternative);font-weight: var(--body-font-weight-bold);-webkit-transition: color var(--transition-fast);transition: color var(--transition-fast);}
#frontend-footer > [class^="package"] > nav > a:is(:hover, :focus) {color: var(--color-white);}
#frontend-footer > .legal{background-color: var(--color-background-lightness);padding: var(--padding) 0;}
#frontend-footer > .legal >  [class^="package"]{display: flex;gap: var(--gap-lg);align-items: center;justify-content: space-between;}
#frontend-footer > .legal >  [class^="package"] > .copyright {display: flex;align-items: center;gap: var(--gap);color: var(--color-black-lightness);font-size: var(--body-font-size-sm);font-weight: var(--body-font-weight-strong);}
#frontend-footer > .legal >  [class^="package"] > .copyright > picture{width: 40px;height: 40px;}
#frontend-footer > .legal >  [class^="package"] > .copyright > picture > img{width: 100%;height: 100%;object-fit: cover;}
#frontend-footer > .legal >  [class^="package"] > nav{display: flex;gap: var(--gap);flex-wrap: wrap;}
#frontend-footer > .legal >  [class^="package"] > nav > a{font-size: var(--body-font-size-sm);font-weight: var(--body-font-weight-bold);color: var(--color-featured-light);-webkit-transition: color var(--transition-fast);transition: color var(--transition-fast);}
#frontend-footer > .legal >  [class^="package"] > nav > a:is(:hover, :focus){color: var(--color-featured-lightness);}
@media only screen and (max-width: 1366px){
    #frontend-footer > [class^="package"]{flex-direction: column;}
}
@media only screen and (max-width: 1024px){
    #frontend-footer > [class^="package"] > .info{width: 100%;}
}
@media only screen and (max-width: 768px){
    #frontend-footer > [class^="package"] > nav{width: 100%;gap: var(--gap-sm);}
    #frontend-footer > [class^="package"] > nav > a{font-size: var(--body-font-size-sm);}
    #frontend-footer > .legal >  [class^="package"]{flex-direction: column;align-items: flex-start;gap: var(--gap-sm);}
    #frontend-footer > .legal >  [class^="package"] > nav{gap: var(--gap-sm);}
}
/* INFO: frontend-header */
#frontend-header{background-color: var(--color-background-lightness);position: sticky;top: 0;border-bottom: 1px solid var(--color-background-darkness);z-index: 10;}
#frontend-header > [class^='package']{display: flex;height: var(--header-height);align-items: center;gap: var(--gap-lg);}
#frontend-header .logo {font: var(--button-font);font-size: calc(var(--button-font-size) + 2px);font-weight: var(--button-font-weight-strong);-webkit-transition: color var(--transition-fast);transition: color var(--transition-fast);text-transform: uppercase;letter-spacing: 2px;color: var(--color-black-light);}
#frontend-header .logo:is(:hover, :focus){color: var(--color-alternative);}
#frontend-header .logo > picture{height: var(--header-height);aspect-ratio: 2;display: inline-block;}
#frontend-header .logo > picture > img{width: 100%;padding: var(--padding-sm) 0;height: 100%;object-fit: contain;}
#frontend-header .avatar{--header-height: 80px;}
#frontend-header [data-has-submenu] > a {font: var(--button-font);font-size: var(--button-font-size-xs);text-transform: uppercase;letter-spacing: 1px;color: var(--color-black-light);display: inline-flex;align-items: center;gap: var(--gap);}
@media only screen and (max-width: 1366px){
    #frontend-header > [class^='package']{gap: var(--gap);}
    #frontend-header .logo > picture{height: calc(var(--header-height) * .8);}
}
@media only screen and (max-width: 568px){
    #frontend-header .avatar{--header-height: 60px;}
    #frontend-header .avatar > .letter{display: none;}
    #frontend-header .logo > picture{height: calc(var(--header-height) * .6);}
}

/* INFO: form-search */
#form-search{display: inline-flex;background-color: var(--color-background);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: 1px solid var(--color-background-darkness);}
#form-search > button{background-color: transparent;padding: 0;order: 2;}
#form-search > button > span[class^="material"]{display: inline-flex;justify-content: center;width: calc(var(--padding-sm) * 2 + var(--button-font-size-sm) );text-align: center;color: var(--color-background-darkness);-webkit-transition: color var(--transition);transition: color var(--transition);}
#form-search > button:hover > span[class^="material"]{color: var(--color-black-lightness);}
#form-search > .field > .input > input{outline: none;padding: var(--padding-sm);background-color: transparent;font-size: var(--body-font-size-xs);}
#form-search > .field > .input > input:focus{background-color: var(--color-white);}
#form-search > .field > .input > input::placeholder{font-size: var(--body-font-size-xs);}
@media only screen and (max-width: 1024px){

}    
/* INFO: welcome */
section.welcome .box{background: var(--color-gradient);min-height: 50vh;border-radius: var(--border-radius);color: var(--color-white);display: flex;align-items: flex-end;justify-content: flex-start;-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);padding: var(--padding-lg);overflow: hidden;}
section.welcome .box > .info{width: 100%;display: flex;flex-direction: column;gap: var(--gap-xl);position: relative;z-index: 2;}
section.welcome .box > .background{left: var(--padding-xs);top: var(--padding-xs);right: var(--padding-xs);bottom: var(--padding-xs);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);z-index: 1;mix-blend-mode: screen;-webkit-filter: grayscale(1) contrast(1.25);filter: grayscale(1) contrast(1.25);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);overflow: hidden;}
section.welcome .box > .background::after{content: " ";position: absolute;inset: 0;background: radial-gradient(circle at right top, rgba(0,0,0,0) 0%, #000 100%);}
/* INFO: title */
section.title{background: var(--color-gradient-black);padding: var(--padding-lg) 0;display: flex;align-items: center;}
/*
    ---------------------------
    # IMPORTANT: html
    ---------------------------
*/
address{font-size: var(--body-font-size-sm);background-color: var(--color-white);color: var(--color-black-light);padding: var(--padding);border-radius: var(--border-radius);box-shadow: var(--shadow);display: inline-flex;gap: var(--gap-xs);flex-direction: column;}
address > .name{font-weight: var(--body-font-weight-strong);font-size: var(--body-font-size);margin-bottom: var(--gap-sm);color: var(--color-black);}
address > .address_first_line{font-weight: var(--body-font-weight-bold);}
address > .address{font-weight: var(--body-font-weight-light);font-size: var(--body-font-size-xs);}
address > .country{margin-top: var(--gap-sm);font: var(--button-font);font-size: var(--button-font-size-sm);text-transform: uppercase;letter-spacing: 1px;font-weight: var(--body-font-weight-light);color: var(--color-black-lightness);}
/*
    ---------------------------
    # IMPORTANT: elements
    ---------------------------
*/
.card-place-logo{-webkit-transition: var(--transition-all);transition: var(--transition-all);}
.card-place-logo picture{aspect-ratio: 1.6;background-color: var(--color-background-light);-webkit-border-radius: calc(var(--border-radius) + 1px);border-radius: calc(var(--border-radius) + 1px);outline: 1px solid var(--color-background);outline-offset: -1px;display: flex;align-items: center;justify-content: center;-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);-webkit-transition: var(--transition-fast-all);transition: var(--transition-fast-all);}
.card-place-logo:hover {-webkit-transform: translateY(calc(0px - var(--gap-xs)));transform: translateY(calc(0px - var(--gap-xs)));}
.card-place-logo:hover picture{-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);outline-width: 2px;outline-offset: -2px;outline-color: var(--color-alternative);}
.card-place-logo picture > img{width: 100%;height: 100%;object-fit: contain;padding: 10%;}
.card-place-logo picture > .name{font: var(--h-font);font-size: var(--h-font-size-xs);color: var(--color-black-lightness);-webkit-transition: var(--transition-all);transition: var(--transition-all);}
.card-place-logo:hover picture > .name{color: var(--color-alternative);}

/* OK: .event-upcoming-sessions */

.card-frontend-event > .poster{display: block;aspect-ratio: .75;background-color: var(--color-background-darkness);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);background: var(--color-gradient);color: var(--color-white);position: relative;-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);-webkit-transition: var(--transition-fast-all);transition: var(--transition-fast-all);overflow: hidden;}
.card-frontend-event > .poster:is(:hover, :focus){-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);-webkit-transform: translateY(calc(0px - var(--gap-sm)));transform: translateY(calc(0px - var(--gap-sm)));}
.card-frontend-event > .poster > .info{position: absolute;bottom: 0;left: 0;right: 0;padding: var(--padding);display: flex;flex-direction: column;gap: var(--gap-sm);-webkit-transition: var(--transition-fast-all);transition: var(--transition-fast-all);}
.card-frontend-event > .poster:is(:hover, :focus) > .info{opacity: 0;}
.card-frontend-event > .poster > .info{background-color: var(--color-featured);background: var(--color-gradient);display: flex;flex-direction: column;gap: var(--gap);}
.card-frontend-event > .poster > .info > .title{font: var(--h-font);font-size: var(--body-font-size-lg);}
.card-frontend-event > .poster > .info > .time{font:var(--button-font);font-size: var(--button-font-size-sm);text-transform: uppercase;letter-spacing: 1px;font-weight: var(--button-font-weight-light);}
.card-frontend-event > .poster > picture{position: absolute;inset: 0;-webkit-transition: var(--transition-fast-all);transition: var(--transition-fast-all);}
.card-frontend-event > .poster > picture > img{width: 100%;height: 100%;object-fit: cover;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
.card-frontend-event > .poster:is(:hover, :focus) > picture{opacity: .5;padding: var(--gap-sm);filter:contrast(1.5);}

/* OK: .event-upcoming-sessions */
.event-upcoming-sessions > .items{display: flex;flex-direction: column;gap: var(--gap);}
.event-upcoming-sessions > .items > .item {padding: var(--padding);outline: 1px solid transparent;outline-offset: -1px;background-color: var(--color-background);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-transition: outline-color var(--transition);transition: outline-color var(--transition);}
.event-upcoming-sessions > .items > .item:hover {outline-color: var(--color-background-darkness);}
.event-upcoming-sessions > .items > .item > .info {display: flex;flex-direction:column;gap: var(--gap);}
.event-upcoming-sessions > .items > .item > .info + *{margin-top: var(--gap-lg);}
.event-upcoming-sessions > .items > .item > .info > .name{font: var(--h-font);font-size: var(--h-font-size-xs);color: var(--color-black);}
.event-upcoming-sessions > .items > .item > .info > .description{font-size: var(--body-font-size-xs);color: var(--color-black-light);}
.event-upcoming-sessions > .items > .item > .info > .start_date{color: var(--color-black-lightness);display: flex;align-items: center;gap: var(--gap);font: var(--button-font);font-size: var(--button-font-size-xs);letter-spacing: 1px;text-transform: uppercase;}
.event-upcoming-sessions > .items > .item > .info > .start_date > [class^="material"]{font-size:16px;}


/*
    ---------------------------
    # IMPORTANT: sections
    ---------------------------
*/
/* INFO: section#login */
section#login{
    display: flex;
    align-items: center;
    padding: var(--gap-xl)  0;
    min-height: calc(100vh - var(--header-height));
}
/* INFO: section#event-summary */
section#event-summary > [class^="package"]{display: flex;align-items: stretch;gap: var(--padding-xl);justify-content: space-between;}
section#event-summary > [class^="package"] > .info{width: 55%;display: flex;flex-direction: column;gap: var(--gap-lg);}
section#event-summary > [class^="package"] > .sidebar{width: calc(45% - var(--padding-xl));}
section#event-summary > [class^="package"] > .sidebar > .sessions{position: sticky;top: calc(var(--header-height) + var(--gap-xl));}
@media only screen and (max-width: 1024px){
    section#event-summary > [class^="package"]{flex-direction: column;gap: var(--gap-xl);}
    section#event-summary > [class^="package"] > .info, section#event-summary > [class^="package"] > .sidebar{width: 100%;}
    section#event-summary > [class^="package"] > .info{order: 2;}
}
/* OK: section#event-summary */
section#session-summary > [class^="package"]{display: flex;align-items: stretch;gap: var(--padding-xl);justify-content: space-between;}
section#session-summary > [class^="package"] > .info{width: calc(45% - var(--padding-xl));display: flex;flex-direction: column;gap: var(--gap-lg);}
section#session-summary > [class^="package"] > .sidebar{width: 55%;display: flex;flex-direction: column;gap: var(--gap-lg);}
@media only screen and (max-width: 1024px){
    section#session-summary > [class^="package"]{flex-direction: column;gap: var(--gap-xl);}
    section#session-summary > [class^="package"] > .info, section#session-summary > [class^="package"] > .sidebar{width: 100%;}
    section#session-summary > [class^="package"] > .info{order: 2;}
}
/* OK: section#event-summary */
section#event-title {overflow:hidden;position: relative;padding: var(--padding-xl) 0;display: flex;align-items: center;background: var(--color-gradient);color: var(--color-white);}
section#event-title.has-background{min-height: 40vh;}
section#event-title > [class^="package"]{display: flex;align-items: flex-start;justify-content: flex-start;gap: var(--gap-xl);}
section#event-title > [class^="package"] > [class^="poster"]{/*aspect-ratio: 0.75;*/width: 240px;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);overflow: hidden;padding: var(--padding-xs);background: var(--color-gradient);}
section#event-title > [class^="package"] > .info{--max-clamp: 3;display: flex;flex-direction: column;gap: var(--gap-lg);}
section#event-title > [class^="package"] > [class^="poster"] + .info{width: calc(100% - 240px);}
section#event-title [class^="poster"] > img{width: 100%;height: 100%;object-fit: cover; -webkit-border-radius: var(--border-radius); border-radius: var(--border-radius);}
section#event-title .background{opacity: .15;mix-blend-mode: multiply;-webkit-filter: contrast(1) grayscale(1);filter: contrast(1) grayscale(1);}

section#event-title .holder-calltoaction{display: flex;}
section#event-title .holder-calltoaction > .calltoaction{display: flex;gap: var(--gap);align-items: center;background-color: var(--color-featured-lightness);color: var(--color-white);font: var(--h-font);font-size: var(--h-font-size-xs);padding: var(--padding-sm) var(--padding);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);white-space: nowrap;}
section#event-title .holder-calltoaction > .calltoaction > [class^="material"]{font-size: var(--h-font-size);}

@media only screen and (max-width: 1366px){
    section#event-title > [class^="package"] > [class^="poster"]{width: 220px;}
}
@media only screen and (max-width: 1024px){
    section#event-title > [class^="package"] > [class^="poster"]{width: 200px}
    section#event-title .holder-calltoaction > .calltoaction{white-space:normal;}
}
@media only screen and (max-width: 768px){
    section#event-title > [class^="package"] > [class^="poster"]{width: min(50%, 200px);}
    section#event-title > [class^="package"]{flex-direction: column;align-items: flex-start;gap: var(--gap-lg);}
    section#event-title > [class^="package"]  > [class^="poster"] + .info{width: 100%;}
    
}

/* section.order-callback */
section.order-callback {padding: var(--padding-xl) 0;display: flex;align-items: center;justify-content: center;min-height: 50vh;}
section.order-callback > [class^="package"]{display: flex;flex-direction: column;gap: var(--gap-xl);}
.callback{--outline-widht: 3px;padding: var(--padding-lg);background-color: var(--color-white);-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);display: flex;align-items: center;gap: var(--gap-xl);-webkit-box-shadow: var(--shadow-dark);    box-shadow: var(--shadow-dark); outline: var(--outline-widht) solid var(--color-featured-light);outline-offset: calc(0px - var(--outline-widht));-webkit-border-radius: calc(var(--border-radius) + var(--outline-widht));border-radius: calc(var(--border-radius) + var(--outline-widht));}
.callback > [class^="material"]{flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;width: 100px;height: 100px;-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);font-size: 40px;-webkit-border-radius: 50%;border-radius: 50%;color: var(--color-white);background-color: var(--color-featured);}
@media only screen and (max-width: 1366px){
    .callback{gap: var(--gap-lg);}
    .callback > [class^="material"]{width: 80px;height: 80px;font-size: 36px;}
}
@media only screen and (max-width: 1024px){
    .callback{--outline-widht: 2px;}
}
@media only screen and (max-width: 768px){
    .callback{flex-direction: column;align-items: flex-start;}
    .callback > [class^="material"]{width: 72px;height: 72px;font-size: 32px;}
}

/* INFO: section place-title-frontend */
.place-title-frontend{padding: calc(var(--padding-xl) * 2) 0;background: var(--color-featured);-webkit-box-shadow: var(--shadow);box-shadow: var(--shadow);}
.place-title-frontend.no-background{padding: var(--padding-xl) 0;}
.place-title-frontend.has-background {min-height: 30vh;display: flex;align-items: center;justify-content: center;}
.place-title-frontend > .background{left: 30%;}
.place-title-frontend > .background::after{content: " ";position: absolute;inset: 0;display: block;background: -webkit-linear-gradient(90deg, var(--color-featured) 0%, rgba(0,0,0,0) 100%);background: linear-gradient(90deg, var(--color-featured) 0%, rgba(0,0,0,0) 100%);}
.place-title-frontend .package{display: flex;flex-direction: column;gap: var(--gap-lg)}
.place-title-frontend.has-background .package{padding-right: 40%;}
.place-title-frontend .package > picture{width: 250px;aspect-ratio: 1.6; background-color: var(--color-white); padding: var(--padding-sm);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);-webkit-box-shadow: var(--shadow-dark);box-shadow: var(--shadow-dark);}
.place-title-frontend .package > picture > img{width: 100%;height: 100%;object-fit: contain;}
.place-title-frontend .package > picture + [class^="heading"] > .title{display: none;}
@media only screen and (max-width: 1024px){
    .place-title-frontend .package{gap: var(--gap);}
    .place-title-frontend.has-background{padding-top: 15vh;}
    .place-title-frontend.has-background .package{padding: 0;}
    .place-title-frontend > .background{left: 0;bottom: auto;height: 20vh;}
    .place-title-frontend > .background::after{background: -webkit-linear-gradient(to top, var(--color-featured) 0%, rgba(0,0,0,.5) 100%);background: linear-gradient(to top, var(--color-featured) 0%, rgba(0,0,0,.5) 100%);}
    .place-title-frontend .package > picture{width: min(75%, 150px);}
}
/*
.guests-lists {display: flex;flex-direction: column;gap: var(--gap-sm);}
.guests-lists > .item {padding: var(--padding-sm);outline: 1px solid var(--color-background-darkness);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);display: flex;flex-direction: column;gap: var(--gap);}
.guests-lists > .item > .info{flex-grow: 1;display: flex;flex-direction: column;gap: var(--gap);}
.guests-lists > .item > .info > .name{font: var(--h-font);font-size: var(--h-font-size-xs);}
*/

.helper-frontend-title {
    padding: var(--padding-xl) 0;
    background-color: var(--color-background-lightness);
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}