/*
 * Portfolio layout and reusable UI components.
 *
 * Design values come from css/theme.css. This file should describe structure and
 * component behavior without becoming a second source of truth for appearance.
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    overflow: hidden;
}

@media (max-width: 700px) {
    body {
        overflow: auto;
    }
}

a {
    color: inherit;
}

.site {
    min-height: 100vh;
}

/* Header container controlling two-column layout */
.header {
    position: fixed;
    top: var(--panel-offset);
    left: var(--panel-offset);
    right: var(--panel-offset);
    z-index: var(--layer-panel);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-s);
}

/* Prevent overlap: info flexes, buttons keep natural width */
.header .panel--info {
    flex: 1 1 auto;
    min-width: 16rem;
    max-width: var(--panel-width);
}

.header .panel--buttons {
    flex: 0 0 auto;
}

/* Reusable floating surface component. */
.panel {
    /* Panels are fixed by default; header/footer containers may override */
    position: fixed;
    z-index: var(--layer-panel);
    max-height: calc(100vh - (var(--panel-offset) * 2));
    overflow: auto;
    padding: var(--panel-padding);
    background: var(--panel-background);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    font-family: var(--font-family);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    backdrop-filter: var(--panel-blur);
}

/* Panels inside the header flow as siblings */
.header .panel {
    position: static;
    z-index: auto;
}

.panel--info {
    flex: 1 1 auto;
    min-width: 16rem;
    max-width: var(--panel-width);
}

	.panel--buttons {
	    position: static;
	    display: flex;
	    flex-direction: column;
	    align-items: flex-end;
	    gap: var(--space-xs);
	    min-width: 8rem;
	    flex: 0 0 auto;
	}
	/* Subtle, scoped padding bump for top-right buttons only */
	.panel--buttons .panel-button {
	    padding: calc(var(--button-padding-y) + 2px) calc(var(--button-padding-x) + 4px);
	    letter-spacing: -0.03em;
	}

.panel--contact {
    right: var(--panel-offset);
    bottom: var(--panel-offset);
    left: auto;
    /* Prevent collision with the bottom-left indicator by reserving its width + gap */
    max-width: calc(100vw - (var(--panel-offset) * 2) - var(--indicator-size) - var(--overlay-gap));
    white-space: normal; /* allow natural wrapping when space is tight */
    overflow-wrap: break-word; /* prevent overflow on long tokens like emails */
}


	.panel--indicator {
	    left: var(--panel-offset);
	    bottom: var(--panel-offset);
	    width: var(--indicator-size);
	    height: var(--indicator-size);
	    padding: 0;
	    border-radius: var(--radius-large);
	    position: fixed; /* ensure overlay behavior regardless of header container */
	    display: grid;
	    place-items: center;
	    /* Match button font-size so the reused em-based arrow size is identical */
	    font-size: var(--button-font-size);
	    /* Match button hover timing/easing and colors (no expansion) */
	    background: var(--button-background);
	    color: var(--button-text-color);
	    transition:
	        background-color var(--button-transition-duration) var(--button-transition-easing),
	        color var(--button-transition-duration) var(--button-transition-easing);
	    cursor: pointer;
	}

	.panel--indicator:hover,
	.panel--indicator:focus-visible {
	    background: var(--button-background-hover);
	    color: var(--button-text-color-hover);
	    outline: none;
	}

	.indicator__icon {
	    /* Reuse the exact arrow size token from the button component */
	    width: var(--button-arrow-size);
	    height: var(--button-arrow-size);
	    color: currentColor; /* inherit from panel to match hover transition and contrast */
	    opacity: 0;
	    transform: translateX(6px) scaleX(-1); /* desktop: use same right-pointing asset, flip to left */
	    transition:
	        opacity var(--indicator-transition-duration) var(--ease-default),
	        transform var(--indicator-transition-duration) var(--ease-default);
	}

	.panel--indicator.is-active .indicator__icon {
	    opacity: 1;
	    transform: translateX(0) scaleX(-1);
	}

	/* Mobile-only: rotate arrow up while keeping the same fade/slide animation */
	@media (max-width: 700px) {
	    .indicator__icon {
	        transform: translateX(6px) rotate(-90deg);
	    }
	    .panel--indicator.is-active .indicator__icon {
	        transform: translateX(0) rotate(-90deg);
	    }
	}

	/* Reuse button system while keeping a circular shape */
	
	
	.panel__text {
    white-space: normal;
}

.rich-text__bold {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold) !important;
    font-style: normal;
}

