@charset "UTF-8";

/* =========================================================================
   Zublo werkgrid — [zublo_work]

   Bewust alleen layout: kolommen, gaps en beeldverhouding. Lettertypes,
   tekstkleuren en randen komen van het thema, zodat het grid er op elke site
   uitziet alsof het erbij hoort. Klopt er toch iets niet, dan haalt
   style="none" deze stylesheet er in zijn geheel af en houdt de sitebouwer
   kale markup met dezelfde classnamen over.
   ========================================================================= */

.zublo-work,
.zublo-work * {
    /* Niet afhankelijk zijn van het thema. Vrijwel elk thema zet dit globaal,
       maar er staat padding op de kaart en dan hoort dit vast te liggen. */
    box-sizing: border-box;
}

/* Het element staat er bewust bij. Een thema zet zijn lijstopmaak met een
   selector als .entry-content ul, en die heeft specificiteit (0,1,1) — hoger dan
   een kale class. Zonder ul hier verliest onze reset en krijgt het grid een
   inspringing van het thema, waardoor het naar rechts schuift en in een
   container die tot de rand loopt aan die kant buiten beeld valt. */
ul.zublo-work {
    --zublo-work-columns: 3;
    --zublo-work-gap: 24px;
    --zublo-work-ratio: 3 / 2;

    list-style: none;
    margin: 0;
    padding: 0;
    /* Een Spectra- of Astra-container is een flexbox, en alles wat daar
       rechtstreeks in staat is een flex-item met min-width: auto — dat weigert
       smaller te worden dan zijn inhoud en loopt zo het scherm af. Dit is de
       regel die dat oplost; max-width is het vangnet eromheen. */
    min-width: 0;
    max-width: 100%;
    /* De ouder mag niet bepalen of dit grid de volle breedte krijgt. Een
       Spectra-container met "Align items" op center of flex-start rekt zijn
       kinderen niet uit maar zet ze op inhoudsbreedte; dan wordt het grid
       smaller dan de plek die het heeft. Met een expliciete breedte vult het
       zijn ouder, welke uitlijning die ook gebruikt. */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--zublo-work-columns), minmax(0, 1fr));
    gap: var(--zublo-work-gap);
}

/* Het aantal kolommen staat als variabele op het element zelf. Deze regels
   overschrijven grid-template-columns rechtstreeks en winnen daarmee alsnog:
   een inline stijl zet immers alleen de variabele, niet de eigenschap. */
