/* Structured case-study blocks and the private visual editor. */
iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
}

#project-overlay .po-content-icon,
#project-overlay .po-meta-icon {
    flex: 0 0 auto;
    color: var(--po-block-accent, #176b87);
    font-size: 1.35rem;
}

#project-overlay .po-meta-item {
    display: grid;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
}

#project-overlay .po-meta-item:not(:has(.po-meta-icon)) {
    grid-template-columns: minmax(0, 1fr);
}

#project-overlay .po-meta-copy {
    display: grid;
    min-width: 0;
    overflow-wrap: anywhere;
    gap: 0.25rem;
}

#project-overlay .po-meta-editor-fixed,
#project-overlay .po-custom-detail-list {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#project-overlay .po-meta-editor-field,
#project-overlay .po-custom-detail-row {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--game-ui-border);
    background: var(--game-ui-surface-muted);
}

#project-overlay .po-custom-detail-row > div:last-child { grid-column: 1 / 3; }

#project-overlay .po-meta-editor-field > label,
#project-overlay .po-custom-detail-row > label {
    margin-bottom: 7px;
}

#project-overlay .po-meta-editor-inputs {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 8px;
}

#project-overlay .po-meta-editor-inputs > label {
    display: grid;
    gap: 4px;
}

#project-overlay .po-custom-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

#project-overlay .po-custom-detail-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

#project-overlay .po-custom-detail-heading strong {
    color: var(--game-ui-text);
    font-size: 0.76rem;
}

#project-overlay .po-icon-control {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

#project-overlay .po-icon-select,
#project-overlay .po-icon-clear,
#project-overlay .po-repeater-icon,
#project-overlay .po-custom-detail-heading button,
#project-overlay .po-custom-detail-remove {
    min-height: 34px;
    border: 1px solid var(--game-ui-border);
    border-radius: 5px;
    background: var(--game-ui-surface-solid);
    color: var(--game-ui-text);
    font: 600 0.7rem/1 'Space Grotesk', sans-serif;
    cursor: pointer;
}

#project-overlay .po-icon-select {
    display: inline-flex;
    min-width: 116px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
}

#project-overlay .po-icon-select iconify-icon { font-size: 1.15rem; }
#project-overlay .po-icon-clear,
#project-overlay .po-custom-detail-remove { width: 34px; padding: 0; }
#project-overlay .po-icon-clear[hidden] { display: none; }

#project-overlay .po-edit-options,
#project-overlay .po-structured-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin: 9px 0;
}

#project-overlay .po-edit-options label,
#project-overlay .po-structured-numbers label,
#project-overlay .po-color-field,
#project-overlay .po-select-field {
    display: grid;
    gap: 5px;
    color: #aaa;
    font-size: 0.68rem;
    text-transform: uppercase;
}

#project-overlay .po-check-field {
    display: flex !important;
    align-items: center;
    gap: 7px;
    min-height: 38px;
}

#project-overlay .po-check-field input { width: 16px; height: 16px; }
#project-overlay .po-color-field { margin-top: 9px; }
#project-overlay .po-color-field input,
#project-overlay .po-edit-options input[type="color"],
#project-overlay .po-structured-numbers input[type="color"] { width: 100%; min-height: 38px; padding: 2px; }

#project-overlay .po-structured-editor-row {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding: 12px;
    border: 1px solid #2f2f3b;
    border-radius: 6px;
}

#project-overlay .po-structured-editor-row > .po-repeater-remove {
    justify-self: start;
    border: 0;
    background: transparent;
    color: #ff7c7c;
    cursor: pointer;
    font: 600 0.7rem 'Space Grotesk', sans-serif;
}