.rich-text__bold-italic {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold) !important;
    font-style: italic;
}

/* Intro variants: desktop/tablet/phone */
.panel__text--desktop { display: block; }
.panel__text--tablet { display: none; }
.panel__text--phone { display: none; }

@media (max-width: 1024px) {
    .panel__text--desktop { display: none; }
    .panel__text--tablet { display: block; }
}

@media (max-width: 700px) {
    .panel__text--desktop { display: none; }
    .panel__text--tablet { display: none; }
    .panel__text--phone { display: block; }
}

/* Bottom-left horizontal stack: indicator + description on same row */
.bottom-left {
    position: fixed;
    left: var(--panel-offset);
    bottom: var(--panel-offset);
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: var(--overlay-gap);
    z-index: var(--layer-panel);
    width: calc(100vw - (var(--panel-offset) * 2));
    max-width: none;
    min-height: var(--indicator-size);
}

/* Make indicator static within the flex row; keep size and hover behavior */
.bottom-left .panel--indicator {
    position: static;
    left: auto; right: auto; bottom: auto; top: auto;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 50%;
}

.bottom-left .panel--contact {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}

/* Keep the optional project links above the independent description pill. */
.bottom-left-copy {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    max-width: calc(100% - 44px - var(--overlay-gap));
}

.bottom-left-copy .panel--image-desc {
    max-width: 100%;
}

/* Description panel remains its existing independent pill. */
.panel--image-desc {
    position: static;
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    max-width: calc(100% - 44px - var(--overlay-gap));
    overflow-wrap: anywhere;
    white-space: normal;
    background: var(--panel-background);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    padding: var(--panel-padding);
    font-family: var(--font-family);
    font-size: var(--font-size-s);
    line-height: var(--line-height);
    backdrop-filter: var(--panel-blur);
    display: block;
    opacity: 1;
    transition: opacity 260ms var(--ease-default), transform 260ms var(--ease-default);
}

/* Optional project links are separate pills above the description. */
.project-links {
    max-width: 100%;
}



.project-links__row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
}

@keyframes project-link-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-links__item--entry {
    animation: project-link-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.project-links__item--entry:nth-child(1) {
    animation-delay: 500ms;
}

.project-links__item--entry:nth-child(2) {
    animation-delay: 800ms;
}


.project-links__item {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.project-links__item.panel-button {
    /* Exact top-right button modifier, including its established height. */
    padding: calc(var(--button-padding-y) + 2px) calc(var(--button-padding-x) + 4px);
    font-size: 12px;
    letter-spacing: -0.03em;
    text-transform: none;
}

.project-links__item--clickable {
    cursor: pointer;
}

.project-links__item--static {
    cursor: default;
    pointer-events: none;
    transition: none;
    transform: none;
    opacity: 1;
}


/* Ensure no empty pill remains when hidden is applied */
.panel--image-desc[hidden] { display: none !important; }

.panel--image-desc.is-fading-out { opacity: 0; }

@media (max-width: 700px) {
    .bottom-left {
        left: var(--panel-offset);
        bottom: var(--panel-offset);
        width: calc(100vw - (var(--panel-offset) * 2));
        max-width: none;
        min-height: var(--indicator-size);
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto 44px;
        gap: var(--overlay-gap);
        align-items: end;
    }
    .bottom-left .panel--indicator {
        grid-column: 1;
        grid-row: 2;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        border-radius: 50%;
    }
    .bottom-left-copy {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-items: flex-start;
    }
    .bottom-left .panel--image-desc {
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin: 0;
    }
    .bottom-left .panel--contact {
        position: static;
        grid-column: 2;
        grid-row: 2;
        left: auto;
        right: auto;
        bottom: auto;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
}


.panel__text a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition-fast) var(--ease-default);
}

.panel__text a:hover {
    opacity: var(--opacity-hover);
}

.panel__text a:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-focus);
    outline-offset: var(--focus-outline-offset);
}

/* Reusable button component. */
.button,
.panel-button {
    color: var(--button-text-color);
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    line-height: var(--button-line-height);
    text-align: center;
    text-decoration: none;
    text-transform: var(--button-text-transform);
    transition:
        background-color var(--button-transition-duration) var(--button-transition-easing),
        border-color var(--button-transition-duration) var(--button-transition-easing),
        color var(--button-transition-duration) var(--button-transition-easing),
        opacity var(--button-transition-duration) var(--button-transition-easing);
}

.button {
    display: block;
    padding: var(--button-padding-y) var(--button-padding-x);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--button-border-radius);
}

