/*
 * ===========================
 * CSS Layering Order Explanation
 *
 * reset        → browser defaults, always first
 * tokens       → design variables (colors, spacing, fonts)
 * base         → global element styles (body, headings, links)
 * layout       → structural/layout rules (containers, main)
 * components   → component-specific styles (header, footer, nav)
 * utilities    → helper classes (.sr-only, visually-hidden, etc.)
 *
 * Layers enforce cascade order regardless of source order.
 * Add new rules in the appropriate layer for maintainability.
 * ===========================
 */
@layer reset, tokens, base, layout, components, utilities;

/*
* ====================
* destyle.css reset
* ====================
*/
@layer reset {
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:#fff0}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:#fff0;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:#fff0;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}
}

/*
* ====================
* Font faces
* ====================
*/
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz\,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz\,wghtItalic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/*
* ====================
* Design tokens
* ====================
*/
@layer tokens {
:root {
    /* containers */
    --container-xl: 1200px;

    /* spacing */
    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 2rem;
    --space-xl: 4rem;

    /* columns */
    --col-count: 12;
    --col-target-width: 16rem;

    /* row/column gaps */
    --row-gap: var(--space-l);
    --column-gap: var(--space-m);

    /* fractions for grid (from blueprint) */
    --fraction-1-1: 1;
    --fraction-1-2: 2;
    --fraction-1-3: 3;
    --fraction-2-3: 3;
    --fraction-1-4: 4;

    /* colors */
    --color-dark: black;
    --color-light: white;
    --color-primary: gainsboro;
    --color-secondary: darkgrey;
    --color-tertiary: chartreuse;
    --color-accent: greenyellow;
    --color-accent-secondary: invert(1);
    --color-placeholder: var(--color-accent);

    /* typography */
    --font-heading: monospace, monospace;
    --font-body: 'Inter', sans-serif;
    --line-height: 1.4;
    --line-height-heading: 1.2;

    --ratio: 1.333;

    --step-0: 1rem; /* body */

    --step-1: calc(var(--step-0) * var(--ratio));
    --step-2: calc(var(--step-0) * pow(var(--ratio), 2));
    --step-3: calc(var(--step-0) * pow(var(--ratio), 3));
    --step-4: calc(var(--step-0) * pow(var(--ratio), 4));
    --step-5: calc(var(--step-0) * pow(var(--ratio), 5));
    --step-6: calc(var(--step-0) * pow(var(--ratio), 6));

    --step--1: calc(var(--step-0) / var(--ratio));
    --step--2: calc(var(--step-0) / pow(var(--ratio), 2));
}
}

/*
* ====================
* Global styles
* ====================
*/
@layer base {
html {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

body {
    background-color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--step-0);

    min-height: 100vh;
    display: flex;
    flex-direction: column;

    line-height: var(--line-height);

    container-type: inline-size;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
    font-weight: bold;
}

h1 {
    font-size: clamp(2rem, 5vw, var(--step-6));
    margin-bottom: var(--space-l);
}
h2 {
    font-size: clamp(1.5rem, 4vw, var(--step-5));
    margin-bottom: var(--space-l);
}
h3 {
    font-size: clamp(1.25rem, 3vw, var(--step-4));
    margin-bottom: var(--space-m);
}
h4 {
    font-size: clamp(1rem, 2.5vw, var(--step-3));
    margin-bottom: var(--space-s)
}
h5 {
    font-size: clamp(0.875rem, 2vw, var(--step-2));
    margin-bottom: var(--space-xs);
}
h6 {
    font-size: clamp(0.75rem, 1.5vw, var(--step-1));
    margin-bottom: var(--space-xs);
}

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

figure {
    margin: 0;
    width: 100%;
}
}