.po-icon-picker {
    width: min(760px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 32px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(45, 45, 40, 0.2);
    border-radius: 8px;
    background: #fff;
    color: #20201e;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.po-icon-picker::backdrop { background: rgba(0, 0, 0, 0.58); }
.po-icon-picker-head,
.po-icon-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(45, 45, 40, 0.14);
}

.po-icon-picker-head span,
.po-icon-search span {
    display: block;
    margin-bottom: 3px;
    color: #77736d;
    font-size: 0.62rem;
    font-weight: 650;
    text-transform: uppercase;
}

.po-icon-picker-head h2 { margin: 0; font-size: 1.05rem; }
.po-icon-picker-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(45, 45, 40, 0.16);
    border-radius: 50%;
    background: #fff;
    color: #20201e;
    cursor: pointer;
}
.po-icon-picker-close .lucide { width: 18px; height: 18px; }
.po-icon-search { display: block; padding: 14px 18px 0; }
.po-icon-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(45, 45, 40, 0.2);
    border-radius: 5px;
    background: #fff;
    color: #20201e;
    font: 0.86rem 'Space Grotesk', sans-serif;
}
.po-icon-picker-status { min-height: 20px; margin: 8px 18px 0; color: #77736d; font-size: 0.7rem; }
.po-icon-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 7px;
    max-height: 420px;
    padding: 10px 18px 18px;
    overflow-y: auto;
}
.po-icon-result {
    display: grid;
    min-width: 0;
    min-height: 78px;
    place-items: center;
    gap: 5px;
    padding: 8px 5px;
    border: 1px solid rgba(45, 45, 40, 0.14);
    border-radius: 5px;
    background: #fff;
    color: #20201e;
    cursor: pointer;
}
.po-icon-result:hover,
.po-icon-result.is-current { border-color: #20201e; background: #f3f3f1; }
.po-icon-result iconify-icon { font-size: 1.55rem; }
.po-icon-result span {
    width: 100%;
    overflow: hidden;
    color: #77736d;
    font-size: 0.56rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.po-icon-picker-actions {
    justify-content: flex-end;
    border-top: 1px solid rgba(45, 45, 40, 0.14);
    border-bottom: 0;
}
.po-icon-picker-actions button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(45, 45, 40, 0.18);
    border-radius: 5px;
    background: #fff;
    color: #20201e;
    font: 650 0.72rem 'Space Grotesk', sans-serif;
    cursor: pointer;
}

#project-overlay .po-cover-admin-actions {
    display: none;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    align-items: center;
    gap: 7px;
}

#project-overlay.admin-mode .po-cover-admin-actions { display: flex; }
#project-overlay .po-cover-admin-actions .po-cover-edit-btn,
#project-overlay .po-cover-admin-actions .po-asset-library-open {
    position: static;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font: 650 0.72rem 'Space Grotesk', sans-serif;
    cursor: pointer;
}

