/* ==========================================================================
   HomePezzo Archive Grid
   Improves the GeoDirectory archive / search / category loop layout.
   Targets GD's Bootstrap 5 selectors only — never modifies GD source files.

   Verified against: GeoDirectory 2.8.161, AUI Bootstrap 5 (body.aui_bs5).
   Key GD selectors: .geodir-loop-container, .geodir-loop-actions-container,
   .row.geodir-gridview, .gd-list-view-select

   GD grid HTML (Bootstrap row-cols pattern):
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 geodir-gridview">
       <div class="col mb-4 geodir-post …"> … </div>
     </div>
   GD handles: 1-col (mobile), 2-col (sm/md). This file adds 3-col (≥992px)
   and 4-col (≥1280px) and equal-height card layout.

   Scoping note: max-width and padding rules use body class selectors
   (.geodir-archive, .page-id-16) so they apply only on archive/search
   pages and do NOT double-pad the vendor profile's product grid, which
   renders [hp_vendor_listings] inside an already-padded Bricks container.
   ========================================================================== */

/* ── Max-width container: matches Template 36 header (1200px / 24px padding) ─ */
/* Scoped to archive and search page body classes only.                       */

body.geodir-archive .geodir-loop-container,
body.geodir-archive .geodir-loop-actions-container,
body.page-id-16 .geodir-loop-container,
body.page-id-16 .geodir-loop-actions-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* ── Hide default Bricks/GD page-title H1 — T36 provides the identity heading ── */
/* GD archive pages render "All Places" / "All Interior" / etc. inside            */
/* #brx-content. The search page (page-id-16) renders its WP page title there.    */
/* Template 36 already provides the correct H1; the default heading is a           */
/* redundant duplicate. Hidden on all T36-covered page contexts.                   */

body.geodir-archive #brx-content > h1,
body.page-id-16 #brx-content > h1 {
    display: none !important;
}

/* ── Remove T36 section bottom border — not needed above GD content area ───── */
/* hpah01 (_cssCustom) carries border-bottom: 1px solid #e5e7eb. That edge was  */
/* added as part of the initial T36 design; it creates an extra divider line     */
/* between the identity banner and the GD search/results area. Suppressed here   */
/* to keep the T36 element tree unchanged.                                        */

body.geodir-archive #brxe-hpah01,
body.page-id-16 #brxe-hpah01 {
    border-bottom: none !important;
}

/* ── Grid gap + flex column on each cell (enables equal-height card rows) ─── */
/* Applied broadly: fine on archive pages AND vendor profile product grid.    */

