/* ============================================================
   Totaal WK — pages.css
   Pagina-specifieke layout, page-hero, lijsten, contact
   ============================================================ */

/* ---------- Page hero (interne pagina's) ---------- */
.page-hero {
  background: var(--c-black);
  color: var(--c-white);
  border-bottom: var(--border-thick);
  border-color: var(--c-orange);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 15%, rgba(255,90,0,.5), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 20px);
}
.page-hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(2.8rem, 6vw, 4.8rem);
  max-width: 880px;
}
.page-hero h1 { color: var(--c-white); }
.page-hero h1 .hl { color: var(--c-orange); }
.page-hero .lead { color: #e9e0d4; font-size: clamp(1.05rem,2vw,1.2rem); margin-top: 1.1rem; max-width: 60ch; }

.breadcrumb {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #c9bdae;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.breadcrumb a { color: var(--c-orange); }
.breadcrumb span { opacity: .6; }

/* ---------- Index hero extra ---------- */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 2.2rem;
  border-top: 2px solid #333;
  padding-top: 1.4rem;
}
.hero-meta div { line-height: 1.2; }
.hero-meta .n { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; color: var(--c-orange); display:block; }
.hero-meta .t { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #cabfb1; }

/* ---------- Featured strip ---------- */
.featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border: var(--border-thick);
  background: var(--c-white);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.featured .featured-visual { position: relative; min-height: 320px; border-right: var(--border-thick); }
.featured .featured-body { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.featured h2 { font-size: clamp(1.7rem,3.4vw,2.6rem); }

@media (max-width: 760px) {
  .featured { grid-template-columns: 1fr; }
  .featured .featured-visual { min-height: 220px; border-right: none; border-bottom: var(--border-thick); }
}

/* ---------- Article meta header ---------- */
.article-head { max-width: 72ch; margin-bottom: 2rem; }
.article-head .meta-row {
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  margin-top: 1.2rem;
  font-size: .85rem; font-weight: 600;
  color: var(--c-grey); text-transform: uppercase; letter-spacing: .05em;
}
.article-head .meta-row span { display: inline-flex; align-items: center; gap: .4rem; }

.article-hero-visual {
  height: clamp(220px, 38vw, 420px);
  border: var(--border-thick);
  box-shadow: var(--shadow-hard);
  position: relative;
  margin-bottom: 2.4rem;
  overflow: hidden;
}

/* ---------- Aside widgets ---------- */
.widget { border: var(--border); background: var(--c-white); padding: 1.3rem; margin-bottom: 1.4rem; }
.widget h4 { text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; margin-bottom: .9rem; color: var(--c-orange-deep); }
.widget ul { list-style: none; margin: 0; }
.widget li { border-bottom: 2px solid #eee; padding-bottom: .7rem; margin-bottom: .7rem; }
.widget li:last-child { border: 0; margin: 0; padding: 0; }
.widget a { font-weight: 600; color: var(--c-black); font-size: .95rem; }
.widget a:hover { color: var(--c-orange-deep); }
.widget--dark { background: var(--c-black); color: var(--c-paper); border-color: var(--c-orange); }
.widget--dark h4 { color: var(--c-orange); }
.widget--dark p { color: #d3c8ba; font-size: .92rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.contact-card { border: var(--border); background: var(--c-white); padding: 1.6rem; box-shadow: var(--shadow-hard-sm); }
.contact-card .ic { width: 46px; height: 46px; margin-bottom: 1rem; }
.contact-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.contact-card a { font-weight: 600; font-size: 1.05rem; word-break: break-word; }
.contact-card p { color: var(--c-grey); font-size: .95rem; }

.social-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.social-row a {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-black); color: var(--c-orange);
  border: 2px solid var(--c-orange);
  transition: all var(--t-fast);
}
.social-row a:hover { background: var(--c-orange); color: var(--c-black); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--c-black); }
.social-row svg { width: 22px; height: 22px; }

@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Legal pages ---------- */
.legal { max-width: 76ch; }
.legal h2 { margin: 2.2rem 0 .9rem; }
.legal h3 { margin: 1.6rem 0 .6rem; color: var(--c-orange-deep); }
.legal p, .legal li { font-size: 1.02rem; }
.legal .upd { font-size: .85rem; color: var(--c-grey); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
.legal th, .legal td { border: 2px solid var(--c-black); padding: .7rem .9rem; text-align: left; font-size: .92rem; }
.legal th { background: var(--c-orange); font-family: var(--f-display); font-weight: 700; }

/* ---------- About team ---------- */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; } }
.value-card { border: var(--border); padding: 1.6rem; background: var(--c-white); }
.value-card .kicker-num { margin-bottom: 1rem; }
.value-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.value-card p { color: var(--c-grey); font-size: .97rem; margin: 0; }

/* ---------- Lineup list (philosophy) ---------- */
.lineup { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gap); }
@media (max-width: 700px){ .lineup { grid-template-columns: 1fr; } }
.lineup .pos { border: var(--border); background: var(--c-white); padding: 1.4rem; }
.lineup .pos h4 { color: var(--c-orange-deep); margin-bottom: .4rem; }
.lineup .pos p { margin: 0; color: var(--c-grey); font-size: .95rem; }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .pitch-wrap { max-width: 380px; }
}