.po-asset-picker {
    width: min(980px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(45, 45, 40, 0.2);
    border-radius: 8px;
    background: #fff;
    color: #20201e;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.po-asset-picker::backdrop { background: rgba(0, 0, 0, 0.58); }
.po-asset-picker-head,
.po-asset-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(45, 45, 40, 0.14);
}
.po-asset-picker-head span {
    display: block;
    margin-bottom: 3px;
    color: #77736d;
    font-size: 0.62rem;
    font-weight: 650;
    text-transform: uppercase;
}
.po-asset-picker-head h2 { margin: 0; font-size: 1.05rem; }
.po-asset-picker-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(45, 45, 40, 0.16);
    border-radius: 50%;
    background: #fff;
    color: #20201e;
    cursor: pointer;
}
.po-asset-picker-close .lucide { width: 18px; height: 18px; }
.po-asset-picker-tools {
    display: grid;
    grid-template-columns: auto auto minmax(180px, 1fr);
    gap: 8px;
    padding: 14px 18px 0;
}
.po-asset-upload-button,
.po-asset-picker-tools > button,
.po-asset-picker-actions button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(45, 45, 40, 0.18);
    border-radius: 5px;
    background: #fff;
    color: #20201e;
    font: 650 0.72rem 'Space Grotesk', sans-serif;
    cursor: pointer;
}
.po-asset-upload-button { background: #20201e; color: #fff; }
.po-asset-upload-button iconify-icon,
.po-asset-picker-tools > button iconify-icon { font-size: 1rem; }
.po-asset-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid rgba(45, 45, 40, 0.18);
    border-radius: 5px;
}
.po-asset-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #20201e;
    font: 0.82rem 'Space Grotesk', sans-serif;
}
.po-asset-picker-status { min-height: 20px; margin: 8px 18px 0; color: #77736d; font-size: 0.7rem; }
.po-asset-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 9px;
    max-height: 550px;
    padding: 10px 18px 18px;
    overflow-y: auto;
}
.po-asset-result {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(45, 45, 40, 0.14);
    border-radius: 5px;
    background: #fff;
    color: #20201e;
    cursor: pointer;
    text-align: left;
}
.po-asset-result:hover,
.po-asset-result.is-current { border-color: #20201e; }
.po-asset-picker.is-managing .po-asset-result { cursor: default; }
.po-asset-picker.is-uploading .po-asset-upload-button,
.po-asset-picker.is-uploading #po-asset-refresh { opacity: 0.45; pointer-events: none; }
.po-asset-result img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #efefec;
}
.po-asset-result-copy { display: grid; gap: 2px; padding: 8px; }
.po-asset-video-preview { display: block; position: relative; aspect-ratio: 4 / 3; background: #efefec; }
.po-asset-video-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.po-asset-video-preview iconify-icon { position: absolute; bottom: 6px; right: 6px; padding: 4px; border-radius: 4px; background: #fff; color: #20201e; font-size: 16px; }
.po-asset-result-copy strong,
.po-asset-result-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-asset-result-copy strong { font-size: 0.66rem; }
.po-asset-result-copy span { color: #77736d; font-size: 0.56rem; }
.po-asset-empty { grid-column: 1 / -1; padding: 4rem 1rem; color: #77736d; text-align: center; }
.po-asset-picker-actions { justify-content: flex-end; border-top: 1px solid rgba(45, 45, 40, 0.14); border-bottom: 0; }
.po-asset-picker.is-managing #po-asset-none { display: none; }

@media (max-width: 640px) {
    .po-asset-picker-tools { grid-template-columns: 1fr 1fr; }
    .po-asset-search { grid-column: 1 / -1; }
    .po-asset-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Editorial structure */
#project-overlay .po-block--section.is-centered { max-width: 1180px; padding-block: clamp(4rem, 9vw, 8rem); text-align: center; }
#project-overlay .po-block--section.is-centered p { margin-inline: auto; font-size: clamp(1rem, 2vw, 1.35rem); }
#project-overlay .po-block--section.is-editorial { display: grid; max-width: 1180px; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr); gap: 3rem; }
#project-overlay .po-block--section.is-editorial > span { grid-column: 1 / -1; }
#project-overlay .po-block--section.is-editorial p { margin-top: 0; }
#project-overlay .po-block--section.is-serif h2,
#project-overlay .po-block--cards.is-serif > h2,
#project-overlay .po-block--findings.is-serif > h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
}

#project-overlay .po-block--insight {
    --po-block-accent: var(--insight-accent, #176b87);
    max-width: 1180px;
    border: 1px solid color-mix(in srgb, var(--insight-accent, #176b87) 48%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--insight-accent, #176b87) 8%, #fff);
    text-align: center;
}
#project-overlay .po-block--insight .po-content-icon { margin-bottom: 0.7rem; }
#project-overlay .po-block--insight p { margin-inline: auto; }

#project-overlay .po-block--findings,
#project-overlay .po-block--cards { max-width: 1180px; }
#project-overlay .po-block--findings.is-centered-list { max-width: 880px; }
#project-overlay .po-block--findings.is-split {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    gap: 3rem;
}
#project-overlay .po-block--findings.is-split ul { margin-top: 0; }
#project-overlay .po-block--findings li {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    border-radius: 6px;
}
#project-overlay .po-block--findings li.has-icon {
    grid-template-columns: 34px minmax(0, 1fr);
}
#project-overlay .po-block--findings li > .po-item-marker {
    display: grid;
    width: 28px;
    height: 28px;
    margin: 0;
    place-items: center;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
}
#project-overlay .po-block--findings li > .po-item-marker .po-finding-icon {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--po-block-accent, #454541);
}
#project-overlay .po-block--findings li[data-tone="warning"] { --po-block-accent: #a92f49; }
#project-overlay .po-block--findings li[data-tone="positive"] { --po-block-accent: #2d7c42; }

#project-overlay .po-card-grid article { border-radius: 6px; }
#project-overlay .po-card-grid article > .po-content-icon { display: block; margin-bottom: 2.2rem; }
#project-overlay .po-card-grid article > .po-card-label { display: block; margin-bottom: 1.4rem; }

#project-overlay .po-stat-icon {
    display: block;
    margin: 0 auto 0.85rem;
    color: var(--game-ui-text);
    font-size: 1.35rem;
}

