/* ============================================================
   pages.css — content pages built for the redesign.
   Loads AFTER modern.css. Scope: `body.hetportaal` + `.hp-page`
   wrapper injected in each page's post_content. Uses modern.css
   tokens (--hp-*). Covers: Magazines, Tarieven/Adverteren, legal
   pages (privacybeleid, disclaimer, adreswijziging), Contact.
   ============================================================ */

body.hetportaal .hp-page{
  max-width:var(--hp-container);
  margin:0 auto;
  padding:0 var(--hp-gutter);
  color:var(--hp-text);
}

/* ---- shared page hero ---- */
body.hetportaal .hp-page-hero{
  padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,32px);
  border-bottom:1px solid var(--hp-border);
  margin-bottom:var(--hp-space-7);
}
body.hetportaal .hp-page-hero h1{
  font-size:var(--hp-fs-h1);
  line-height:var(--hp-lh-heading);
  letter-spacing:var(--hp-tracking-heading);
  margin:0 0 var(--hp-space-3);
}
body.hetportaal .hp-page-hero h1::after{
  content:"";display:block;width:64px;height:4px;margin-top:var(--hp-space-3);
  background:var(--hp-primary);border-radius:var(--hp-radius-pill);
}
body.hetportaal .hp-page-hero .hp-lead{
  font-size:1.125rem;line-height:var(--hp-lh-body);color:var(--hp-text-muted);
  max-width:60ch;margin:0;
}

/* ---- magazine / card grid ---- */
body.hetportaal .hp-mag-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--hp-space-7);margin:0 0 var(--hp-space-8);
}
body.hetportaal .hp-mag-card{
  display:flex;flex-direction:column;background:var(--hp-bg);
  border:1px solid var(--hp-border);border-radius:var(--hp-radius-lg);
  overflow:hidden;box-shadow:var(--hp-shadow-sm);
  transition:transform var(--hp-dur) var(--hp-ease),box-shadow var(--hp-dur) var(--hp-ease);
}
body.hetportaal .hp-mag-card:hover{transform:translateY(-4px);box-shadow:var(--hp-shadow-lg);}
body.hetportaal .hp-mag-cover{
  display:block;aspect-ratio:210/297;background:var(--hp-bg-subtle);
  overflow:hidden;
}
body.hetportaal .hp-mag-cover img{width:100%;height:100%;object-fit:cover;display:block;}
body.hetportaal .hp-mag-body{padding:var(--hp-space-5);display:flex;flex-direction:column;gap:var(--hp-space-2);flex:1;}
body.hetportaal .hp-mag-body h3{margin:0;font-size:var(--hp-fs-h3);line-height:var(--hp-lh-heading);}
body.hetportaal .hp-mag-edition{color:var(--hp-text-muted);font-size:.9rem;margin:0;}
body.hetportaal .hp-mag-body p.hp-mag-desc{margin:0;color:var(--hp-text-muted);font-size:.95rem;line-height:1.55;}
body.hetportaal .hp-mag-audience{margin:0;color:var(--hp-text-muted);font-size:.85rem;font-style:italic;}
body.hetportaal .hp-mag-links{
  margin-top:auto;padding-top:var(--hp-space-3);display:flex;flex-direction:column;gap:6px;
}
body.hetportaal .hp-mag-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--hp-secondary-ink,#1f5c8c);font-weight:600;text-decoration:none;
}
body.hetportaal .hp-mag-link--news{color:var(--hp-text-muted);font-weight:600;}
body.hetportaal .hp-mag-link::after{content:"\2192";transition:transform var(--hp-dur) var(--hp-ease);}
body.hetportaal .hp-mag-card:hover .hp-mag-link::after{transform:translateX(4px);}

