@charset "utf-8";
/*
 * Sales typography — the /featured page's text styling (matched to the
 * Island Realty Group reference, public/islandrealtygroup/featured.php +
 * styles.css), shared by every Sales page: Featured, Search (/mls), the
 * Wildwood / Wildwood Crest / North Wildwood / Diamond Beach property
 * pages, List Your Property and the property detail page. Loaded via
 * partials/sales-type and scoped to the .irg-sales-type wrapper those
 * pages add, so no other page is affected. Text only: no colours, layout
 * or spacing rules here.
 */

/* Montserrat, self-hosted (same variable font file as the footer, weights
   100-900), under a page-only family name so it can't change the font of
   any page outside Sales. The reference loads it from Google Fonts. */
@font-face {
    font-family: "IRG Sales Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-400-800.woff2") format("woff2");
}

.irg-sales-type,
.irg-sales-type * {
    font-family: "IRG Sales Montserrat", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Page title: reference h1 is 42px / 100 inside a .medspacing (40px) table. */
.irg-theme .irg-sales-type .irg-intro h1 {
    font-size: 42px;
    font-weight: 100;
    line-height: 40px;
}

/* Text under the title: the reference has a plain <p> (17px / 400 /
   40px); the CP content uses an <h3> subtitle (Featured, List Your
   Property), so it's given the same paragraph styling. The town-link <h4>
   on the Wildwood / Diamond Beach pages keeps its size (font only). */
.irg-theme .irg-sales-type .irg-intro p,
.irg-theme .irg-sales-type .irg-intro h3,
.irg-theme .irg-sales-type .irg-intro h3 strong {
    font-size: 17px;
    font-weight: 400;
    line-height: 40px;
}

/* Listing cards already match the reference on desktop (address 17px,
   meta and status 15px / 28px, price 20px / 700); only scaled down below.
   The filter bar, pager, form and property detail page take the font and
   keep their own sizes. */

/* The reference is a fixed 1620px desktop layout, so these steps are our
   own, on the themed pages' breakpoints. */
@media (max-width: 1024px) {
    .irg-theme .irg-sales-type .irg-intro h1 {
        font-size: 38px;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    .irg-theme .irg-sales-type .irg-intro h1 {
        font-size: 34px;
    }

    .irg-theme .irg-sales-type .irg-intro p,
    .irg-theme .irg-sales-type .irg-intro h3,
    .irg-theme .irg-sales-type .irg-intro h3 strong {
        font-size: 16px;
        line-height: 28px;
    }
}

@media (max-width: 639px) {
    .irg-theme .irg-sales-type .irg-intro h1 {
        font-size: 30px;
    }

    .irg-theme .irg-sales-type .irg-card-address {
        font-size: 16px;
        line-height: 24px;
    }

    .irg-sales-type .irg-card-meta,
    .irg-sales-type .irg-card-status {
        font-size: 14px;
        line-height: 24px;
    }

    .irg-sales-type .irg-card-price {
        font-size: 18px;
    }
}

/* ---------------------------------------------------------------- *
 * MLS Search page (/mls, .irg-mls-search): compact visible H1 above the
 * form; the page's top padding and the form's own top margin are
 * trimmed so the form sits about where it did before the H1 was added
 * (same treatment as the /vacation-rentals H1).
 * ---------------------------------------------------------------- */
.irg-theme .irg-mls-search {
    padding-top: 16px;
}

.irg-theme .irg-mls-search .irg-mls-search__title {
    margin: 0;
    padding: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1.25;
    color: var(--irg-text);
}

.irg-theme .irg-mls-search #results-region > .mt-8:first-child {
    margin-top: 14px;
}