/*
* ====================
* Layout styles
* ====================
*/
@layer layout {
main {
    flex: 1;
    min-height: 0;
}

main > .container {
    padding: var(--space-xl) var(--space-l);
}

.container {
    max-width: var(--container-xl);
    margin-inline: auto;
}

/* Row – fluid grid that wraps columns */
.row {
    --grid-max-column-count: var(--col-count);
    --grid-min-col-size: var(--col-target-width);
    --grid-gap: var(--row-gap);

    display: grid;
    gap: var(--grid-gap);

    /* Ideal column width accounting for gaps */
    --grid-col-size-calc: calc(
        (100% - var(--grid-gap) * (var(--grid-max-column-count) - 1))
        / var(--grid-max-column-count)
    );

    /* Prevent shrink beneath min width */
    --grid-col-min-size-calc: max(
        var(--grid-min-col-size),
        var(--grid-col-size-calc)
    );

    grid-template-columns:
        repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr));

    margin-bottom: var(--row-gap);
    align-items: start;

    --single-col-breakpoint: calc(
        var(--grid-col-min-size-calc) + var(--grid-gap)
    );
}

/* Columns stack inner blocks */
.column {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--column-gap);
    width: 100%;
}

/* Fraction spans within the grid */
.column[data-width="1/1"] { grid-column: span 2; }
.column[data-width="1/2"] { grid-column: span 1; }
.column[data-width="1/3"] { grid-column: span 1; }
.column[data-width="2/3"] { grid-column: span 2; }
.column[data-width="1/4"] { grid-column: span 1; }

/* Ensure inner blocks fill the column */
.column > * {
    width: 100%;
    margin: 0;
}

/* Smaller than 3 columns */
@container (max-width: 55.5rem) {
    /* Force 1/3 and 2/3 columns to take 1 fraction each */
    .column[data-width="1/3"],
    .column[data-width="2/3"] {
        grid-column: span 1;
        /* background-color: purple; */
    }
}

/* Smaller than 2 columns */
@container (max-width: 33.5rem) {
    /* Force 1/2 to span full width */
    .column[data-width="1/2"] {
        grid-column: span 2;
        /* background-color: orange; */
    }
}

video {
    width: 100%;
}
}

/*
* ====================
* Component styles
* ====================
*/
@layer components {
/*
* ====================
* Header styles
* ====================
*/
.site-header {
    background-color: var(--color-secondary);
    font-family: var(--font-heading);
}

.site-header > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    font-weight: bold;
    padding: var(--space-xs) var(--space-s);
    background-color: var(--color-accent);
}

.header__nav-list {
    display: flex;
}

.header__nav-item {
    padding: var(--space-xs) var(--space-s);
}
.header__nav-item:not(.header__nav-item--active):hover {
    background-color: var(--color-accent);
}

.header__nav-item--cta {
    background-color: var(--color-accent);
    filter: var(--color-accent-secondary);
}
.header__nav-item--cta:hover {
    filter: invert(0);
}

.header__nav-item--active {
    background-color: var(--color-primary);
}

/*
* ====================
* Footer styles
* ====================
*/
.site-footer {
    font-family: var(--font-heading);
}

.footer-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-xs) 0;
    flex-wrap: wrap;
}

.footer__item {
    padding: var(--space-xs) var(--space-s);
    white-space: nowrap;
}

@container (min-width: 33rem) {
    .footer__item + .footer__item::before {
        content: "|";
        padding-inline: 0 var(--space-s);
    }
}

/* Responsive nav for small screens */
@container (max-width: 40rem) {
    .site-header {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .site-header > .container {
        flex-direction: column;
        align-items: stretch;
    }

    .header__nav {
        align-self: flex-end;
    }

    main {
        order: 2;
    }

    .site-footer {
        order: 1;
    }
}

/*
* ====================
* Picture styles
* ====================
*/
.image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 8rem;
    background: var(--color-placeholder);
}

figure img {
    width: 100%;
}

