/* ==================================================
   INLINE DETAIL SPIKE 0.3.8
   Oshine keeps ownership of the Portfolio Grid.
   The preview is absolutely positioned over the same
   portfolio-container but is NOT an Oshine .element.
================================================== */

.portfolio .portfolio-container > .marta-inline-detail-item {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    padding: 0 0 28px 28px;
}

/* Prevent Oshine's own transition rules from animating the temporary top shift. */
.portfolio.marta-inline-detail-layout-instant .portfolio-container > .element {
    transition-duration: 0s !important;
}

.marta-inline-detail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
    gap: 60px;
    width: 100%;
    padding: 52px 32px 34px;
    box-sizing: border-box;
    background: transparent;
    border: 0;

    /* Minimal reveal only; no vertical travel. */
    opacity: 0;
}

.marta-inline-detail-item--visible .marta-inline-detail {
    opacity: 1;
    transition: opacity 120ms ease;
}

.marta-inline-detail--single {
    grid-template-columns: minmax(320px, 540px) minmax(260px, 1fr);
    gap: 60px;
    align-items: start;
}

.marta-inline-detail__media {
    order: 1;
}

.marta-inline-detail__copy {
    order: 2;
}

.marta-inline-detail__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #222;
    font-size: 30px;
    line-height: 36px;
    cursor: pointer;
}

.marta-inline-detail__title {
    margin: 0 42px 18px 0;
    font-size: 32px;
    line-height: 1.12;
}

.marta-inline-detail__contribution,
.marta-inline-detail__excerpt {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.55;
}

.marta-inline-detail__contribution {
    font-weight: 600;
}