#project-overlay .po-stat-editor-row {
    display: grid;
    grid-template-columns: minmax(132px, auto) 90px minmax(0, 1fr) 34px;
    align-items: end;
    gap: 6px;
    margin-bottom: 7px;
}
#project-overlay .po-stat-editor-row .po-icon-control { margin-top: 0; }

#project-overlay .po-gallery-layout-field,
#project-overlay .po-gallery-image-fields label {
    display: grid;
    gap: 5px;
    color: #aaa;
    font-size: 0.68rem;
    text-transform: uppercase;
}
#project-overlay .po-gallery-layout-field { margin-bottom: 8px; }
#project-overlay .po-gallery-editor-hint {
    margin: 0 0 14px;
    color: #858585;
    font-size: 0.68rem;
    line-height: 1.5;
}
#project-overlay .po-gallery-image-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
    align-items: end;
    gap: 8px;
}
#project-overlay .po-gallery-image-fields > .po-gal-caption { min-width: 0; }
#project-overlay .po-gal-up,
#project-overlay .po-gal-down {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 4px;
    background: transparent;
    color: #ddd;
    cursor: pointer;
}
#project-overlay .po-gal-up:disabled,
#project-overlay .po-gal-down:disabled { opacity: 0.28; cursor: default; }
#project-overlay .po-gallery-add-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 620px) {
    #project-overlay .po-gallery-image-fields { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    #project-overlay .po-stat-editor-row { grid-template-columns: 1fr 1fr 34px; }
    #project-overlay .po-stat-editor-row .po-icon-control { grid-column: 1 / -1; }
}

/* Native project videos share the image block's size and caption treatment. */
project-video { display: block; width: 100%; min-width: 0; }
project-video > video { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 9; object-fit: contain; border-radius: var(--project-video-radius, 8px); background: #eceeed; }
.project-video-caption { padding: 0.65rem 0.25rem 0; color: var(--game-ui-muted, var(--mp-muted, #777)); font: 500 0.68rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: var(--project-text-align, center); text-transform: uppercase; overflow-wrap: anywhere; }
.project-video-status { margin: 8px 0; color: #8f3333; font-size: 0.8rem; }
.project-video-status[hidden] { display: none; }
#project-overlay .po-block--video-file { max-width: 900px; margin-inline: auto; padding: 0 1rem; }
#mobile-portfolio-root .mp-block--video-file { padding-inline: 20px; }
#project-overlay .po-video-setting { display: grid; gap: 6px; margin: 10px 0; color: #555; font-size: 0.78rem; }
#project-overlay .po-video-options { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0; color: #333; font-size: 0.78rem; }
#project-overlay .po-video-options label { display: flex; align-items: center; gap: 6px; }
#project-overlay .po-video-options input { width: 16px; height: 16px; margin: 0; accent-color: #20201e; }

/* Image and reusable caption treatment */
#project-overlay .po-empty-image {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 160px;
    max-height: 280px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #eceeed;
    color: #8b928f;
    cursor: pointer;
    grid-column: 1 / -1;
    column-span: all;
}
#project-overlay .po-empty-image-icon {
    width: 40px;
    height: 40px;
    font-size: 40px;
}
#project-overlay .po-block--image-full .po-empty-image { border-radius: 0; }
#project-overlay .po-block--video-file > .po-empty-image { border-radius: var(--project-video-radius, 8px); }
#project-overlay .po-block--gallery.po-gallery--empty { grid-auto-rows: auto; }
#project-overlay .po-block--image,
#project-overlay .po-gallery-item,
#project-overlay .po-twocol-image { background: transparent; }
#project-overlay .po-block--image img,
#project-overlay .po-gallery-item img,
#project-overlay .po-twocol-image img { border-radius: 8px; }
#project-overlay .po-block--image {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 1rem;
}
#project-overlay .po-block--image-full {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
}
#project-overlay .po-block--image-full img {
    display: block;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}
