/*
Theme Name: Mats Dustin Lykkegaard
Theme URI: https://matsdustin.com
Description: Custom child theme for matsdustin.com, built on GeneratePress.
Author: Mats Dustin Lykkegaard
Template: generatepress
Version: 2.10
*/

:root{
  --paper:#FFFFFF;
  --ink:#1A1A1A;
  --muted:#9C9C9C;
  --rule:#E6E6E6;
  --panel:#F5F5F5;
  --fs-base:16px;
}

body.mats-custom{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Vend Sans', sans-serif;
  font-weight:300;
  font-size:var(--fs-base);
  line-height:1.6;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
}

body.mats-custom *{ box-sizing:border-box; }
body.mats-custom a{ color:inherit; text-decoration:none; }

/* layout */
.mats-custom .page{
  display:grid;
  grid-template-columns:22% 78%;
  min-height:100vh;
}

/* sidebar */
.mats-custom .sidebar{
  padding:56px 36px 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:sticky;
  top:0;
  height:100vh;
}

.mats-custom .name{
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.01em;
  line-height:1.35;
  margin:0 0 10px;
}

.mats-custom .role{
  color:var(--muted);
  font-weight:300;
  font-size:var(--fs-base);
  letter-spacing:0.04em;
  line-height:1.8;
  margin-bottom:32px;
}

.mats-custom .nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:var(--fs-base);
  font-weight:400;
  letter-spacing:0.005em;
}

.mats-custom .nav a,
.mats-custom .nav a:hover{
  width:fit-content;
  text-decoration:underline;
  text-underline-offset:3px;
}

.mats-custom .nav a:hover{
  font-weight:700;
}

.mats-custom .sidebar-bottom{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mats-custom .socials{
  display:flex;
  gap:14px;
}

.mats-custom .socials a{
  color:var(--muted);
  transition:color .15s ease;
}
.mats-custom .socials a:hover{ color:var(--ink); }

/* main */
.mats-custom .main{
  padding:56px 56px 80px;
}

.mats-custom .section{
  margin-bottom:32px;
}

.mats-custom .section-label{
  font-style:italic;
  font-weight:300;
  color:var(--ink);
  font-size:var(--fs-base);
  letter-spacing:0.04em;
  margin-bottom:6px;
}

.mats-custom .credit-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:4px 0;
}

.mats-custom .credit-year{
  font-weight:300;
  font-size:var(--fs-base);
  letter-spacing:0.005em;
  color:var(--muted);
  text-decoration:none;
  flex-shrink:0;
}

.mats-custom .credit-row:hover .credit-title{
  font-weight:700;
}

.mats-custom .credit-title{
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.005em;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}

/* static list (Available For) */
.mats-custom .plain-list{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  margin:0;
}
.mats-custom .plain-list li{
  list-style:none;
  padding:4px 0;
  font-weight:400;
  font-size:var(--fs-base);
}

/* contact */
.mats-custom .contact-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mats-custom .contact-list a{
  width:fit-content;
  border-bottom:1px solid var(--ink);
  padding-bottom:1px;
  font-weight:400;
  font-size:var(--fs-base);
  transition:color .15s ease;
}
.mats-custom .contact-list a:hover{
  color:var(--muted);
}

/* flexible sections — anything typed into the chosen Page renders here,
   styled to match the rest of the site automatically */
.mats-custom .flex-sections{
  display:flex;
  flex-direction:column;
}
.mats-custom .flex-sections h1,
.mats-custom .flex-sections h2,
.mats-custom .flex-sections h3,
.mats-custom .flex-sections h4{
  font-style:italic;
  font-weight:300;
  color:var(--ink);
  font-size:var(--fs-base);
  letter-spacing:0.04em;
  margin:32px 0 6px;
}
.mats-custom .flex-sections h1:first-child,
.mats-custom .flex-sections h2:first-child,
.mats-custom .flex-sections h3:first-child,
.mats-custom .flex-sections h4:first-child{
  margin-top:0;
}
.mats-custom .flex-sections p{
  font-weight:400;
  font-size:var(--fs-base);
  margin:0 0 4px;
}
.mats-custom .flex-sections ul,
.mats-custom .flex-sections ol{
  list-style:none;
  margin:0;
  padding:0;
}
.mats-custom .flex-sections ul li,
.mats-custom .flex-sections ol li{
  padding:4px 0;
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.005em;
}
.mats-custom .flex-sections a:not(.credit-row){
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.005em;
  text-decoration:underline;
  text-underline-offset:3px;
}
.mats-custom .flex-sections ul li:hover,
.mats-custom .flex-sections ol li:hover{
  font-weight:700;
}
.mats-custom .flex-sections a:not(.credit-row):hover{
  font-weight:700;
}

