/* ============================================================
   CaneCorsoFokker.nl, onafhankelijk magazine over de Cane Corso
   Redactie-design: warm bruin / crème / saliegroen, mobile first
   ============================================================ */

:root {
  --tekst:        #2b2018;
  --brown-900:  #35261a;
  --brown-700:  #55402e;
  --brown-500:  #7d5f46;
  --brown-150:  #e9dcc9;
  --cream-bg:   #f6f1e6;
  --blad:      #fdfaf3;
  --sage-700:   #5c6e52;
  --sage-600:   #6f8164;
  --sage-400:   #9cab8f;
  --sage-100:   #e6ebdd;
  --terra:      #a35430;
  --rule:       rgba(85, 64, 46, .16);
  --shadow:     0 10px 30px rgba(53, 38, 26, .10);
  --radius:     14px;
  --serif: "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream-bg);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--brown-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terra); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---------- Masthead ---------- */

.topbar {
  background: var(--brown-900);
  color: #f2e8d8;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topbar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.masthead { background: var(--blad); border-bottom: 1px solid var(--rule); }

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  padding-bottom: 22px;
  flex-wrap: wrap;
}

.masthead .wrap > .nav { min-width: 0; max-width: 100%; }

.brand { display: flex; align-items: center; gap: 14px; padding: 4px 0; }

.brand svg { width: 46px; height: 46px; flex: none; }

.brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  color: var(--brown-900);
  letter-spacing: -.01em;
}

.brand-name em { font-style: normal; color: var(--sage-700); }

.brand-tag {
  margin: 3px 0 0;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown-500);
}

/* ---------- Navigatie ---------- */

.nav { position: sticky; top: 0; z-index: 50; background: rgba(253, 250, 243, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }

.nav .wrap { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 0; padding-bottom: 0; }

.nav a {
  display: inline-block;
  padding: 13px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--brown-700);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.nav a:hover { color: var(--terra); }
.nav a[aria-current="page"] { color: var(--brown-900); border-bottom-color: var(--sage-600); font-weight: 600; }

/* ---------- Hero ---------- */

.hero { position: relative; background: var(--brown-900); overflow: hidden; }

.hero-media { position: relative; aspect-ratio: auto; height: clamp(420px, 42.9vw, 580px); }

.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(43, 32, 24, .78) 0%, rgba(43, 32, 24, .45) 42%, rgba(43, 32, 24, .05) 75%);
}

.hero-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1120px; margin: 0 auto; padding: 0 22px;
}

.hero-body .wrap { padding: 0; }

.dakpan {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  background: var(--sage-700);
  color: #f6f1e6;
  font-size: 14px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  color: #f8f2e5;
  margin: 0 0 16px;
  max-width: 15ch;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}

.hero p {
  color: #eadfcb;
  max-width: 46ch;
  font-size: clamp(16px, 1.6vw, 19px);
  margin: 0 0 26px;
}

.btn {
  display: inline-block;
  background: var(--blad);
  color: var(--brown-900);
  font-weight: 600;
  font-size: 15.5px;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease;
}

.btn:hover { transform: translateY(-2px); background: #fff; color: var(--terra); }

.btn-sec {
  display: inline-block;
  margin-left: 10px;
  border: 1.5px solid rgba(248, 242, 229, .65);
  color: #f8f2e5;
  font-weight: 500;
  font-size: 15.5px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease;
}

.btn-sec:hover { background: rgba(248, 242, 229, .14); color: #fff; }

/* Fallback degrade si image absente */
.hero-media .noimg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 500px at 78% 30%, rgba(156, 171, 143, .35), transparent 60%),
    radial-gradient(900px 480px at 20% 85%, rgba(133, 95, 58, .5), transparent 65%),
    linear-gradient(120deg, #35261a, #4a3526);
}

/* Figure pleine largeur en image de fond (degrade si absente) */
.figure-bg {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 30px 0 56px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.figure-bg figcaption {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  margin: 0;
}

/* ---------- Rubrieken-band ---------- */

.rubrieken { background: var(--sage-100); border-bottom: 1px solid var(--rule); }

.rubrieken .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.rubriek {
  display: block;
  background: transparent;
  border: 1px solid rgba(92, 110, 82, .35);
  border-radius: 10px;
  padding: 10px 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--sage-700);
  transition: background .15s ease;
}

.rubriek span { display: block; font-weight: 400; font-size: 14px; color: var(--brown-500); margin-top: 2px; }
.rubriek:hover { background: rgba(255, 255, 255, .55); color: var(--sage-700); }

/* ---------- Secties & kaarten ---------- */

main { padding: 46px 0 20px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  color: var(--brown-900);
  margin: 0;
}

.section-head .meer { font-size: 14.5px; font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.card {
  background: var(--blad);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(53, 38, 26, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover .card-title { color: var(--terra); }

.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--sage-100), var(--brown-150)); position: relative; }

.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.chip {
  align-self: flex-start;
  font-size: 14px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sage-700);
  background: var(--sage-100);
  padding: 5px 10px;
  border-radius: 999px;
}

