/* Case studies: ported from the staging Elementor case-study pages (Moovahome
   is post 631; the others share its layout). Per-page differences are at the
   end, under .case--<slug>. */

/* Hero [668249b1]: photo under a 70% brand-blue overlay. */
.case-hero {
    --min-height: 750px;
    --justify: center;
    --overlay-color: var(--color-primary);
    --overlay-opacity: 0.7;
    overflow: hidden;
    background-color: var(--nd-white);
}

.case-hero-bg {
    object-position: 0 0;
}

/* [9a9840a] */
.case-hero-inner {
    --justify: center;
    --align: flex-start;
    --self: center;
}

/* Logo box [50990958] */
.case-logo {
    --justify: center;
    --align: center;
    text-align: center;
}

/* Staging serves 300px-wide logo files, so they never grow past 300px. */
.case-logo img {
    display: inline-block;
    width: 100%;
    max-width: min(100%, 300px);
    height: 100%;
    vertical-align: middle;
}

.case-title {
    font-size: 64px;
    color: var(--nd-white);
}

.case-intro {
    margin: 20px 0;
    font-size: var(--fs-text);
    color: var(--nd-white);
}

.case-website .btn {
    font-size: var(--fs-text);
}

/* Section shells [3487d459], [38083c42], [458fa671], [7893fbd5]: 2em top
   and bottom padding. */
.case-section {
    --align: center;
    --pt: 2em;
    --pb: 2em;
    --pl: 0em;
    --pr: 0em;
}

/* [253b18e2] */
.case-copy-inner {
    --justify: flex-start;
}

.case-heading {
    width: 100%;
    max-width: 100%;
    text-align: start;
    font-size: 36px;
    color: var(--color-primary);
}

/* [277bec70], [5a060bdd] */
.case-columns {
    --justify: space-evenly;
    --align: flex-start;
    --row-gap: 0px;
    --col-gap: 25px;
}

.case-column {
    width: 50%;
    max-width: 50%;
    font-size: var(--fs-text);
    color: var(--text-secondary);
}

.case-band {
    background-color: var(--bg-secondary);
}

/* [17150849] */
.case-band-inner {
    --align: center;
}

/* [19c0c33b] */
.case-band-images {
    --min-height: 250px;
    --justify: space-evenly;
    --row-gap: 0px;
    --col-gap: 20px;
}

.case-band-image {
    width: 45%;
    max-width: 45%;
}

.case-band-image img,
.case-gallery-image img {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    vertical-align: middle;
}

.case-band-image img {
    height: 250px;
}

.case-band-copy .case-column {
    align-self: flex-start;
    text-align: start;
}

/* Testimonial [cd3465a] (placeholder copy, as on staging). */
.case-quote-text {
    align-self: flex-start;
    width: 85%;
    max-width: 85%;
    text-align: start;
    font-size: 32px;
    line-height: 1.2em;
    color: var(--color-primary);
}

.case-quote-cite {
    text-align: end;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2em;
    color: var(--text-secondary);
}

/* Gallery [73fe1b56] */
.case-gallery-grid {
    --min-height: 350px;
    --justify: center;
    --align: center;
    --wrap: wrap;
}

.case-gallery-image {
    width: 48%;
    max-width: 48%;
}

.case-gallery-image img {
    height: 350px;
}

@media (min-width: 768px) {
    .case-hero { --width: 100%; }
    .case-hero-inner { --width: 60%; }
    .case-logo { --width: 30%; }
    .case-section { --width: 100%; }
    .case-copy-inner { --width: 60%; }
    .case-columns { --width: 100%; }
    .case-band-inner { --width: 70%; }
    .case-band-images { --width: 100%; }
    .case-band-copy { --width: 85%; }
    .case-quote-inner { --width: 60%; }
    .case-gallery-grid { --width: 70%; }
}

@media (max-width: 1024px) {
    .case-title { font-size: 36px; }
    .case-band-images { --min-height: 0px; }
    .case-band-image img { height: 175px; }
    .case-quote-inner { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; }
    .case-quote-cite { font-size: 28px; }
    .case-gallery-grid { --min-height: 250px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .case-hero-inner { --width: 90%; }
    .case-copy-inner { --width: 90%; }
    .case-band-inner { --width: 90%; }
    .case-band-copy { --width: 100%; }
    .case-quote-inner { --width: 90%; }
    .case-gallery-grid { --width: 90%; }
}

@media (max-width: 767px) {
    .case-hero-inner { --align: center; }
    .case-intro { margin: 0; }
    .case-logo { --align: flex-start; }
    .case-title { font-size: 24px; line-height: 1.2em; }
    .case-copy-inner { --width: 90%; }
    .case-heading { text-align: center; font-size: 24px; line-height: 1.2em; }
    .case-columns { --dir: column; --align: center; }

    .case-column {
        width: 100%;
        max-width: 100%;
        margin: 5px;
        text-align: start;
    }

    .case-band-inner { --width: 90%; }
    .case-band-images { --row-gap: 20px; --col-gap: 20px; }
    .case-band-image { width: 100%; max-width: 100%; }
    .case-band-copy { --dir: row; --row-gap: 25px; --col-gap: 25px; }
    .case-quote-inner { --width: 90%; }
    .case-quote-text { width: 100%; max-width: 100%; font-size: 16px; }
    .case-quote-cite { font-size: 16px; }
    .case-gallery-grid { --width: 90%; }
    .case-gallery-image { width: 100%; max-width: 100%; }
}

/* Per-page differences on staging. */
.case--that-personal-touch .case-hero-bg { object-position: 0 -167px; }
.case--adding-that-special-finish .case-hero-bg { object-position: 50% 100%; }
.case--yannis-caribbean-restaurant .case-hero-bg,
.case--manor-interiors .case-hero-bg { object-position: 50% 50%; }

@media (min-width: 1025px) {
    .case--texaco-techron .case-logo,
    .case--adding-that-special-finish .case-logo,
    .case--yannis-caribbean-restaurant .case-logo,
    .case--manor-interiors .case-logo { --width: 20%; }
}

@media (max-width: 1024px) {
    .case--that-personal-touch .case-hero-bg { object-position: 0 0; }
}

/* Texaco: the first column is fixed at 48.187%, and its logo file is
   256px wide. */
@media (min-width: 768px) {
    .case--texaco-techron .case-copy .case-column:first-child {
        flex: 0 0 auto;
        width: 48.187%;
        max-width: 48.187%;
    }
}

.case--texaco-techron .case-logo img { max-width: min(100%, 256px); }