.geodir-loop-container .row.geodir-gridview {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.geodir-loop-container .row.geodir-gridview > .col {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* ── 3 columns on large screens (992px – 1279px) ─────────────────────────── */
/* Applied broadly: improves both archive grids and vendor product grid.      */

@media (min-width: 992px) {
    .geodir-loop-container .row.geodir-gridview > .col {
        flex: 0 0 auto;
        width: 33.333%;
    }
}

/* ── 4 columns on wide desktop (≥ 1280px) ───────────────────────────────── */
/* Applied broadly: archive grid shows 4 across; vendor profile also         */
/* benefits if the vendor has enough listings.                                */

@media (min-width: 1280px) {
    .geodir-loop-container .row.geodir-gridview > .col {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* ── Equal-height cards: card root fills its .col flex parent ─────────────── */
/* Overrides the max-width: 360px cap from homepezzo-section-colors.css so   */
/* cards fill their column width in the archive grid.                         */

.geodir-loop-container .hp-card-product {
    flex: 1;
    max-width: none;
}

/* ── Equal-height cards: bridge the per-item <main id="brx-content"> wrapper ── */
/* GD renders Page 20 (the GD Archive Item template) once per loop item, and   */
/* each render is wrapped in its own <main id="brx-content">. Bootstrap's       */
/* .card already gets h-100 (= .col height), and <main> already grows to fill  */
/* .card via flex: 1 1 0% from the sticky-footer rule below — but <main> is     */
/* display: block, so its single child (.hp-card-product, which has flex: 1     */
/* from the rule above) doesn't fill it; the card is left short by exactly the  */
/* title's wrapped-line difference (1-line vs 2-line titles). Making <main> a   */
/* flex column lets .hp-card-product stretch to fill it, equalizing card        */
/* heights across the row regardless of title length.                           */

.geodir-loop-container .row.geodir-gridview > .col > .card > main {
    display: flex;
    flex-direction: column;
}

/* ── Equal-height cards: card body grows to fill remaining card height ────── */
/* #brxe-bdy5nm is the card body div in Page 20 (GD Archive Item template).  */
/* Stable Bricks element ID — changes only if Page 20 is fully rebuilt.       */

#brxe-bdy5nm {
    flex: 1 !important;
}

/* ── Clamp listing titles to 2 lines, with stable height ─────────────────── */
/* #brxe-ttl7qr is the listing title heading in Page 20. Mirrors the           */
/* .hp-card-title recipe (homepezzo-section-colors.css) used on the homepage  */
/* Featured Products cards: line-height 1.35 × 2 lines = 2.7em min-height, so  */
/* 1-line and 2-line titles reserve the same vertical space before the         */
/* vendor/price/location rows that follow.                                     */

#brxe-ttl7qr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* ── Push divider + View Listing CTA to card bottom ─────────────────────── */
/* #brxe-divdr1 is the horizontal rule in Page 20, above the CTA.            */

#brxe-divdr1 {
    margin-top: auto !important;
}

/* ── Sort / actions bar: cleaner spacing + subtle divider ──────────────── */
/* Scoped: vendor profile does not render .geodir-loop-actions-container.    */

body.geodir-archive .geodir-loop-actions-container .justify-content-end,
body.page-id-16 .geodir-loop-actions-container .justify-content-end {
    padding-top: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px !important;
}

/* ── Hide grid/list view toggle (HomePezzo is grid-only) ──────────────── */
/* Safe broadly: vendor profile loop has no .gd-list-view-select element.    */

.gd-list-view-select {
    display: none !important;
}

/* ── Stretched link: full card clickable (Page 20 product cards) ─────────── */
/* Bootstrap "stretched link" pattern.                                        */
/*                                                                            */
/* How it works:                                                              */
/*   cta9mp has tag="a" + link={post_url} (external type) so Bricks renders  */
/*   it as <a href="..."> resolving the listing permalink per-card.           */
/*   Its ::after pseudo-element fills the entire card wrapper (position       */
/*   absolute, inset:0) so clicking anywhere on the card fires the link.     */
/*   The visible "View Listing" row remains for readability.                  */
/*                                                                            */
/* .hp-card-product (= crd1wr) gets position:relative to anchor the          */
/* pseudo-element. The existing overflow:hidden on crd1wr clips it exactly   */
/* to the card boundary.                                                      */
/*                                                                            */
/* No nested <a> tags: crd1wr is not a link, only cta9mp's ::after is.       */
/* Applied broadly — also makes vendor profile product cards fully clickable. */
/* Stable IDs change only if Page 20 is fully rebuilt from scratch.           */

.hp-card-product {
    position: relative;
}

#brxe-cta9mp::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* ── Stretched link: full card clickable (Homepage Featured Products) ─── */
/* Same Bootstrap stretched-link pattern as cta9mp above.                 */
/* hpfpvl (button element) renders as <a class="brxe-hpfpvl"> in a loop — */
/* Bricks generates class selectors for loop elements, not ID selectors.  */
/* hpfpcd gets position:relative via .hp-card-product (added Step 42).    */

.brxe-hpfpvl::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* Hide price row when field is empty (homepage cards) */
.brxe-hpfppr:empty { display: none !important; margin: 0; }

/* ==========================================================================
   Header link color consistency (Template 53) — desktop + mobile.
   Bricks' per-element _cssCustom on this template gives Directory/My
   Account a charcoal #374151 and Login/Log out a bright #2563EB, neither
   of which matches the site's muted HomePezzo blue token. Recolor all four
   header text links to the same --hp-blue so the row reads as one
   consistent link style next to the Add Listing pill. IDs are unique to
   this header template, so this can't leak into footer or body links.
   ========================================================================== */

#brxe-hphd07,
#brxe-hphd09,
#brxe-hpacl,
#brxe-hplgt {
    color: var(--hp-blue, #315E9E) !important;
}

#brxe-hphd07:hover,
#brxe-hphd07:focus,
#brxe-hphd09:hover,
#brxe-hphd09:focus,
#brxe-hpacl:hover,
#brxe-hpacl:focus,
#brxe-hplgt:hover,
#brxe-hplgt:focus {
    color: var(--hp-blue-hover, #2A5086) !important;
}

/* ── Fix B/D: Single listing — block layout (≤ 767px covers landscape phones) */
/* Bricks generates flex row (sld003) with min-width:280px on both panels.     */
/* On iOS Safari, flex-basis:100% can fall back to auto when the parent        */
/* flex container has no explicit definite size — items grow to max-content    */
/* width and overflow. Fix: switch sld003 to display:block so children         */
/* stack as natural 100%-wide blocks with no flex percentage ambiguity.        */
/* Overflow-x:hidden on sld001 (section) acts as a hard backstop.             */

@media (max-width: 767px) {

    #brxe-sld001 {
        overflow-x: hidden !important;
    }

    #brxe-sld003 {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #brxe-sld004 {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #brxe-sld006 {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 20px !important;
    }

    /* Contain all direct children of the content panel */
    #brxe-sld006 > * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Title: wrap long words */
    #brxe-sld009 {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
    }

    /* Button: full-width, centred */
    #brxe-sld018 {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }

    /* ── Fix C: Single listing — fill image panel, no grey dead zones ─────── */
    /* Bricks forces height:360px !important on sld004 — height:auto cannot   */
    /* override it. Accept the fixed container; fill it with the image via     */
    /* position:absolute. Scoped to #brxe-sld005 so archive cards (.hp-       */
    /* listing-image-wrap on Page 20) are completely unaffected.               */

    #brxe-sld005 .hp-listing-image-wrap {
        position: relative !important;
        overflow: hidden !important;
    }

    #brxe-sld005 .hp-listing-image-wrap img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

}