.chip.brown { color: var(--brown-700); background: var(--brown-150); }

.card-title {
  font-family: var(--serif);
  font-size: 21.5px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--brown-900);
  margin: 0;
}

.card-excerpt { font-size: 15px; color: var(--brown-700); margin: 0; flex: 1; }

.card-meta { font-size: 14px; color: var(--brown-500); letter-spacing: .04em; }

/* Uitgelicht (flagship) */

.featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--blad);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(53, 38, 26, .05);
  margin-bottom: 46px;
}

.featured-media { position: relative; min-height: 300px; background: linear-gradient(135deg, var(--brown-150), var(--sage-100)); }
.featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-body { padding: 34px 36px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.featured-body h2 { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; margin: 0; color: var(--brown-900); line-height: 1.18; }
.featured-body h2 a { color: inherit; text-decoration: none; }
.featured-body h2 a:hover { color: var(--terra); }
.featured-body p { color: var(--brown-700); margin: 0; }

/* ---------- Artikel ---------- */

.article { max-width: 760px; margin: 0 auto; }

.crumbs { font-size: 14px; color: var(--brown-500); margin-bottom: 20px; }
.crumbs a { display: inline-block; color: var(--brown-500); text-decoration: none; padding: 8px 0; }
.crumbs a:hover { color: var(--terra); text-decoration: underline; }

.article-header { margin-bottom: 26px; }

.article-header h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  font-weight: 600;
  color: var(--brown-900);
  margin: 12px 0 14px;
  letter-spacing: -.01em;
}

.dek { font-size: 19px; color: var(--brown-500); line-height: 1.55; margin: 0 0 18px; font-family: var(--serif); font-style: italic; }

.byline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 14px; color: var(--brown-500);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}

.byline .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sage-700);
  color: #f6f1e6;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 15px;
}

.figure { margin: 30px 0; }
.figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.figure figcaption { font-size: 14px; color: var(--brown-500); margin-top: 10px; font-style: italic; }

.prose h2 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  color: var(--brown-900);
  margin: 40px 0 14px;
  padding-top: 10px;
}

.prose h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--brown-700); margin: 30px 0 10px; }

.prose p { margin: 0 0 18px; }

.prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--sage-600); font-weight: 600; }

.prose strong { color: var(--brown-900); }

.prose .inset { color: var(--sage-700); font-family: var(--serif); font-size: 1.05em; }

.kastje {
  background: var(--sage-100);
  border-left: 4px solid var(--sage-600);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 26px 0;
}

.kastje h2, .kastje h3 { margin-top: 0; }

.kastje ul { margin-bottom: 0; }

.waarschuwing {
  background: #f4e3d4;
  border-left: 4px solid var(--terra);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 26px 0;
}

.waarschuwing p:last-child, .kastje p:last-child { margin-bottom: 0; }

/* Tabel */

.tabelwrap { overflow-x: auto; margin: 26px 0; }

table { width: 100%; border-collapse: collapse; background: var(--blad); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(53,38,26,.05); font-size: 15.5px; }

th { background: var(--brown-700); color: #f6f1e6; text-align: left; font-weight: 600; padding: 11px 14px; font-size: 14px; letter-spacing: .03em; }

td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }

tbody tr:nth-child(even) { background: rgba(233, 220, 201, .28); }
tbody tr:last-child td { border-bottom: none; }

/* Gerelateerd */

.related { margin-top: 50px; }

.related h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--brown-900); margin: 0 0 18px; }

.linklijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }

.linklijst a {
  display: block;
  background: var(--blad);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.linklijst a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.linklijst .lt { font-family: var(--serif); font-weight: 600; font-size: 17.5px; color: var(--brown-900); display: block; margin-bottom: 4px; }
.linklijst .ls { font-size: 14px; color: var(--brown-500); }

/* Statistiek-statband (home) */

.statband { background: var(--brown-900); color: #eadfcb; padding: 40px 0; margin: 50px 0 0; }

.statband .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; text-align: center; }

.stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; color: #f8f2e5; }
.stat span { font-size: 14px; letter-spacing: .06em; }

/* ---------- Footer ---------- */

footer.site { background: var(--brown-900); color: #d9cbb5; margin-top: 60px; padding: 46px 0 30px; font-size: 14.5px; }

footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }

footer.site h3 { font-family: var(--serif); color: #f6f1e6; font-size: 17px; margin: 0 0 12px; font-weight: 600; }

footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 2px; }
footer.site a { display: inline-block; color: #d9cbb5; text-decoration: none; padding: 8px 0; }
footer.site a:hover { color: #fff; text-decoration: underline; }

.site-identity { font-family: var(--serif); font-size: 21px; color: #f6f1e6; margin: 0 0 10px; font-weight: 600; }

.disclaimer {
  border-top: 1px solid rgba(246, 241, 230, .18);
  margin-top: 34px;
  padding-top: 20px;
  font-size: 14px;
  color: #b7a68d;
  line-height: 1.6;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; }
  .featured-media { min-height: 240px; }
  footer.site .cols { grid-template-columns: 1fr; gap: 24px; }
  .hero-media { aspect-ratio: auto; height: clamp(380px, 100vw, 480px); }
  .hero-media::after { background: linear-gradient(180deg, rgba(43,32,24,.25) 0%, rgba(43,32,24,.72) 68%); }
  .hero-body { justify-content: flex-end; padding-bottom: 34px; }
  .hero h1 { max-width: 20ch; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand-name { font-size: 24px; }
  .topbar .wrap { justify-content: center; }
  .nav .wrap { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .nav a { padding: 13px 10px; white-space: nowrap; }
  .featured-body { padding: 24px 22px; }
  .stat b { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}

.ph-kennel {
  background-image:
    url("/img/fokker-kennel-bezoek-moeder.jpg"),
    radial-gradient(700px 380px at 40% 30%, rgba(214, 184, 138, .75), transparent 68%),
    linear-gradient(140deg, #e9dcc9 0%, #d9c4a3 58%, #b99a74 120%);
}

.ph-rasclub {
  background-image:
    url("/img/rasclub-wandeling-los-veld.jpg"),
    radial-gradient(680px 360px at 60% 40%, rgba(233, 220, 201, .8), transparent 70%),
    linear-gradient(135deg, #e6ebdd 0%, #d8cdb4 62%, #9cab8f 130%);
}

/* ---------- Emplacements photo (manifest _photo-manifest.json) ----------
   Chaque .ph-* pose une image de fond AU-DESSUS d'un degrade editorial.
   Tant que /img/*.jpg n'existe pas, seul le degrade se peint : aucun
   element casse, aucun icone d'image manquante. Le flux centralise depose
   les fichiers dans dist/img/ et ils apparaissent automatiquement. */

.ph-hero, .ph-voerplan, .ph-rasgids, .ph-geschiedenis, .ph-training, .ph-kleuren {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ph-hero {
  background-image:
    url("/img/cane-corso-zwart-weiland.jpg"),
    radial-gradient(1000px 520px at 74% 34%, rgba(214, 158, 96, .55), transparent 62%),
    radial-gradient(620px 420px at 84% 22%, rgba(250, 240, 218, .30), transparent 70%),
    radial-gradient(760px 520px at 14% 86%, rgba(111, 129, 100, .55), transparent 66%),
    linear-gradient(118deg, #2b2018 0%, #453121 46%, #55402e 74%, #6f8164 130%);
}

.ph-voerplan {
  background-image:
    url("/img/corso-pup-voerbak-keuken.jpg"),
    radial-gradient(700px 380px at 30% 30%, rgba(214, 184, 138, .75), transparent 68%),
    linear-gradient(140deg, #e9dcc9 0%, #d9c4a3 58%, #b99a74 120%);
}

.ph-rasgids {
  background-image:
    url("/img/corso-reu-profiel-grindpad.jpg"),
    radial-gradient(680px 360px at 62% 38%, rgba(233, 220, 201, .8), transparent 70%),
    linear-gradient(135deg, #e6ebdd 0%, #d8cdb4 62%, #9cab8f 130%);
}

.ph-geschiedenis {
  background-image:
    url("/img/corso-brindle-olijfgaard-terras.jpg"),
    radial-gradient(720px 400px at 70% 30%, rgba(197, 168, 106, .5), transparent 64%),
    linear-gradient(122deg, #55402e 0%, #6b5138 55%, #6f8164 125%);
}

.ph-training {
  background-image:
    url("/img/gehoorzaamheidstraining-lijn-park.jpg"),
    radial-gradient(640px 360px at 36% 34%, rgba(233, 220, 201, .7), transparent 68%),
    linear-gradient(138deg, #dfe5d3 0%, #e9dcc9 58%, #b7a68d 125%);
}

.ph-kleuren {
  background-image:
    url("/img/corso-kop-grijs-closeup.jpg"),
    radial-gradient(560px 420px at 64% 36%, rgba(169, 178, 164, .85), transparent 72%),
    linear-gradient(150deg, #e6e8e2 0%, #d3d6cd 55%, #a9b2a4 120%);
}