/*
 * Shared dark section components.
 *
 * This is the canonical layout vocabulary for the site, extracted from the
 * Home Automation / Lighting Control design. The CMB2 content layouts
 * (template-parts/content-layout*.php) are built from these classes, and the
 * per-service custom templates use them too.
 *
 * Colour and type come from `custom-layout dark` in services-custom.css and
 * from style.css — put `custom-layout dark` on a section and you inherit the
 * dark background, white 400-weight headings and paragraphs, and the button
 * treatment. Everything here is layout only. Do not re-declare colours or
 * font sizes that those sheets already provide.
 *
 * Section padding (55px top/bottom) and the flex column come from the global
 * `section` rule in style.css; `.content_div` caps width at 1500px.
 */

/* ---------- Shared bits ---------- */

.oth_eyebrow {
    color: var(--oth-green);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Left-aligned intro block that sits above a grid. */
.oth_section_intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 850px;
}

/* The site's outlined button: green border, fills green on hover. */
.oth_button_outline {
    background-color: transparent;
    border: 1px solid var(--oth-green);
}

.oth_button_outline:hover {
    background-color: var(--oth-green);
}

/* ---------- Hero ---------- */

.oth_hero {
    position: relative;
    height: 88vh;
    min-height: 560px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
    justify-content: flex-end;
    background-color: var(--oth-black);
}

.oth_hero_media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.oth_hero_scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

.oth_hero .content_div {
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

.oth_hero_title {
    margin-top: 0px;
    margin-bottom: 35px;
    color: var(--oth-white);
    font-weight: 500;
    font-size: clamp(38px, 5vw, 75px);
    line-height: 1.2;
    max-width: 16ch;
    text-shadow: 3px 3px 9px black;
}

.oth_hero_subtext {
    color: var(--oth-white);
    font-size: 22px;
    max-width: 760px;
    margin-bottom: 25px;
    text-shadow: 3px 3px 9px black;
}

.oth_hero_actions {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Feature row (image beside text) ---------- */

.oth_feature_columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    width: 100%;
}

/* `flipped` puts the image first on desktop. */
.oth_feature.flipped .oth_feature_text {
    order: 2;
}

.oth_feature.flipped .oth_feature_image {
    order: 1;
}

.oth_feature_text p {
    margin-bottom: 16px;
}

.oth_feature_text p:last-child {
    margin-bottom: 0px;
}

/* Same treatment as .column img in the shared content layouts. */
.oth_feature_image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.353);
    display: block;
}

/* Product shots on transparency shouldn't be cropped to the 3:2 box. */
.oth_feature_image.contain img {
    object-fit: contain;
    box-shadow: none;
}

/* Artwork drawn on white (logo sheets) needs its own backdrop to read on the
   dark page, rather than floating on it. */
.oth_feature_image.light img {
    background-color: var(--oth-white);
}

/* Package blocks: a bold lead line, a green-ticked checklist, and a price. */
.solution_lead {
    font-weight: 600;
    margin-bottom: 20px;
}

.solution_checklist {
    list-style: none;
    margin: 0 0 25px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.solution_checklist li {
    position: relative;
    padding-left: 26px;
}

.solution_checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--oth-green);
}

.solution_price {
    color: var(--oth-green);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 0px;
}

/* The design gives the package button its own top gap rather than the 55px
   `.custom-layout .button` margin. */
.oth_feature_text .button {
    margin-top: 35px;
    max-width: 300px;
}

/* ---------- Figure cards (image + captioned title) ---------- */

.oth_figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
    row-gap: 15px;
    width: 100%;
    margin-top: 40px;
}

.oth_figures figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.oth_figures img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.319);
    display: block;
}

.oth_figures figcaption {
    font-size: 16px;
    color: var(--oth-white);
}

.oth_figures figcaption strong {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

/* ---------- Text columns (no imagery, or image below copy) ---------- */

.oth_columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
    row-gap: 25px;
    width: 100%;
    margin-top: 40px;
}

.oth_columns .oth_column {
    display: flex;
    flex-direction: column;
}

