/* =====================
   INDEX — PAGE OVERRIDES
   ===================== */

/* HERO */

#hero{
min-height:0;
text-align:center;
align-items:center;
padding:100px 60px 80px;
margin-bottom:0;
border-radius:10px 10px 0 0;
}

#hero .placeholder-content{
text-align:center;
max-width:none;
padding:0;
}

#hero .placeholder-content h1{
font-size:136px;
letter-spacing:3px;
line-height:0.95;
margin:0 0 32px;
}

/* EMIL — orange block like the logo */

.hero-name{
background:var(--accent);
color:#fff;
padding:14px 13px 0px;
border-radius:8px;
display:inline-block;
font-style:normal;
line-height:0.82;
}

#hero .placeholder-content p{
color:var(--text-muted);
margin:0 auto 40px;
max-width:460px;
}

/* ABOUT */

#about{
min-height:0;
align-items:center;
padding:56px 60px 64px;
margin-top:0;
border-radius:0 0 10px 10px;
border-top:1px solid var(--border);
}

#about .placeholder-content{
text-align:center;
max-width:640px;
padding:0;
}

#about .placeholder-content h2{
font-size:48px;
margin:0 0 16px;
color:var(--accent-2);
}

#about .placeholder-content p{
margin:0;
color:var(--text-muted);
max-width:520px;
line-height:1.8;
}

/* CAROUSEL */

#work-teaser{
margin:0 24px 24px;
background:var(--surface);
border-radius:10px;
padding:32px;
}

.carousel{
position:relative;
}

.carousel-window{
overflow:hidden;
border-radius:10px;
}

.carousel-track{
display:flex;
gap:12px;
transition:transform 0.4s ease;
}

.carousel-slide{
flex:0 0 calc(50% - 6px);
text-decoration:none;
color:inherit;
display:block;
flex-shrink:0;
}

.carousel-slide .carousel-img-placeholder{
width:100%;
aspect-ratio:16/9;
background:var(--surface-2);
display:block;
border-radius:10px;
}

.carousel-slide-title{
margin-top:16px;
border-top:2px solid var(--accent);
padding-top:12px;
font-family:'Bebas Neue', sans-serif;
font-weight:400;
font-size:32px;
text-transform:uppercase;
letter-spacing:1px;
color:var(--accent);
text-align:center;
}

.carousel-btn{
position:absolute;
transform:translateY(-50%);
z-index:10;
width:40px;
height:40px;
border:1.5px solid var(--border-mid);
border-radius:4px;
background:var(--surface);
font-size:16px;
cursor:pointer;
color:var(--text-sub);
display:flex;
align-items:center;
justify-content:center;
transition:background 0.2s, border-color 0.2s, color 0.2s;
}

.carousel-btn:hover{
background:var(--accent);
border-color:var(--accent);
color:#fff;
}

.carousel-prev{ left:8px; }
.carousel-next{ right:8px; }

/* MOBILE */
@media(max-width:700px){
  #hero{ padding:56px 24px 48px; }
  #hero .placeholder-content h1{ font-size:72px; }
  #about{ padding:40px 24px 48px; }
  #work-teaser{ padding:20px; }
  .carousel-slide{ flex:0 0 100%; }
}