#project-overlay .po-block--image .caption,
#project-overlay .po-block--image-full .caption,
#project-overlay .po-gallery-item .caption,
#project-overlay .po-twocol-image .caption,
#project-overlay .po-block--caption {
    position: static;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0.65rem 0.25rem 0;
    background: transparent;
    color: var(--game-ui-muted);
    font: 500 0.68rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
    text-transform: uppercase;
}
#project-overlay .po-block--gallery {
    display: grid;
    width: 100%;
    gap: 1rem;
    padding: 0 1rem;
    overflow: visible;
    grid-auto-flow: dense;
}
#project-overlay .po-gallery-item {
    min-width: 0;
    overflow: visible;
}
#project-overlay .po-gallery-item img { aspect-ratio: auto; }

/* 1. Equal Grid */
#project-overlay .po-gallery--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#project-overlay .po-gallery--grid .po-gallery-item--wide,
#project-overlay .po-gallery--grid .po-gallery-item--large { grid-column: span 2; }

/* 2. Pinterest Masonry: natural image ratios, independent rows. */
#project-overlay .po-gallery--masonry {
    display: block;
    columns: 3 260px;
    column-gap: 1rem;
}
#project-overlay .po-gallery--masonry .po-gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    break-inside: avoid;
}

/* Fixed-row layouts crop intentionally so mixed tiles keep clean seams. */
#project-overlay .po-gallery--featured,
#project-overlay .po-gallery--mosaic,
#project-overlay .po-gallery--editorial {
    grid-auto-flow: dense;
}
#project-overlay .po-gallery--featured .po-gallery-item,
#project-overlay .po-gallery--mosaic .po-gallery-item,
#project-overlay .po-gallery--editorial .po-gallery-item {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
}
#project-overlay .po-gallery--featured .po-gallery-item img,
#project-overlay .po-gallery--mosaic .po-gallery-item img,
#project-overlay .po-gallery--editorial .po-gallery-item img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

/* 3. Featured Image + Tiles: reorder images to choose the automatic hero. */
#project-overlay .po-gallery--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 13vw, 220px);
}
#project-overlay .po-gallery--featured .po-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
#project-overlay .po-gallery--featured .po-gallery-item--wide { grid-column: span 2; }
#project-overlay .po-gallery--featured .po-gallery-item--tall { grid-row: span 2; }
#project-overlay .po-gallery--featured .po-gallery-item--large { grid-column: span 2; grid-row: span 2; }

/* 4. Manual Mosaic: every image can be Auto, Wide, Tall, or Large. */
#project-overlay .po-gallery--mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(125px, 12vw, 205px);
}
#project-overlay .po-gallery--mosaic .po-gallery-item--wide { grid-column: span 2; }
#project-overlay .po-gallery--mosaic .po-gallery-item--tall { grid-row: span 2; }
#project-overlay .po-gallery--mosaic .po-gallery-item--large { grid-column: span 2; grid-row: span 2; }

/* 5. Editorial Collage: a polished repeating asymmetric composition. */
#project-overlay .po-gallery--editorial {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(80px, 7vw, 125px);
}
#project-overlay .po-gallery--editorial .po-gallery-item:nth-child(6n + 1) { grid-column: span 7; grid-row: span 3; }
#project-overlay .po-gallery--editorial .po-gallery-item:nth-child(6n + 2) { grid-column: span 5; grid-row: span 2; }
#project-overlay .po-gallery--editorial .po-gallery-item:nth-child(6n + 3) { grid-column: span 5; grid-row: span 2; }
#project-overlay .po-gallery--editorial .po-gallery-item:nth-child(6n + 4) { grid-column: span 4; grid-row: span 2; }
#project-overlay .po-gallery--editorial .po-gallery-item:nth-child(6n + 5) { grid-column: span 8; grid-row: span 3; }
#project-overlay .po-gallery--editorial .po-gallery-item:nth-child(6n + 6) { grid-column: span 4; grid-row: span 3; }
#project-overlay .po-gallery--editorial .po-gallery-item.po-gallery-item--wide { grid-column: span 8; grid-row: span 2; }
#project-overlay .po-gallery--editorial .po-gallery-item.po-gallery-item--tall { grid-column: span 4; grid-row: span 4; }
#project-overlay .po-gallery--editorial .po-gallery-item.po-gallery-item--large { grid-column: span 8; grid-row: span 4; }

