/* Subpagina's, blogs en formulieren van Stukadoor Gouda. Kleuren en maten uit variables.css */

/* Kopblok van een subpagina */
.pagina-kop{background:var(--groen);color:var(--creme);overflow:hidden}
.pagina-kop .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--s-6);align-items:end;padding-top:var(--s-8)}
.pagina-kop .tekst{padding-bottom:var(--s-8)}
.pagina-kop .label{color:var(--groen-zacht);margin-bottom:var(--s-4)}
.pagina-kop h1{font-size:clamp(2rem,5.6vw,4.4rem);color:var(--creme)}
.pagina-kop .intro{display:flex;gap:var(--s-4);align-items:flex-start;margin-top:var(--s-5);max-width:620px}
.pagina-kop .intro .streep{flex:none;margin-top:9px}
.pagina-kop .intro p{font-size:1.1rem}
.pagina-kop .maatje-kop{align-self:end;display:flex;justify-content:center}
.pagina-kop .maatje-kop img{width:200px}
.kruimel{font-size:.85rem;color:var(--groen-zacht);margin-bottom:var(--s-4)}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}

/* Dienstblokken met foto in De Boog */
.dienst-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s-7);align-items:center;padding:var(--s-7) 0;border-bottom:1px solid var(--lijn)}
.dienst-rij:last-child{border-bottom:0}
.dienst-rij.omgekeerd .boog-foto{order:2}
.boog-foto{border-radius:200px 200px var(--r-lg) var(--r-lg);overflow:hidden;aspect-ratio:4/4.4;background:var(--zand)}
.boog-foto img{width:100%;height:100%;object-fit:cover}
.dienst-rij h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:var(--s-2) 0 var(--s-4)}
.dienst-rij p{color:var(--grijs);margin-bottom:var(--s-3)}
.dienst-rij ul{margin:var(--s-3) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.dienst-rij li{display:flex;gap:var(--s-3);align-items:center;font-weight:700}
.dienst-rij li::before{content:"";flex:none;width:22px;height:8px;border-radius:var(--r-pil);background:var(--terracotta)}

/* Raster met kaarten (projecten, reviews, blogs) */
.raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.raster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.foto-kaart{background:var(--zand);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.sectie-zand .foto-kaart{background:var(--creme)}
.foto-kaart .foto{aspect-ratio:16/11;overflow:hidden;border-radius:999px 999px 0 0;margin:var(--s-4) var(--s-4) 0}
.foto-kaart .foto img{width:100%;height:100%;object-fit:cover}
.foto-kaart .inhoud{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.foto-kaart h3{font-size:1.3rem}
.foto-kaart p{color:var(--grijs);font-size:.96rem}
.foto-kaart .meer{margin-top:auto;padding-top:var(--s-3);font-weight:800;color:var(--terracotta-donker)}
.foto-kaart .datum{font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)}

/* Losse review */
.review-kaart{background:var(--zand);border-radius:var(--r-lg);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.sectie-zand .review-kaart{background:var(--creme)}
.review-kaart .sterren{color:var(--terracotta);letter-spacing:.15em}
.review-kaart p{font-size:1.02rem}
.review-kaart .wie{margin-top:auto;font-weight:800;font-size:.9rem}
.review-kaart .wie span{display:block;font-weight:400;color:var(--grijs)}

/* Keurmerken */
.keurmerken{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap}
.keurmerken img{height:64px;width:auto;background:var(--zand-licht);border-radius:var(--r-md);padding:var(--s-2)}

/* Contactkaart */
.contact-kaart{background:var(--zand);border-radius:var(--r-lg);padding:var(--s-6);display:grid;gap:var(--s-4)}
.contact-kaart h3{font-size:1.5rem}
.contact-kaart .regel{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:baseline}
.contact-kaart .regel b{min-width:90px;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.contact-kaart a{font-weight:800;overflow-wrap:anywhere}

/* Formulier-melding */
.form-status{margin-top:var(--s-3);font-weight:700;display:none}
.form-status.goed{display:block;color:var(--groen)}
.form-status.fout{display:block;color:var(--terracotta-donker)}
.verborgen{position:absolute;left:-9999px}

/* Blogartikel */
.artikel{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-8);align-items:start}
.artikel-tekst{font-size:1.08rem;line-height:1.75;max-width:720px}
.artikel-tekst h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:var(--s-7) 0 var(--s-4)}
.artikel-tekst h3{font-size:1.35rem;margin:var(--s-6) 0 var(--s-3)}
.artikel-tekst p{margin:0 0 var(--s-4)}
.artikel-tekst ul,.artikel-tekst ol{margin:0 0 var(--s-4);padding-left:var(--s-5)}
.artikel-tekst li{margin-bottom:var(--s-2)}
.artikel-tekst a{color:var(--terracotta-donker);font-weight:700}
.artikel-tekst table{width:100%;border-collapse:collapse;margin:0 0 var(--s-5);font-size:.98rem}
.artikel-tekst th,.artikel-tekst td{border-bottom:1px solid var(--lijn);padding:var(--s-2) var(--s-3);text-align:left}
.artikel-foto{border-radius:999px 999px 0 0;overflow:hidden;margin-bottom:var(--s-6);aspect-ratio:16/10}
.artikel-foto img{width:100%;height:100%;object-fit:cover}
.zijbalk{position:sticky;top:var(--s-5);background:var(--groen);color:var(--creme);border-radius:var(--r-lg);padding:var(--s-6);display:grid;gap:var(--s-4);justify-items:start}
.zijbalk img{width:120px;justify-self:center}
.zijbalk h3{font-size:1.5rem}
.zijbalk p{font-size:.98rem}
.bijgewerkt{font-size:.85rem;color:var(--grijs);margin-bottom:var(--s-5)}

/* Sitemap-lijst */
.lijst-links{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.lijst-links a{font-weight:700;text-decoration:none}
.lijst-links a:hover{color:var(--terracotta-donker)}

@media(max-width:980px){
  .raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .artikel{grid-template-columns:minmax(0,1fr)}
  .zijbalk{position:static}
}
@media(max-width:760px){
  .pagina-kop .wrap{grid-template-columns:minmax(0,1fr);padding-top:var(--s-6)}
  .pagina-kop .tekst{padding-bottom:0}
  .pagina-kop .maatje-kop img{width:150px}
  .dienst-rij,.raster,.raster-2{grid-template-columns:minmax(0,1fr)}
  .dienst-rij.omgekeerd .boog-foto{order:0}
  .dienst-rij{gap:var(--s-5)}
}