/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
    --font-family: 'Afacad', sans-serif;
    --fs-base: 1rem;
    --fs-300: calc(var(--fs-base) * 0.85);
    --fs-400: calc(var(--fs-base) * 1.1);
    --fs-600: calc(var(--fs-base) * 1.7);
    --fs-800: calc(var(--fs-base) * 2.3);
    --clr-default: #333;
    --clr-accent-300: hsl(212, 60%, 75%);
    --clr-accent-500: hsl(212, 55%, 55%);
    --clr-accent-700: hsl(212, 40%, 45%);
    --clr-error-500: hsl(12, 95%, 60%);
    --min-site-width: 350px;
    --min-col-width: 450px;
    --max-col-width: 600px;
    --default-gap: 12px;
    --delay-base: 50ms;
    --duration: 500ms;
    --inout-ratio: 2;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body, input, textarea, button {
    font-family: var(--font-family);
    font-size: var(--fs-400);
    color: var(--clr-default);
    line-height: 1.6;
}

a { color: inherit; }

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

ul { list-style: none; }

h2, .h2 {
    font-weight: normal;
    font-size: var(--fs-600);
    margin-bottom: var(--default-gap);
}

p { margin-bottom: var(--default-gap); }

/* ── Icons ───────────────────────────────────────────────────────────────── */
i[class^="ico-"],
i[class*=" ico-"] {
    font: normal 1em/1 Arial, sans-serif;
    display: inline-block;
}

.ico-close::before { content: '\2716'; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
[role="button"], button { cursor: pointer; }

a[role="button"], button {
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--clr-accent-500);
    text-decoration: none;
    line-height: normal;
    display: inline-block;
}

a[role="button"]:hover, button:hover { background-color: var(--clr-accent-700); }

a[role="button"].disabled,
button.disabled,
button:disabled {
    background-color: var(--clr-accent-300);
    cursor: default;
    pointer-events: none;
}

/* ── Form inputs ─────────────────────────────────────────────────────────── */
input, textarea {
    background: transparent;
    border: none;
    resize: none;
    font-family: var(--font-family);
    font-size: var(--fs-400);
    color: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: var(--default-gap);
}

input:focus, textarea:focus { outline: none; }

input:disabled, textarea:disabled { opacity: 0.6; }

input.error, textarea.error { border-bottom-color: var(--clr-error-500); }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.hidden { display: none; }
.invisible { visibility: hidden; }

/* ── Grid layout ─────────────────────────────────────────────────────────── */
/* Phone breakpoint: 450*2 + 12*3 - 1 = 935px */
.content-grid {
    display: grid;
    grid-template-columns:
        auto
        [left-col] minmax(var(--min-col-width), var(--max-col-width))
        [right-col] minmax(var(--min-col-width), var(--max-col-width))
        auto;
    gap: var(--default-gap);
    margin-bottom: var(--default-gap);
}

@media (max-width: 935px) {
    .content-grid {
        grid-template-columns:
            auto
            [left-col right-col] minmax(var(--min-site-width), var(--max-col-width))
            auto;
    }
}

.content--left {
    grid-column-start: left-col;
    justify-self: end;
    text-align: end;
}

.content--right {
    grid-column-start: right-col;
    justify-self: start;
}

.content--full-width { width: 100%; }

.content--align-left  { justify-self: start; text-align: start; }
.content--align-right { justify-self: end; text-align: end; }
.content--align-center { justify-self: center; align-self: center; text-align: center; }

/* ── Colour filters ──────────────────────────────────────────────────────── */
.colorize--white { filter: brightness(0) saturate(100%) invert(100%); }
.colorize--black { filter: brightness(0) saturate(100%) contrast(40%); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.main-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #fff;
}

body:not([data-scroll='0']) .main-header {
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    transition: box-shadow 0.3s ease-in-out;
}

.main-header__logo {
    font-size: var(--fs-800);
    margin-top: 24px;
}

.main-header__logo a { text-decoration: none; }

.main-header__nav li { display: inline-block; margin-left: 10px; }

.main-header__nav li > span { margin-left: 12px; }

.main-header__nav li a { text-decoration: none; }

.main-header__nav li a:hover { text-decoration: underline; }

.main-header__nav li.active > a { font-weight: bold; }

.main-header__locale-switch {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: var(--fs-300);
    letter-spacing: 0.05em;
}

.main-header__locale-switch a { text-decoration: none; }
.main-header__locale-switch a:hover { text-decoration: underline; }
.main-header__locale-switch .active { font-weight: bold; }
.main-header__locale-switch .sep { margin: 0 4px; }

/* ── Main content ────────────────────────────────────────────────────────── */
.main-content { overflow-x: hidden; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section {
    padding-top: 100px;
    padding-bottom: 100px;
    scroll-margin-top: 150px;
}

section.full-width-black {
    background-color: #333;
    color: #fff;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.main-footer .social-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.main-footer .social-link img {
    display: inline-block;
    height: 14px;
    width: auto;
}

/* ── Clients ─────────────────────────────────────────────────────────────── */
.client-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--default-gap) * 2);
    justify-items: center;
    align-items: center;
}

.client-grid > * { max-height: 100px; }

.client-img {
    filter: grayscale(1);
    transition: filter 0.5s ease;
}

.client-img:hover { filter: none; }

/* ── About ───────────────────────────────────────────────────────────────── */
.profile-image { border-radius: 50%; }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.testimonial { margin-bottom: calc(var(--default-gap) * 2); }

.testimonial footer {
    font-size: 0.9em;
    margin-top: 4px;
    opacity: 0.8;
}

/* ── Contact form ────────────────────────────────────────────────────────── */
#contact-form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
}