@media (max-width: 900px) {
    #project-overlay .po-gallery--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #project-overlay .po-gallery--featured,
    #project-overlay .po-gallery--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #project-overlay .po-gallery--editorial { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #project-overlay .po-gallery--editorial .po-gallery-item:nth-child(n) { grid-column: span 3; grid-row: span 2; }
    #project-overlay .po-gallery--editorial .po-gallery-item:nth-child(3n + 1) { grid-column: span 4; grid-row: span 3; }
    #project-overlay .po-gallery--editorial .po-gallery-item:nth-child(3n + 2) { grid-column: span 2; grid-row: span 3; }
    #project-overlay .po-gallery--editorial .po-gallery-item.po-gallery-item--wide { grid-column: span 6; grid-row: span 2; }
    #project-overlay .po-gallery--editorial .po-gallery-item.po-gallery-item--tall { grid-column: span 3; grid-row: span 4; }
    #project-overlay .po-gallery--editorial .po-gallery-item.po-gallery-item--large { grid-column: span 6; grid-row: span 4; }
}

@media (max-width: 560px) {
    #project-overlay .po-gallery--grid { grid-template-columns: 1fr; }
    #project-overlay .po-gallery--grid .po-gallery-item { grid-column: auto; }
}
#project-overlay .po-block--caption { max-width: 1180px; margin: 0 auto 1.5rem; padding: 0.75rem 1rem; }
#project-overlay .po-block--caption.is-left { text-align: left; }
#project-overlay .po-block--caption.is-right { text-align: right; }

/* Timeline */
#project-overlay .po-block--timeline,
#project-overlay .po-block--grid-spec {
    max-width: 1180px;
    margin: 0 auto 2rem;
    padding: 1rem;
}
#project-overlay .po-structured-scroll { overflow-x: auto; padding: 1px 1px 10px; }
#project-overlay .po-timeline-canvas {
    min-width: var(--timeline-min-width, 820px);
    overflow: hidden;
    border: 1px solid var(--game-ui-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}
#project-overlay .po-timeline-periods {
    display: grid;
    grid-template-columns: repeat(var(--timeline-columns), minmax(var(--timeline-column-width), 1fr));
}
#project-overlay .po-timeline-chart {
    display: grid;
    grid-template-columns: repeat(var(--timeline-columns), minmax(var(--timeline-column-width), 1fr));
}
#project-overlay .po-timeline-periods { padding: 1.5rem 2rem 0; }
#project-overlay .po-timeline-periods span {
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border-left: 1px solid var(--game-ui-border);
    color: var(--game-ui-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
#project-overlay .po-timeline-periods span:last-child { border-right: 1px solid var(--game-ui-border); }
#project-overlay .po-timeline-chart {
    position: relative;
    grid-auto-rows: var(--timeline-row-height);
    padding: 1.25rem 2rem 2rem;
}
#project-overlay .po-timeline-chart::before {
    position: absolute;
    inset: 0 2rem;
    z-index: 0;
    border-right: 1px solid var(--game-ui-border);
    background-image: repeating-linear-gradient(
        to right,
        var(--game-ui-border) 0 1px,
        transparent 1px calc(100% / var(--timeline-columns))
    );
    content: '';
    pointer-events: none;
}
#project-overlay .po-timeline-phase {
    z-index: 1;
    align-self: center;
    justify-self: start;
    box-sizing: border-box;
    width: max(18px, calc(var(--phase-width) - 12px));
    min-width: 0;
    margin: 8px 0 8px calc(var(--phase-left) + 6px);
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--phase-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--phase-color) 9%, #fff);
    color: var(--game-ui-text);
}
#project-overlay .po-timeline-phase .po-content-icon {
    margin-bottom: 1rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--phase-color) 28%, #fff);
    color: color-mix(in srgb, var(--phase-color) 72%, #111);
}
#project-overlay .po-timeline-phase h3 { margin: 0; font-size: 1.15rem; line-height: 1.15; }
#project-overlay .po-timeline-phase p { margin: 0.4rem 0 0; color: color-mix(in srgb, var(--phase-color) 70%, #333); font-size: 0.78rem; line-height: 1.45; }
#project-overlay .po-structured-caption { margin-top: 0.7rem; color: var(--game-ui-muted); font: 500 0.68rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; text-transform: uppercase; }

