/* FILE: content.css - PATH: /system/style/content.css */

/* ===== VERHALEN LAYOUT ===== */
.verhalen-layout{
width:100%;
display:flex;
flex-direction:column;
gap:var(--space-xl);
}

/* ===== HERO ===== */
.hero-section{
position:relative;
overflow:hidden;
border-radius:var(--radius-medium);
/* min-height:256px; */
min-height:220px;
background:var(--panel-bg);
box-shadow:var(--panel-shadow);
}

.hero-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to right,
var(--hero-overlay-dark) 0%,
var(--hero-overlay-mid) 42%,
var(--hero-overlay-light) 100%
);
}

.hero-content{
position:relative;
z-index:2;
max-width:540px;
padding:var(--hero-padding-desktop);
color:var(--tekst-licht);
}

.hero-title{
margin:0 0 var(--space-xs);
font-size:var(--font-size-title-hero);
line-height:1;
font-family:var(--font-koppen);
font-weight:600;
color:var(--tekst-licht);
}

.hero-text{
margin:0;
font-size:var(--font-size-hero-text);
line-height:1.42;
white-space:pre-line;
}

/* ===== CONTENT GRID ===== */
.content-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:var(--space-xl);
align-items:start;
}

/* ===== VERHALEN ===== */
.story-list{
position:relative;
min-height:320px;
}

.gallery-list{
display:flex;
gap:10px;
transition:transform 0.45s ease;
will-change:transform;
}

.story-card{
display:grid;
grid-template-columns:300px minmax(0,1fr);
background:var(--panel-bg);
border:var(--panel-border);
border-radius:var(--radius-medium);
overflow:hidden;
box-shadow:var(--panel-shadow);
backdrop-filter:var(--panel-blur);
text-decoration:none;
color:inherit;
transition:
transform var(--transition-medium),
box-shadow var(--transition-medium),
border-color var(--transition-medium);
}

.story-card:hover{
transform:translateY(var(--hover-lift));
border-color:var(--hover-border-color);
box-shadow:var(--hover-shadow);
}

.gallery-card{
flex:0 0 calc((100% - (var(--space-lg) * 2)) / 3 - 10px);

display:grid;
grid-template-rows:auto 1fr;

background:var(--panel-bg);
border:var(--panel-border);
border-radius:var(--radius-medium);
overflow:hidden;
box-shadow:var(--panel-shadow);
backdrop-filter:var(--panel-blur);
text-decoration:none;
color:inherit;

transition:
transform var(--transition-medium),
box-shadow var(--transition-medium),
border-color var(--transition-medium);
}

.gallery-card .story-image{
width:100%;
aspect-ratio:1/1;
height:auto;
object-fit:cover;
display:block;
}

.gallery-card .story-content{
display:flex;
flex-direction:column;
height:100%;
padding:8px 12px;
}

.gallery-card:hover{
transform:translateY(-2px);
box-shadow:var(--hover-shadow);
}

.story-image{
width:100%;
height:100%;
object-fit:cover;
display:block;
min-width:0;
}

.story-content{
padding:
var(--space-lg)
var(--space-content-inline);
color:var(--tekst-inhoud);
min-width:0;
}

.story-date{
margin-bottom:var(--space-sm);
font-size:var(--font-size-xs);
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--groen);
}

.home-greeting{
font-size:var(--font-size-sm);
font-weight:700;
letter-spacing:0.06em;
color:var(--oranje);


text-shadow:
0 2px 6px rgba(0,0,0,0.9),
0 8px 18px rgba(0,0,0,0.80);
}

.story-title{
margin:0 0 var(--space-sm);
font-size:var(--font-size-title-md);
line-height:1.12;
font-family:var(--font-koppen);
font-weight:600;
color:var(--tekst-licht);
}

.story-title .small-text{
font-size:0.5em;
}

.story-intro{
margin:0 0 8px;
line-height:1.4;
font-size:0.95rem;
}

.story-link{
display:inline-flex;
align-items:center;
gap:var(--space-xs);
color:var(--oranje);
text-decoration:none;
font-weight:600;
}

.gallery-card .story-link{
margin-top:auto;
justify-content:center;
padding-top:10px;
}

/*
.gallery-card .action-button{
margin-bottom:4px;
}
*/

.story-link:hover{
color:var(--blauw);
text-decoration:underline;
}

/* ===== CAROUSEL ===== */

.story-carousel{
width:100%;
}


.gallery-viewport{
overflow:hidden;
width:100%;
}

/*
.gallery-viewport{
overflow:visible;
width:100%;
}
*/

.gallery-carousel-nav{
display:flex;
justify-content:center;
align-items:center;
gap:var(--space-sm);
margin-top:var(--space-lg);
width:100%;
}

/* ===== SIDEPANEL ===== */
.sidebar-panels{
display:flex;
flex-direction:column;
gap:var(--space-lg);
}

.info-panel{
padding:var(--space-lg);
color:var(--tekst-inhoud);
}

.info-panel h2{
margin:0 0 var(--space-sm);
font-size:var(--font-size-title-sm);
font-family:var(--font-koppen);
font-weight:600;
color:var(--tekst-licht);
}

.info-panel p,
.info-panel li{
line-height:1.7;
white-space:pre-line;
}

.info-panel ul{
margin:0;
padding-left:1.1rem;
}

