/* Homepage (index.html) */

.stripe{background:var(--lime);color:#222B1F;font-weight:700;font-size:1rem;padding:.6rem 1.25rem;letter-spacing:.04em}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.15fr;min-height:92vh;background:url(../beeld/gradient-1.jpg) center/cover no-repeat,#F3EBDD;color:#222B1F}
.hero-photo{clip-path:polygon(0 0,100% 0,78% 100%,0 100%);min-height:320px}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.hero-body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1.5rem 3rem 0}
.logo{display:block;width:min(100%,520px);height:auto}
.hero-cta{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* welkom */
.welkom-bg{background:url(../beeld/gradient-1.jpg) center/cover no-repeat,#F3EBDD;color:#222B1F}
.welkom{padding:5rem 1.25rem 3rem}
.welkom h1{font:400 25pt/1.2 'Titan One','Arial Black',Impact,sans-serif;font-stretch:normal;margin-bottom:1.5rem}
.cols{display:block}
.cols p{margin:0 0 1rem;max-width:none}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,40px);margin-top:3rem}
.pics figure{margin:0;position:relative}
.pics img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* klikbare foto in hetzelfde fotokader als op de landingspagina's (dikke rand, ronde hoeken,
   smalle harde schaduw); label even groot en op dezelfde plek als de ingebakken labels */
.pic-link{display:block;position:relative;container-type:inline-size;text-decoration:none;border:5px solid #222B1F;border-radius:clamp(24px,3.2vw,46px);overflow:hidden;box-shadow:5px 6px 0 #222B1F}
.pic-link img{object-position:50% 0}
.pic-label{position:absolute;left:7%;bottom:7.9%;width:26%;height:13.7%;display:flex;align-items:center;padding-left:4.6%;background:var(--lime);color:#222B1F;font:700 3.6cqw/1 var(--body);transition:transform .15s}
.pic-link:hover .pic-label{transform:translateY(-2px) rotate(-1deg)}

/* boeken */
.book .lead{max-width:52ch;margin:0 0 1rem}

/* cactuswinkel */
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem}
.item{display:flex;flex-direction:column;padding:0;overflow:hidden}
.item img{width:calc(100% - 2.4rem);height:190px;margin:1.2rem 1.2rem 0;object-fit:cover;border:3px solid #222B1F;border-radius:16px 4px 16px 4px;background:#fff}
.item .t{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.item em{font-size:1.1rem}
.item .meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.6rem}
.item .meta b{font-size:1.2rem}
.item .btn{padding:.55rem 1rem;font-size:.95rem}
.item .btn.in{background:var(--lime)}
.cta-row{display:flex;justify-content:center;margin-top:2.2rem}

footer p{margin:.5rem 0 0}

@media (max-width:820px){
.hero{grid-template-columns:1fr}.hero-photo{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);min-height:240px;max-height:300px}
.hero-body{padding:1rem 1.25rem 3rem}.cols,.pics,.book,.shop{grid-template-columns:1fr}
.pic-link{border-width:4px;box-shadow:4px 4px 0 #222B1F}
}

/* roze label op de kwekerijfoto: zelfde plek als het B&B-label, breedte loopt mee met de tekst */
.pic-label.roze{background:var(--pink);width:auto;padding-right:4.6%;white-space:nowrap}
.pic-link img[src*="cactus-bloei"]{object-position:50% 45%}