.panel-button {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    padding: var(--button-padding-y) var(--button-padding-x);
    overflow: visible;
    background: var(--button-container-background);
    box-shadow: var(--button-container-shadow);
    line-height: var(--button-line-height);
    backdrop-filter: var(--button-container-backdrop-filter);
}

.panel-button::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    background: var(--button-background);
    border-radius: var(--button-border-radius);
    box-shadow: var(--button-shadow);
    backdrop-filter: var(--button-backdrop-filter);
    transition:
        left var(--button-expand-duration) var(--button-transition-easing) var(--button-transition-duration),
        background-color var(--button-transition-duration) var(--button-transition-easing);
}

.button__content {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    line-height: var(--button-line-height);
}

.button__icon {
    position: absolute;
    right: calc(100% + var(--button-arrow-spacing));
    top: 50%;
    width: var(--button-arrow-size);
    height: var(--button-arrow-size);
    color: currentColor;
    opacity: 0;
    transform: translate(calc(var(--button-arrow-offset) * -1), -50%);
    transition:
        opacity var(--button-transition-duration) var(--button-transition-easing),
        transform var(--button-transition-duration) var(--button-transition-easing);
}

.button__text {
    display: inline-block;
    line-height: var(--button-line-height);
    transform: translateY(var(--button-text-offset-y));
}

.button:hover,
.button:focus-visible {
    background: var(--button-background-hover);
    border-color: var(--button-background-hover);
    color: var(--button-text-color-hover);
    outline: none;
}

.panel-button:hover,
.panel-button:focus-visible {
    color: var(--button-text-color-hover);
    outline: none;
}

.panel-button:hover::before,
.panel-button:focus-visible::before {
    left: calc(var(--button-expand-offset) * -1);
    background: var(--button-background-hover);
    transition-delay: var(--button-transition-delay-none), var(--button-transition-delay-none);
}

.panel-button:hover .button__icon,
.panel-button:focus-visible .button__icon {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: var(--button-transition-duration);
}

/* Project links reuse the shared button component at the requested 12px size. */
.project-links__item.panel-button {
    font-family: var(--button-font-family);
    font-size: 12px;
    font-weight: var(--button-font-weight);
    letter-spacing: -0.03em;
    line-height: var(--button-line-height);
    text-transform: none;
    /* Same modifier used by the existing top-right feature buttons. */
    padding: calc(var(--button-padding-y) + 2px) calc(var(--button-padding-x) + 4px);
    box-sizing: border-box;
}

.project-links__item.panel-button .button__icon {
    right: auto;
    left: calc(100% + var(--button-arrow-spacing));
    transform: translate(var(--button-arrow-offset), -50%);
}

.project-links__item--clickable.panel-button::before {
    transition:
        right var(--button-expand-duration) var(--button-transition-easing) var(--button-transition-duration),
        background-color var(--button-transition-duration) var(--button-transition-easing);
}

.project-links__item.panel-button:hover::before,
.project-links__item.panel-button:focus-visible::before {
    left: 0;
    right: calc(var(--button-expand-offset) * -1);
}

.project-links__item.panel-button:hover .button__icon,
.project-links__item.panel-button:focus-visible .button__icon {
    transform: translate(0, -50%);
}


.project-links__item--static {
    position: static;
    z-index: auto;
    max-height: none;
    overflow: visible;
}

.project-links__item--static {
    pointer-events: none;
    cursor: default;
    transition: none !important;
    transition-property: none !important;
    color: var(--button-text-color) !important;
}


/* Disable hover/arrow animations on mobile */
@media (max-width: 700px) {
    .panel-button::before {
        left: 0 !important;
        background: var(--button-background);
        transition: none;
    }
    .panel-button:hover,
    .panel-button:focus-visible {
        color: var(--button-text-color);
    }
    .panel-button:hover::before,
    .panel-button:focus-visible::before {
        left: 0;
        background: var(--button-background);
        transition: none;
    }
    .button__icon {
        opacity: 0 !important;
        transform: translate(calc(var(--button-arrow-offset) * -1), -50%);
        transition: none !important;
    }
}

