/* ==========================================================================
   The Pup Hub Leuven - tijdelijke teaserpagina voor puphub.be

   Bewust losgekoppeld van de echte site: geen Tailwind, geen bouwstap, geen
   gedeelde bestanden. Deze map kan in haar geheel naar de webruimte en er
   later weer af, zonder dat de definitieve site er iets van merkt.

   Palet komt van de kleurkaarten van Brenda (Levis "Bamboo Shoot" GY1157-0957
   en "Quiet Green" GY1265-1485) plus het groen uit het logo zelf.
   ========================================================================== */

:root {
  --cream: #faf8f3;
  --sand: #f1eee5;
  --line: #e2dfd3;

  --green-50: #f2f4ea;
  --green-100: #e3e8d4;
  --green-200: #cdd3b4;
  --green-300: #c1c5a2;
  --green-800: #4c5340;

  --brand: #8fb596;
  --ochre: #806319;

  --ink: #121212;
  --ink-70: rgba(18, 18, 18, 0.7);
  --ink-60: rgba(18, 18, 18, 0.6);

  --wrap: 1080px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

::selection {
  background: var(--green-200);
  color: var(--ink);
}

/* --------------------------------------------------------------- bouwstenen */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green-800);
  margin: 0 0 20px;
}

.eyebrow--light {
  color: rgba(250, 248, 243, 0.85);
}

.rule::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--green-300);
  margin-top: 24px;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn--light {
  color: var(--cream);
  border: 1px solid rgba(250, 248, 243, 0.7);
}

.btn--light:hover {
  background: var(--cream);
  color: var(--ink);
}

.btn--ink {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}

.btn--ink:hover {
  background: transparent;
  color: var(--ink);
}

/* ---------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 50% 55%,
      rgba(18, 18, 18, 0.58) 0%,
      rgba(18, 18, 18, 0.34) 55%,
      rgba(18, 18, 18, 0.5) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(18, 18, 18, 0.42) 0%,
      rgba(18, 18, 18, 0.12) 40%,
      rgba(18, 18, 18, 0.58) 100%
    );
}

.hero__inner {
  position: relative;
  max-width: 620px;
}

.hero__logo {
  width: 160px;
  height: 160px;
  margin: 0 auto 32px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}

.hero__badge {
  display: inline-block;
  margin-bottom: 24px;
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--green-200);
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  color: var(--cream);
  margin-bottom: 20px;
}

.hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--green-200);
}

.hero__sub {
  color: rgba(250, 248, 243, 0.85);
  font-size: 1.0625rem;
  margin: 0 auto 36px;
  max-width: 30rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* -------------------------------------------------------------------- secties */

.section {
  padding: 88px 0;
}

.section--tint {
  background: var(--green-50);
  border-top: 1px solid var(--green-100);
  border-bottom: 1px solid var(--green-100);
}

.section__head {
  max-width: 34rem;
  margin-bottom: 56px;
}

.section__head p {
  color: var(--ink-70);
  margin: 24px 0 0;
}

.section h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------------- aanbod */

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.card__num {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--green-800);
  margin: 0 0 16px;
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.card p {
  color: var(--ink-70);
  font-size: 0.9375rem;
  margin: 0;
}

.card ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-70);
  font-size: 0.9375rem;
}

.card ul li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-300);
  margin-right: 10px;
  vertical-align: middle;
}

/* -------------------------------------------------------------------- Brenda */

.about {
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 1fr;
}

.about__figure {
  position: relative;
  margin: 0;
}

.about__figure::before {
  content: "";
  position: absolute;
  inset: -12px;
  background: var(--green-100);
}

.about__figure img {
  position: relative;
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top;
}

.about__body p {
  color: var(--ink-70);
  margin: 0 0 18px;
}

.about__body p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- contact */

.contact {
  background: var(--ink);
  color: var(--cream);
  padding: 88px 0;
  text-align: center;
}

.contact h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 16px;
}

.contact__lead {
  color: rgba(250, 248, 243, 0.7);
  max-width: 32rem;
  margin: 0 auto 48px;
}

.contact__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
}

.contact__item p {
  margin: 0;
  color: rgba(250, 248, 243, 0.85);
}

.contact__item .eyebrow {
  color: var(--green-200);
  margin-bottom: 10px;
}

.contact__item a {
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 248, 243, 0.3);
  transition: border-color 0.3s ease;
}

.contact__item a:hover {
  border-bottom-color: var(--cream);
}

/* -------------------------------------------------------------------- footer */

.footer {
  background: var(--sand);
  padding: 40px 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-60);
}

.footer img {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
}

/* ------------------------------------------------------------------ WhatsApp */

.wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.wa:hover {
  transform: scale(1.05);
}

.wa svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* ---------------------------------------------------------------- breekpunten */

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  /* Drie contactblokken op één rij. Zodra het telefoonnummer terugkomt zijn het
     er weer vier: haal deze regel dan weg, want twee kolommen geeft dan 2+2 in
     plaats van 3+1. */
  .contact__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 860px;
  }

  .section {
    padding: 112px 0;
  }

  .cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .about {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  .about__figure {
    order: 2;
  }

  .hero__logo {
    width: 200px;
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wa {
    transition: none;
  }
}