/* aspect ratios */
figure[data-ratio="1/1"] { aspect-ratio: 1/1; }
figure[data-ratio="16/9"] { aspect-ratio: 16/9; }
figure[data-ratio="10/8"] { aspect-ratio: 10/8; }
figure[data-ratio="21/9"] { aspect-ratio: 21/9; }
figure[data-ratio="7/5"] { aspect-ratio: 7/5; }
figure[data-ratio="4/3"] { aspect-ratio: 4/3; }
figure[data-ratio="5/3"] { aspect-ratio: 5/3; }
figure[data-ratio="3/2"] { aspect-ratio: 3/2; }
figure[data-ratio="3/1"] { aspect-ratio: 3/1; }

/* ratio containers */
figure[data-ratio]:not([data-ratio="auto"]) {
    aspect-ratio: attr(data-ratio); /* fallback for browsers that support attr() */
    overflow: hidden;
}

/* make image fill ratio box */
figure[data-crop] img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* true cropping */
    object-position: var(--focus, center);
}

/* cropping behaviour */
figure:not([data-crop]) img {
    width: 100%;
    max-height: 100%;
    /* height: 100%; */
    object-fit: contain; /* no crop, keeps ratio */
}

/*
* ====================
* Projects page styles
* ====================
*/
/* Projects page hover effect */
.projects-list { list-style: none; padding: 0; margin: 0; }

.project-item { margin-bottom: 1rem; cursor: pointer; }
.project-item__link { display: inline-flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.project-item__title { margin-right: var(--space-xs); }
.project-item__tag {
    font-size: var(--step--1);
    color: var(--color-light);
    background-color: var(--color-dark);
    padding: var(--space-xs) var(--space-s);
}

.projects-images { position: relative; }
.project-image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    transition: opacity 0.3s; 
    display: none; 
}
.project-image.active { display: block; }

/* ====================
 * Gallery block
 * ==================== */

figure ul {
    display: grid;
    gap: var(--space-m);
    margin-bottom: var(--space-m);

    --gallery-columns: 1;
    --gallery-row-height: 220px;

    grid-template-columns: repeat(var(--gallery-columns), 1fr);
    grid-auto-rows: var(--gallery-row-height);
}

/* --- Column count by image count (quantity queries) --- */
figure ul:has(li:nth-child(2)):not(:has(li:nth-child(3)))  { --gallery-columns: 2; }
figure ul:has(li:nth-child(3)):not(:has(li:nth-child(4)))  { --gallery-columns: 3; }
figure ul:has(li:nth-child(4)):not(:has(li:nth-child(5)))  { --gallery-columns: 4; }
figure ul:has(li:nth-child(5)):not(:has(li:nth-child(6)))  { --gallery-columns: 3; }
figure ul:has(li:nth-child(6)):not(:has(li:nth-child(7)))  { --gallery-columns: 3; }
figure ul:has(li:nth-child(7)):not(:has(li:nth-child(8)))  { --gallery-columns: 4; }
figure ul:has(li:nth-child(8)):not(:has(li:nth-child(9)))  { --gallery-columns: 4; }
figure ul:has(li:nth-child(9))                             { --gallery-columns: 4; }

/* --- Grid items --- */
figure ul li {
    overflow: hidden;
}

/* Portrait images span 2 rows */
figure ul li[data-orientation="portrait"] {
    grid-row: span 2;
}

/* All images fill their cell completely */
figure ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, center);
}

/* --- no data-crop: natural images, no fixed row height --- */
figure:not([data-crop]) ul {
    grid-auto-rows: auto;
}

figure:not([data-crop]) ul li[data-portrait] {
    grid-row: span 1; /* portrait span only makes sense with fixed rows */
}

figure:not([data-crop]) ul li img {
    height: auto;
    object-fit: unset;
}

/* --- Caption --- */
figure:has(ul) figcaption {
    margin-bottom: var(--space-l);
    text-align: center;
    font-size: var(--step--1);
    /* color: var(--color-secondary); */
}
}

/*
* ====================
* Utility styles
* ====================
*/
@layer utilities {
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Make it visible when focused or active (for accessibility) */
.visually-hidden:focus,
.visually-hidden:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal !important;
}
}