/* ── GeoDirectory search form: Bootstrap row negative margins ───────────── */
/* .geodir-search.row uses margin-left/right: calc(var(--bs-gutter-x)*-0.5) */
/* = -12px each side. Inner columns use px-0 + flex gap-2 for spacing, not  */
/* Bootstrap column gutters, so zeroing the row margins is safe and          */
/* eliminates the 12px horizontal overflow on archive and search pages.      */

body.geodir-archive .geodir-search.row,
body.page-id-16 .geodir-search.row {
    margin-left: 0;
    margin-right: 0;
}

/* ── Category nav active state ───────────────────────────────────────────── */
/* Highlights the matching button when viewing a specific category archive.  */
/* GD uses geodir-page-term-{id} (not slug). Term IDs: interior=3,          */
/* exterior=4, green-power=5, plumbing-fixtures=6.                           */
/* Each button's fill color was originally set in Bricks: hpah07 #8B5E3C,   */
/* hpah08 #16A34A, hpah09 #EAB308 still are. hpah06 (Interior) is now       */
/* overridden to var(--hp-blue) in homepezzo-section-colors.css (Step 115). */
/* The old filter+outline combo read as a double ring; this is one darker  */
/* border per button's own fill (so it still reads as "selected" without   */
/* a brighter inner ring), plus a soft lift. .brxe-button is box-sizing:    */
/* border-box, so the border adds no layout shift versus inactive buttons   */
/* (which have a 0px one). */

body.geodir-page-term-3 #brxe-hpah06,
body.geodir-page-term-4 #brxe-hpah07,
body.geodir-page-term-5 #brxe-hpah08,
body.geodir-page-term-6 #brxe-hpah09 {
    /* Selected-category state (v0.1.97): a floating selection ring in the
       button's own dark shade (2px white gap against the #fff header, then a
       2px colour ring) + a stronger lift shadow. Reads as intentionally
       selected on blue / brown / green / gold, not a focus ring or error.
       All box-shadow + transform -> zero layout shift (replaces the old 1px
       border, which could nudge an auto-width button). */
    transform: translateY(-2px);
    position: relative;
    z-index: 1;
    outline: none;
}

body.geodir-page-term-3 #brxe-hpah06 { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--hp-blue), 0 8px 18px rgba(15, 23, 42, 0.28); }
body.geodir-page-term-4 #brxe-hpah07 { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #8B5E3C, 0 8px 18px rgba(15, 23, 42, 0.28); }
body.geodir-page-term-5 #brxe-hpah08 { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #16A34A, 0 8px 18px rgba(15, 23, 42, 0.28); }
body.geodir-page-term-6 #brxe-hpah09 { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #EAB308, 0 8px 18px rgba(15, 23, 42, 0.28); }

/* ==========================================================================
   Auth pages (Login / Register) — UWP Bootstrap card overflow fix
   UsersWP wraps its forms in a Bootstrap .row inside a card. The .row class
   applies margin-left/right: -12px (from --bs-gutter-x: 1.5rem). The inner
   form content uses plain padding, not Bootstrap column gutters, so the
   negative margins are unnecessary and cause 12px horizontal overflow on
   mobile. Zeroing them is safe and does not affect form layout.
   Scoped to body.page-id-7 (login) and body.page-id-6 (register) only.
   ========================================================================== */

body.page-id-7 .uwp-login-class .row,
body.page-id-6 .uwp-register-class .row {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Guides archive header (Template 128) — one heading per context.
   The imported template carries two heading elements with no element
   conditions (local sandbox WIP): gah_head_default ("Product Guides") for
   the post-type archive and gah_head_cat ({archive_title}) for category
   archives. Scope each to its context via body classes; class-based
   (hpg-*) selectors, no Bricks-ID debt.
   ========================================================================== */

.post-type-archive-gd_guides .hpg-gah_head_cat {
    display: none;
}

.tax-gd_guidescategory .hpg-gah_head_default {
    display: none;
}