/* standalone pages restore natural bullet/number list styling */
.mats-custom .page-body ul{
  list-style:disc;
  padding-left:1.2em;
}
.mats-custom .page-body ol{
  list-style:decimal;
  padding-left:1.2em;
}
.mats-custom .page-body p,
.mats-custom .page-body li{
  text-transform:none;
}
.mats-custom .page-body ul li:hover,
.mats-custom .page-body ol li:hover{
  font-weight:400;
}

/* single project page: content takes 3/5, the last 1/5 stays empty */
.mats-custom .single-columns{
  display:grid;
  grid-template-columns:3fr 1fr;
}

.mats-custom .single-content{
  max-width:780px;
}

/* detail view */
.mats-custom .back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.08em;
  margin-bottom:28px;
  transition:color .15s ease;
}
.mats-custom .back:hover{ color:var(--ink); }

.mats-custom .title-row{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.mats-custom .detail-title{
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.005em;
  text-transform:uppercase;
  margin:0 0 24px;
}

.mats-custom .imdb-badge{
  font-size:var(--fs-base);
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.mats-custom .imdb-badge:hover{
  color:var(--ink);
  border-bottom-color:var(--ink);
}

.mats-custom .imdb-row{
  margin-bottom:16px;
}

.mats-custom .meta-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:24px;
  margin-bottom:20px;
}

.mats-custom .meta-item span{
  display:block;
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.1em;
  text-transform:none;
  color:var(--muted);
  margin-bottom:4px;
}
.mats-custom .meta-item strong{
  font-weight:400;
  font-size:var(--fs-base);
  white-space:nowrap;
}

.mats-custom .description{
  width:100%;
  font-weight:300;
  font-size:var(--fs-base);
  line-height:1.75;
  text-transform:none;
  margin-bottom:32px;
}

/* flexible media area below the text — trailer + photos live here together */
.mats-custom .media-block{
  margin-bottom:32px;
}

.mats-custom .trailer-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  margin-bottom:20px;
  background:var(--panel);
}
.mats-custom .trailer-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.mats-custom .photo-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.mats-custom .photo-grid img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

.mats-custom .detail-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  font-weight:400;
  font-size:var(--fs-base);
  letter-spacing:0.08em;
  color:var(--muted);
}

.mats-custom .detail-nav a{
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .15s ease;
}
.mats-custom .detail-nav a:hover{ color:var(--ink); }

/* tablet — sidebar takes a fixed, more compact width here so the
   project list has enough room for long titles to stay on one line */
@media (min-width: 761px) and (max-width: 1366px){
  .mats-custom .page{ grid-template-columns:180px 1fr; }
}

/* mobile */
@media (max-width: 760px){
  .mats-custom{ --fs-base:12px; }
  .mats-custom .page{ grid-template-columns:1fr; }
  .mats-custom .sidebar{
    position:relative;
    height:auto;
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    border-bottom:1px solid var(--rule);
    padding:28px 24px;
  }
  .mats-custom .sidebar-bottom{ align-items:flex-end; text-align:right; }
  .mats-custom .main{ padding:32px 24px 60px; }
  .mats-custom .single-columns{ grid-template-columns:1fr; gap:32px; }
  .mats-custom .meta-grid{ gap:12px 20px; }
  .mats-custom .photo-grid{ grid-template-columns:1fr; }
}