/* Header ------------------------------------------------------------------- */

.header {
    position: fixed;
	width: 100%;
	color: #fff;
    top: 0;
    z-index: 100;
    background: transparent;
	mix-blend-mode: difference;
    padding-block: 12px;
}

.header__inner {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    column-gap: var(--gutter);
    padding-inline: var(--margin);
    align-items: start;
}

.brand         { grid-column: 1 / span 2; }
.header__meta  { grid-column: 3 / span 3; text-align: left;  line-height: 1.2; }
.header__contact { grid-column: 8 / span 2; text-align: left; line-height: 1.2; }
.header__mail {grid-column:10/span 2; text-align:left; line-height:1.2; }

.brand__mark { font-weight: 700; line-height: 1.15; }
.brand__mark span { display: block; }

@media (max-width: 1024px) {
    .header__inner {
        display: grid;
        grid-template-columns: 2fr 1fr;
        column-gap: 16px;
        row-gap: 6px;
    }
    .brand           { grid-column: 1; grid-row: 1; }
    .header__meta    { grid-column: 2; grid-row: 1; text-align: left; }
    .header__contact { grid-column: 1; grid-row: 2; text-align: left; }
    .header__mail    { grid-column: 2; grid-row: 2; text-align: left; }
}

/* Project block ------------------------------------------------------------ */

.project-block {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

/* Active image (top, out of grid, uniform height, centered) ----------------- */

.active-image-row {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0;
}

.active-image {
    display: block;
    width: auto;
    min-height: 36vh;
}

.active-image img {
    display: block;
    height: 55vh;
    width: auto;
    max-width: none;
    object-fit: contain;
    transition: opacity 200ms ease;
}

/* Global fixed meta bar ---------------------------------------------------- */
/* Positioned so that on the first project it sits between the active image
   and the preview thumbnails. Fixed → always visible while scrolling. */

.meta-bar {
    position: fixed;
    top: 50vh;
	transform: translateY(-50%);
    left: 0;
    right: 0;
    z-index: 90;
    padding-block: 8px;
    max-width: 100%;
    pointer-events: none;
    color: #fff;
    mix-blend-mode: difference;
}
.meta-bar > * { pointer-events: auto; }

.project-meta {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    column-gap: var(--gutter);
    padding-inline: var(--margin);
    align-items: baseline;
    row-gap: 4px;
    position: relative;
    max-width: 100%;
}

.project-meta > * { min-width: 0; white-space: nowrap; grid-row: 1; }

@media (max-width: 1024px) {
    .project-meta > * { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
}

.project-meta__title  { grid-column: 1 / span 3; }
.project-meta__city   { grid-column: 4 / span 2; text-align: left; padding-top: 2px; }
.project-meta__year   { grid-column: 12 / span 1; text-align: right; }
.project-meta__credits{ grid-column: 8 / span 4; text-align: right; padding-top: 2px; }

/* Absolute-centered dimension caption (m² or pages) */
.project-meta__dimension {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .project-meta__title   { grid-column: 1 / span 6; }
    .project-meta__year    { grid-column: 11 / span 2; }
    .project-meta__city    { grid-column: 1 / span 6; padding-top: 0; }
    .project-meta__credits { grid-column: 7 / span 6; padding-top: 0; }
}

/* Previews — horizontal scroll carousel (uniform height, no wrap) ---------- */

.previews {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gutter);
    padding-inline: var(--margin);
    margin-top: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    user-select: none;
    cursor: grab;
}
.previews::-webkit-scrollbar { display: none; }
.previews.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.preview {
    flex: 0 0 auto;
    overflow: hidden;
    height: 16vh;
}

.preview[data-orientation="v"] { width: var(--col-w); }
.preview[data-orientation="h"] { width: var(--col-2w); }

/* Per-project override: compact = all previews at 1-col width */
[data-preview-size="compact"] .preview[data-orientation="h"] { width: var(--col-w); }

.preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 300ms ease;
    opacity: 0;
    background: #eee;
}

.preview img.is-loaded { opacity: 1; }

.preview:hover img { mix-blend-mode: difference; }

/* Tablet-and-down: large left-aligned active image, meta overlaid, small
   preview strip below (matches Figma iPhone Pro Max frame 95:49) ------------ */

@media (max-width: 1024px) {
    .project-block {
        min-height: 100vh;
        padding-bottom: 24px;
        gap: 16px;
    }

    /* Active image: near-full viewport width, left-aligned, tall */
    .active-image-row {
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-inline: var(--margin);
        margin-top: 16px;
    }
    .active-image {
        width: calc(100vw - var(--margin) * 2);
        height: auto;
        min-height: 0;
    }
    .active-image img {
        width: 100%;
        height: 74vh;
        max-width: none;
        object-fit: cover;
    }

    /* Meta bar sits over the image, split into 2 rows within it */
    .meta-bar { top: calc(6vh + 36vh); }
    .project-meta { row-gap: 2px; }
    .project-meta > * { grid-row: auto; white-space: nowrap; }
    .project-meta__title   { grid-column: 1 / span 6; grid-row: 1; text-align: left; }
    .project-meta__year    { grid-column: 11 / span 2; grid-row: 1; text-align: right; }
    .project-meta__dimension {
        grid-row: 1;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .project-meta__city    { grid-column: 1 / span 3; grid-row: 2; text-align: left; padding-top: 0; }
    .project-meta__credits {
        grid-column: 9 / span 4;
        grid-row: 2;
        text-align: right;
        padding-top: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Preview strip: small uniform thumbs, left-aligned */
    .previews {
        margin-top: 24px;
        padding-inline: var(--margin);
        justify-content: flex-start;
    }
    .preview {
        height: 79px;
    }
    .preview[data-orientation="v"] { width: 56px; }
    .preview[data-orientation="h"] { width: 79px; }
    [data-preview-size="compact"] .preview[data-orientation="h"] { width: 56px; }
}

@media (max-width: 640px) {
    .header__inner { font-size: 12px; }
    .active-image img { height: 84vh; }
    .meta-bar { top: calc(6vh + 30vh); }
    .preview { height: 65px; }
    .preview[data-orientation="v"] { width: 47px; }
    .preview[data-orientation="h"] { width: 65px; }
    [data-preview-size="compact"] .preview[data-orientation="h"] { width: 47px; }
	.project-block:nth-child(1) { top:10vh; margin-bottom: 10vh; }
}

/* Home hero ---------------------------------------------------------------- */

.home-hero {
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    column-gap: var(--gutter);
    padding-inline: var(--margin);
    margin-top: 24px;
}

.home-hero__slot { grid-column: span 4; aspect-ratio: 3 / 2; overflow: hidden; }
.home-hero__slot img { width: 100%; height: 100%; object-fit: cover; }