/*
Theme Name: Kadence Child (Artesian)
Description: Artesian Group child theme. Custom PHP and editor styles live here; front-end tweaks stay in Customizer > Additional CSS.
Template: kadence
Version: 1.0.0
*/


/* ===== Artesian listing template ===== */

.listing-hero img { width: 100%; max-height: 620px; object-fit: cover; }

.listing-gallery-strip { margin-top: 8px; }

.listing-status {
    display: inline-block;
    background: var(--global-palette3, #151515);
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 0;
}

.listing-price { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-top: 0; margin-bottom: 8px; }  /* margin-top 0, not 12px: the chip sits directly on the price, and the
     price's own line-height already leaves ~16px of optical gap. The chip is
     inline-block, so its margin-bottom does NOT collapse with this one --
     they add. Both are 0. */

.listing-stats { max-width: 420px; }
.listing-stats h3 { margin-bottom: 0; }
.listing-stats p { margin-top: 2px; font-size: 14px; }
.listing-stats .wp-block-column { border-left: 1px solid var(--global-palette6, #D8D8D8); padding-left: 18px; }
.listing-stats .wp-block-column:first-child { border-left: 0; padding-left: 0; }

.listing-mls-line { font-size: 14px; }

.listing-agent-card .wp-block-button__link { width: 100%; text-align: center; }
.listing-agent-card .wp-block-buttons { gap: 12px; }
.listing-agent-card .wp-block-button { flex: 1; min-width: 140px; }

.listing-acc {
    background: var(--global-palette7, #F4F4F4);
    border-radius: 12px;
    padding: 20px 28px;
    margin-bottom: 16px;
}
.listing-acc summary {
    font-family: var(--global-heading-font-family);
    font-size: 1.5rem;
    cursor: pointer;
    list-style-position: outside;
}
.listing-acc .listing-table { margin: 16px 0 0; }
.listing-table table { border-collapse: collapse; width: 100%; }
.listing-table td { border: 0; border-bottom: 1px solid var(--global-palette6, #D8D8D8); padding: 14px 8px; }
.listing-table tr:last-child td { border-bottom: 0; }
.listing-table td:first-child { font-weight: 600; width: 40%; }

/* ===== Mortgage calculator ===== */

.amc { background: var(--global-palette7, #F4F4F4); border-radius: 16px; padding: 48px; }
.amc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* ⚠️ minmax(0,1fr), NOT 1fr. `1fr` is shorthand for `minmax(auto,1fr)`, and that
   `auto` floor is the track's MIN-CONTENT width -- which the inputs and their
   affixes push to 300px. Against a 271px content box at 375px that overflowed the
   card by 29px. Removing the floor lets the track shrink; min-width:0 on the
   children is the matching half, or the flex/grid items refuse to shrink anyway. */
@media (max-width: 781px) {
    .amc-grid { grid-template-columns: minmax(0, 1fr); }
    .amc { padding: 28px; }
    .amc-inputs, .amc-viz, .amc-field { min-width: 0; }
    .amc-inputs input, .amc-inputs select { min-width: 0; width: 100%; }
}
@media (max-width: 600px) { .amc { padding: 20px; } }

.amc-inputs label { display: block; font-size: 15px; color: var(--global-palette4, #221F20); margin-bottom: 18px; }
.amc-inputs input {
    display: block; width: 100%; margin-top: 6px;
    background: #fff; border: 0; border-bottom: 1px solid var(--global-palette4, #221F20);
    padding: 12px 14px; font-size: 16px;
}
.amc-reset {
    background: transparent; border: 1px solid var(--global-palette4, #221F20);
    border-radius: 50px; padding: 10px 28px; letter-spacing: 2px; font-size: 13px; cursor: pointer;
}
.amc-reset:hover { background: var(--global-palette3, #151515); color: #fff; }

.amc-viz { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.amc-donut {
    width: min(340px, 80vw); aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(#D5BA8A 0 20%, #151515 20% 100%);
    display: grid; place-items: center;
}
.amc-center {
    width: calc(100% - 76px); aspect-ratio: 1; border-radius: 50%;
    background: var(--global-palette7, #F4F4F4);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 20px;
}
.amc-label { font-size: 14px; font-weight: 600; }
.amc-payment { font-family: var(--global-heading-font-family); font-size: 2.6rem; line-height: 1.2; }
.amc-sub { font-size: 13px; color: var(--global-palette5, #6E6E6E); }
.amc-legend { display: flex; gap: 28px; font-size: 14px; }
.amc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.amc-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.amc-dot-price { background: #151515; }
.amc-dot-down { background: #D5BA8A; }
.amc-disclaimer { font-size: 12px; color: var(--global-palette5, #6E6E6E); margin-top: 20px; margin-bottom: 0; }

/* Our Listings grid cards (self-contained — do not rely on cover block CSS) */
.listing-card--link { text-decoration: none; display: flex; position: relative; overflow: hidden; min-height: 0; }
.listing-card--link .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.listing-card--link .wp-block-cover__background { position: absolute; inset: 0; background: #000; opacity: 0.4; z-index: 1; }
.listing-card--link .wp-block-cover__inner-container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 24px; }
.listing-card--link h3 { margin: 0; }
.listing-card--link p { margin: 0 0 4px; }
/* Price and status chip share this row. `flex-wrap` is what stops them colliding:
   a seven-figure price plus a PENDING chip exceeds the card's 252px measure at
   4-across, and without wrapping the chip would either crush or overlap the
   price. Flex items keep min-width:auto, so the price holds its content width and
   the chip drops to its own line instead. The row gap only applies once wrapped. */
.listing-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 8px; }
.listing-card__badge {
    background: var(--global-palette1, #D5BA8A); color: var(--global-palette3, #151515);
    font-size: 11px; letter-spacing: 2px; font-weight: 600; padding: 5px 12px; border-radius: 50px; white-space: nowrap;
}
.agla-listings-grid > h2 { margin-bottom: 20px; }

/* Section heading + its mark. Circle geometry is copied from
   `.neighborhood-listings__icon` on Commercial (44px well, 22px glyph) so the two
   pages read as the same system; only the layout differs — inline-left here,
   centred-above there. */
/* Cards inherit a 32px bottom margin (cover blocks carry one), which ADDS to the
   grid's row-gap -- so rows sat 48px apart while columns sat 16px, and the grid
   read as unevenly gappy even though `gap` was uniform. Zeroed so both axes are
   exactly the 1em the gap declares. */
:root .featured-listings-placeholder .wp-block-columns > * { margin-block: 0; }

.agla-listings-section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.agla-listings-section__icon {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--global-palette7, #F4F4F4);
    color: var(--global-palette3, #151515);
}
.agla-listings-section__icon svg { width: 22px; height: 22px; }

/* Rule between sections. On the adjacent-sibling selector rather than a blanket
   border so the first section has no stray line above it. */
.agla-listings-section + .agla-listings-section {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--global-palette6, #D8D8D8);
}
@media (max-width: 600px) {
    .agla-listings-section + .agla-listings-section { margin-top: 36px; padding-top: 36px; }
    .agla-listings-section__icon { width: 38px; height: 38px; }
    .agla-listings-section__icon svg { width: 19px; height: 19px; }
}

/* ---- Listing card: radius, hover zoom, gold stroke draw, elevation ---------- */

.listing-card--link { border-radius: 8px; transition: box-shadow .35s ease; }
.listing-card--link:hover,
.listing-card--link:focus-visible { box-shadow: var(--agla-shadow-lift); }

/* 🔴 The scrim must sit BELOW the content, and this is not cosmetic.
   Core ships a cover rule that forces .wp-block-cover__inner-container to
   z-index:1 through a :has() selector at roughly (0,6,1):

     body:not(.editor-styles-wrapper)
     .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background + .wp-block-cover__inner-container))
     .wp-block-cover__inner-container { z-index: 1 }

   Our card puts the <img> between the __background span and the inner container,
   so that `+` never matches, the :not() is true, and the rule applies. Our scrim
   (.wp-block-cover::after) is also z-index:1, so the tie was broken by DOM order
   and the ::after painted OVER the price and address.

   It only bit on pages carrying a REAL cover block (Home), because that inline
   stylesheet is only enqueued there -- which is why Our Listings looked fine and
   the homepage did not. Beating (0,6,1) would take seven classes; dropping the
   scrim under the content is order-independent and needs no specificity fight.
   The dim span (z-index 1) now composites above the scrim rather than below, and
   black over black is alpha-identical either way, so nothing changes visually.

   ⚠️ The `:root` prefix is load-bearing. A bare `.listing-card--link::after` is
   (0,1,0) -- exactly the same as `.wp-block-cover::after` in additional-css.css,
   which ships as wp-custom-css and prints at sheet position 30 against this
   file's 19. The tie went to source order, so the first version of this fix
   silently lost and the scrim still painted over the text in production.
   (0,2,0) settles it regardless of order. Do not drop the prefix. */
:root .listing-card--link::after { z-index: 0; opacity: 1; }

/* Same zoom the Home "Discover the Northshore" covers use: scale(1.07) over 5s.
   overflow:hidden on the card is what crops it instead of letting it spill. */
.listing-card--link .wp-block-cover__image-background {
    transition: transform 5s ease-out;
    will-change: transform;
}
.listing-card--link:hover .wp-block-cover__image-background,
.listing-card--link:focus-visible .wp-block-cover__image-background { transform: scale(1.07); }

/* Both darkening layers lift together on hover, so the photo brightens evenly --
   the flat dim span AND the bottom-up gradient. Moving only one leaves the other
   sitting at full strength and the card reads half-lit. The dim's 0.4 rest value
   is set above; the scrim's rest opacity is stated explicitly so there is a value
   to transition FROM (it would otherwise be the initial 1 and still animate, but
   the pair is easier to reason about written out). */
.listing-card--link .wp-block-cover__background,
.listing-card--link::after { transition: opacity .35s ease-in-out; }
.listing-card--link:hover .wp-block-cover__background,
.listing-card--link:focus-visible .wp-block-cover__background { opacity: .18; }
/* Also `:root`-prefixed, and for a second reason: the base rule above is now
   (0,2,0), which would outrank a bare (0,1,1) hover rule and pin the scrim at
   opacity 1. Raising both keeps the hover the more specific of the pair. */
:root .listing-card--link:hover::after,
:root .listing-card--link:focus-visible::after { opacity: .45; }

/* Centred "View listing" affordance. The label sits at rest; only its stroke
   draws in on hover. pointer-events:none is required -- the whole card is the
   <a>, and a span sitting over its middle would otherwise create a dead zone.
   Type is the site's primary button exactly: 16px Poppins, uppercase, .12em,
   11.5/20.5 padding, 50px radius -- only the colour is flipped to white. */
.listing-card__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    /* Label and stroke both appear on hover. Fading the whole element (rather
       than just the text) means the ring fades in as it draws, which is why the
       fade is kept short against the .7s sweep. */
    opacity: 0;
    transition: opacity .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11.5px 20.5px;
    border-radius: 50px;
    font: 400 16px "Poppins", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    white-space: nowrap;
}
/* The stroke is a conic gradient masked to a 1px ring rather than a border, so
   it can be swept. `border-radius: inherit` keeps it on the pill at any label
   length. Registering the property is what makes a custom property animatable;
   without @property the ring simply appears on hover, which is the fallback. */
@property --agla-cta-draw {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}
.listing-card__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 315deg,
        #fff 0 var(--agla-cta-draw),
        rgba(255, 255, 255, 0) var(--agla-cta-draw) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: --agla-cta-draw .7s ease;
}
.listing-card--link:hover .listing-card__cta,
.listing-card--link:focus-visible .listing-card__cta { opacity: 1; }
.listing-card--link:hover .listing-card__cta::before,
.listing-card--link:focus-visible .listing-card__cta::before { --agla-cta-draw: 100%; }

/* Card specs get the same icon set as the listing page's Beds/Bath/Sqft row --
   same tokens, one size down (14px) for the smaller type. Flex with a gap
   replaces the old " • " separators, which the icons make redundant. */
/* 14px and a 10px gap so all three still fit on ONE line at 4-across: the icons
   add ~20px per stat, which pushed the row to wrap at the inherited 16px. */
.listing-card__specs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 14px; }
.listing-card__spec { display: inline-flex; align-items: center; gap: 6px; }
.listing-card__spec::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.listing-card__spec--beds::before  { -webkit-mask-image: var(--artesian-bed);    mask-image: var(--artesian-bed); }
.listing-card__spec--baths::before { -webkit-mask-image: var(--artesian-shower); mask-image: var(--artesian-shower); }
/* Acres shares the ruler -- it is the same idea (a measured area) and there is no
   separate token for it. */
.listing-card__spec--sqft::before,
.listing-card__spec--acres::before { -webkit-mask-image: var(--artesian-ruler);  mask-image: var(--artesian-ruler); }

/* The price is 25px at 4-across, which is right for a ~300px card but reads small
   once the grid drops to 2-up (~470px) and then 1-up (~327px, full bleed). Two
   steps up. The 600px rule must stay AFTER the 1024 one -- equal specificity, so
   source order is what lets the narrower breakpoint win. */
@media (max-width: 1024px) {
    .listing-card__top h3 { font-size: 1.9rem; }
}
@media (max-width: 600px) {
    .listing-card__top h3 { font-size: 2.1rem; }
    .listing-card--link .wp-block-cover__inner-container { padding: 18px; }
}

/* ---- Status states -------------------------------------------------------
   The card carries `listing-card--{status}` and the chip `listing-card__badge--
   {status}`, both from the same slug, so a status can restyle the whole card
   rather than just its chip.

   Pending mutes the photo so it reads as less available at a glance, then
   returns to full colour on hover -- it is still worth browsing. Sold mutes
   harder and stays muted, because it is not.

   The chips deliberately step off gold. Gold is the site accent AND the DRAFT
   marker (editors only), so using it for three meanings makes none of them
   legible: white reads as "in progress", charcoal as final. */
.listing-card--pending .wp-block-cover__image-background,
.listing-card--sold .wp-block-cover__image-background {
    transition: transform 5s ease-out, filter .35s ease-in-out;
}
.listing-card--pending .wp-block-cover__image-background { filter: grayscale(.45); }
.listing-card--sold .wp-block-cover__image-background { filter: grayscale(.7); }
.listing-card--pending:hover .wp-block-cover__image-background,
.listing-card--pending:focus-visible .wp-block-cover__image-background { filter: grayscale(0); }

.listing-card__badge--pending {
    background: var(--global-palette9, #fff);
    color: var(--global-palette3, #151515);
}
.listing-card__badge--sold {
    background: var(--global-palette3, #151515);
    color: var(--global-palette9, #fff);
}

@media (prefers-reduced-motion: reduce) {
    .listing-card--pending .wp-block-cover__image-background,
    .listing-card--sold .wp-block-cover__image-background { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .listing-card--link .wp-block-cover__image-background,
    .listing-card--link .wp-block-cover__background,
    .listing-card--link::after,
    .listing-card__cta::before { transition: none; }
    .listing-card--link:hover .wp-block-cover__image-background,
    .listing-card--link:focus-visible .wp-block-cover__image-background { transform: none; }
}

/* Listing photo strip — self-contained (core gallery layout rules are per-block generated and absent here) */
.listing-gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 0; }
.listing-gallery-strip figure { margin: 0; }
.listing-gallery-strip img { width: 100%; height: 210px; object-fit: cover; display: block; }
@media (max-width: 700px) { .listing-gallery-strip { grid-template-columns: repeat(2, 1fr); } .listing-gallery-strip img { height: 140px; } }

/* Listing single: win load-order fights with core block CSS */
.single-listing .listing-gallery-strip img { height: 210px !important; object-fit: cover; }
@media (max-width: 700px) { .single-listing .listing-gallery-strip img { height: 140px !important; } }
.listing-agent-card .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.listing-agent-card .wp-block-button { flex: 1; min-width: 140px; }
.listing-agent-card .is-style-outline .wp-block-button__link { border: 2px solid currentColor; background: transparent; }

/* Listing strip + agent card buttons — fully custom classes, no block CSS involved */
.agla-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.agla-strip img { width: 100%; height: 210px; object-fit: cover; display: block; }
@media (max-width: 700px) { .agla-strip { grid-template-columns: repeat(2, 1fr); } .agla-strip img { height: 140px; } }
.agla-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.agla-btn {
    flex: 1; min-width: 140px; text-align: center; text-decoration: none;
    padding: 13px 20px; border-radius: 6px; font-weight: 600; font-size: 15px; letter-spacing: 0.5px;
}
.agla-btn--gold { background: var(--global-palette1, #D5BA8A); color: var(--global-palette3, #151515); }
.agla-btn--gold:hover { background: var(--global-palette2, #BFA06A); color: var(--global-palette3, #151515); }
.agla-btn--outline { border: 2px solid #fff; color: #fff; background: transparent; }
.agla-btn--outline:hover { background: #fff; color: var(--global-palette3, #151515); }

/* ===== Listing v3: mockup parity round (Des's punch list) ===== */

.agla-sep { border: 0; border-top: 1px solid var(--global-palette6, #D8D8D8); margin: 40px 0 0; }
.listing-hero img { cursor: pointer; }

/* photo strip: scrollable carousel + controls */
.agla-strip-wrap { margin-top: 8px; }
.agla-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.agla-strip::-webkit-scrollbar { display: none; }
.agla-strip img { width: calc(25% - 6px); flex: 0 0 auto; height: 210px; object-fit: cover; display: block; scroll-snap-align: start; cursor: pointer; border-radius: 8px; }
@media (max-width: 700px) { .agla-strip img { width: calc(50% - 4px); height: 140px; } }
.agla-strip-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 16px; }
/* Strip arrows: outlined circle, chevron glyph centred by flex.
   font-size:0 suppresses the &larr;/&rarr; entities in the mu-plugin's markup —
   the icon is the ::before mask, so the shape is CSS-owned, not markup-owned.
   Chevron is the shared --artesian-chevron token (same shape as the nav dropdown
   carets), rotated: the token points DOWN, so +90deg = left, -90deg = right. */
.agla-strip-prev, .agla-strip-next {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--global-palette6, #D8D8D8);
    background: transparent;
    color: var(--global-palette3, #151515);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font-size: 0; line-height: 0; cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.agla-strip-prev::before, .agla-strip-next::before {
    content: ""; display: block; width: 15px; height: 15px;
    background: currentColor;
    -webkit-mask: var(--artesian-chevron) center/contain no-repeat;
    mask: var(--artesian-chevron) center/contain no-repeat;
}
.agla-strip-prev::before { transform: rotate(90deg); }
.agla-strip-next::before { transform: rotate(-90deg); }
.agla-strip-prev:not(:disabled):hover, .agla-strip-next:not(:disabled):hover,
.agla-strip-prev:not(:disabled):focus-visible, .agla-strip-next:not(:disabled):focus-visible,
.agla-strip-prev:not(:disabled):active, .agla-strip-next:not(:disabled):active {
    background: var(--global-palette3, #151515);
    border-color: var(--global-palette3, #151515);
    color: #fff;
}
/* Disabled state must RESTATE the resting look, not just fade it. Kadence ships a
   `button:hover` rule at (0,1,1) which out-specifies the (0,1,0) base above, so a
   hovered disabled arrow was picking up Kadence's gold button fill. `:disabled:hover`
   is (0,3,0) and settles it — an unusable arrow now does nothing at all on hover. */
.agla-strip-prev:disabled, .agla-strip-next:disabled,
.agla-strip-prev:disabled:hover, .agla-strip-next:disabled:hover {
    opacity: .35; cursor: default;
    background: transparent;
    border-color: var(--global-palette6, #D8D8D8);
    color: var(--global-palette3, #151515);
    box-shadow: none;   /* that same Kadence rule also ships a lift shadow */
}
.agla-strip-nav { display: flex; gap: 8px; }
/* `.agla-seeall` is aliased into the site-wide primary button rule in
   additional-css.css, which supplies the pill, the uppercase/.12em type and the
   sweep-in hover panel. Only `cursor` is left here -- everything this rule used
   to declare is now set there, and restating it would just be dead weight. */
.agla-seeall { cursor: pointer; }

/* popup gallery */
.agla-lb { position: fixed; inset: 0; background: rgba(10,10,10,.94); z-index: 100000; display: none; align-items: center; justify-content: center; }
.agla-lb.is-open { display: flex; }
.agla-lb__img { max-width: 88vw; max-height: 86vh; object-fit: contain; }
.agla-lb__close { position: absolute; top: 18px; right: 24px; font-size: 42px; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; }
.agla-lb__prev, .agla-lb__next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; cursor: pointer; }
.agla-lb__prev { left: 24px; } .agla-lb__next { right: 24px; }
.agla-lb__prev:hover, .agla-lb__next:hover { background: rgba(255,255,255,.28); }
.agla-lb__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; letter-spacing: 2px; }

/* typography scale — headings were comically large (Des) */
.single-listing .listing-price { font-size: clamp(2.8rem, 3.6vw, 3.6rem); }

/* Chip -> price gap. Prefixed with `.single-listing` for SPECIFICITY, not order:
   Kadence sets heading margins via a descendant selector, so a bare
   `.listing-price` (0,1,0) loses to it however late this file prints. (0,2,0)
   clears it. Same reason the other .single-listing rules here are prefixed.

   Both sides are zeroed because they ADD rather than collapse -- .listing-status
   is inline-block, and margin collapsing only applies to in-flow block-level
   boxes. The ~16px of visible space is the price's own line-height leading. */
.single-listing .listing-status { margin-bottom: 0; }
/* Deliberate gap, not inherited spacing. Both sides were zeroed above because the
   inline-block chip's margin ADDS to the price's rather than collapsing with it;
   this puts a single controlled value back on one side only. */
.single-listing .listing-price  { margin-top: 14px; }
.single-listing .listing-address { font-size: clamp(1.7rem, 2.3vw, 2.3rem); line-height: 1.3; }
.single-listing .entry-content h2 { font-size: clamp(1.55rem, 2.1vw, 1.95rem); }
.single-listing .listing-stats h3 { font-size: 1.7rem; }

/* Beds/Baths/Sqft stay in a row on mobile instead of stacking. Core stacks every
   wp-block-columns at 781px, which left the dividers as vertical rules down the
   side of stacked rows -- Beds flush, Bath and Sqft indented. Flipping them to
   border-top was the other option; keeping the row matches `.home-stats` on Home,
   which solves the identical case the same way, and three short figures read far
   better side by side.

   Both !important declarations are required, not defensive: core emits
   `flex-wrap:nowrap!important` on its generated layout class and uses !important
   on flex-basis in its own mobile stack, so specificity alone cannot win. */
@media (max-width: 781px) {
    .single-listing .listing-stats { flex-wrap: nowrap !important; }
    .single-listing .listing-stats .wp-block-column { flex-basis: auto !important; }
}
/* Below ~600px the row has to give back some of its padding and type size to
   still fit three figures across a 327px content measure at 375px. */
@media (max-width: 600px) {
    .single-listing .listing-stats { gap: 14px !important; }
    .single-listing .listing-stats .wp-block-column { padding-left: 12px; }
    .single-listing .listing-stats h3 { font-size: 1.35rem; }
    .single-listing .listing-stats p { font-size: 13px; }
}
.single-listing .listing-agent-card h3 { font-size: 1.6rem; }
.single-listing .listing-acc summary { font-size: 1.25rem; }
.single-listing .amc-payment { font-size: 2.3rem; }

/* Gallery separator rhythm. `.agla-sep` was (0,1,0) and losing its 64px top
   margin to a Kadence descendant rule on `hr` -- the same specificity trap as the
   chip/price pair above, which is why the line sat flush under the arrow row.
   (0,2,0) clears it. The 40px spacer the mu-plugin emits straight after the rule
   is suppressed so ONE value owns both sides and the gap stays symmetrical; the
   `+` selector simply doesn't match on photo-less listings, which have no rule. */
/* 16px matches `.agla-strip-bar`'s own margin-top -- the gap between the photo
   strip and the arrow row -- so the rule sits in the same rhythm as the controls
   above it, and stays symmetrical top to bottom. */
.single-listing .agla-sep { margin: 16px 0; }
.single-listing .agla-sep + .wp-block-spacer { display: none; }

/* Calculator section rhythm. The h2 carries no class of its own in the mu-plugin's
   markup, so it is selected by its relationship to the card rather than by a hook
   that would need a markup change. margin-bottom is the heading -> card gap. */
.single-listing .entry-content h2:has(+ .amc) { margin-top: 0; margin-bottom: 40px; }

/* Agent card: light panel, charcoal type, narrower than its 38% column.
   The palette preset classes were stripped from this block in the mu-plugin rather
   than overridden here — core emits them with !important, so colour has to change
   at source. Nothing in this rule is fighting anything; it is now the only owner. */
.single-listing .listing-agent-card {
    background: var(--global-palette7, #F4F4F4);
    color: var(--global-palette3, #151515);
    max-width: 440px;
    margin-left: auto;
    /* Rides alongside the description column. 100px clears the 68px header with
       room to spare -- the header hides on scroll down, so this is the gap the
       card keeps from the top of the viewport once it detaches. */
    position: sticky;
    top: 100px;
}
.single-listing .listing-agent-card h3,
.single-listing .listing-agent-card p { color: var(--global-palette3, #151515); }

/* Eyebrow takes its type from the shared .agla-eyebrow rule; only the colour is
   set here, which is the convention that rule documents. palette5 on the palette7
   card is 4.9:1 -- grey, but a step darker than the ground, as asked. */
.single-listing .listing-agent-card__eyebrow {
    color: var(--global-palette5, #6E6E6E);
    margin: 0 0 6px;
}
/* These two restate margins that additional-css.css already sets unprefixed at
   (0,1,0). Kadence reaches h3/p through a descendant selector, so the unprefixed
   versions lose and the rows drift apart -- the same specificity trap as the
   chip/price pair and the gallery separator. */
.single-listing .listing-agent-card__name { margin-top: 0; margin-bottom: 16px; }
.single-listing .listing-agent-card__phone { margin: 0 0 6px; }

/* Once the outer columns stack at core's 781px, the card is a full-width block in
   normal flow: it takes the whole measure, centres itself, and drops sticky --
   its container is then exactly its own height, so sticky has nothing to travel
   against and only risks odd behaviour. */
@media (max-width: 781px) {
    .single-listing .listing-agent-card {
        max-width: none;
        margin-inline: auto;
        /* Stacked, the card lands straight under the description with nothing
           between them -- the columns gap only applies along the row axis. */
        margin-top: 40px;
        position: static;
    }
}

/* embedded map with overlay link */
.agla-map { position: relative; margin-bottom: 46px; }
.agla-map iframe { width: 100%; height: 480px; border: 0; display: block; }
/* VIEW ON MAP. Light grey pill, charcoal label; hover just steps the ground down
   one notch rather than inverting, so the control stays quiet over the map.
   palette4 on palette7 is 13.7:1. */
/* Uses the shared --agla-shadow token rather than a bespoke shadow -- it now sits
   light-on-light against the map and needs the elevation to read as a control. */
.agla-btn--dark { background: var(--global-palette7, #F4F4F4); color: var(--global-palette4, #221F20); border-radius: 50px; padding: 13px 30px; letter-spacing: 2px; font-size: 13px; text-decoration: none; box-shadow: var(--agla-shadow); transition: background-color .25s ease, box-shadow .25s ease; }
.agla-btn--dark:hover, .agla-btn--dark:focus-visible { background: var(--global-palette6, #D8D8D8); color: var(--global-palette4, #221F20); }
.agla-map__link { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); }

/* closing inquiry band — styled to match the Commercial page's CTA
   (theagla.com/commercial/). The auto-populated property cover stays as the
   inline background-image; everything layered over it matches Commercial:
   831px band, black overlay + bottom-up scrim, a 990px light card, gold eyebrow,
   60px headline, and the site's primary button. */
.agla-inquire {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 831px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    /* Matches the whitespace above the calculator heading so the block sits evenly
       between the map and this band. Declared > measured because the preceding
       section's VIEW ON MAP pill overhangs its container's bottom edge. */
    margin-top: 76px;
}

/* ⚠️ This band is a plain div with a background-image, NOT a wp-block-cover, so
   it inherits none of the site's cover treatment. Both layers are restated here:
   the flat 40% black (dimRatio 40, as on Home's contact cover) and the same
   bottom-up scrim. Absolutely positioned so they stay out of the flex layout,
   and pointer-events:none so they never swallow the button's clicks. */
.agla-inquire::before,
.agla-inquire::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.agla-inquire::before { background: rgba(0, 0, 0, .4); }
.agla-inquire::after { background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 60%); }

/* Light card, square corners, 990px — the measure the Commercial card uses,
   which is also `.neighborhood-article`'s. z-index lifts it over the two scrims. */
.agla-inquire__card {
    position: relative;
    z-index: 2;
    background: var(--global-palette8, #FAFAFA);
    /* 16px matches the agent card and the calculator panel; --agla-shadow is the
       site's shared elevation. Same pair is applied to the Commercial CTA. */
    border-radius: 16px;
    box-shadow: var(--agla-shadow);
    padding: 80px;
    text-align: center;
    max-width: 990px;
    width: 100%;
}

/* ⚠️ Every colour below flipped from white/gold to charcoal because the card
   ground went from near-black to #FAFAFA. The phone was palette1 gold, which is
   about 1.9:1 on this card — the same white-on-gold trap logged in CLAUDE.md. */
.agla-inquire__eyebrow {
    color: var(--global-palette2, #BFA06A);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 16px;
    margin: 0 0 1em;
}
.agla-inquire__title {
    font-family: var(--global-heading-font-family);
    color: var(--global-palette3, #151515);
    font-size: 60px;
    line-height: 1.1;
    margin: 0 0 28px;
}
/* Padding, radius, size and tracking are deliberately NOT set here: the button
   joins the site-wide primary rule in additional-css.css, so it picks up the
   pill, the charcoal stroke and the sweep-in hover rather than restating them. */
.agla-inquire__btn { display: inline-block; margin-bottom: 30px; flex: none; min-width: 0; }
.agla-inquire__team {
    font-family: var(--global-heading-font-family);
    color: var(--global-palette3, #151515);
    font-size: 1.9rem;
    margin: 4px 0 4px;
}
.agla-inquire__phone {
    color: var(--global-palette3, #151515);
    font-size: 1.1rem;
    text-decoration: none;
}
/* The 4px/2px margins declared for __team above are both (0,1,0) and were losing
   to Kadence's descendant rule on p, leaving ~30px under "Artesian Group". This
   restates it at (0,2,0). The phone is inline-flex, so it contributes no top
   margin of its own -- this one value owns the whole gap. */
.single-listing .agla-inquire__team { margin: 4px 0 0; }
.agla-inquire__phone:hover { text-decoration: underline; }

/* Headline ramps down on the same curve as every other h2 on the site. Kadence
   does not touch this element, so the clamp is restated rather than inherited. */
@media (max-width: 1024px) {
    .agla-inquire { min-height: 640px; }
    .agla-inquire__title { font-size: clamp(40px, 5.2vw, 53px); }
    .agla-inquire__card { padding: 56px; }
}
@media (max-width: 700px) { .agla-inquire__card { padding: 40px 28px; } }
/* The band's own horizontal padding computes to 0 on phones (its `alignfull`
   handling strips it), so the card was sitting flush to both screen edges.
   Capping the card's width rather than adding margins keeps it centred by the
   band's existing justify-content, with no width+margin overflow to reason about. */
@media (max-width: 781px) { .agla-inquire__card { max-width: calc(100% - 2em); } }

/* Hero 30% smaller, centered (photos not high-res enough for full-bleed); more air above separator */
.single-listing .listing-hero.alignfull { width: 70vw; max-width: 70vw; margin-left: calc(50% - 35vw); margin-right: 0; margin-top: 32px; }
/* Radius matches the photo strip below, so the hero and its thumbnails read as
   one gallery rather than a square hero over rounded tiles. */
.single-listing .listing-hero img { max-height: 434px; border-radius: 8px; }

/* Phones: the 70vw hero is a desktop composition -- at 375px it leaves the photo
   barely half the screen. Full measure instead, inset 1em on three sides. */
@media (max-width: 781px) {
    /* Measured from the VIEWPORT, not the container: a plain `margin-inline:1em`
       lands on top of .entry-content's own 1.5rem padding and reads as 40px. This
       is the standard alignfull breakout (50% - 50vw) inset by exactly 1em. */
    .single-listing .listing-hero.alignfull {
        width: calc(100vw - 2em);
        max-width: calc(100vw - 2em);
        margin-left: calc(50% - 50vw + 1em);
        margin-right: 0;
        margin-top: 1em;
    }
}
.agla-sep { margin-top: 64px; }







/* ===== Showcase IDX brand layer =====
   Colors reference Rae's brand tokens (additional-css.css, 2026-08-13 greens).
   Fallbacks match token values in case load order ever changes. */

.sidx-container { font-family: 'Poppins', sans-serif; }

/* prices — serif, brand dark green (their default is blue) */
.sidx-container .sidx-price {
    font-family: var(--global-heading-font-family, Georgia, serif) !important;
    color: var(--agla-green-darkest, #172417) !important;
    font-weight: 400 !important;
}

/* NEW LISTING ribbons — their green -> brand deep green */
.sidx-container .sidx-ribbon, .sidx-container .sidx-new-listing {
    background: var(--agla-green-darkest, #172417) !important;
    color: #fff !important;
    letter-spacing: 1px;
}

/* sale-type labels ("SINGLE FAMILY RESIDENCE FOR SALE") -> gold */
.sidx-container .sidx-sale-type, .sidx-container .sidx-for-sale, .sidx-container .sidx-price-type {
    color: var(--agla-gold, #BFA06A) !important;
    letter-spacing: 1px;
}

/* addresses + info values -> brand ink */
.sidx-container .sidx-listing-heading { color: var(--agla-green-darkest, #172417) !important; }
.sidx-container .sidx-info-title { color: var(--global-palette5, #6E6E6E) !important; }
.sidx-container .sidx-info-value { color: var(--agla-green-darkest, #172417) !important; }

/* hotsheet "See All Results" -> brand pill */
.sidx-container .sidx-hotsheet-see-all-results {
    background: var(--agla-green-darkest, #172417) !important;
    color: #fff !important;
    border-radius: 50px !important;
    letter-spacing: 2px;
    padding: 13px 30px !important;
    transition: background .2s;
}
.sidx-container .sidx-hotsheet-see-all-results:hover {
    background: var(--agla-green-deepest, #0e160e) !important;
}

/* generic links inside the app -> brand green */
.sidx-container a:not([class*="button"]):not(.sidx-hotsheet-see-all-results) { color: var(--agla-green-mid, #314a30); }

/* search app primary action buttons (Save Search etc.) -> gold */
.sidx-container button[class*="save"], .sidx-container .sidx-button-primary {
    background: var(--agla-gold, #BFA06A) !important;
    color: var(--agla-green-darkest, #172417) !important;
    border: 0 !important;
    border-radius: 50px !important;
}

/* search toolbar: "More" + "Save Search" -> gold (were Showcase blue) */
.sidx-container .sidx-streamlined-toggle {
    color: var(--agla-green-darkest, #172417) !important;
    border-color: var(--agla-gold, #BFA06A) !important;
}
.sidx-container .sidx-streamlined-toggle:hover {
    background: var(--agla-gold, #BFA06A) !important;
    color: var(--agla-green-darkest, #172417) !important;
}
.sidx-container .sidx-save-search-pill {
    background: var(--agla-gold, #BFA06A) !important;
    border-color: var(--agla-gold, #BFA06A) !important;
    color: var(--agla-green-darkest, #172417) !important;
}
.sidx-container .sidx-save-search-pill:hover {
    background: var(--global-palette1, #D5BA8A) !important;
    border-color: var(--global-palette1, #D5BA8A) !important;
}