/* HIT: eigen aanpassingen op het template j4scoutingtc4.
   Geladen via de templatestijl (veld customcss), los van template.min.css.

   'no-gutters' is een Bootstrap 4-klasse; Joomla 5 gebruikt Bootstrap 5, waar die niet bestaat.
   Daardoor kreeg de hero-rij -12px marge en scrolde de pagina 12px horizontaal.
   Echte oplossing in het template: 'no-gutters' vervangen door 'g-0'. */
#tc4-hero > .row.no-gutters { --bs-gutter-x: 0; }

/* ===== Plaatspagina's (HIT Alphen, Dwingeloo, ...) =====
   Gebruik in het artikel van een plaats: <div class="hitp"> ... </div>.
   Alle 8 plaatspagina's gebruiken deze stijl; aanpassen hier = aanpassen op alle 8. */
.hitp { --g:#00A551; --gd:#007A3D; --gl:#E8F6EE; --y:#FCDD17; --ys:#FFF8D1; --yd:#4a3f00; --slab:"Roboto Slab", Georgia, serif; line-height:1.6; }
.hitp *, .hitp *::before, .hitp *::after { box-sizing:border-box; }
.hitp :where(h2,p,ul) { margin:0; }
.hitp :where(strong,b) { font-weight:600; }
.hitp h2 { font:700 1.6em/1.2 var(--slab); color:var(--gd); margin:36px 0 14px; }
.hitp-kicker { display:inline-block; margin-bottom:12px !important; padding:3px 12px; border-radius:4px 12px 4px 12px; background:var(--y); color:var(--yd); font-weight:600; font-size:.85em; }
.hitp-intro p { margin-bottom:12px; max-width:760px; }
.hitp-facts { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 !important; }
.hitp-facts li { padding:14px 16px; border-radius:14px; background:var(--gl); }
.hitp-facts span { display:block; font-size:.8em; color:#5f6368; }
.hitp-facts b { font-family:var(--slab); color:var(--gd); }
.hitp-actions { display:flex; flex-wrap:wrap; gap:10px; }
.hitp .hitp-btn { display:inline-block; padding:10px 20px; border-radius:50px; background:var(--g); border:2px solid var(--g); color:#fff !important;
                  font-weight:600; font-size:.8em; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; }
.hitp .hitp-btn:hover { background:var(--gd); border-color:var(--gd); }
.hitp .hitp-btn-line { background:transparent; color:var(--gd) !important; }
.hitp .hitp-btn-line:hover { background:var(--gl); }
/* Kampenlijst uit KampInfo ({kampinfo ...}): div.kamp > span > a, span.delim, span.leeftijd */
.hitp-kampen { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.hitp-kampen > .moduletable, .hitp-kampen > p, .hitp-kampen > h3 { grid-column:1 / -1; margin:0; }
.hitp-kampen > p:empty { display:none; }
.hitp .kamp { position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px;
              border:2px solid var(--gl); border-radius:14px; }
.hitp .kamp:hover { border-color:var(--g); background:var(--gl); }
.hitp .kamp a { color:var(--gd) !important; font-weight:600; text-decoration:none; }
.hitp .kamp a::after { content:""; position:absolute; inset:0; }
.hitp .kamp .delim { display:none; }
.hitp .kamp .leeftijd { flex:none; padding:2px 10px; border-radius:50px; background:var(--ys); color:var(--yd); font-size:.8em; font-weight:600; white-space:nowrap; }
.hitp-soon { padding:18px 22px; background:var(--ys); border:2px solid var(--y); border-radius:20px 6px 20px 6px; }
.hitp-soon a { color:var(--gd) !important; font-weight:600; }
@media (max-width: 700px) { .hitp-facts { grid-template-columns:1fr; } }