.oth_columns .oth_column h3 {
    color: var(--oth-green);
    margin-bottom: 15px;
}

.oth_columns .oth_column p {
    flex: 1;
    max-width: none;
}

.oth_columns .oth_column img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.353);
    display: block;
    margin-top: 25px;
}

/* ---------- Numbered process steps ---------- */

.oth_steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 15px;
    row-gap: 15px;
    width: 100%;
    margin-top: 40px;
}

.oth_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    color: var(--oth-white);
    border: 1px solid var(--oth-green);
    border-radius: 25px;
    padding: 25px 20px 25px 20px;
}

.oth_step_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 2px solid var(--oth-green);
    border-radius: 50px;
    font-size: 26px;
    margin-bottom: 15px;
}

.oth_step_title {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 15px;
}

.oth_step p {
    max-width: none;
    font-size: 16px;
}

/* A four-step or three-step process should not stretch across five tracks. */
.oth_steps[data-count="1"] { grid-template-columns: 1fr; max-width: 420px; }
.oth_steps[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 840px; }
.oth_steps[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.oth_steps[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

/* ---------- Closing CTA ---------- */

.oth_cta .content_div {
    text-align: center;
    align-items: center;
}

.oth_cta_note {
    margin-top: 15px;
    color: var(--oth-white);
}

.oth_cta_note a {
    color: var(--oth-green);
}

/* ---------- Responsive ---------- */

@media (max-width: 1280px) {
    .oth_steps,
    .oth_steps[data-count="4"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .oth_hero {
        height: auto;
        min-height: 78vh;
    }

    .oth_hero .content_div {
        padding-top: 140px;
        padding-bottom: 60px;
    }

    .oth_figures,
    .oth_columns {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .oth_feature_columns {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Heading first, then the image, on every row. */
    .oth_feature.flipped .oth_feature_text,
    .oth_feature_text {
        order: 1;
    }

    .oth_feature.flipped .oth_feature_image,
    .oth_feature_image {
        order: 2;
    }

    .oth_steps,
    .oth_steps[data-count="3"],
    .oth_steps[data-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* services-custom.css centres every `.custom-layout.dark` p and h2 below
       768px — a legacy rule from the Home Theatres page. Applied to the
       solution-page components it produces mixed alignment: the heading, lead
       line and price centre while the checklist and eyebrow beside them stay
       left. Keep these blocks left-aligned, as they are on desktop.

       The `.custom-layout.dark` prefix is for specificity, not decoration:
       that rule is (0,2,1) and lives in a file that loads after this one. */
    .custom-layout.dark .oth_feature_text h2,
    .custom-layout.dark .oth_feature_text p,
    .custom-layout.dark .oth_section_intro h2,
    .custom-layout.dark .oth_section_intro p {
        text-align: left;
    }

    .oth_hero {
        min-height: 70vh;
    }

    .oth_hero_subtext {
        font-size: 18px;
    }

    .oth_hero_actions {
        width: 100%;
    }

    .oth_hero_actions .button {
        width: 100%;
        min-width: 0px;
    }
}

@media (max-width: 480px) {
    .oth_steps,
    .oth_steps[data-count="2"],
    .oth_steps[data-count="3"],
    .oth_steps[data-count="4"] {
        grid-template-columns: 1fr;
    }

    .oth_eyebrow {
        letter-spacing: 0.18em;
    }

    /* On a phone the stacked column is only ~330px, so a 300px button sits
       hard against the left with a sliver of dead space beside it and reads
       as misaligned. Let it fill the column instead. Above this width the
       column is wide enough that a left-aligned button is clearly deliberate,
       which is what the design intends.

       `.custom-layout` is in the selector for specificity, not decoration:
       services-custom.css sets `.custom-layout .button { max-width: 300px }`
       and loads AFTER this file, so a plain `.oth_feature_text .button` rule
       ties on specificity and loses on order. */
    .custom-layout .oth_feature_text .button {
        width: 100%;
        max-width: none;
        min-width: 0px;
    }
}