/* Horizontal gallery for desktop, vertical stack on mobile */
.gallery {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .gallery {
        display: block;
        width: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Mobile has no persistent hover: keep indicator in passive white state */
    .panel--indicator {
        background: var(--button-background);
        color: var(--button-text-color);
    }
    .panel--indicator:hover,
    .panel--indicator:focus-visible {
        background: var(--button-background);
        color: var(--button-text-color);
        outline: none;
    }
}

.gallery:focus-visible {
    outline: var(--gallery-focus-outline-width) solid var(--color-text);
    outline-offset: var(--gallery-focus-outline-offset);
}

.gallery__item {
    flex: 0 0 auto;
    height: 100vh;
    margin: 0;
}

.gallery__image {
    display: block;
    width: auto;
    height: 100vh;
    max-width: none;
    object-fit: contain;
}

@media (max-width: 700px) {
    .gallery__item {
        height: auto;
        margin: 0;
    }

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

/* Initial overlay entrance: the gallery itself remains stationary. */
@keyframes overlay-enter-from-top {
    from { opacity: 0.1; transform: translateY(-50vh); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes overlay-enter-from-right {
    from { opacity: 0.1; transform: translateX(50vw); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes overlay-enter-from-bottom {
    from { opacity: 0.1; transform: translateY(50vh); }
    to { opacity: 1; transform: translateY(0); }
}

.header .panel--info {
    animation: overlay-enter-from-top 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0ms;
}

.header .panel--buttons {
    animation: overlay-enter-from-right 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 100ms;
}

.bottom-left {
    animation: overlay-enter-from-bottom 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 200ms;
}

.panel--contact {
    animation: overlay-enter-from-bottom 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 300ms;
}

.header .panel--info,
.header .panel--buttons,
.bottom-left,
.panel--contact {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .project-links__item--entry {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .header .panel--info,
    .header .panel--buttons,
    .bottom-left,
    .panel--contact {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.empty-state {
    display: grid;
    min-height: 100vh;
    place-content: center;
    padding: var(--space-xl);
    text-align: center;
}

.empty-state h1 {
    margin: 0 0 var(--heading-margin-bottom);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
}

.empty-state p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-m);
    line-height: var(--line-height);
}

.empty-state code {
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-m);
}

/* Temporary timestamp debug table, shown only with ?debug=media. */
.debug-panel {
    position: fixed;
    right: var(--space-l);
    bottom: var(--space-l);
    left: var(--space-l);
    z-index: var(--layer-debug);
    max-height: var(--debug-max-height);
    overflow: auto;
    padding: var(--space-l);
    background: var(--color-surface);
    border-radius: var(--panel-radius);
    box-shadow: 0 0.5rem 2rem var(--color-shadow-strong);
    font-family: var(--font-family);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
}

.debug-panel {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
}

.debug-panel__note {
    margin: 0 0 var(--debug-note-margin-bottom);
    color: var(--color-text-secondary);
    font-size: var(--font-size-s);
    line-height: var(--line-height);
}

.debug-panel__table-wrap {
    overflow-x: auto;
}

.debug-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.debug-table th,
.debug-table td {
    padding: var(--debug-table-padding-y) var(--debug-table-padding-x);
    border-top: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    font-size: var(--font-size-s);
    line-height: var(--line-height);
}

.debug-table th {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.debug-table small {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

@media (min-width: 900px) {
    :root {
        /* Desktop cap was limiting the info panel to 40vw; widen to ~58% */
        --panel-width: 58vw;
    }
}

@media (max-width: 700px) {
    :root {
        --panel-offset: var(--space-s);
    }

    .panel {
        font-size: var(--font-size-xs);
    }

    .panel--info {
        max-width: calc(100vw - (var(--space-s) * 2));
    }

    @media (max-width: 700px) {
    /* Keep two columns; shrink the info panel first; buttons keep natural width */
    .header .panel--info {
        max-width: min(58vw, calc(100vw - (var(--panel-offset) * 2)));
        min-width: 10rem;
        padding: var(--space-s);
    }

    .header .panel--buttons {
        max-width: none;
        flex-direction: column;
        width: auto;
        overflow: visible;
        align-items: flex-end;
    }

    .button { flex: 0 0 auto; }

    /* Slight button size reduction via tokens */
    :root {
        --button-font-size: 0.7rem;
        --button-padding-x: calc(var(--panel-padding) - var(--space-xs));
        --button-padding-y: calc(var(--panel-padding) - var(--space-xs));
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
    /* Tablet tweaks: keep two columns, use short intro, slightly reduce info width */
    .header .panel--info {
        max-width: min(55vw, calc(100vw - (var(--panel-offset) * 2)));
        min-width: 14rem;
    }
    .header .panel--buttons {
        max-width: none;
        align-items: flex-end;
    }
}

/* Desktop: widen info panel to ~58% to reduce line breaks (layout unchanged) */
@media (min-width: 1025px) {
    :root {
        --panel-width: 58vw;
    }
}