/*
 * Studio DT — base layer. Consumes tokens from assets/css/tokens.css (enqueued first).
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; height: 100%; }

/* Sticky-to-bottom layout: body is the full-height flex column wrapper; .site-main grows
   to fill so the footer rests at the viewport bottom on short pages and flows after the
   content on long ones. min-height (not height:100%) lets long pages grow past the viewport
   instead of overflowing under the footer. The footer stays in normal flow (never fixed). */
body {
    margin: 0;
    min-height: 100vh;
    /* Clip the slight horizontal spill from full-bleed 100vw elements (title bg, hero/contact
       shapes) when a scrollbar appears — clip (not hidden) so sticky positioning still works. */
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);   /* U8 Medium is the brand's default text weight */
    line-height: var(--line-height-default);
    color: var(--color-text-default);
    background-color: var(--color-surface-default);
}

h1, h2, h3, h4 {
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-md);
}

p { margin: 0 0 var(--space-sm); }

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

.site-main {
    flex: 1 0 auto;   /* grow to push the footer to the bottom on short pages */
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
    /* Bottom 0 — the content→footer gap is owned by .site-footer margin-top (avoids a double gap). */
    padding-block: var(--space-md) 0;
}

/* Front page: the hero text is framed by an equal --space-5xl (96px) gap above and below —
   above is the logo→text gap (the hero logo is sized to its own height, not 100svh); below is
   the gap to the first content block. Not a nav→content gap. */
/* Lift the front-page content well above the hero logo (z-base 0) so the logo's scattered
   pieces always pass behind the projects/text. Stays below the sticky nav (--z-sticky 100). */
.site-main--front { padding-block-start: var(--space-5xl); position: relative; z-index: 10; }
.site-main--front .site-main__content > :first-child { margin-block-end: var(--space-5xl); }
/* Mobile (portrait): tighten the hero rhythm — logo → hero text 20, hero text → first project 48. */
@media (orientation: portrait) {
    .site-main--front { padding-block-start: var(--space-md); }
    .site-main--front .site-main__content > :first-child { margin-block-end: var(--space-3xl); }
}
/* Logo + text closing card: generous symmetric breathing room above and below (208px),
   text top-aligned against the taller logo. */
.site-main--front .studio-dt-hero-image-text {
	margin-block: calc(var(--space-5xl) + var(--space-4xl));
	align-items: flex-start;
}
/* Logo 70% / text 30% (contact page keeps the block's default 50/50). */
.site-main--front .studio-dt-hero-image-text__media { flex: 7; }
.site-main--front .studio-dt-hero-image-text__text { flex: 3; }
/* Its text matches the hero-text tagline size via the shared token. */
.site-main--front .studio-dt-hero-image-text__text {
	font-size: var(--font-size-hero-tagline);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-regular);
}
/* Mobile: the closing hero uses the standard block gap above (studio card → hero); the gap below
   (hero → footer) is left to the footer's own margin-top, so zero the hero's bottom margin here. */
@media (max-width: 800px) {
	.site-main--front .studio-dt-hero-image-text { margin-block: var(--space-block-mobile) 0; }
	/* last block → footer uses the standard mobile block gap (overrides the footer's --space-section) */
	.site-main--front ~ .site-footer { margin-top: var(--space-block-mobile); }
	/* Full-bleed the closing logo to the 10px nav gutter, matching every other image container;
	   stretch + the same -14px escape the cards use. The text column keeps its content-gutter inset. */
	.site-main--front .studio-dt-hero-image-text--media-logo .studio-dt-hero-image-text__media {
		align-self: stretch;
		margin-inline: calc(var(--space-md) / 2 - var(--container-gutter));
	}
}

/* Inter-block vertical rhythm in content areas. the_content() drops top-level
   blocks as direct .site-main children with margin 0, so without this they stack
   flush. Adjacent margins collapse, so a block's own bottom margin collapses up to this. */
.site-main--front > * + *,
.site-main--page > * + *,
.site-main--single-project > * + * {
    margin-top: var(--space-3xl);
}
/* Project pages: the gap between adjacent image+text blocks is 12px tighter than the default
   inter-block rhythm (the title→first-block gap keeps the full rhythm). */
