/* ==========================================================================
   vinzsonderlinck.com — custom.css  (sitepakket v1.3.0)
   Wordt automatisch door Astroid geladen.

   REGEL VAN DIT BESTAND: het legt GEEN lettertype, kleur, grootte, gewicht,
   letterafstand of hoofdletters op. Dat stel je allemaal in via
   Astroid > Template-opties > Typografie en > Kleuren.
   Hier staat enkel de LAYOUT die Joomla/Astroid niet zelf kunnen:
   het werkenraster, de werkpagina, de tegels op de startpagina.
   Geen enkele regel gebruikt !important op typografie of kleur.
   ========================================================================== */


/* 1. Open Sans — alle gewichten (300–800) en cursief, lokaal.
   Dit DEFINIEERT het lettertype alleen; het wordt pas gebruikt als je in
   Astroid > Typografie > tabblad "Local" voor Open Sans kiest.
   Astroid laadt zelf het Regular-bestand uit de map /fonts; deze regels
   vullen de andere gewichten aan, zodat vet en cursief echt vet en cursief zijn.
   -------------------------------------------------------------------------- */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../vs-fonts/open-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("../vs-fonts/open-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../vs-fonts/open-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("../vs-fonts/open-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Zelfde letter onder de namen die Astroid uit het bestand kan afleiden. */
@font-face { font-family: "Open Sans Regular"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../vs-fonts/open-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "OpenSans-Regular"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../vs-fonts/open-sans-latin-wght-normal.woff2") format("woff2"); }


/* 2. Werkenraster
   Gebruikt door de menu-items Werk en de reeksen.
   Instellen in Joomla: Menu's > menu-item > tabblad Blogweergave > Intro-klasse.
   Laat "vs-grid" altijd staan en zet erachter wat je wil:

   Kolommen     (niets) = automatisch · vs-cols-2 / vs-cols-3 / vs-cols-4 / vs-cols-5
   Beeldvak     (niets) = staand 4:5 · vs-h-s = vierkant 1:1 (lager) · vs-h-l = staand 2:3 (hoger)
   Titel        (niets) = gecentreerd, zelfde grootte als de tekst (Astroid > Typografie > Body)
                vs-t-left = links · vs-t-s = kleiner · vs-t-l = groter
   Gegevens     vs-grid-info = jaar · techniek · afmetingen onder de titel
   Geen titels  vs-grid-plain   (of: menu-item > Opties > Titel = Verbergen)
   Varianten    vs-grid-tight = beelden dicht op elkaar · vs-grid-square = vierkant bijgesneden

   Op gsm altijd 2 kolommen. Lettertype van de titels = Astroid > Typografie > Body.
   -------------------------------------------------------------------------- */

.vs-grid {
  --vs-cols: auto-fill;
  --vs-min: 190px;          /* minimale kolombreedte bij "automatisch" */
  --vs-ratio: 4 / 5;        /* vorm van het beeldvak */
  --vs-title-size: 1em;     /* = Body-grootte uit Astroid */
  --vs-title-align: center;
  display: grid;
  grid-template-columns: repeat(var(--vs-cols), minmax(var(--vs-min), 1fr));
  gap: 2.75rem 2rem;
  align-items: start;
  margin: 2rem 0;            /* ook links/rechts 0: Bootstrap ".row" trekt anders 12px buiten beeld */
  padding: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.vs-grid[class*="vs-cols-"] { --vs-min: 0px; }
.vs-grid.vs-cols-2 { --vs-cols: 2; }
.vs-grid.vs-cols-3 { --vs-cols: 3; }
.vs-grid.vs-cols-4 { --vs-cols: 4; }
.vs-grid.vs-cols-5 { --vs-cols: 5; }
.vs-grid.vs-h-s { --vs-ratio: 1 / 1; }
.vs-grid.vs-h-l { --vs-ratio: 2 / 3; }
.vs-grid.vs-t-s { --vs-title-size: .85em; }
.vs-grid.vs-t-l { --vs-title-size: 1.15em; }
.vs-grid.vs-t-left { --vs-title-align: left; }
.vs-grid.vs-t-center { --vs-title-align: center; }

/* Joomla/Astroid zetten rond elk item rij- en kolomklassen: die neutraliseren. */
.vs-grid > * { width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; float: none; }
.vs-grid > .row, .vs-grid > .items-row { display: contents; }
.vs-grid .item-content, .vs-grid .has-image { display: block; margin: 0; padding: 0; }

/* Beeldvak: overal even groot, het werk past er volledig in (niets bijgesneden),
   onderaan uitgelijnd zodat de titels op één lijn staan. */
.vs-grid figure, .vs-grid .item-image { margin: 0 0 .75rem; float: none; }
.vs-grid .item-image a, .vs-grid figure a { display: block; }
.vs-grid .item-image img, .vs-grid figure img {
  display: block; width: 100%; height: auto; aspect-ratio: var(--vs-ratio);
  object-fit: contain; object-position: center bottom;
}

/* Titels: Body-letter van Astroid, eigen grootte en uitlijning.
   Astroid The Two zet zelf ".items-row .article-title .page-header h2 { 26px }";
   de selectors hieronder zijn net specifieker. */
.vs-grid .item-title, .vs-grid .page-header {
  margin: 0; padding: 0; border: 0; font: inherit; text-align: var(--vs-title-align);
}
.vs-grid h2, .vs-grid h3,
.items-row .vs-grid .article-title .page-header h2,
.vs-grid .items-row .article-title .page-header h2,
.vs-grid.items-row .article-title .page-header h2 {
  margin: 0; padding: 0; border: 0;
  font: inherit; font-size: var(--vs-title-size); letter-spacing: inherit;
  text-transform: none; line-height: 1.35; text-align: var(--vs-title-align);
}
.vs-grid .item-title a, .vs-grid h2 a, .vs-grid h3 a { text-decoration: none; }

/* In het raster enkel beeld + titel; gegevens staan op de werkpagina zelf. */
.vs-grid .fields-container, .vs-grid .article-info, .vs-grid .readmore,
.vs-grid .icons, .vs-grid .tags { display: none; }

/* vs-grid-info — gegevens als één rustige regel: 2026 · acryl op doek · 30 × 40 cm */
.vs-grid.vs-grid-info .fields-container {
  display: block; list-style: none; padding: 0; margin: .25rem 0 0;
  font-size: .78em; opacity: .7; text-align: var(--vs-title-align);
}
.vs-grid.vs-grid-info .field-label, .vs-grid.vs-grid-info .field-entry.status { display: none; }
.vs-grid.vs-grid-info .field-entry,
.vs-grid.vs-grid-info .blog-item .fields-container .field-entry { display: inline; border: 0; margin: 0; padding: 0; }
.vs-grid.vs-grid-info .field-entry + .field-entry::before { content: " · "; }

/* vs-grid-plain — enkel beelden */
.vs-grid.vs-grid-plain .item-title, .vs-grid.vs-grid-plain .page-header { display: none; }
.vs-grid.vs-grid-plain figure, .vs-grid.vs-grid-plain .item-image { margin: 0; }

/* vs-grid-tight — beelden dicht op elkaar */
.vs-grid.vs-grid-tight { gap: 1rem .75rem; }

/* vs-grid-square — vierkant bijgesneden (zoals een Instagram-raster) */
.vs-grid.vs-grid-square .item-image img, .vs-grid.vs-grid-square figure img {
  aspect-ratio: 1 / 1; object-fit: cover; object-position: center;
}

/* Tablet: minstens 3 kolommen naast elkaar waar het past */
@media (max-width: 991.98px) {
  .vs-grid { --vs-min: 160px; gap: 2.25rem 1.5rem; }
}
/* Gsm: altijd 2 kolommen (titelgrootte volgt Body > Mobile in Astroid) */
@media (max-width: 575.98px) {
  .vs-grid, .vs-grid[class*="vs-cols-"] { --vs-cols: 2; --vs-min: 0px; gap: 1.75rem 1rem; }
}

/* Lijst met teksten (menu-item Teksten, intro-klasse "vs-list") */
.vs-list > * { padding-block: 1.75rem; border-bottom: 1px solid rgba(127,127,127,.25); }
.vs-list > *:last-child { border-bottom: 0; }


/* 3. Werkpagina: beeld groot en volledig zichtbaar, gegevens eronder
   -------------------------------------------------------------------------- */

.com-content-article .item-image, .item-page .item-image, .com-content-article__image {
  float: none; margin: 0 0 1.5rem; text-align: center;
}
.com-content-article .item-image img, .item-page .item-image img, .com-content-article__image img {
  width: auto; max-width: 100%; height: auto; max-height: 82vh; object-fit: contain;
}
.com-content-article .fields-container, .item-page .fields-container {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.com-content-article .field-entry, .item-page .field-entry { margin: 0 0 .15rem; }
.vs-field-label { display: inline-block; min-width: 7.5em; opacity: .7; }


/* 4. Startpagina, Over, teksten (klassen in de artikeltekst zelf)
   -------------------------------------------------------------------------- */

.vs-hero { margin: 0 0 2rem; text-align: center; }
.vs-hero img { width: auto; max-width: 100%; height: auto; max-height: 78vh; }
.vs-lead { font-size: 1.2em; }

/* vs-tiles 1.6.2 — tegels op de startpagina, net als het werkenraster:
   elk beeld in een even groot vak (niets bijgesneden, onderaan uitgelijnd),
   3 naast elkaar, op gsm 2. Beeld en titel blijven allebei klikbaar. */
.vs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 1.75rem; margin: 1rem 0 2.5rem; }
.vs-tiles .vs-tile { margin: 0; text-align: center; }
.vs-tiles .vs-tile br { display: none; }
.vs-tiles .vs-tile a { text-decoration: none; }
.vs-tiles .vs-tile img {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 4 / 5; object-fit: contain; object-position: center bottom; margin: 0 0 .6rem;
}
@media (max-width: 767.98px) { .vs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; } }

.vs-portrait { float: right; width: min(38%, 360px); margin: 0 0 1rem 2rem; }
.vs-portrait img { width: 100%; height: auto; }
@media (max-width: 767.98px) { .vs-portrait { float: none; width: 100%; margin: 0 0 1.5rem; } }

/* Kunstwerken nooit vervormen */
.com-content-article img, .item-page img, .blog img { max-width: 100%; height: auto; }


/* 5. Stijlklassen in de geest van maartenjanssenmaartenjanssen.nl
   Ze doen niets tot je ze zelf ergens invult — en je haalt ze weg door ze
   te wissen. Zo blijft alles instelbaar in de interface.

   Waar invullen:
   - Astroid > Template-opties > Layout > tandwieltje van een sectie
     > veld "Custom Class" (of "Section Class")
   - Joomla > Menu's > een blog-menu-item > Blogweergave > "Intro-klasse"
   -------------------------------------------------------------------------- */

/* vs-narrow  (sectie)  — inhoud in een smalle kolom van 900px, zoals Maarten.
   Andere breedte? Vul in de sectie bv. "vs-narrow vs-narrow-l" in (1100px). */
.vs-narrow > .container, .vs-narrow > .container-fluid, .vs-narrow .astroid-container > .container {
  max-width: var(--vs-narrow-w, 900px); margin-inline: auto;
}
.vs-narrow.vs-narrow-l { --vs-narrow-w: 1100px; }
.vs-narrow.vs-narrow-s { --vs-narrow-w: 720px; }

/* vs-menu-lines  (header-sectie)  — dunne verticale lijntjes tussen de menu-items.
   Kleur en lettertype van het menu blijven die uit Astroid. */
.vs-menu-lines .astroid-nav > li + li,
.vs-menu-lines .navbar-nav > li + li,
.vs-menu-lines .nav > .nav-item + .nav-item { position: relative; }
.vs-menu-lines .astroid-nav > li + li::before,
.vs-menu-lines .navbar-nav > li + li::before,
.vs-menu-lines .nav > .nav-item + .nav-item::before {
  content: ""; position: absolute; left: 0; top: 50%; height: 1.1em;
  transform: translateY(-50%); border-left: 1px solid currentColor; opacity: .55;
}

/* vs-center  (sectie)  — alles in die sectie gecentreerd (bv. naam + menu). */
.vs-center, .vs-center .astroid-header > div { text-align: center; justify-content: center !important; }