@media (max-width: 900px) {
    ul.zublo-work {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    ul.zublo-work {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Zelfde reden als hierboven: .entry-content li wint het anders van een class. */
li.zublo-work__item {
    margin: 0;
    padding: 0;
    /* Een grid-item staat standaard op min-width: auto, en dat is de min-content
       breedte van zijn inhoud. Eén lang woord in een titel duwt de tegel dan
       buiten zijn kolom en zo het scherm af. */
    min-width: 0;
}

/* -------------------------------------------------------------------------
   card="on" — de tegels als kaart.

   Alleen de vorm: achtergrond en radius naar het item, de foto strak in de
   bovenrand, en ruimte om de tekst. Dat zijn vier dingen die op elkaar moeten
   passen, en daarom kan een sitebouwer dit niet met één achtergrondregel
   voor elkaar krijgen — vandaar dat het hier zit en niet in zijn thema.

   De kleur blijft wél van hem. De standaard is geen kleur die wij verzinnen
   maar een tint van de tekstkleur van het thema, zodat een kaart zich vanzelf
   aanpast aan een licht én een donker ontwerp. Wie iets anders wil zet
   --zublo-work-card-bg op zijn eigen waarde.
   ------------------------------------------------------------------------- */
.zublo-work--card {
    --zublo-work-card-bg: color-mix(in srgb, currentColor 5%, transparent);
    --zublo-work-card-radius: 8px;
    --zublo-work-card-padding: 1em;
}

.zublo-work--card .zublo-work__item {
    background: var(--zublo-work-card-bg);
    border-radius: var(--zublo-work-card-radius);
    overflow: hidden;
}

/* Het item klemt de foto al af, dus zijn eigen radius moet eraf — anders zie
   je een afgeronde hoek binnen een afgeronde hoek. */
.zublo-work--card .zublo-work__media {
    border-radius: 0;
}

.zublo-work--card .zublo-work__body {
    margin-top: 0;
    padding: var(--zublo-work-card-padding);
}

.zublo-work__link {
    display: block;
}

.zublo-work__media {
    display: block;
    overflow: hidden;
    /* Vaste verhouding, zodat de titels van alle tegels op één lijn staan —
       ook bij een tegel zonder foto, die dan een lege plek reserveert. */
    aspect-ratio: var(--zublo-work-ratio);
    border-radius: 6px;
    line-height: 0;
}

img.zublo-work__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Van onderaf bijsnijden. Een tegel heeft een vaste verhouding, dus bij een foto die anders
       ligt moet er iets weg; standaard haalt cover dat boven én onder weg. Het Zublo-watermerk zit
       ingebrand tegen de onderrand, en die valt daarmee als eerste af — op een staande foto zelfs
       helemaal. Alles wat weg moet gaat nu van bovenaf, zodat de onderrand altijd heel blijft.
       Ook voor foto's die al eerder zijn geüpload; die hoeven er niet opnieuw in. */
    object-position: center bottom;
    transition: transform 0.3s ease;
}

/* focus="center": symmetrisch bijsnijden, zoals cover het uit zichzelf doet. Voor wie geen
   watermerk gebruikt en liever het midden van de foto vasthoudt. */
.zublo-work--focus-center img.zublo-work__img {
    object-position: center center;
}

.zublo-work__link:hover img.zublo-work__img {
    transform: scale(1.03);
}

.zublo-work__body {
    display: block;
    margin-top: 0.6em;
}

.zublo-work__title {
    display: block;
    /* Een projectnaam zonder spaties mag de tegel niet oprekken. De introtekst
       is al afgevangen door de line-clamp eronder. */
    overflow-wrap: anywhere;
}

.zublo-work__meta {
    display: block;
    font-size: 0.85em;
    opacity: 0.75;
    overflow-wrap: anywhere;
}

.zublo-work__intro {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.4em;
    font-size: 0.92em;
    /* Afkappen op drie regels, zodat een lange samenvatting de tegels niet ongelijk maakt en de
       knoppen op één lijn blijven staan. Layout, geen opmaak. */
}

.zublo-work__more {
    display: inline-block;
    margin-top: 0.6em;
    font-size: 0.9em;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    /* Bewust geen achtergrond en geen eigen kleur: een echte knop vraagt om een kleurkeuze, en die
       hoort bij het thema. Wie er een knop van wil maken heeft deze classnaam. */
}

/* De knop onder een teaser, naar het volledige overzicht. Ruimte en gewicht,
   verder niets: kleur en lettertype komen van het thema. */
.zublo-work__cta {
    margin-top: 1.5em;
    font-weight: 600;
}

/* =========================================================================
   De weg terug onder een bericht en op een projectpagina.

   Ook hier alleen ruimte en volgorde. De links zijn gewone links en krijgen
   dus de kleur en het lettertype die het thema aan links geeft.
   ========================================================================= */

.zublo-postnav {
    margin-top: 2em;
    padding-top: 1.25em;
    border-top: 1px solid currentColor;
    /* Een streep in de tekstkleur zou te hard zijn; dit houdt hem subtiel
       zonder een kleur te kiezen die bij het thema uit de toon valt. */
    border-top-color: color-mix(in srgb, currentColor 15%, transparent);
}

.zublo-postnav > * {
    margin: 0 0 0.75em;
}

.zublo-postnav > *:last-child {
    margin-bottom: 0;
}

.zublo-postnav__heading {
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}