/* =========================
   JW GRID
========================= */

.story-grid {

max-width: 1100px;
margin: 40px auto 80px auto;

display: grid;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
gap: 25px;

padding: 0 20px;

}


/* =========================
   JW CARDS
========================= */

.story-card {

position: relative;
display: block;

overflow: hidden;

border-radius: 8px;

background: #111;

box-shadow: 0 15px 40px rgba(0,0,0,0.7);

transition: transform 0.35s ease, box-shadow 0.35s ease;

}


.story-card img {

width: 100%;
height: 100%;

object-fit: cover;

opacity: 0.85;

transition: transform 0.5s ease, opacity 0.4s ease;

}


.story-card:hover img {

transform: scale(1.06);
opacity: 1;

}


.story-card:hover {

transform: translateY(-6px);

box-shadow: 0 25px 70px rgba(0,0,0,0.85);

}


/* =========================
   TITEL OVERLAY
========================= */

.story-title {

position: absolute;

bottom: 0;
left: 0;

width: 100%;

padding: 18px 20px;

background: linear-gradient(
to top,
rgba(0,0,0,0.85),
rgba(0,0,0,0)
);

font-family: 'Roboto Slab', serif;

font-size: 18px;
color: white;

letter-spacing: 0.5px;

}

/* =========================
   POLAROID BOARD
========================= */

.polaroid-board {

max-width: 1000px;
margin: 60px auto 100px auto;

position: relative;
z-index: 1;

display: flex;
flex-wrap: wrap;
justify-content: center;

align-items: flex-start; 

gap: 40px;

padding: 20px;


}

.polaroid-board::before {

content: "";

position: absolute;

bottom: -40px;
left: 50%;

transform: translateX(-50%);

width: 80%;
height: 90px;

background: radial-gradient(
ellipse,
rgba(0,0,0,0.45) 0%,
rgba(0,0,0,0.25) 40%,
rgba(0,0,0,0) 70%
);

filter: blur(20px);

pointer-events: none;

z-index: 0;

}


/* =========================
   POLAROID
========================= */

.polaroid {

background: white;

padding: 10px;

border-radius: 3px;

box-shadow: 
0 12px 25px rgba(0,0,0,0.6),
0 2px 6px rgba(0,0,0,0.4);

width: 240px;

text-align: center;

text-decoration: none;
color: #222;

position: relative;

transition: transform 0.35s ease, box-shadow 0.35s ease;

}


.polaroid img {

width: 100%;
height: auto;

display: block;

border-radius: 2px;

}


/* =========================
   ONDERSCHRIFT
========================= */

.polaroid span {

display: block;

margin: 12px 0 6px 0;

font-family: 'Roboto Slab', serif;
font-size: 16px;

color: #111;

}

/* =========================
   WILLEKEURIGE ROTATIE
========================= */

.p1 {
transform: rotate(-6deg);
}

.p2 {
transform: rotate(5deg);
}

.p3 {
transform: rotate(-3deg);
}

.p4 {
transform: rotate(7deg);
}


/* =========================
   HOVER EFFECT
========================= */

.polaroid:hover {

transform: rotate(0deg) scale(1.08);

box-shadow:
0 25px 60px rgba(0,0,0,0.9),
0 4px 12px rgba(0,0,0,0.6);

z-index: 10;

}