/* ============================================================
   Bakery layout & character — Fijnbakkerij Bouman
   Photo sizing + hover life. (De intro-loader en het oven-
   scrollytelling-experiment zijn bewust verwijderd: te veel
   show, te weinig bakkerij.)
   ============================================================ */

/* ============================================================
   5. BIGGER PHOTOS — give the product more room
   ============================================================ */
.card__media image-slot, .card__media .ph { aspect-ratio: 1 / 1.04 !important; }
.feature__media image-slot, .feature__media .ph { aspect-ratio: 4 / 3.5 !important; }
.feature__media.tall image-slot, .feature__media.tall .ph { aspect-ratio: 3 / 3.7 !important; }
.feature .r-img > image-slot { aspect-ratio: 3 / 3.7; }
.assort-item image-slot, .assort-item .ph { aspect-ratio: 4 / 3.3 !important; }
.biz__media image-slot, .biz__media .ph { aspect-ratio: 4 / 3.4 !important; }
.story-grid .feature__media.tall image-slot { aspect-ratio: 3 / 4.1 !important; }
/* let the feature image column take a touch more width */
@media (min-width: 821px) {
  .feature { grid-template-columns: 1.12fr 1fr; gap: clamp(32px, 5vw, 72px); }
  .feature.flip { grid-template-columns: 1fr 1.12fr; }
}

/* ============================================================
   6. CHARACTER — bolder hover life on images & cards
   ============================================================ */
.card { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.card:hover { transform: translateY(-8px) rotate(-.4deg); }
.card__media image-slot, .feature__media image-slot, .assort-item image-slot { transition: transform .7s var(--ease-out); }
.card:hover .card__media image-slot,
.feature__media:hover image-slot,
.assort-item:hover image-slot { transform: scale(1.06); }
.card__media, .assort-item { overflow: hidden; }

/* ============================================================
   WhatsApp contact CTA (contact page)
   ============================================================ */
.btn--whatsapp { background: #25d366; color: #fff; border: none; box-shadow: 0 14px 30px -14px rgba(37, 211, 102, .7); }
.btn--whatsapp:hover { background: #1cb955; color: #fff; }
.btn--whatsapp svg { flex: none; }
.contact-cta__card {
  background: var(--surface, #f0e6d6); border: 1px solid var(--line, #e2d5bd);
  border-radius: var(--radius, 18px); padding: clamp(24px, 3.2vw, 40px);
  display: grid; gap: 14px; align-content: start;
  box-shadow: 0 30px 50px -38px rgba(59, 42, 29, .5);
}
.contact-cta__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.contact-cta__card > p { margin: 0; color: var(--ink-soft, #5b4a38); }
.contact-cta__card .btn--whatsapp { margin-top: 8px; justify-content: center; gap: .6em; }
.contact-cta__alt { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 6px; }
.contact-cta__alt a { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--ink-soft, #5b4a38); }
.contact-cta__alt a:hover { color: var(--accent); }
.contact-cta__alt .ic { width: 1.1em; height: 1.1em; color: var(--accent); }

/* ============================================================
   7. REDUCED MOTION — calm everything
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none !important; }
}