.portfolio .portfolio-container > .marta-inline-detail-item .marta-inline-detail__post-link,
body.single-portfolio .marta-inline-detail__post-link,
body.page-id-4091 .marta-inline-detail__post-link {
    display: inline-block;
    margin-top: 4px;
    color: #fb0433 !important;
    font-size: 16px;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portfolio .portfolio-container > .marta-inline-detail-item .marta-inline-detail__post-link::after,
body.single-portfolio .marta-inline-detail__post-link::after,
body.page-id-4091 .marta-inline-detail__post-link::after {
    content: "↗";
    display: inline-block;
    margin-left: 0.35em;
    color: #fb0433 !important;
    font-size: 0.92em;
    line-height: 1;
    text-decoration: none;
}

.portfolio .portfolio-container > .marta-inline-detail-item .marta-inline-detail__post-link:hover,
body.single-portfolio .marta-inline-detail__post-link:hover,
body.page-id-4091 .marta-inline-detail__post-link:hover,
.portfolio .portfolio-container > .marta-inline-detail-item .marta-inline-detail__post-link:focus,
body.single-portfolio .marta-inline-detail__post-link:focus,
body.page-id-4091 .marta-inline-detail__post-link:focus,
.portfolio .portfolio-container > .marta-inline-detail-item .marta-inline-detail__post-link:visited,
body.single-portfolio .marta-inline-detail__post-link:visited,
body.page-id-4091 .marta-inline-detail__post-link:visited {
    color: #fb0433 !important;
}

.portfolio .portfolio-container > .element.marta-inline-detail-card-active .element-inner {
    box-shadow: inset 0 0 0 1px #86f0e9;
}

.portfolio .portfolio-container > .element.marta-inline-detail-card-active .thumb-overlay .thumb-bg,
.portfolio .portfolio-container > .element.marta-inline-detail-card-active .thumb-title-wrap {
    background: #d8f6f2 !important;
}

.portfolio .portfolio-container > .element.marta-inline-detail-card-active .thumb-title,
.portfolio .portfolio-container > .element.marta-inline-detail-card-active .thumb-title a {
    background: transparent !important;
}

.portfolio .portfolio-container > .element.marta-inline-detail-card-active .thumb-overlay {
    background: transparent !important;
}

.marta-inline-detail__media {
    min-width: 0;
    padding-top: 6px;
}

/* Single image: reduced prototype size, but kept close to the copy. */
.marta-inline-detail--single .marta-inline-detail__media:not(.marta-inline-detail__media--series) .marta-inline-detail__image-link {
    width: 100%;
    max-width: 540px;
    margin-left: 0;
    margin-right: auto;
}

.marta-inline-detail__media--series {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
}

.marta-inline-detail__image-link,
.marta-inline-detail__image-link img {
    display: block;
    width: 100%;
}

.marta-inline-detail__image-link img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

/* Five or more slides: copy above one complete desktop row. */
.marta-inline-detail--long-series { grid-template-columns: 1fr; gap: 22px; }
.marta-inline-detail--long-series .marta-inline-detail__copy { order: 1; }
.marta-inline-detail--long-series .marta-inline-detail__media { order: 2; grid-template-columns: repeat(var(--marta-slide-count), minmax(0, 1fr)); }

@media only screen and (max-width: 1200px) {
    .marta-inline-detail {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 56px;
    }

    .marta-inline-detail__copy {
        order: 1;
        max-width: 100%;
    }

    .marta-inline-detail__media {
        order: 2;
    }

    .marta-inline-detail__media,
    .marta-inline-detail__media:not(.marta-inline-detail__media--series) .marta-inline-detail__image-link {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio .portfolio-container > .marta-inline-detail-item {
        padding-left: 28px;
    }

    .marta-inline-detail {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 56px 24px 24px;
    }

    .marta-inline-detail__title {
        font-size: 28px;
        line-height: 1.14;
    }

    .marta-inline-detail__media:not(.marta-inline-detail__media--series) .marta-inline-detail__image-link {
        width: 100%;
    }

    .marta-inline-detail__media--series {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
        padding-bottom: 0;
    }

    .marta-inline-detail__media--series .marta-inline-detail__image-link {
        width: 100%;
        transform: none;
    }
}


/* Mobile/tablet: use actual flow while an inline detail is open. Desktop is unchanged. */
@media only screen and (max-width: 959px) {
 .portfolio.marta-inline-detail-mobile-flow .portfolio-container { height: auto !important; display: flow-root; }
 .portfolio.marta-inline-detail-mobile-flow .portfolio-container > .element {
  position: relative !important; top: auto !important; left: auto !important;
  transform: none !important; float: left;
 }
 .portfolio.marta-inline-detail-mobile-flow .portfolio-container > .marta-inline-detail-item {
  position: relative; clear: both; float: none; top: auto; left: auto;
  width: 100%; height: auto !important;
 }
 .marta-inline-detail--long-series .marta-inline-detail__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Project detail category labels: mobile/tablet only, with desktop typography retained. */
@media only screen and (max-width: 959px) {
 body.single-portfolio .project-block h5,
 body.single-portfolio .project-block p:first-child:has(> a) { font-size: 14px; line-height: 1.5; letter-spacing: .04em; }
}

/* Inline motion uses the original Media video and keeps its natural ratio. */
.marta-inline-detail__video { display: block; width: 100%; height: auto; max-width: 100%; }

/* Data landing: the selected parent category is the All view, not a sixth filter.
   Keep the native query and four approved subcategories intact. */
body.page-id-4597 .filters .sort[data-id="data-storytelling"] { display: none; }

/* Compact native captions: retain natural wrapping without added minimum height. */
.portfolio .element.style5-title .thumb-title-wrap { min-height:0; box-sizing:border-box; }

/* Project metadata remains discreet; category navigation is separate. */
body.single-portfolio .project-block .tatsu-text-inner .project-meta { font-size: 16px; line-height: 1.5; margin: 8px 0 28px; margin-bottom:28px !important; }
/* Campaign parent supplies unclassified approved pieces to All, not an extra filter. */
body.page-id-4437 .filters .sort[data-id="campaigns-social-media"] { display: none; }
/* About: responsive reading and approved typographic link treatment. */
body.page-id-4091 .about-links p { display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media only screen and (max-width:959px) {
 body.page-id-4091 .page-title-module-custom { display:none; }
 body.page-id-4091 .about-reading-row p { font-size:18px; line-height:1.6; }
 body.page-id-4091 .about-reading-row h1 { font-size:38px; line-height:1.15; }
 body.page-id-4091 .about-role { font-size:23px !important; line-height:1.4 !important; }
}

/* Desktop editorial copy is controlled and centred; native visual rows remain wide. */
@media only screen and (min-width:960px) {
 body.single-portfolio:not(.postid-4233) .tatsu-row.project-block { max-width:1040px; margin-left:auto; margin-right:auto; }
}
/* COP already includes its cover as the first native gallery slide. Keep it once on mobile. */
@media only screen and (max-width:959px) {
 body.postid-4233 .cop-series-desktop-cover { display:none; }
}

/* Inline hierarchy: navigation, title, context/contribution, separate verified year. */
.marta-inline-detail__navigation a { color:inherit; text-decoration:none; }
.marta-inline-detail__year { font-size:14px; line-height:1.5; margin:0 0 16px; color:#666; }
/* Native Tatsu visual columns retain the approved 960px breakpoint. */
@media only screen and (min-width:960px) {
 body.single-portfolio .tatsu-row.native-pair > .tatsu-column { width:50%; }
 body.single-portfolio .tatsu-row.native-thirds > .tatsu-column { width:33.333333%; }
 body.single-portfolio .tatsu-row.project-section-intro { max-width:1040px; margin-left:auto; margin-right:auto; }
}
@media only screen and (max-width:959px) {
 body.single-portfolio .tatsu-row.native-pair > .tatsu-column, body.single-portfolio .tatsu-row.native-thirds > .tatsu-column { width:100%; }
 body.page-id-4091 .tatsu-row.about-reading-row { padding-left:0 !important; padding-right:0 !important; }
}
/* Remove paragraph tails so native About dividers have balanced 32px/24px margins. */
body.page-id-4091 .about-reading-row .tatsu-text-inner p:last-child { margin-bottom:0; }

/* Tatsu clears the last module's bottom margin; padding keeps About's dividers balanced. */
body.page-id-4091 .about-reading-row .tatsu-divider-wrap { margin:0 !important; padding:24px 0 32px; }
@media only screen and (max-width:959px) { body.page-id-4091 .about-reading-row .tatsu-divider-wrap { padding:16px 0 24px; } }

/* Three-slide series use all of their native inline media width. */
@media only screen and (min-width:768px) {
 .marta-inline-detail--series[style="--marta-slide-count: 3"] .marta-inline-detail__media--series { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* EU Africa: separate native stacked quote and illustration columns on mobile/tablet. */
@media only screen and (max-width:959px) {
 body.postid-4433 .tatsu-row.native-pair > .tatsu-column:not(:last-child),
 body.postid-4433 .tatsu-row.native-thirds > .tatsu-column:not(:last-child) { margin-bottom:24px !important; }
}

/* UX/UI project visuals fill their native full-width rows, including beyond source pixel width. */
body.single-portfolio:is(.postid-4502,.postid-4503,.postid-4504,.postid-4508,.postid-4507,.postid-4478) .project-visual-row .tatsu-single-image-inner > img { display:block; width:100%; height:auto; }

/* The shared native intro reading measure uses normal width on mobile/tablet. */
@media only screen and (max-width:959px) {
 body:is(.page-id-4597,.page-id-4437,.page-id-4630,.page-id-4666,.page-id-4631,.page-id-4632) .tatsu-row:has(h1) { padding-left:0 !important; padding-right:0 !important; }
}

/* COP desktop covers share the full native thumbnail-gallery column width. */
@media only screen and (min-width:960px) {
 body.postid-4233 .cop-series-desktop-cover .tatsu-single-image-inner,
 body.postid-4233 .cop-series-desktop-cover .tatsu-single-image-inner > img { display:block; width:100% !important; max-width:100%; height:auto; }
}