.site-main--single-project .studio-dt-hero-image-text + .studio-dt-hero-image-text {
    margin-top: calc(var(--space-3xl) - 12px);
}
/* …and just 20px (one gutter) from the last image+text block down to the gallery. */
.site-main--single-project .studio-dt-hero-image-text + .studio-dt-mid {
    margin-top: var(--space-md);
}
/* The project table hugs the preceding block; its own padding-block owns the gap. */
.site-main--single-project .studio-dt-hero-image-text + .studio-dt-project-table {
    margin-top: 0;
}
/* 124px from the gallery down to the Related Work section. */
.site-main--single-project .related-work {
    margin-top: 124px;
}
/* 204px from the Related Work grid down to the footer. */
body.single-project .site-footer {
    margin-top: 204px;
}

.alignwide  { max-width: var(--container-max); margin-inline: auto; }
.alignfull  { max-width: none; }

/* === Interaction states — hover underline + click sink === */
a { transition: transform var(--motion-duration-hover) var(--motion-easing-default),
                opacity var(--motion-duration-hover) var(--motion-easing-default); }
a:hover { text-decoration-line: underline; }   /* longhand → keeps our explicit thickness (shorthand would reset it) */
a:active { transform: translateY(1px); }   /* soft sink (links) */

button { transition: transform var(--motion-duration-hover) var(--motion-easing-default),
                     opacity var(--motion-duration-hover) var(--motion-easing-default); }
button:hover { text-decoration-line: underline; }
button:active { transform: translateY(1px); opacity: .9; }   /* firmer sink (buttons) */

/* Pills are <a> styled as buttons → firmer sink, and a hover underline as thin as the pill outline. */
.studio-dt-pill, .site-footer__pill { text-decoration-thickness: 1px; }
.studio-dt-pill:active, .site-footer__pill:active { transform: translateY(1px); opacity: .9; }

/* Project cards (main highlighted + projecten archive): keep their look — no caption underline,
   zoom on hover — but the image sinks on click so the press matches the buttons/links. */
.project-item__link:hover { text-decoration: none; }
.project-item__link:active { transform: none; }   /* the image sinks instead of the whole card */
.project-item__media { transition: transform var(--motion-duration-hover) var(--motion-easing-default); }
.project-item__link:active .project-item__media { transform: translateY(2px); }   /* twice the link sink — drops deeper */
/* No hover zoom on the project cards (main + projecten). */
@media (hover: hover) {
    .studio-dt-highlighted .project-item:hover .project-item__media img,
    .projecten-grid .project-item:hover .project-item__media img { transform: none; }
}

/* Projecten items are one clickable unit: the caption underlines on hover, and the whole link
   (image + caption) sinks together on click — the image sinks via the link, not separately. */
.projecten-grid .project-item__link:hover { text-decoration-line: underline; }
.projecten-grid .project-item__link:active { transform: translateY(2px); }
.projecten-grid .project-item__link:active .project-item__media { transform: none; }
/* Hover: one of the logo's elements layered over the image, shown instantly on hover (no fade).
   The shape is a CSS mask tinted by --hover-color, so any geometry works in any brand colour;
   each .project-item--shape-* modifier supplies its mask, corner, size and proportion. A shape
   modifier + colour are assigned per hover by JS (randomised); the leaf defaults keep the overlay
   correct before any class is applied. position:relative is the overlay's containing block (the
   project-item component stylesheet isn't enqueued on the archive, so it's set here too). */