/* ---- marktplaats grid (icon-led, no cover art) ---- */
body.hetportaal .hp-market-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--hp-space-7);margin:0 0 var(--hp-space-8);
}
body.hetportaal .hp-market-card{
  display:flex;flex-direction:column;gap:var(--hp-space-3);
  background:var(--hp-bg);border:1px solid var(--hp-border);border-radius:var(--hp-radius-lg);
  box-shadow:var(--hp-shadow-sm);padding:var(--hp-space-5);
  transition:transform var(--hp-dur) var(--hp-ease),box-shadow var(--hp-dur) var(--hp-ease);
}
body.hetportaal .hp-market-card:hover{transform:translateY(-4px);box-shadow:var(--hp-shadow-lg);}
body.hetportaal .hp-market-icon{
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--hp-radius-md);background:var(--hp-bg-subtle);color:var(--hp-primary);
}
body.hetportaal .hp-market-cat-label{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hp-text-muted);
}
body.hetportaal .hp-market-card h3{margin:0;font-size:var(--hp-fs-h3);line-height:var(--hp-lh-heading);}
body.hetportaal .hp-market-desc{margin:0;color:var(--hp-text-muted);font-size:.95rem;line-height:1.55;flex:1;}
body.hetportaal .hp-market-link{
  margin-top:auto;padding-top:var(--hp-space-2);display:inline-flex;align-items:center;gap:6px;
  color:var(--hp-secondary-ink,#1f5c8c);font-weight:600;text-decoration:none;
}
body.hetportaal .hp-market-link::after{content:"\2192";transition:transform var(--hp-dur) var(--hp-ease);}
body.hetportaal .hp-market-card:hover .hp-market-link::after{transform:translateX(4px);}

/* ---- tarieven / mediakaart ---- */
body.hetportaal .hp-tar-media{
  display:flex;flex-wrap:wrap;gap:var(--hp-space-7);align-items:center;
  background:var(--hp-bg-subtle);border:1px solid var(--hp-border);
  border-radius:var(--hp-radius-lg);padding:var(--hp-space-6);margin:0 0 var(--hp-space-8);
}
body.hetportaal .hp-tar-media img{
  width:260px;max-width:40%;border-radius:var(--hp-radius-md);box-shadow:var(--hp-shadow-md);
}
body.hetportaal .hp-tar-media-body{flex:1;min-width:240px;}
body.hetportaal .hp-tar-media-body h3{margin:0 0 var(--hp-space-3);font-size:var(--hp-fs-h3);}
body.hetportaal .hp-tar-media-body p{margin:0 0 var(--hp-space-4);color:var(--hp-text-muted);line-height:var(--hp-lh-body);}

/* ---- buttons / CTAs ---- */
body.hetportaal a.hp-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:var(--hp-radius-pill);
  background:var(--hp-primary);color:var(--hp-primary-ink)!important;
  font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:transform var(--hp-dur) var(--hp-ease),box-shadow var(--hp-dur) var(--hp-ease),background var(--hp-dur);
}
body.hetportaal a.hp-btn:hover{transform:translateY(-2px);box-shadow:var(--hp-shadow-md);}
body.hetportaal a.hp-btn--ghost{
  background:transparent;color:var(--hp-text)!important;border-color:var(--hp-border-strong);
}
body.hetportaal a.hp-btn--ghost:hover{border-color:var(--hp-primary);color:var(--hp-primary)!important;}

/* ---- rate table ---- */
body.hetportaal .hp-rate-table{width:100%;border-collapse:collapse;margin:0 0 var(--hp-space-7);}
body.hetportaal .hp-rate-table caption{text-align:left;font-weight:700;padding:0 0 var(--hp-space-3);font-size:var(--hp-fs-h3);}
body.hetportaal .hp-rate-table th,
body.hetportaal .hp-rate-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hp-border);}
body.hetportaal .hp-rate-table thead th{background:var(--hp-bg-subtle);font-weight:600;}
body.hetportaal .hp-rate-table td:last-child,
body.hetportaal .hp-rate-table th:last-child{text-align:right;}
body.hetportaal .hp-note{color:var(--hp-text-muted);font-size:.85rem;font-style:italic;}

/* ---- legal / prose pages ---- */
body.hetportaal .hp-prose{max-width:72ch;}
body.hetportaal .hp-prose h2{
  font-size:var(--hp-fs-h2);margin:var(--hp-space-7) 0 var(--hp-space-3);line-height:var(--hp-lh-heading);
}
body.hetportaal .hp-prose h3{font-size:var(--hp-fs-h3);margin:var(--hp-space-6) 0 var(--hp-space-2);}
body.hetportaal .hp-prose p,
body.hetportaal .hp-prose li{line-height:var(--hp-lh-body);color:var(--hp-text);}
body.hetportaal .hp-prose ul{padding-left:1.25em;margin:0 0 var(--hp-space-4);}
body.hetportaal .hp-prose li{margin-bottom:var(--hp-space-2);}
body.hetportaal .hp-prose a{color:var(--hp-primary);}

/* ---- CTA band ---- */
body.hetportaal .hp-cta-band{
  display:flex;flex-wrap:wrap;gap:var(--hp-space-4);align-items:center;justify-content:space-between;
  background:var(--hp-bg-subtle);border:1px solid var(--hp-border);border-radius:var(--hp-radius-lg);
  padding:var(--hp-space-6);margin:var(--hp-space-7) 0 var(--hp-space-8);
}
body.hetportaal .hp-cta-band p{margin:0;font-size:1.05rem;}
body.hetportaal .hp-cta-band strong{display:block;font-size:var(--hp-fs-h3);margin-bottom:4px;}

