/* Presentation only. Section colors and uploaded backgrounds remain owned by
   the content editor; image sizing and zoom remain owned by the gallery. */
:root {
    --portfolio-content-width: 1480px;
    --portfolio-ink: #e2f1fc;
    --portfolio-muted: #b9cee2;
    --portfolio-surface: #0b2547;
    --portfolio-border: rgba(153, 190, 226, .22);
    --portfolio-accent: #8ab6df;
}

html {
    font-size: 16px;
    /* There is no fixed header to compensate for: section links should align
       their background edge with the viewport, without a strip of the above. */
    scroll-padding-block: 0;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
    font: inherit;
}

a, button, [role="button"], input, select, textarea {
    -webkit-tap-highlight-color: rgba(138, 182, 223, .2);
}

:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #c1e8ff;
    outline-offset: 5px;
    box-shadow: 0 0 0 7px #08203d;
}

.fullwidth-block:not(#block0) {
    padding-block: clamp(72px, 8vw, 120px);
    padding-inline: clamp(24px, 6vw, 112px);
    min-height: min(960px, 100svh);
    scroll-margin-top: 0;
}

.split-layout,
.admin-created-block .split-layout {
    width: 100%;
    max-width: var(--portfolio-content-width);
    margin-inline: auto;
    gap: clamp(40px, 4.5vw, 80px);
}

.left-text,
.right-images {
    min-width: 0;
}

.left-text {
    font-size: 1rem;
    line-height: 1.7;
}

.left-text h2,
.fullwidth-block .icon-title,
.contact-title {
    line-height: 1.15;
    letter-spacing: -.025em;
    text-shadow: none;
    margin-bottom: 28px;
}

.heading-title-text {
    font-size: min(var(--heading-size, 3.25rem), clamp(1.8rem, 3vw, 3.25rem));
    line-height: 1.15;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.icon-title:has(.heading-icons) {
    column-gap: 16px;
}

.heading-icons {
    align-self: start;
    padding-top: 2px;
}

.icon-title img,
.heading-icons img {
    flex-shrink: 0;
    border-radius: 14px;
    border-color: rgba(153, 190, 226, .35);
    background: rgba(11, 37, 71, .76);
    box-shadow: none;
    backdrop-filter: none;
}

.left-text > p,
.left-text .block-subtitle {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 64ch;
}

.dynamic-text-stack {
    gap: 16px;
    padding: 0;
}

.dynamic-text-panel,
.left-text li,
.admin-created-block--text .admin-text-card {
    background: var(--portfolio-surface);
    color: var(--portfolio-muted);
    border: 1px solid var(--portfolio-border);
    border-left: 3px solid var(--portfolio-accent);
    border-radius: 20px;
    padding: clamp(24px, 2.3vw, 34px);
    box-shadow: 0 8px 24px rgba(0, 10, 27, .12);
    backdrop-filter: none;
    max-height: none;
    overflow-wrap: anywhere;
}

.dynamic-text-panel::after {
    content: none;
    display: none;
}

.dynamic-text-panel h3,
.left-text li > strong {
    color: var(--portfolio-ink);
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -.012em;
    margin-bottom: 12px;
}

.dynamic-text-panel p,
#block_about .about-admin-content p {
    font-size: 1rem;
    line-height: 1.75;
}

.dynamic-text-panel p:last-child {
    margin-bottom: 0;
}

.left-text li:hover {
    transform: none;
}

#block_about > div {
    width: min(1180px, 100%);
    max-width: 1180px !important;
    margin-inline: auto;
}

#block_about .icon-title,
#block_about .icon-title:has(.heading-icons) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
}

#block_about .heading-icons {
    margin: 0;
    padding: 0;
}

#block_about .about-card-host,
#block_about .about-card-host.animate-on-scroll[style*="background"] {
    padding: 0 !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
}

#block_about .about-admin-content {
    gap: 18px;
}

#block_about .about-admin-content strong {
    color: var(--portfolio-ink);
    font-size: inherit;
    line-height: inherit;
}

.project-tags {
    gap: 8px;
    margin-top: 20px;
}

.project-tag {
    padding: 7px 12px;
    font-size: .875rem;
    line-height: 1.5;
    border-color: rgba(153, 190, 226, .28);
    background: rgba(2, 16, 36, .4);
    color: #d5e7f6;
    transition: background-color .18s ease, border-color .18s ease;
}

a.project-tag:hover {
    transform: none;
    background: #14395f;
    border-color: #8ab6df;
}

.dynamic-action-button {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 14px;
    background: #174b78;
    border-color: #6698c6;
    color: #f1f8ff;
    font-weight: 700;
    font-size: .9375rem;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.dynamic-action-button:hover {
    transform: none;
    filter: none;
    background: #205b8c;
    border-color: #c1e8ff;
}

.carousel-arrow,
.admin-created-block .carousel-arrow {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    line-height: 1;
    font-family: Arial, sans-serif;
    font-size: 1.55rem;
    border: 1px solid #709ac2;
    background: #0b2547;
    color: #e2f1fc;
    box-shadow: 0 4px 14px rgba(0, 10, 27, .15);
    backdrop-filter: none;
    touch-action: manipulation;
    transition: background-color .18s ease, border-color .18s ease;
}

.carousel-arrow:hover {
    transform: translateY(-50%);
    background: #19446c;
    border-color: #c1e8ff;
}

.carousel-item.active:hover {
    transform: none;
}

.contact-cards {
    gap: 20px;
}

.contact-card {
    min-height: 190px;
    padding: 28px 24px;
    border: 1px solid var(--portfolio-border);
    border-radius: 20px;
    background: var(--portfolio-surface);
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(0, 10, 27, .12);
    transition: border-color .18s ease, background-color .18s ease;
}

.contact-card:hover {
    transform: none;
    border-color: #8ab6df;
    background: #123458;
    box-shadow: 0 8px 24px rgba(0, 10, 27, .12);
}

.contact-card img {
    object-fit: contain;
    border-radius: 12px;
}

.contact-card span {
    color: var(--portfolio-ink);
    font-weight: 700;
}

.contact-card small {
    color: var(--portfolio-muted);
    opacity: 1;
}

.contact-map-container {
    border-width: 1px;
    border-color: rgba(153, 190, 226, .4);
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0, 10, 27, .12);
}

