/* ============================================================
   homepage.css — Het Portaal homepage (top 3 cards + news preview)
   Loads AFTER modern.css. Scope: body.page-id-339 / body.home.
   Owns the homepage rules formerly in modern.css §(j).
   News grid = WPBakery vc_basic_grid in style="all" mode (no owl carousel):
   items render as .vc_grid-item > .vc_grid-item-mini with
   .vc_gitem-zone-a (image) + .vc_gitem-zone-c (title/excerpt/Meer-lezen btn).
   Tokens (--hp-*) come from modern.css; fallbacks inline for safety.
   ============================================================ */

/* ----------------------------------------------------------------
   (a) TOP 3 CARDS — "Onze marktplaatsen / magazines / Ons volgend evenement"
   (.top-section.front band, frontpage_widget_one/two/three text widgets)
   ---------------------------------------------------------------- */
body.hetportaal .top-section.front{
  background:var(--hp-bg-subtle,#f5f7fa);
  padding-top:var(--hp-space-8,56px);
  padding-bottom:var(--hp-space-8,56px);
  margin-bottom:var(--hp-space-7,44px);
}
body.hetportaal .top-section.front .container{ max-width:var(--hp-container,1240px); }
body.hetportaal .top-section.front .row{ align-items:stretch; }

/* each column → flush card */
body.hetportaal .top-section.front .top-section-widget.front{
  display:flex; flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-lg,18px);
  padding:var(--hp-space-5,24px);
  text-align:center;
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.hetportaal .top-section.front .top-section-widget.front:hover{
  transform:translateY(-4px);
  box-shadow:var(--hp-shadow-md,0 12px 28px -12px rgba(20,24,31,.22));
  border-color:#d6dde5;
}

/* card title — brand, centered, short orange underline accent */
body.hetportaal .top-section.front .widget-title.front{
  font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#2b2b2b; margin:0 0 18px; padding-bottom:12px; position:relative;
}
body.hetportaal .top-section.front .widget-title.front::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:46px; height:3px; border-radius:2px; background:var(--hp-primary,#ee7c00);
}

/* uniform image tile — kills the mismatched-aspect-ratio problem */
body.hetportaal .top-section.front .top-section-widget.front .textwidget{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
}
body.hetportaal .top-section.front .top-section-widget.front .textwidget p{ margin:0; width:100%; }
body.hetportaal .top-section.front .top-section-widget.front .textwidget a{
  display:block; border-radius:var(--hp-radius-md,10px); overflow:hidden;
}
body.hetportaal .top-section.front .top-section-widget.front img{
  display:block; margin:0 auto;
  width:100%; height:190px; object-fit:contain;
  transition:transform .25s ease;
}
body.hetportaal .top-section.front .top-section-widget.front:hover img{ transform:scale(1.04); }

@media (max-width:991px){
  body.hetportaal .top-section.front{ padding-top:36px; padding-bottom:36px; }
  body.hetportaal .top-section.front .col-lg-4{ margin-bottom:20px; }
  body.hetportaal .top-section.front .col-lg-4:last-child{ margin-bottom:0; }
}

/* ----------------------------------------------------------------
   (b) NEWS GRID — vc_basic_grid items as modern cards
   ---------------------------------------------------------------- */
/* fix double-container inset from the shortcode's inner .container */
body.page-id-339 #content .container,
body.home #content .container{ padding-left:0; padding-right:0; max-width:none; }
body.page-id-339 .vc_grid-container,
body.page-id-339 .vc_basic_grid{ margin-bottom:0; }

/* lay items out as a responsive grid (style="all" → single slide-wrapper holds all items) */
body.page-id-339 .vc_basic_grid .vc_pageable-slide-wrapper,
body.home .vc_basic_grid .vc_pageable-slide-wrapper{
  display:grid;
  grid-template-columns:repeat(2, 1fr);   /* 2-up sits well beside the right sidebar */
  gap:var(--hp-gutter,24px);
}
body.page-id-339 .vc_basic_grid .vc_grid-item,
body.home .vc_basic_grid .vc_grid-item{
  width:auto !important; max-width:none; float:none; margin:0; padding:0;
}
@media (max-width:575px){
  body.page-id-339 .vc_basic_grid .vc_pageable-slide-wrapper,
  body.home .vc_basic_grid .vc_pageable-slide-wrapper{ grid-template-columns:1fr; }
}

/* card shell */
body.page-id-339 .vc_grid-item .vc_grid-item-mini,
body.home .vc_grid-item .vc_grid-item-mini{
  height:100%; display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-lg,18px);
  overflow:hidden;
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.page-id-339 .vc_grid-item:hover .vc_grid-item-mini,
body.home .vc_grid-item:hover .vc_grid-item-mini{
  transform:translateY(-4px);
  box-shadow:var(--hp-shadow-md,0 12px 28px -12px rgba(20,24,31,.22));
  border-color:#d6dde5;
}

/* image zone → fixed aspect, cover */
body.page-id-339 .vc_grid-item .vc_gitem-zone-a,
body.home .vc_grid-item .vc_gitem-zone-a{
  aspect-ratio:16/10; min-height:0;
  background-color:var(--hp-bg-subtle,#eef1f5);   /* soft placeholder when a post has no image */
  background-size:cover !important; background-position:center !important;
}
body.page-id-339 .vc_grid-item .vc_gitem-zone-a img.vc_gitem-zone-img,
body.home .vc_grid-item .vc_gitem-zone-a img.vc_gitem-zone-img{
  position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; /* bg-image is the visible layer */
}

/* content zone */
body.page-id-339 .vc_grid-item .vc_gitem-zone-c,
body.home .vc_grid-item .vc_gitem-zone-c{
  flex:1 1 auto; display:flex; flex-direction:column;
  padding:18px 18px 16px;
}
body.page-id-339 .vc_grid-item .vc_gitem_row,
body.home .vc_grid-item .vc_gitem_row{ margin:0; display:flex; flex-direction:column; flex:1 1 auto; }

/* title */
body.page-id-339 .vc_grid-item .vc_gitem-post-data-source-post_title,
body.home .vc_grid-item .vc_gitem-post-data-source-post_title{ margin:0 0 8px; }
body.page-id-339 .vc_grid-item .vc_gitem-post-data-source-post_title h4,
body.home .vc_grid-item .vc_gitem-post-data-source-post_title h4{
  font-size:17px; line-height:1.3; font-weight:700; color:#1f2730;
  text-align:left !important; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* excerpt */
body.page-id-339 .vc_grid-item .vc_gitem-post-data-source-post_excerpt,
body.home .vc_grid-item .vc_gitem-post-data-source-post_excerpt{
  font-size:13.5px; line-height:1.5; color:#5b6471; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
body.page-id-339 .vc_grid-item .vc_gitem-post-data-source-post_excerpt p,
body.home .vc_grid-item .vc_gitem-post-data-source-post_excerpt p{ margin:0; }

/* push button to bottom */
body.page-id-339 .vc_grid-item .vc_btn3-container,
body.home .vc_grid-item .vc_btn3-container{ margin:auto 0 0 !important; padding:0; }

/* ----------------------------------------------------------------
   (c) "Meer lezen" per-card buttons — kill juicy-pink default → clean text link
   ---------------------------------------------------------------- */
body.page-id-339 .vc_grid-item .vc_btn3.vc_general,
body.home .vc_grid-item .vc_btn3.vc_general{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:#3f8fd0 !important; padding:0 !important;
  font-size:14px !important; font-weight:600 !important;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .15s ease, gap .15s ease;
}
body.page-id-339 .vc_grid-item .vc_btn3.vc_general::after,
body.home .vc_grid-item .vc_btn3.vc_general::after{ content:'→'; font-size:15px; line-height:1; }
body.page-id-339 .vc_grid-item .vc_btn3.vc_general:hover,
body.home .vc_grid-item .vc_btn3.vc_general:hover{ color:#1f5c8c !important; gap:10px; }

/* ----------------------------------------------------------------
   (d) FILTER TABS — Alles / Promz.be / Promz.nl / Promzvak.nl → modern pills
   ---------------------------------------------------------------- */
body.page-id-339 .vc_grid-filter,
body.home .vc_grid-filter{
  margin:0 0 24px !important; padding:0; display:flex; flex-wrap:wrap;
  gap:8px; justify-content:center;
}
body.page-id-339 .vc_grid-filter > li,
body.home .vc_grid-filter > li{ margin:0 !important; }
body.page-id-339 .vc_grid-filter > li > span,
body.home .vc_grid-filter > li > span{
  display:inline-block; cursor:pointer;
  padding:7px 16px; border-radius:999px;
  border:1px solid var(--hp-border,#e6e8eb); background:#fff;
  font-size:13px; font-weight:600; color:#5b6471;
  transition:all .15s ease; line-height:1.2;
}
body.page-id-339 .vc_grid-filter > li > span:hover,
body.home .vc_grid-filter > li > span:hover{ border-color:#b8d0e3; color:#1f5c8c; background:#eef3f8; }
body.page-id-339 .vc_grid-filter > li.vc_active > span,
body.home .vc_grid-filter > li.vc_active > span{
  background:#3f8fd0; border-color:#3f8fd0; color:#fff;
}

/* ----------------------------------------------------------------
   (e) "Meer nieuws" CTA — centered pill below the grid (el_class hp-news-cta)
   ---------------------------------------------------------------- */
body.hetportaal .hp-news-cta{ text-align:center; margin:34px 0 8px; }
body.hetportaal .hp-news-cta a,
body.hetportaal .hp-news-cta .vc_btn3{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:999px;
  background:#3f8fd0 !important; color:#fff !important;
  font-size:15px; font-weight:600; text-decoration:none; border:0 !important;
  box-shadow:0 1px 2px rgba(20,24,31,.08); transition:all .2s ease;
}
body.hetportaal .hp-news-cta a::after,
body.hetportaal .hp-news-cta .vc_btn3::after{ content:'→'; font-size:16px; line-height:1; }
body.hetportaal .hp-news-cta a:hover,
body.hetportaal .hp-news-cta .vc_btn3:hover{
  background:#1f5c8c !important; transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(31,69,112,.55);
}