.projecten-grid .project-item__media { position: relative; overflow: hidden; }
.projecten-grid .project-item__media::after {
    content: "";
    position: absolute;
    inset: var(--hover-inset, 0 auto auto 0);   /* corner placement, per shape */
    width: var(--hover-size, 48%);
    aspect-ratio: var(--hover-ratio, 1706 / 1707);   /* the shape's own proportion */
    background-color: var(--hover-color, var(--palette-green-500));
    -webkit-mask: var(--hover-shape, url("../graphics/hover-shapes/leaf.svg")) var(--hover-pos, top left) / var(--hover-mask-size, contain) no-repeat;
            mask: var(--hover-shape, url("../graphics/hover-shapes/leaf.svg")) var(--hover-pos, top left) / var(--hover-mask-size, contain) no-repeat;
    transform: var(--hover-transform, none);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.projecten-grid .project-item--shape-leaf {
    --hover-shape: url("../graphics/hover-shapes/leaf.svg");
    --hover-color: var(--palette-green-500);
    --hover-inset: 0 auto auto 0;
    --hover-pos: top left;
    --hover-size: 48%;
    --hover-ratio: 1706 / 1707;
}

.projecten-grid .project-item--shape-triangle {
    --hover-shape: url("../graphics/hover-shapes/triangle.svg");
    --hover-color: var(--palette-red-500);
    --hover-inset: 0 auto auto 0;
    --hover-pos: top left;
    --hover-size: 38%;
    --hover-ratio: 582.794678 / 931.828247;
}

/* Stretched edge-to-edge (mask-size 100% 100%), so --hover-ratio sets thickness instead of the
   shape's own proportion. */
.projecten-grid .project-item--shape-strip {
    --hover-shape: url("../graphics/hover-shapes/strip.svg");
    --hover-color: var(--palette-yellow-500);
    --hover-inset: 0 auto auto 0;
    --hover-pos: top left;
    --hover-size: 100%;
    --hover-mask-size: 100% 100%;
    --hover-ratio: 6;
}

/* Mirrored (scaleX) so the flat edges hug the top + left corner. */
.projecten-grid .project-item--shape-quarter {
    --hover-shape: url("../graphics/hover-shapes/quarter.svg");
    --hover-color: var(--palette-lightblue-500);
    --hover-inset: 0 auto auto 0;
    --hover-pos: top left;
    --hover-size: 38%;
    --hover-ratio: 565.501465 / 580.437134;
    --hover-transform: scaleX(-1);
}

/* Same size + alignment as the yellow strip. */
.projecten-grid .project-item--shape-bar {
    --hover-shape: url("../graphics/hover-shapes/bar.svg");
    --hover-color: var(--palette-blue-500);
    --hover-inset: 0 auto auto 0;
    --hover-pos: top left;
    --hover-size: 100%;
    --hover-mask-size: 100% 100%;
    --hover-ratio: 6;
}

.projecten-grid .project-item--shape-wedge {
    --hover-shape: url("../graphics/hover-shapes/wedge.svg");
    --hover-color: var(--palette-orange-500);
    --hover-inset: 0 auto auto 0;
    --hover-pos: top left;
    --hover-size: 40%;
    --hover-ratio: 1;
}
@media (hover: hover) {
    .projecten-grid .project-item:hover .project-item__media::after { opacity: 1; }
}
/* Touch: no hover, so reveal the shape on tap. */
@media (hover: none) {
    .projecten-grid .project-item__link:active .project-item__media::after { opacity: 1; }
}

/* Footer bottom-row links/buttons (Imprint, Cookievoorkeuren) follow the site pattern: hover
   underline + click sink, not always underlined. inline-block so the transform sink applies. */
.site-footer__bottom a,
.site-footer__bottom button { display: inline-block; text-decoration: none; }
.site-footer__bottom a:hover,
.site-footer__bottom button:hover { text-decoration-line: underline; }

/* Links that opt out of underline by default (nav + contact columns on main/contact) still need
   the hover-underline (higher specificity beats their `text-decoration:none`) and inline-block so
   the click-sink applies — inline elements can't be transformed. */
.site-header__menu a,
.site-header__brand,
.site-footer__col--contact a,
.studio-dt-hero-image-text__contact a { display: inline-block; }
.site-header__menu a:hover,
.site-header__brand:hover,
.site-footer__col--contact a:hover,
.studio-dt-hero-image-text__contact a:hover { text-decoration-line: underline; }
/* Nav text is small, so its auto underline reads thin — give it a thicker line (on :hover so it
   beats site-chrome's `text-decoration:none` shorthand which resets thickness). */
.site-header__menu a:hover, .site-header__brand:hover { text-decoration-thickness: 1.3px; }

@media (prefers-reduced-motion: reduce) {
    a, button, .project-item__media { transition: none; }
    a:active, button:active,
    .studio-dt-pill:active, .site-footer__pill:active,
    .project-item__link:active .project-item__media { transform: none; }
}