.nav-panel {
    right: 18px;
    gap: 12px;
}

.nav-arrow,
.nav-arrow:not(.disabled) {
    width: 48px;
    height: 48px;
    border-width: 1px;
    border-color: #709ac2;
    background: #0b2547;
    box-shadow: none;
    animation: none;
    backdrop-filter: none;
}

.nav-arrow svg {
    width: 22px;
    height: 22px;
}

.nav-arrow:hover {
    transform: none;
    background: #19446c;
}

.nav-text {
    font-size: .8125rem;
    border-width: 1px;
    padding: 10px 16px;
    background: #0b2547;
    backdrop-filter: none;
}

.progress-container {
    bottom: 16px;
    right: 18px;
    gap: 10px;
    padding: 7px 11px 7px 7px;
    background: rgba(6, 24, 45, .94);
    border: 1px solid rgba(153, 190, 226, .24);
    border-radius: 999px;
    pointer-events: none;
}

.progress-gif {
    width: 32px;
    height: 32px;
    border-width: 1px;
    box-shadow: none;
    backdrop-filter: none;
}

.progress-bar-wrapper {
    width: 88px;
    height: 5px;
    border: 0;
}

.progress-percent {
    min-width: 32px;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.zoom-reset {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #709ac2;
    border-radius: 999px;
    background: #0b2547;
    color: #e2f1fc;
    font-size: .8125rem;
    cursor: pointer;
}

.modal .zoom-control {
    gap: 12px;
    padding: 12px 18px;
    border-width: 1px;
    background: #0b2547;
    backdrop-filter: none;
}

.modal .prev, .modal .next, .modal .close {
    border-width: 1px;
    font-family: Arial, sans-serif;
    touch-action: manipulation;
}

.modal .prev, .modal .next {
    font-size: 2rem;
}

@media (min-width: 1101px) {
    .split-layout,
    .admin-created-block .split-layout {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    }
}

@media (min-width: 900px) {
    #block_about .about-admin-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .fullwidth-block:not(#block0) {
        min-height: auto;
        padding-block: 72px;
    }

    .split-layout,
    .admin-created-block .split-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        flex: 0 0 auto;
    }

    .left-text {
        max-width: 760px;
        width: 100%;
        margin-inline: auto;
    }

    .left-text > p,
    .left-text .block-subtitle {
        margin-inline: auto;
    }
}

@media (max-width: 768px) {
    .modal .zoom-control {
        display: flex;
        top: max(16px, env(safe-area-inset-top));
        left: 16px;
        right: auto;
        transform: none;
        padding: 5px 10px;
        gap: 6px;
    }

    .modal .zoom-control input,
    .modal .zoom-label {
        display: none;
    }

    .zoom-value {
        min-width: 46px;
        font-size: .875rem;
    }

    .fullwidth-block:not(#block0) {
        padding-block: 60px;
        padding-inline: 22px;
    }

    .fullwidth-block {
        background-attachment: scroll;
    }

    .left-text {
        text-align: left;
    }

    .left-text h2,
    .fullwidth-block .icon-title {
        margin-bottom: 22px;
    }

    .heading-title-text {
        font-size: min(var(--heading-size, 2rem), clamp(1.5rem, 6.5vw, 2rem));
        line-height: 1.2;
        text-wrap: pretty;
    }

    .icon-title:has(.heading-icons) {
        column-gap: 12px;
    }

    .icon-title img,
    .heading-icons img {
        width: 44px !important;
        height: 44px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        clip-path: inset(0 round 12px) !important;
    }

    .left-text > p,
    .left-text .block-subtitle {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .dynamic-text-panel,
    .left-text li,
    .admin-created-block--text .admin-text-card {
        padding: 22px;
        border-radius: 18px;
    }

    .dynamic-text-panel h3 {
        font-size: 1.0625rem;
    }

    .dynamic-text-panel p,
    #block_about .about-admin-content p {
        font-size: .9375rem;
        line-height: 1.75;
    }

    .carousel-arrow,
    .admin-created-block .carousel-arrow {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 1.4rem;
    }

    .contact-cards {
        gap: 14px;
    }

    .contact-card {
        width: 100%;
        max-width: 420px;
        min-height: 0;
        padding: 24px;
    }

    .contact-title {
        font-size: 1.8rem;
    }

    .progress-container {
        bottom: max(12px, env(safe-area-inset-bottom));
        right: 12px;
        gap: 8px;
        padding: 5px 9px 5px 5px;
    }

    .progress-gif {
        width: 28px;
        height: 28px;
    }

    .progress-bar-wrapper {
        width: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
        filter: none;
    }
}