/* KINEMA Films — base theme.
   Written for kinema.gr to replace the hosted builder's theme files.
   Colours, fonts and sizes come from site-vars.css (the site's own settings). */

/* ---------- derived sizes ---------- */
:root{
  --baseFontSize:62.5%;
  --baseLineHeight:var(--copy-line-height);
  --lh:calc(1em * var(--copy-line-height));
  --menuFontSize:calc(1rem * var(--menuFontSizeMultiplier));
  --headingsFontSize:calc(1rem * var(--headingsFontSizeMultiplier));
  --subHeadingsFontSize:calc(1rem * var(--subHeadingsFontSizeMultiplier));
  --listHeadingsFontSize:calc(1rem * var(--listHeadingsFontSizeMultiplier));
  --copyFontSize:calc(1rem * var(--copyFontSizeMultiplier));
  --footerFontSize:1.1rem;
  --grid-gutter-computed:calc(1rem * var(--grid-gutter) / 10);
  --spotlight-gap:calc(1rem * var(--homepage_spotlight-gutter) / 10);
  --outset:32px;
  --editor-gap:24px;
  --fab-h1:32px;--fab-h2:24px;--fab-h3:20px;--fab-h4:16px;
}

/* ---------- reset ---------- */
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}
html{font-size:var(--baseFontSize);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{margin:0;font-variant-ligatures:none;background-color:var(--bodyBackground);color:var(--textColor);
  font-family:var(--baseFontFamily);font-weight:var(--copy-font-weight);font-style:var(--copy-font-style);
  line-height:var(--baseLineHeight);text-transform:var(--copy-text-transform);letter-spacing:var(--copy-letter-spacing)}
a{color:var(--linkColor);background:transparent;text-decoration:none;outline:0}
a:hover{color:var(--linkColorHover)}
b,strong{font-weight:700}
em{font-style:italic}
img{border:0;display:inline-block;max-width:100%;height:auto;vertical-align:bottom}
video{max-width:100%}
svg:not(:root){overflow:hidden}
hr{box-sizing:content-box;height:0;margin:var(--lh) 0;border:0;border-bottom:1px solid var(--textColor)}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
textarea{overflow:auto;vertical-align:top}
button,select{text-transform:none}
button,input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:button;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
p{margin:0 0 var(--lh)}
ol,ul{padding:0;margin:0 0 var(--lh) var(--lh)}
li{line-height:var(--baseLineHeight)}
h1,h2,h3,h4,h5,h6,.title{font-family:var(--headingsFontFamily);font-weight:var(--headingsFontWeight);line-height:var(--titles-line-height);
  color:var(--headingsColor);text-rendering:optimizeLegibility;text-transform:var(--titles-text-transform);
  letter-spacing:var(--titles-letter-spacing);font-style:var(--titles-font-style)}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.title a{color:var(--headingsColor)}
h1,h2,h3{font-size:var(--headingsFontSize);margin-top:0}
.clearfix::before,.clearfix::after{content:"";display:table;line-height:0}
.clearfix::after{clear:both}
.row::after{content:"";display:block;clear:both;height:0;visibility:hidden}

/* ---------- page frame ---------- */
.flex-wrapper{display:flex;flex-direction:column;min-height:100vh}
.page-wrapper{flex:1 1 auto;width:100%;max-width:var(--wrapperWidth);margin:0 auto;padding:0;background-color:var(--contentBackground)}
.container{box-sizing:border-box;padding:0 1.6rem}

/* ---------- header & menu ---------- */
header{padding:32px 0 16px;margin-bottom:16px;text-align:center;background-color:var(--bodyBackground)}
.brand-img{display:var(--site-logo-display);max-width:var(--site-logo-max-width);margin:0 auto 16px;padding:0 16px;line-height:0}
.brand-img img,.brand-img video{max-width:100%;vertical-align:top}
.brand-text{display:var(--site-title-titles-display);margin:0 auto 16px;padding:0 16px}
.brand-title{display:var(--site-title-display)}
.brand-subtitle{display:var(--site-subtitle-display)}
header nav{display:none;padding-top:10px}
header nav ul{list-style:none;margin:0;padding:0 16px}
header nav li{display:block;border-bottom:1px solid var(--menuLinkColor);
  font-family:var(--site-menu-font-family);font-weight:var(--site-menu-font-weight);font-size:var(--menuFontSize);
  font-style:var(--site-menu-font-style);line-height:var(--site-menu-line-height);color:var(--menuLinkColor);
  text-transform:var(--site-menu-text-transform);letter-spacing:var(--site-menu-letter-spacing)}
header nav li:last-child{border-bottom:0}
header nav li a{display:block;padding:10px;color:var(--menuLinkColor)}
.mobile-nav-link{position:relative;width:35px;height:29px;padding:10px;border:0;background:none;outline:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.mobile-nav-link span,.mobile-nav-link span::before,.mobile-nav-link span::after{content:"";position:absolute;top:14px;display:block;width:15px;height:1px;background:var(--menuLinkColor);transition:all .5s ease-in-out}
.mobile-nav-link span::before{top:-4px}
.mobile-nav-link span::after{top:4px}
.mobile-nav-link.active span{background-color:transparent}
.mobile-nav-link.active span::before,.mobile-nav-link.active span::after{top:0}
.mobile-nav-link.active span::before{transform:rotate(45deg)}
.mobile-nav-link.active span::after{transform:rotate(-45deg)}
@media (min-width:640px){
  header nav{display:block!important}
  header nav li{display:inline-block;border:0}
  header nav li a{display:inline;padding:0;margin:11px}
  header nav li a:hover{color:var(--linkColorHover)}
  header nav li.active>a{text-decoration:none;border-bottom:1px solid var(--menuLinkColor)}
  header nav li.active>a:hover{border-bottom-color:var(--linkColorHover)}
  .menu>li:not(:last-child)::after{content:var(--site-menu-divider)}
  .mobile-nav-link{display:none}
  .brand-text{display:var(--site-title-titles-display-lg)}
}

/* ---------- footer ---------- */
.footer-wrapper{max-width:var(--wrapperWidth);margin:0 auto;padding:0;overflow:hidden;background-color:var(--contentBackground)}
.footer-wrapper>div{margin-top:16px;padding:16px 0;text-align:center;font-size:var(--footerFontSize)}

/* ---------- media boxes ---------- */
.placeholder{display:block;width:100%;overflow:hidden}
.placeholder img,.placeholder video{top:0;left:0;width:100%;max-width:100%;height:auto}
.placeholder:not(.ratio-0){position:relative}
.placeholder:not(.ratio-0) img,.placeholder:not(.ratio-0) video{position:absolute;height:100%;object-fit:cover}
.placeholder:not(.ratio-0)::after{content:"";display:block}
.ratio-16\:9::after{padding-top:56.25%}
.embed,.fitframe-wrap{position:relative;height:0;padding-bottom:56.25%;overflow:hidden}
.fitframe-wrap iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:0}
img.lazyload{opacity:0}
img.lazyloaded{opacity:1;transition:opacity .5s ease-in-out}

/* ---------- simple grid ---------- */
.grid-wrap{margin:0 auto;padding:0;font-size:0;letter-spacing:0;overflow:hidden}
.grid{margin:0 calc(var(--grid-gutter-computed) / -2)}
.grid::after{content:"";display:block;clear:both}
.col{position:relative;display:inline-block;vertical-align:top;box-sizing:border-box;min-height:1px;padding:0 calc(var(--grid-gutter-computed) / 2) 1.6rem}
.project-details-page .col,.rollovers-enabled .col{padding-bottom:var(--grid-gutter-computed)}
.col-xs-1 .col{width:100%}
@media (min-width:667px){.col-sm-2 .col{width:50%}}
@media (min-width:992px){.col-md-3 .col{width:33.3333%}}

/* ---------- home: spotlight grid ---------- */
.spotlight-grid{display:grid;width:100%}
.tpl-homepage-spotlight .spotlight-grid{gap:var(--spotlight-gap)}
.spotlight-grid .col{padding:0}
.spotlight-grid .thumbnail{position:absolute;inset:0}
.spotlight-grid .thumbnail .placeholder{position:static}
@media (hover:none){
  .spotlight-grid .col-spotlight .thumbnail{position:static}
  .spotlight-grid .col-spotlight .thumbnail .placeholder{position:relative}
  .spotlight-grid .col-spotlight::after{content:none!important}
}
@media (min-width:667px) and (max-width:991px){
  .spotlight-grid{grid-template-columns:1fr 1fr}
  .spotlight-grid>.col:nth-child(3n+1){grid-column:span 2}
}
@media (min-width:992px){
  .spotlight-grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto}
  .spotlight-grid>.col:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
  .spotlight-grid>.col:nth-child(6n+5){grid-column:2 / span 2;grid-row:span 2}
}

