/**
 * Single portfolio credits normalization
 * Keeps credits in a stable order, two-column mobile layout, and a 1.5x
 * size ratio between the credit value (name) and the label (role) so the
 * names read as the dominant element.
 */

body.single-portfolio {
    --v1a-work-copy-font-size: clamp(0.95rem, 0.5rem + 1.9vw, 1.5rem);
    --v1a-work-copy-line-height: 1.32;
    --v1a-work-credit-gap: clamp(0.75rem, 1vw, 1.35rem);
    --v1a-work-credit-item-width: calc(50% - clamp(0.375rem, 1vw, 0.675rem));
    /* Label = the role (DIRECTOR / AGENCY). Value = the name, exactly 1.5x
       the label across every viewport via calc() on the variable. */
    --v1a-work-credit-label-size: clamp(0.78rem, 0.45rem + 0.85vw, 1.25rem);
    --v1a-work-credit-value-size: calc(var(--v1a-work-credit-label-size) * 1.5);
    --v1a-work-text-color: rgb(242, 242, 242);
    --v1a-work-credit-label-color: rgb(230, 230, 230);
}

body.single-portfolio :is(.elementor-element-bcc57c8, .elementor-element-8a3c0ad) .text-wrapper p {
    font-size: var(--v1a-work-copy-font-size) !important;
    line-height: var(--v1a-work-copy-line-height) !important;
    color: var(--v1a-work-text-color) !important;
}

/* ========================================
   HERO META ROW (Branded Content / Client / Year)
   The hero template (id 10479) renders this row inside container fc5e316.
   The peicon separators between items can collapse to 0 width when the
   Material Icons Sharp font isn't applied, which makes the meta read as
   "Branded ContentColeman2025". Add an explicit flex gap so the items
   always have clean spacing and wrap onto a new line on narrow viewports.
   ======================================== */

body.single-portfolio .elementor-element-fc5e316 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    column-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem) !important;
    row-gap: clamp(0.15rem, 0.25vw, 0.4rem) !important;
}

/* Material icon separators inside the meta row. When the icon font does
   render they show a small dash; when it doesn't they collapse silently
   and the flex gap above carries the spacing. Either way is fine. */
body.single-portfolio .elementor-element-fc5e316 .elementor-widget-peicon {
    flex: 0 0 auto;
}

body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) {
    display: flex;
    flex-wrap: wrap !important;
    align-content: flex-start;
    justify-content: space-between;
    gap: var(--v1a-work-credit-gap);
}

body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) > .e-con {
    display: flex;
    flex-direction: column;
    width: var(--v1a-work-credit-item-width) !important;
    flex: 0 0 var(--v1a-work-credit-item-width) !important;
    min-width: 0;
}

body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) > .e-con > .e-con {
    min-width: 0;
}

body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) .text-wrapper {
    text-wrap: balance;
}

/* Default fallback: any .text-p inside the crew column gets the LABEL size.
   The value rule below overrides this for the 2nd petextwrapper per row. */
body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) .text-p {
    font-size: var(--v1a-work-credit-label-size) !important;
    line-height: 1.15;
    color: var(--v1a-work-credit-label-color) !important;
}

/* Position-based rule: each crew row contains
       petextwrapper(label) + petextwrapper(value) + divider
   The 2nd petextwrapper is the name -> value size + value color. This works
   regardless of which paragraph_size setting pe-core gave the widget. */
body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) > .e-con > .elementor-widget-petextwrapper:nth-of-type(2) :is(.text-p, .text-h6) {
    font-size: var(--v1a-work-credit-value-size) !important;
    line-height: 1.12;
    overflow-wrap: anywhere;
    color: var(--v1a-work-text-color) !important;
}

/* Backwards-compat: legacy posts that still have a .text-h6 widget for the
   value also pick up the value styling. */
body.single-portfolio :is(.elementor-element-e2559d4, .elementor-element-e1ae11f, .elementor-element-0eb09af) .text-h6 {
    font-size: var(--v1a-work-credit-value-size) !important;
    line-height: 1.12;
    overflow-wrap: anywhere;
    color: var(--v1a-work-text-color) !important;
}

/* Portfolio gallery rows: remove large empty areas in paired image rows by
   stretching each nested image slot and cropping within the existing frame. */
@media (min-width: 768px) {
    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) {
        align-items: stretch !important;
    }

    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) > .e-con,
    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) .e-con > .e-con:has(.elementor-widget-pesingleimage) {
        align-self: stretch !important;
        min-height: 0;
    }

    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) .e-con > :is(.e-con:has(.elementor-widget-pesingleimage), .elementor-widget-pesingleimage) {
        flex: 1 1 auto !important;
        min-height: 0;
        width: 100%;
    }

    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) > .e-con:not(:has(.elementor-widget-pesingleimage)) {
        display: none !important;
    }

    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) .e-con > .elementor-widget-pesingleimage > .elementor-widget-container,
    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) .e-con > .elementor-widget-pesingleimage .single-image {
        height: 100%;
        min-height: 0;
    }

    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) .e-con > .elementor-widget-pesingleimage .single-image {
        overflow: hidden;
    }

    body.single-portfolio .project-page-content > .elementor > .e-con:has(> .e-con .elementor-widget-pesingleimage) .e-con > .elementor-widget-pesingleimage .single-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}