/*
|--------------------------------------------------------------------------
| Home page — "Contact Now" surfaces
|--------------------------------------------------------------------------
| Two places open the shared contact overlay (includes/contact-overlay.php)
| on the home page, and both are styled here: the hero CTA row beside
| "Explore Models", and the lead-capture band above the footer. The band is
| deliberately spare — the left column is a short pitch and the two CTAs,
| nothing else, because the detail belongs in the form it opens; the right
| column is a slim reach-us card (call / email / visit / hours) over a faint
| line-art van watermark. The band paints no background of its own and its
| column matches the footer's exactly, so the two read as one block.
|
| Glass recipe restated from contact-page.css (.cx-card) so this band does
| not depend on that stylesheet being loaded — the home page ships only
| m072224.css + this file.
|
| The sitewide `* {}` reset forces font-weight/colour and h2/h3 carry a
| global uppercase + colour, so every text rule below restates its own
| size / weight / colour / tracking.
*/

/* ── Hero CTA row — "Explore Models" + "Contact Now" ──
   .tv-cta-row (cta.css) supplies display:flex + the top margin; this only
   adds the gap and the wrap. Below 600px m072224.css gives every button in
   .header-box `width: 100%`, and the wrap is what turns that into two
   stacked full-width pills instead of two squeezed ones on one line. */
.header-box__actions {
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* No background of its own — the band sits straight on the page.
   The side padding and the 1600px inner cap mirror footer.css exactly
   (footer.footer padding + .footer-max), including the four steps below, so
   the two cards line up edge-to-edge with the footer columns underneath. */
.hc {
    padding: clamp(3rem, 7vw, 5.5rem) 6rem;
}

/* The rail is sized to seat its two columns of contact rows without
   truncating the address; the pitch takes whatever is left. */
.hc__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(31rem, 36rem);
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: stretch;
    max-width: 1600px;
    margin: 0 auto;
}

/* ── Shared glass surface ── */
.hc-card {
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.028) 46%,
            rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ── Left: the pitch ── */
/* Copy and CTAs sit side by side, not stacked: the copy is short enough that
   a stack left the right half of this card empty. The buttons take that space
   and the row centres them against the text block. */
.hc__pitch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(1.75rem, 3vw, 2.75rem);
}

/* The basis is what makes the row self-correcting: the moment the copy cannot
   hold a readable measure beside the buttons, the buttons wrap under it
   instead of crushing it. That beats a breakpoint here — the card's width
   depends on the band's column split, not on the viewport, so any hard
   threshold just moves the squeeze somewhere else. flex-grow still hands the
   copy every spare pixel; the basis only sets where it gives up. */
.hc__copy {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.05rem;
    min-width: 0;
}

/* Sized up now that the title leads the card on its own — the pair has to
   carry the height the contact rail sets beside it. */
.hc__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: none;

    /* Splits as "Have a floorplan / in mind?" instead of orphaning "mind?".
       Ignored by browsers that don't support it — they just get the ragged
       break, which is what this looked like before. */
    text-wrap: balance;
}

/* Capped well inside the widened column so the one line never runs to an
   unreadable measure on a 1600px band. */
.hc__lead {
    margin: 0;
    max-width: 44ch;
    color: #c4c6cc;
    font-size: clamp(1rem, 1.05vw, 1.15rem);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

/* Stacked and stretched, so the two pills share one width and read as a
   single block against the copy rather than a ragged pair. */
.hc__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

/* The global button reset (cta.css) already owns the pill skin — only the
   layout of this row belongs here. */
.hc__actions .tv-cta {
    flex: 0 0 auto;
}

/* ── Right: reach us directly ── */
.hc__reach {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: clamp(1.25rem, 2.4vw, 1.6rem);
    overflow: hidden;
}

.hc__reach-title {
    margin: 0 0 0.55rem;
    color: #989ba3;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Two up, two across — the pair of columns is what widens this rail and
   pushes the pitch beside it over. */
.hc__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1rem, 1.6vw, 1.75rem);
}

.hc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 0.15rem;
    color: inherit;
}

/* One rule between the two grid rows. A blanket border-top would draw across
   the top pair as well, and :first-of-type would miss it — the rows are a mix
   of <a> and <div>, so each type has its own "first". */
.hc-row:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hc-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    color: #d6d7dc;
    font-size: 0.9rem;
}

.hc-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.hc-row__label {
    color: #82858d;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Every value is meant to hold one line. Two things keep that true: each is
   kept short enough for the narrowest cell (which is why the street address
   carries its city up in the label rather than in the value), and the rail's
   min track below is set wide enough that the cell can always seat the
   longest of them. Wrapping stays *available* rather than being locked off
   with nowrap — if someone lengthens a value past its cell, a second line is
   a far better failure than text spilling out of the card. */
.hc-row__value {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

a.hc-row:hover .hc-row__value {
    color: #f0c7c7;
}

a.hc-row:hover .hc-row__icon {
    border-color: rgba(170, 0, 0, 0.3);
    background: rgba(170, 0, 0, 0.14);
    color: #f0c7c7;
}

/* Titan mark watermark — the wordmark-less logo, which already ships as a flat
   #FFFFFF fill, so opacity alone greys it back without a filter. Set lower
   than the line-art van it replaced: solid shapes read far heavier than thin
   strokes at the same alpha. */
.hc__mark {
    position: absolute;
    right: -1.5rem;
    bottom: -1.25rem;
    width: 12rem;
    height: auto;
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
}

/* ── Side padding tracks footer.css step for step ── */
@media only screen and (min-width: 1600px) {
    .hc {
        padding-right: 9rem;
        padding-left: 9rem;
    }
}

@media only screen and (max-width: 1200px) {
    .hc {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

/* Two columns only where both halves genuinely fit: the rail wants ~36rem for
   its pair of contact columns, and the pitch needs ~620px to keep its buttons
   beside the copy. Below the sum of those the band stacks instead, which is
   the roomier layout anyway — full-width cards let the rail put every value,
   address included, on a single line. */
@media only screen and (max-width: 1400px) {
    .hc__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 700px) {
    .hc {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    /* One column of contact rows again — two would put the address on three
       lines at this width. */
    .hc__rows {
        grid-template-columns: minmax(0, 1fr);
    }

    .hc-row:nth-child(n + 2) {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Too narrow to seat the buttons beside the copy — back to a stack, with
       the pills flowing as a row again. */
    .hc__pitch {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.4rem;
    }

    .hc__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }
}

@media only screen and (max-width: 560px) {
    .hc__actions .tv-cta {
        flex: 1 1 100%;
        justify-content: center;
    }

    .hc__mark {
        right: -2rem;
        width: 9rem;
    }
}