#contact-form > label {
    display: inline-block;
    margin-top: var(--default-gap);
}

#contact-form > textarea,
#contact-form > input {
    display: block;
    padding: 6px;
}

#contact-form > button { margin-top: var(--default-gap); }

#contact-success {
    max-width: 500px;
    padding: var(--default-gap);
    border-left: 3px solid currentColor;
    opacity: 0.85;
}

#contact-success p:first-child {
    font-weight: 600;
    margin-bottom: 0.35em;
}

.form-footer {
    position: relative;
    height: 48px;
    display: flex;
    justify-content: flex-end;
}

.form-footer > * {
    align-self: flex-start;
    text-align: right;
}

/* ── Portfolio section ───────────────────────────────────────────────────── */
#section-portfolio { padding-top: 0; }

.category-list {
    align-content: end;
    position: relative;
}

.category-list > ul > li {
    margin-top: var(--default-gap);
    margin-right: var(--default-gap);
    cursor: pointer;
}

.category-list > ul > li.selected { font-weight: bold; }

#category-indicator {
    position: absolute;
    top: 0;
    right: 0;
    transition: top var(--duration) ease;
}

/* ── Portfolio image containers ──────────────────────────────────────────── */
.category-img-container {
    min-width: 100%;
    position: relative;
}

.category-img-container .spacer {
    width: 100%;
    max-width: var(--max-col-width);
    min-width: var(--min-col-width);
    aspect-ratio: 3/2;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%, 100% 0%);
    visibility: hidden;
}

.category-img-container .photo-thumb {
    position: absolute;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    height: 100%;
    cursor: pointer;
}

.category-img-container .photo-thumb img {
    height: 100%;
    display: block;
}

.category-img-container .photo-thumb .ico-zoom {
    position: absolute;
    right: 10px;
    /* top: 10px; */
    bottom: 10px;
    width: 1.8em;
    height: 1.8em;
    padding: 0.35em;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    overflow: visible;
    pointer-events: none;
}

/* Container A: bottom-left anchor */
#img-container-a { align-content: end; }
#img-container-a > *:not(.omit-tween) { bottom: 0; left: 0; }

/* Container B: top-right anchor */
#img-container-b { text-align: -webkit-right; text-align: right; }
#img-container-b > *:not(.omit-tween) { top: 0; right: 0; }

/* Container C: top-left anchor */
#img-container-c > *:not(.omit-tween) { top: 0; left: 0; }

@media (max-width: 935px) {
    #img-container-a, #img-container-c { display: none; }
}

/* ── Tween animations ────────────────────────────────────────────────────── */
.tween-children > *:not(.omit-tween) {
    opacity: 0;
    scale: 0%;
    pointer-events: none;
    transition:
        scale 0s linear calc(var(--delay, 0ms) + var(--duration)),
        opacity var(--duration) ease var(--delay, 0ms),
        transform var(--duration) ease var(--delay, 0ms);
}

.tween-children.content--right > *:not(.omit-tween) { transform: translateX(20%); }
.tween-children.content--left  > *:not(.omit-tween) { transform: translateX(-20%); }

/* Per-container stagger delays */
#img-container-a > *:not(.omit-tween) { --delay: calc(var(--delay-base) * 1); }
#img-container-b > *:not(.omit-tween) { --delay: calc(var(--delay-base) * 2); }
#category-descriptions > *:not(.omit-tween) { --delay: calc(var(--delay-base) * 3); }

.tween-children > *:not(.omit-tween).visible {
    opacity: 1;
    scale: 100%;
    transform: translateX(0);
    pointer-events: unset;
    z-index: 1;
    transition:
        scale 0s linear var(--delay, 0ms),
        opacity calc(var(--duration) * var(--inout-ratio)) ease var(--delay, 0ms),
        transform calc(var(--duration) * var(--inout-ratio)) ease var(--delay, 0ms);
}

/* ── Category descriptions ───────────────────────────────────────────────── */
.category-description-container {
    margin-left: var(--default-gap);
    position: relative;
}

.category-description-container > *:first-child {
    left: calc(-1 * var(--default-gap));
}

.category-description-container > * {
    position: absolute;
    top: 0;
}

/* ── Photo viewer modal ──────────────────────────────────────────────────── */
#photo-viewer-modal {
    margin: auto;
    border: 0;
    outline: none;
    max-width: 90vw;
    max-height: 90vh;
    opacity: 1;
    transition:
        opacity 0.3s ease,
        display 0.3s allow-discrete,
        overlay 0.3s allow-discrete;
}

#photo-viewer-modal:not([open]) { opacity: 0; }

@starting-style {
    #photo-viewer-modal[open] { opacity: 0; }
}

#photo-viewer-modal::backdrop {
    background: #000;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        display 0.3s allow-discrete,
        overlay 0.3s allow-discrete;
}

#photo-viewer-modal[open]::backdrop { opacity: 0.5; }

@starting-style {
    #photo-viewer-modal[open]::backdrop { opacity: 0; }
}

#photo-viewer-modal > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--default-gap);
    margin: var(--default-gap);
}

.viewer-img-wrap { position: relative; }

#photo-viewer-modal img {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

#photo-viewer-prev,
#photo-viewer-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 3px;
    font-size: 2rem;
    line-height: 1;
    transition: background 0.2s;
}

#photo-viewer-prev span,
#photo-viewer-next span { position: relative; top: -3px; }

#photo-viewer-prev:hover,
#photo-viewer-next:hover { background: rgba(0, 0, 0, 0.6); }

#photo-viewer-prev { left: 10px; }
#photo-viewer-next { right: 10px; }

#photo-viewer-modal.single-image #photo-viewer-prev,
#photo-viewer-modal.single-image #photo-viewer-next { display: none; }