/* Nistel Brouwerij — shared stylesheet */

:root{
  --brand: #115d78;
  --brand-dark: #0a3d4f;
  --text: #333;
  --muted: #555;
  --bg-overlay: rgba(197, 197, 197, 0.72);
  --card-shadow: 0 10px 28px rgba(0,0,0,0.20);
  --soft-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color:#c5c5c5;
  background-image:url("beer-background.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--text);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--bg-overlay);
  z-index:-1;
}

.container{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 20px;
}

.logo-container{
  margin-bottom:22px;
  background:#fff;
  padding:22px 32px;
  border-radius:10px;
  box-shadow:var(--soft-shadow);
}

.logo{
  width:180px;
  height:auto;
  display:block;
}

.card{
  background:#fff;
  border-radius:12px;
  padding:42px;
  max-width:980px;
  width:100%;
  box-shadow:var(--card-shadow);
}

.hero-title{
  font-size:40px;
  font-weight:800;
  color:var(--brand);
  margin-bottom:12px;
  letter-spacing:-0.4px;
}

.hero-copy{
  color:var(--muted);
  line-height:1.85;
  font-size:16px;
  max-width:820px;
}

.divider{
  height:1px;
  background:#e7e7e7;
  margin:28px 0;
}

.section-title{
  font-size:22px;
  font-weight:700;
  color:var(--brand);
  margin-bottom:12px;
}

.quote{
  background:#f6f6f6;
  border-left:4px solid #6b9bb0;
  padding:16px 18px;
  border-radius:6px;
  color:var(--brand);
  font-style:italic;
  line-height:1.7;
  margin-top:14px;
}

.mt-12{ margin-top:12px; }

/* Page components */
.two-column{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:26px;
  align-items:start;
  margin-top:12px;
}

.team-image{
  width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,0.14);
}

/* "Onze bieren" */
.chapter{
  display:flex;
  gap:26px;
  align-items:flex-start;
  margin-top:10px;
}

.chapter-text{ flex:1; }

.meta{
  list-style:none;
  margin:12px 0 0;
  padding:0;
}

.meta li{
  padding:10px 0 10px 20px;
  position:relative;
  color:var(--muted);
  line-height:1.6;
}

.meta li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#6b9bb0;
  font-size:20px;
  line-height:1;
}

.meta li strong{
  display:block;
  color:var(--text);
  margin-bottom:4px;
}

.label-wrap{
  position:relative;
  flex-shrink:0;
  width:230px;
  background:#fafafa;
  border-radius:12px;
  padding:14px;
  border:1px solid #eee;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  overflow:hidden;
}

.label-wrap img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.15));
}

/* Footer */
footer{
  background:#fff;
  padding:34px 20px;
  margin-top:60px;
}

.footer-content{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:30px;
}

.footer-section h3{
  font-size:16px;
  font-weight:800;
  color:var(--brand);
  margin-bottom:12px;
}

.footer-section a,
.footer-section p{
  color:var(--brand);
  text-decoration:none;
  display:block;
  margin:8px 0;
  line-height:1.6;
}

.footer-section a:hover{
  color:var(--brand-dark);
  text-decoration:underline;
}

@media (max-width:768px){
  .logo{ width:150px; }
  .card{ padding:30px 20px; }
  .hero-title{ font-size:32px; }
  .two-column{ grid-template-columns:1fr; }
  .chapter{ flex-direction:column; align-items:center; }
  .label-wrap{ width:240px; }
}