/* ===== VERHAAL PAGINA ===== */
.story-page{
background:var(--panel-bg);
border:var(--panel-border);
border-radius:var(--radius-medium);
padding:
var(--space-2xl)
var(--space-2xl)
var(--space-lg);
color:var(--tekst-inhoud);
box-shadow:var(--panel-shadow);
backdrop-filter:var(--panel-blur);
line-height:1.8;
font-size:var(--font-size-body-lg);
}

.story-page h1{
margin-top:0;
font-size:var(--font-size-title-xl);
line-height:1.03;
font-family:var(--font-koppen);
font-weight:600;
color:var(--tekst-licht);
}

.story-page img{
width:100%;
height:auto;
display:block;
border-radius:var(--radius-medium);
margin:var(--space-xl) 0;
}

.story-back{
display:inline-flex;
align-items:center;
gap:var(--space-xs);
margin-top:var(--space-xl);
color:var(--oranje);
text-decoration:none;
font-weight:600;
}

.story-back:hover{
color:var(--blauw);
text-decoration:underline;
}

/* ===== FORMULIEREN ===== */
.contact-wrapper{
position:relative;
overflow:hidden;
border-radius:var(--radius-medium);
}

.contact-form{
position:relative;
z-index:1;
max-width:700px;
margin:0 auto;
padding:var(--space-xl);
background:var(--panel-bg);
border:var(--panel-border);
border-radius:var(--radius-medium);
backdrop-filter:var(--panel-blur);
box-shadow:var(--panel-shadow);
}

.contact-form h1{
margin-top:0;
font-size:var(--font-size-form-title);
font-family:var(--font-koppen);
color:var(--tekst-licht);
}

.contact-form label{
display:block;
margin-bottom:var(--space-xs);
font-weight:600;
color:var(--tekst-inhoud);
}

.contact-form input,
.contact-form textarea{
width:100%;
background:var(--overlay-input-bg);
color:var(--tekst-licht);
border:1px solid var(--overlay-border);
border-radius:var(--radius-small);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-fast);
}

.contact-form input:focus,
.contact-form textarea:focus{
background:var(--overlay-input-bg-focus);
border-color:var(--blauw);
box-shadow:var(--focus-ring);
}

.contact-form textarea{
min-height:160px;
resize:vertical;
}

.contact-form ::placeholder{
color:var(--overlay-placeholder);
}

.form-group{
margin-bottom:var(--space-lg);
}

/* ===== HONEYPOT ===== */
.honeypot-field{
position:absolute;
left:-9999px;
}

/* ===== GATEKEEPER ===== */
.gatekeeper-form{
max-width:520px;
margin:0 auto;
padding:var(--space-2xl);
background:rgba(20,20,20,0.78);
border:1px solid rgba(65,170,45,0.18);
border-radius:18px;
backdrop-filter:blur(6px);
box-shadow:
0 8px 24px rgba(0,0,0,0.28),
0 0 0 1px rgba(65,170,45,0.04);
}

.gatekeeper-form h1{
margin-top:0;
font-size:var(--font-size-title-xl);
font-family:var(--font-koppen);
color:var(--tekst-licht);
text-align:center;
}

.gatekeeper-form label{
display:block;
margin-bottom:var(--space-sm);
font-weight:600;
text-align:center;
color:var(--tekst-inhoud);
}

.gatekeeper-form input{
max-width:260px;
margin:0 auto;
text-align:center;
background:var(--overlay-input-bg);
color:var(--tekst-licht);
border:1px solid var(--overlay-border);
border-radius:10px;
}

.gatekeeper-form input:focus{
border-color:var(--blauw);
box-shadow:var(--focus-ring);
}

#melding{
visibility:hidden;
color:#ff6b6b;
margin-top:var(--space-md);
margin-bottom:var(--space-md);
min-height:1.2em;
text-align:center;
}

#melding.visible{
visibility:visible;
animation:flicker 1.8s ease-in-out infinite;
}

@keyframes flicker{
0%,100%{
opacity:1;
}

50%{
opacity:0.6;
}}

@media (max-width:768px){
.gatekeeper-form{
padding:var(--space-mobile-lg);
}

.gatekeeper-form h1{
font-size:var(--font-size-mobile-title-xl);
}}

/* ===== PAGINA TELLER ===== */
.page-counter{
margin:0;
text-align:center;
font-size:var(--font-size-xs);
line-height:1.2;
color:var(--oranje);
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
.content-grid{
grid-template-columns:1fr;
}

.story-card{
grid-template-columns:1fr;
}

.story-image{
height:220px;
}}

@media (max-width:768px){
.hero-section{
min-height:208px;
}

.hero-content{
padding:var(--hero-padding-mobile);
}

.hero-title{
font-size:var(--font-size-mobile-title-hero);
}

.hero-text{
font-size:var(--font-size-body);
}

.story-content{
padding:var(--space-mobile-md);
}

.story-title{
font-size:var(--font-size-title-sm);
}

.story-page{
padding:var(--space-mobile-lg);
font-size:var(--font-size-body);
}

.story-page h1{
font-size:var(--font-size-mobile-title-xl);
}

.contact-form{
padding:var(--space-mobile-md);
}

.contact-form h1{
font-size:var(--font-size-mobile-form-title);
}}

@media (max-width:980px){

.gallery-card{
flex:0 0 calc((100% - var(--space-lg)) / 2);
}

}

@media (max-width:768px){

.gallery-card{
flex:0 0 100%;
}

}