/* ---------- thumbnails & hover titles ---------- */
.thumbnail{position:relative;display:block;line-height:var(--baseLineHeight)}
.project-thumbnail{text-align:center}
.thumbnail-titles{margin:1.6rem 0}
.thumbnail-titles :is(h1,h2,h3,h4,h5,h6){margin:0;font-family:var(--thumbnail-titles-family);font-weight:var(--thumbnail-titles-weight);
  font-size:var(--listHeadingsFontSize);font-style:var(--thumbnail-titles-font-style);line-height:var(--thumbnail-titles-line-height);
  color:var(--thumbnail-titles-color);text-transform:var(--thumbnail-titles-text-transform);letter-spacing:var(--thumbnail-titles-letter-spacing)}
@media (hover:hover){
  .rollovers-enabled a.thumbnail .thumbnail-titles{position:absolute;inset:calc(1px * var(--overlay-inset));margin:0;padding:1.6rem;font-size:0;opacity:0;transition:opacity .25s ease-in-out}
  .rollovers-enabled a.thumbnail .thumbnail-titles h4{color:var(--overlay-text-color);font-size:var(--listHeadingsFontSize)}
  .rollovers-enabled a.thumbnail .thumbnail-titles::before{content:"";display:inline-block;height:100%;vertical-align:middle}
  .rollovers-enabled a.thumbnail .thumbnail-titles::after{content:"";position:absolute;inset:0;background:var(--overlay-bg);opacity:var(--overlay-opacity)}
  .rollovers-enabled a.thumbnail .thumbnail-titles>div{position:relative;z-index:1;display:inline-block;vertical-align:middle;opacity:0;
    transform:translate3d(0,1rem,0);transition:transform 250ms ease-in-out,opacity 250ms ease-in-out 150ms}
  .rollovers-enabled a.thumbnail:hover .thumbnail-titles{opacity:1}
  .rollovers-enabled a.thumbnail:hover .thumbnail-titles>div{opacity:1;transform:translate3d(0,0,0)}
}