/* Layout grid specification */
#project-overlay .po-grid-spec-canvas {
    min-width: var(--grid-min-width, 780px);
    padding: 2rem;
    border: 0;
    border-radius: 0;
    background: var(--grid-background, #eef2fa);
    box-shadow: none;
}
#project-overlay .po-grid-spec-row {
    position: relative;
    min-height: var(--grid-row-height, 150px);
    margin: 0;
    overflow: visible;
    border: 0;
    border-top: 1px dashed var(--grid-accent, #f12f8b);
    border-right: 1px dashed var(--grid-accent, #f12f8b);
    border-left: 1px dashed var(--grid-accent, #f12f8b);
    border-radius: 8px 8px 0 0;
    color: var(--grid-accent, #f12f8b);
}
#project-overlay .po-grid-spec-row:last-child {
    border-bottom: 1px dashed var(--grid-accent, #f12f8b);
    border-radius: 8px;
}
#project-overlay .po-grid-columns {
    position: absolute;
    inset: 0;
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
    padding-inline: var(--grid-margin);
    border-radius: 7px 7px 0 0;
}
#project-overlay .po-grid-columns span { background: color-mix(in srgb, var(--grid-accent, #f12f8b) 7%, #fff); }
#project-overlay .po-grid-spec-copy {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-height: inherit;
    padding: 1rem;
    text-align: center;
}
#project-overlay .po-grid-spec-copy strong {
    align-self: end;
    padding-bottom: 1rem;
    font: 700 1rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
#project-overlay .po-grid-spec-copy span {
    align-self: start;
    padding-top: 1rem;
    font: 600 0.62rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
#project-overlay .po-grid-spec-measure {
    position: absolute;
    top: 50%;
    right: -1px;
    left: -1px;
    border-top: 1px solid currentColor;
}
#project-overlay .po-grid-spec-measure::before,
#project-overlay .po-grid-spec-measure::after {
    position: absolute;
    top: -4px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    content: '';
}
#project-overlay .po-grid-spec-measure::before {
    left: 1px;
    border-left: 1px solid currentColor;
    transform: rotate(-45deg);
}
#project-overlay .po-grid-spec-measure::after {
    right: 1px;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
#project-overlay .po-grid-spec-canvas.is-single .po-grid-spec-row {
    width: 100% !important;
    min-height: var(--grid-single-height, 420px);
    border-radius: 0;
}
#project-overlay .po-grid-spec-canvas.is-single .po-grid-columns { border-radius: 0; }
#project-overlay .po-editor-help {
    margin: 0.45rem 0 0.8rem;
    color: #a9a9b7;
    font-size: 0.72rem;
    line-height: 1.45;
}

@media (max-width: 768px) {
    #project-overlay .po-meta-editor-fixed,
    #project-overlay .po-custom-detail-list,
    #project-overlay .po-block--section.is-editorial,
    #project-overlay .po-block--findings.is-split { grid-template-columns: 1fr; }
    #project-overlay .po-custom-detail-row { grid-template-columns: 1fr 1fr auto; }
    #project-overlay .po-block--image,
    #project-overlay .po-block--gallery { padding-inline: 0.75rem; }
    #project-overlay .po-block--image-full { padding-inline: 0; }
    .po-icon-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}