/* ---- contact info + form ---- */
body.hetportaal .hp-contact-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:var(--hp-space-7);
  background:var(--hp-bg-subtle);border:1px solid var(--hp-border);
  border-radius:var(--hp-radius-lg);padding:var(--hp-space-6);margin:0 0 var(--hp-space-8);
}
body.hetportaal .hp-contact-info h3,
body.hetportaal .hp-contact-form h3{margin:0 0 var(--hp-space-4);font-size:var(--hp-fs-h3);}
body.hetportaal .hp-contact-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hp-space-3);}
body.hetportaal .hp-contact-row{
  display:flex;align-items:flex-start;gap:12px;
  color:var(--hp-text);font-weight:600;text-decoration:none;
}
body.hetportaal a.hp-contact-row:hover{color:var(--hp-primary);}
body.hetportaal .hp-contact-row svg{
  width:18px;height:18px;flex:none;margin-top:2px;color:var(--hp-primary);
}
body.hetportaal .hp-contact-row address{
  font-style:normal;font-weight:400;color:var(--hp-text-muted);line-height:var(--hp-lh-body);
}
body.hetportaal .hp-contact-form{
  background:var(--hp-bg);border:1px solid var(--hp-border);border-radius:var(--hp-radius-md);
  padding:var(--hp-space-5);
}
body.hetportaal .hp-contact-form form p{margin:0 0 var(--hp-space-4);}

/* segmented pill control for the "Bestemd voor" radio group.
   CF7's [radio ... label_first] renders <span class="wpcf7-list-item-label">
   BEFORE <input>, with no wrapping <label> — so the pill itself is the
   click target (input stretched invisibly over it via inset:0). */
body.hetportaal .hp-contact-form .wpcf7-form-control-wrap[data-name="bestemd-voor"]{width:auto;display:inline-block;}
body.hetportaal .hp-contact-form .wpcf7-form-control.wpcf7-radio{
  display:inline-flex;flex-wrap:wrap;gap:8px;vertical-align:middle;
}
body.hetportaal .hp-contact-form .wpcf7-list-item{
  position:relative;display:inline-flex;align-items:center;margin:0!important;
  padding:7px 16px;border-radius:var(--hp-radius-pill);border:1px solid var(--hp-border-strong);
  background:var(--hp-bg);font-size:.85rem;font-weight:600;color:var(--hp-text-muted);
  transition:all var(--hp-dur) var(--hp-ease);
}
body.hetportaal .hp-contact-form .wpcf7-list-item input[type="radio"]{
  position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;
}
body.hetportaal .hp-contact-form .wpcf7-list-item:hover{border-color:var(--hp-primary);color:var(--hp-primary);}
body.hetportaal .hp-contact-form .wpcf7-list-item:has(input:checked){
  background:var(--hp-primary);border-color:var(--hp-primary);color:var(--hp-primary-ink);
}

/* ---- domain panel (brand grouping, e.g. PromZ / Portaal Check on Contact) ---- */
body.hetportaal .hp-domain{
  background:var(--hp-bg-subtle);border:1px solid var(--hp-border);
  border-radius:var(--hp-radius-lg);padding:var(--hp-space-7);margin:0 0 var(--hp-space-8);
}
body.hetportaal .hp-domain-head{
  display:flex;align-items:center;gap:var(--hp-space-3);margin:0 0 var(--hp-space-2);
}
body.hetportaal .hp-domain-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--hp-radius-md);
  background:var(--hp-primary);color:var(--hp-primary-ink);
  font-weight:700;font-size:.85rem;letter-spacing:.02em;
}
body.hetportaal .hp-domain-head h2{margin:0;font-size:var(--hp-fs-h2);line-height:var(--hp-lh-heading);}
body.hetportaal .hp-domain .hp-team-grid{margin-bottom:0;}

/* ---- team ---- */
body.hetportaal .hp-team-heading{font-size:var(--hp-fs-h3);margin:var(--hp-space-7) 0 var(--hp-space-4);}
body.hetportaal .hp-team-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--hp-space-5);margin:0 0 var(--hp-space-8);
}
body.hetportaal .hp-team-card{
  display:flex;flex-direction:column;background:var(--hp-bg);
  border:1px solid var(--hp-border);border-radius:var(--hp-radius-lg);
  overflow:hidden;box-shadow:var(--hp-shadow-sm);text-align:center;
  transition:transform var(--hp-dur) var(--hp-ease),box-shadow var(--hp-dur) var(--hp-ease);
}
body.hetportaal .hp-team-card:hover{transform:translateY(-4px);box-shadow:var(--hp-shadow-lg);}
body.hetportaal .hp-team-card img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--hp-bg-subtle);
}
body.hetportaal .hp-team-body{padding:var(--hp-space-4);display:flex;flex-direction:column;gap:4px;}
body.hetportaal .hp-team-body h4{margin:0;font-size:1rem;line-height:var(--hp-lh-heading);}
body.hetportaal .hp-team-role{margin:0;color:var(--hp-text-muted);font-size:.85rem;}
body.hetportaal .hp-team-body a{
  color:var(--hp-primary);font-size:.85rem;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
body.hetportaal .hp-team-body a:hover{text-decoration:underline;}

@media (max-width:640px){
  body.hetportaal .hp-tar-media img{max-width:100%;width:100%;}
  body.hetportaal .hp-contact-grid{grid-template-columns:1fr;}
  body.hetportaal .hp-domain{padding:var(--hp-space-5);}
}