/* ---------- pages & editor content ---------- */
.page-details .page-content{font-size:var(--copyFontSize)}
.editor-content{container-type:inline-size;container-name:editor}
.editor-content figure{margin:var(--lh) auto;font-size:var(--copyFontSize)}
.editor-content>figure:first-child{margin-top:0}
.editor-content>figure:last-child{margin-bottom:0}
.editor-content img{height:auto!important}
.wrap-center{text-align:center}
.wrap-center img{margin-left:auto;margin-right:auto}
.float-left{float:left;margin:0 1em 1em 0}
.float-right{float:right;margin:0 0 1em 1em}
.outset-left{width:calc(100% + var(--outset));max-width:calc(100% + var(--outset));transform:translateX(calc(var(--outset) * -1)) translateZ(0)}
.outset-right{position:relative;left:calc(var(--outset) * -1);width:calc(100% + var(--outset));max-width:calc(100% + var(--outset));transform:translateX(var(--outset)) translateZ(0)}
.fab-h1{font-size:var(--fab-h1)}.fab-h2{font-size:var(--fab-h2)}.fab-h3{font-size:var(--fab-h3)}.fab-h4{font-size:var(--fab-h4)}
.fab-h1,.fab-h2,.fab-h3,.fab-h4{margin:0}
.fab-h1+*,.fab-h2+*,.fab-h3+*,.fab-h4+*{margin-top:var(--editor-gap)}

/* ---------- project pages ---------- */
.sortable{display:flex;flex:0 0 auto;flex-direction:column;flex-wrap:wrap;width:100%}
.sortable-info,.sortable-media{flex:0 0 auto;width:100%}
.tpl-projectdetails-videolarge .sortable-media{order:var(--projectdetails_videolarge-media-position)}
.tpl-projectdetails-videolarge .project-titles{text-align:var(--projectdetails_videolarge-project-title-align)}
.tpl-projectdetails-videolarge .project-info{margin-top:calc(1.6rem - var(--grid-gutter-computed))}
.project-titles{margin-bottom:calc(var(--titles-line-height) * var(--headingsFontSize))}
.project-titles h1,.project-titles h2{margin:0}
.project-details-page .project-info .project-description{font-size:var(--copyFontSize)}
.project-details-page .project-media .media-item{margin-bottom:16px}

/* ---------- journal posts ---------- */
.post-info{box-sizing:border-box}
.post-info h1,.post-info h3{margin-bottom:0}
.post-info img{height:auto!important}
.post-info .post-date{margin:0 0 1em;font-family:var(--subtitles-family);font-weight:var(--subtitles-weight);font-size:var(--subHeadingsFontSize);
  font-style:var(--subtitles-font-style);line-height:var(--subtitles-line-height);color:var(--subHeadingsColor);
  text-transform:var(--subtitles-text-transform);letter-spacing:var(--subtitles-letter-spacing)}
.post-info .post-content{font-size:var(--copyFontSize);padding-right:16px}
.post-media{margin-bottom:16px}
.tpl-postdetails-stacked .post-info{max-width:none}
.tpl-postdetails-stacked .post-content{padding-right:0}