/* =============================================================
   AskPerTask — Requests List Page  (apt-requests-list.css)

   Scope:
   • body.hp-template--requests-view-page  → /requests/

   Loaded only on this route via APT_Detail_Pages::enqueue_assets().
   All selectors are prefixed with the body class so nothing bleeds
   to other HivePress pages.

   DOM landmarks (HivePress + ExpertHive):
     body.hp-template--requests-view-page
       .content-area
         .hp-page.site-main
           .apt-requests-hero        ← new hero (title · subtitle · View on Map)
           .hp-page__header          ← hidden (display:none)
           .hp-row
             aside.hp-page__sidebar  ← left: filter widget
             .hp-page__content
               .hp-page__topbar      ← count · sort · View on Map
               .hp-listings          ← grid of cards
                 article.hp-listing.hp-listing--view-block  ← each card
                   .hp-listing__content     ← left: flex-grow content column
                     .apt-type-badge
                     h3/h4.hp-listing__title
                     .hp-listing__details--primary   ← category · date
                     .hp-listing__attributes--secondary ← location
                   footer.hp-listing__footer ← right: fixed 200px column
                     .hp-listing__attributes--primary  ← budget + status
                     .hp-listing__actions--primary     ← Make an Offer button
               .hp-page__pagination
   ============================================================= */

/* ---- Design tokens (self-contained — not shared with apt-detail-pages.css) ----
   Also scoped to body.hp-template--requests-edit-page: this block only
   ever declares custom properties (no visual rule lives here), so adding
   the second selector cannot itself change anything visually — it just
   makes every var(--apt-rl-*) reference used by the requests-edit-page
   rules elsewhere in this file (status/price colour, the "Requested by"
   label, etc.) actually resolve instead of silently falling back to
   inherited text colour. */
body.hp-template--requests-view-page,
body.hp-template--requests-edit-page {
  --apt-rl-text:          #1A1A1A;
  --apt-rl-muted:         #6B7280;
  --apt-rl-muted-light:   #9CA3AF;
  --apt-rl-border:        #E5E7EB;
  --apt-rl-border-light:  #F3F4F6;
  --apt-rl-bg:            #F4F5F7;
  --apt-rl-white:         #FFFFFF;
  --apt-rl-blue:          #2D6CDF;
  --apt-rl-blue-light:    #EAF1FD;
  --apt-rl-green:         #1FA34A;
  --apt-rl-green-dark:    #168238;
  --apt-rl-green-light:   #E8F7EE;
  --apt-rl-orange:        #F2884B;
  --apt-rl-orange-light:  #FFF4EE;
  --apt-rl-orange-text:   #C4611A;
  --apt-rl-radius:        12px;
  --apt-rl-shadow:        0 2px 8px rgba(16, 24, 40, 0.06);
  --apt-rl-shadow-hover:  0 4px 16px rgba(16, 24, 40, 0.10);
}

/* ============================================================
   PAGE BACKGROUND
   ============================================================ */

body.hp-template--requests-view-page {
  background-color: var(--apt-rl-bg);
}

body.hp-template--requests-view-page .content-area {
  background-color: var(--apt-rl-bg);
}

/* Clip the HivePress .hp-row negative-margin (-16px) that causes 16px
   horizontal scroll at narrow viewports. */
body.hp-template--requests-view-page .hp-page {
  overflow-x: hidden;
}

/* ============================================================
   ELEMENTOR DARK HERO — suppress on requests page
   ============================================================ */

/* Remove the black overlay over the Elementor header background image */
body.hp-template--requests-view-page .elementor-background-overlay {
  display: none !important;
}

/* Collapse the specific hero/banner section inside Elementor template 2156.
   The element ID (22b6f6f) is generated by Elementor — update this selector
   if the header template is ever deleted and recreated in Elementor. */
body.hp-template--requests-view-page .elementor-element-22b6f6f {
  background-image: none !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide the old "Requests" page title widget and its flanking spacers inside
   elementor-element-22b6f6f. The navbar inner section (45ebd6b) is preserved. */
body.hp-template--requests-view-page .elementor-element-b89fe17,
body.hp-template--requests-view-page .elementor-element-efc6f77,
body.hp-template--requests-view-page .elementor-element-a36d611 {
  display: none !important;
}

/* ============================================================
   APT-FILTER-UI-2F — compact Filter trigger, all widths
   The Mapbox keyword/location search form is hidden (superseded by
   the category/budget filters); the header now hosts only the real
   HivePress "Filter" trigger button (data-component="link", opens
   #request_filter_modal via HivePress's own Fancybox modal JS —
   common.js's Modal component binds this on page load regardless of
   the trigger's current CSS display state, so this is the exact same
   tested mechanism the mobile-only Filter button already used before
   this batch; only its visibility/styling changes here). This
   replaces the old two-state approach (search form + huge always-open
   inline panel on desktop, Filter-button-only on mobile) with one
   consistent compact disclosure at every width — no 768px layout
   swap, no huge panel pushing results down. */
body.hp-template--requests-view-page .hp-page__header {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
}

body.hp-template--requests-view-page .hp-page__header .hp-form--request-search {
  display: none !important;
}

/* ============================================================
   REQUESTS HERO
   ============================================================ */

body.hp-template--requests-view-page .apt-requests-hero {
  background: #ffffff;
  border: 1px solid var(--apt-rl-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 1.75rem;
  box-shadow: var(--apt-rl-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

body.hp-template--requests-view-page .apt-hero__main {
  flex: 1 1 auto;
  min-width: 0;
}

body.hp-template--requests-view-page .apt-hero__controls {
  flex: 0 0 auto;
}

body.hp-template--requests-view-page .apt-hero__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--apt-rl-text);
  line-height: 1.2;
  margin: 0 0 0.3rem;
  padding: 0;
}

body.hp-template--requests-view-page .apt-hero__subtitle {
  font-size: 0.9375rem;
  color: var(--apt-rl-muted);
  margin: 0;
  line-height: 1.55;
}

/* List / Map view toggle */
body.hp-template--requests-view-page .apt-view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--apt-rl-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--apt-rl-white);
}

body.hp-template--requests-view-page .apt-view-toggle__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--apt-rl-muted);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

body.hp-template--requests-view-page .apt-view-toggle__item + .apt-view-toggle__item {
  border-left: 1.5px solid var(--apt-rl-border);
}

body.hp-template--requests-view-page .apt-view-toggle__item--active {
  background: var(--apt-rl-blue-light);
  color: var(--apt-rl-blue);
  font-weight: 600;
  cursor: default;
}

body.hp-template--requests-view-page .apt-view-toggle__item:not(.apt-view-toggle__item--active):hover {
  background: var(--apt-rl-border-light);
  color: var(--apt-rl-text);
}

body.hp-template--requests-view-page .apt-view-toggle__item svg {
  flex-shrink: 0;
}

/* ============================================================
   TOPBAR — result count · sort form · View on Map link
   ============================================================ */

body.hp-template--requests-view-page .hp-page__topbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 0 14px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--apt-rl-border) !important;
  background: transparent !important;
}

/* Result count */
body.hp-template--requests-view-page .hp-results__count {
  font-size: 13px !important;
  color: var(--apt-rl-muted) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Sort form — compact */
body.hp-template--requests-view-page .hp-page__topbar .hp-form--pivot {
  margin: 0 !important;
}

body.hp-template--requests-view-page .hp-page__topbar .hp-form--pivot select,
body.hp-template--requests-view-page .hp-page__topbar .hp-form--pivot .hp-field__input {
  font-size: 12px !important;
  color: var(--apt-rl-muted) !important;
  background: transparent !important;
  border: 1px solid var(--apt-rl-border) !important;
  border-radius: 6px !important;
  padding: 4px 24px 4px 8px !important;
  height: auto !important;
}

/* Topbar View on Map pill is now redundant — the hero toggle covers this */
body.hp-template--requests-view-page .hp-page__topbar .apt-view-on-map {
  display: none !important;
}

/* ── View on Map pill ── */
body.hp-template--requests-view-page .apt-view-on-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  background: var(--apt-rl-orange-light);
  color: var(--apt-rl-orange-text);
  border: 1.5px solid var(--apt-rl-orange);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  line-height: 1;
  transition: background 0.13s, border-color 0.13s;
}

body.hp-template--requests-view-page .apt-view-on-map:hover {
  background: #FEE8D5;
  border-color: #E07A3D;
  color: var(--apt-rl-orange-text);
  text-decoration: none;
}

body.hp-template--requests-view-page .apt-view-on-map svg {
  flex-shrink: 0;
}

/* ============================================================
   REQUEST CARDS — IMAGE COLUMN
   ============================================================ */

/* Image strip — leftmost flex child inside article.hp-listing--view-block.
   MY-REQUESTS-THUMBNAIL-FIX-1A: also scoped to .hp-template--requests-edit-page
   (the owner's /account/requests/ list) — it renders the exact same
   apt_card_image markup (APT_Browse_Pages::inject_request_card_image() hooks
   request_view_block unconditionally) but previously had no matching CSS at
   all here, so thumbnails fell back to unstyled native image dimensions
   (inconsistent box sizes, no crop). Every other rule in this file stays
   scoped to .hp-template--requests-view-page only. */

body.hp-template--requests-view-page .hp-listing--view-block .apt-card-img,
body.hp-template--requests-edit-page .hp-listing--view-block .apt-card-img {
  flex: 0 0 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #EAF0FC 0%, #F0F2F7 100%) !important;
  border-right: 1px solid var(--apt-rl-border) !important;
  min-height: 150px !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-card-img--has-photo .apt-card-img__photo,
body.hp-template--requests-edit-page .hp-listing--view-block .apt-card-img--has-photo .apt-card-img__photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Placeholder: intentional blue-grey gradient with a centred task icon */
body.hp-template--requests-view-page .hp-listing--view-block .apt-card-img--placeholder .apt-card-img__icon,
body.hp-template--requests-edit-page .hp-listing--view-block .apt-card-img--placeholder .apt-card-img__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9DB5D8 !important;
}

/* Scale the inline SVG up via CSS — the PHP outputs width/height attributes
   that only set intrinsic size; CSS overrides take effect on the rendered box. */
body.hp-template--requests-view-page .hp-listing--view-block .apt-card-img--placeholder .apt-card-img__icon svg,
body.hp-template--requests-edit-page .hp-listing--view-block .apt-card-img--placeholder .apt-card-img__icon svg {
  width: 40px !important;
  height: 40px !important;
}

/* ============================================================
   REQUEST CARDS — VERTICAL COMPACTNESS (My Requests only)
   MY-REQUESTS-CARD-SPACING-FIX-1A: My Requests never loaded this
   stylesheet's card rules (same gap the thumbnail/width/label fixes
   already closed elsewhere in this file), so its cards fell back to
   ExpertHive's own unconditional `.hp-listing--view-block { padding: 2rem
   1.75rem 2rem 2rem }` plus browser/theme default block margins on the
   title, excerpt, and details row — measured at 32px card padding + 12px
   + 16px + 19.2px of stacked margins between text blocks. That's the
   "excessive empty space" this fixes. Spacing (padding/margin) ONLY —
   deliberately no font-size/color/line-clamp changes, so the card's
   current visual appearance is preserved and only the gaps shrink. Scoped
   to body.hp-template--requests-edit-page only; the public
   requests_view_page card (already tightened via its own rules further
   below) is untouched. */
body.hp-template--requests-edit-page .hp-listing--view-block {
  padding: 20px !important;
}

/* MY-REQUESTS-CARD-FIGMA-VARIANT-B-1A: "Compact / price aligned" —
   badges+price share the top row, requester+status share the bottom row,
   title/description/meta form one continuous middle block, and there is
   no separately-boxed right panel. .hp-listing__content and
   .hp-listing__footer are DIFFERENT DOM siblings, so getting pieces from
   each onto the SAME visual row needs a real layout mode change, not just
   spacing — this switches the card to a 2-column CSS Grid (image | main
   content) and uses display:contents on .hp-listing__footer +
   .hp-listing__attributes--primary to "unwrap" them so price and status
   become independently placeable grid items, positioned INTO the same
   main-content column as everything else (not a separate column) via
   justify-self:end. .hp-listing__content itself is NOT unwrapped — its
   own internal badge→title→excerpt→meta→requester stack (tuned in
   earlier batches) is kept fully intact and simply spans all 4 rows as
   one grid item, which is what keeps the badge visually at the top and
   the requester strip at the bottom without having to individually
   re-place every one of its children. The 2-column structure itself
   (220px image | 1fr main content) is untouched — see
   MY-REQUESTS-CARD-MAX-WIDTH-1A below for why price/status still sat far
   from the text on wide desktop viewports despite that. */
/* MY-REQUESTS-CARD-MAX-WIDTH-1A: main content is `1fr`, i.e. "whatever
   width the card itself has" — on a 1440px viewport the PAGE was
   correctly widened to full width in an earlier batch, so the CARD (and
   therefore its 1fr content column) was stretching to match, leaving
   price/status justified all the way out to the far edge of an
   830px-wide content column. The page/list container is intentionally
   left alone (still full width); only the card itself is capped to a
   compact width and stays left-aligned inside that full-width page —
   this is what actually pulls price/status back near the text, without
   touching the 2-column grid template or re-introducing a fixed-px
   column-width hack. */
body.hp-template--requests-edit-page .hp-listing--view-block {
  display: grid !important;
  max-width: 900px !important; /* was 820px — right-side page space intentionally left free for a future ad/sidebar panel */
  grid-template-columns: 220px 1fr !important;
  grid-template-rows: auto auto 1fr auto !important;
  column-gap: 20px !important;
  row-gap: 6px !important;
}

body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__title {
  margin: 0 0 6px !important;
}

body.hp-template--requests-edit-page .hp-listing--view-block .apt-request-excerpt {
  margin: 0 0 8px !important;
}

body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__details--primary {
  margin-bottom: 8px !important;
}

/* ============================================================
   REQUEST CARDS — FIGMA VARIANT B GRID PLACEMENT (My Requests only)
   ============================================================ */

/* Image: fixed 220px column, spans all 4 rows top-to-bottom — same
   thumbnail size as every previous batch, just now a grid item instead
   of a flex item. */
body.hp-template--requests-edit-page .hp-listing--view-block .apt-card-img {
  grid-column: 1 !important;
  grid-row: 1 / 5 !important;
  align-self: stretch !important;
}

/* Main content: kept as ONE grid item spanning all 4 rows, internals
   untouched (badge → title → excerpt → meta → requester, tuned in
   earlier batches). This is what keeps the badge at the top and the
   requester strip at the bottom without needing to place each of its
   children individually. */
body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__content {
  grid-column: 2 !important;
  grid-row: 1 / 5 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

body.hp-template--requests-edit-page .hp-listing--view-block .apt-badge {
  align-self: flex-start !important;
}

/* Unwrap the footer and its price/status wrapper so their pieces become
   independently placeable grid items — .hp-listing__content is never
   unwrapped (see above), only these two, which previously trapped price
   and status together inside one side-panel box. display:contents
   generates no box of its own, so any width/padding/background/border
   previously set on these two is now moot. */
body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__footer,
body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__attributes--primary {
  display: contents !important;
}

/* Price: row 1 (top), right edge of the SAME main-content column as
   everything else — there is no separate accent column, so this is
   justify-self:end within the full-width row rather than a placement
   into its own track. */
body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__attribute--budget {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

/* "Your request": row 2, own dedicated row directly under the price —
   grid items placed in the SAME cell overlap rather than stack, so this
   needs its own row (not row 1) to actually sit below the price instead
   of behind it. Small badge grouped near price, not a separate panel.
   Own rule (not unwrapped) since apt-offer-owner--card is already a
   small inline-block label — placement only; its own visual redesign is
   below. */
body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__actions--primary {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  margin-top: 4px !important;
}

/* MY-REQUESTS-OWNERSHIP-BADGE-1A: .apt-offer-owner--card's global rule
   (apt-offer-modal.css) is a near-white box (#F9FAFB) with a thin grey
   border and a 4px radius — correct for its original context, but next
   to a real price/status pair it reads as an empty/disabled input rather
   than a status label. Scoped to this card only (the global rule, and
   this class's use elsewhere — e.g. the single request page — are
   untouched): pill shape, a visibly tinted neutral fill instead of
   near-white, a defined border, stronger text, and a small check icon so
   it reads as "you own this" rather than a blank field. Not button-
   coloured (no green/blue fill) and not input-shaped (no 4px
   almost-square corners) on purpose — this is a passive ownership label,
   never actionable. */
body.hp-template--requests-edit-page .hp-listing--view-block .apt-offer-owner--card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: 4px 10px !important;
  background: #F3F4F6 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

body.hp-template--requests-edit-page .hp-listing--view-block .apt-offer-owner--card::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Status: row 4 (bottom), right edge of the same main-content column,
   level with the requester strip on the opposite side. Colour/weight
   only, no pill padding/border — a bordered pill here adds height every
   wrapped line, which would fight "keep current card height". No
   max-width cap — the row naturally has the card's full remaining width
   to wrap into. */
body.hp-template--requests-edit-page .hp-listing--view-block .hp-listing__attribute--project-badges {
  grid-column: 2 !important;
  grid-row: 4 !important;
  justify-self: end !important;
  align-self: end !important;
  text-align: right !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--apt-rl-green) !important;
  white-space: normal !important;
}

/* ============================================================
   REQUEST CARDS — REQUESTER TRUST STRIP
   ============================================================ */

body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--apt-rl-border-light) !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip img.avatar,
body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip .apt-req-strip__avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* MY-REQUESTS-REQUESTER-LABEL-1A: "Requested by" prefix, My Requests only —
   see APT_Browse_Pages::inject_request_requester_strip(). Muted so the
   actual name still reads as the emphasized value, small left margin for
   breathing room since .apt-req-strip has no flex/gap rule on this route
   (unstyled base spans, unchanged here on purpose). */
body.hp-template--requests-edit-page .apt-req-strip__label {
  color: var(--apt-rl-muted);
  font-size: 11px;
  margin-left: 4px;
}

body.hp-template--requests-edit-page .apt-req-strip__label + .apt-req-strip__name {
  margin-left: 3px;
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip__name {
  font-size: 11px !important;
  color: var(--apt-rl-muted) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip__badges {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

/* Compact badge sizing inside the trust strip */
body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip .apt-badge {
  font-size: 9px !important;
  padding: 1px 5px !important;
}

/* ============================================================
   REQUEST CARDS — HORIZONTAL LAYOUT
   ============================================================ */

/* ── Article: horizontal flex row ── */

body.hp-template--requests-view-page .hp-listing--view-block {
  background: var(--apt-rl-white) !important;
  border: 1px solid var(--apt-rl-border) !important;
  border-radius: var(--apt-rl-radius) !important;
  box-shadow: var(--apt-rl-shadow) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}

body.hp-template--requests-view-page .hp-listing--view-block:hover {
  box-shadow: var(--apt-rl-shadow-hover) !important;
  border-color: #D1D5DB !important;
}

/* Suppress any theme stripe or dot-matrix decoration */
body.hp-template--requests-view-page .hp-listing--view-block::before,
body.hp-template--requests-view-page .hp-listing--view-block::after {
  display: none !important;
}

/* ── Content area (left, flex-grow) ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__content {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 16px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* ── Type badge (fallback — only when apt_render_badge() unavailable) ── */

body.hp-template--requests-view-page .hp-listing--view-block .apt-type-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-type-badge--quick-task {
  background: var(--apt-rl-blue-light);
  color: var(--apt-rl-blue);
  border: 1px solid rgba(45, 108, 223, 0.25);
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-type-badge--service-request {
  background: var(--apt-rl-green-light);
  color: var(--apt-rl-green);
  border: 1px solid rgba(31, 163, 74, 0.25);
}

/* ── apt-badge system — real badge chips from apt_render_badge() ── */

body.hp-template--requests-view-page .hp-listing--view-block .apt-badge {
  align-self: flex-start;
  margin-bottom: 6px;
}

/* QUICK-TASK-LIST-MAP-1A: quick_task and service_request both use the
   registry's shared 'request_type' palette (apt-badge--info, blue), so the
   real apt_render_badge() output is visually identical apart from label
   text. This gives service_request the same green already defined above
   for the (currently unused) fallback markup, without touching the shared
   badge palette used by other, unrelated badges. quick_task keeps the
   palette's default blue — no override needed. */
body.hp-template--requests-view-page .hp-listing--view-block .apt-badge[data-badge-id="service_request"] {
  background: var(--apt-rl-green-light);
  color: var(--apt-rl-green);
  border-color: rgba(31, 163, 74, 0.25);
}

/* ── Timing badge (fallback — only when apt_render_badge() unavailable) ── */

body.hp-template--requests-view-page .hp-listing--view-block .apt-timing-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-timing-badge--urgent {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid rgba(185, 28, 28, 0.25);
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-timing-badge--today {
  background: var(--apt-rl-blue-light);
  color: var(--apt-rl-blue);
  border: 1px solid rgba(45, 108, 223, 0.25);
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-timing-badge--this-week {
  background: var(--apt-rl-border-light);
  color: var(--apt-rl-muted);
  border: 1px solid var(--apt-rl-border);
}

body.hp-template--requests-view-page .hp-listing--view-block .apt-timing-badge--flexible {
  background: var(--apt-rl-border-light);
  color: var(--apt-rl-muted-light);
  border: 1px solid var(--apt-rl-border);
}

/* ── Request excerpt ── */

body.hp-template--requests-view-page .hp-listing--view-block .apt-request-excerpt {
  font-size: 13px;
  color: var(--apt-rl-muted);
  line-height: 1.5;
  margin: 4px 0 8px;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Title ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--apt-rl-text) !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__title::before {
  display: none !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__title a {
  color: var(--apt-rl-text) !important;
  text-decoration: none !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__title a:hover {
  color: var(--apt-rl-blue) !important;
}

/* ── Details row (category · date) ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__details--primary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 4px !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__details--primary > * {
  font-size: 11px !important;
  color: var(--apt-rl-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Separator dots — HivePress uses background-color on ::after pseudo-elements */
body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__details--primary > *::after {
  background-color: var(--apt-rl-border) !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__details--primary a {
  color: var(--apt-rl-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__details--primary a:hover {
  color: var(--apt-rl-blue) !important;
}

/* ── Secondary attributes (location row) ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--secondary {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Neutralise the hp-row gutters added by HivePress inside secondary attributes */
body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--secondary .hp-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--secondary [class*="hp-col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--secondary .hp-listing__attribute {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 11px !important;
}

/* Location line — child theme override outputs .hp-request__location / .hp-listing__location */
body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__location,
body.hp-template--requests-view-page .hp-listing--view-block .hp-request__location {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: var(--apt-rl-muted) !important;
  margin: 2px 0 0 !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__location .hp-icon,
body.hp-template--requests-view-page .hp-listing--view-block .hp-request__location .hp-icon {
  font-size: 10px !important;
  color: var(--apt-rl-muted-light) !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

/* ── Card footer — right column on desktop ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__footer {
  flex: 0 0 188px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 16px !important;
  margin: 0 !important;
  border-top: none !important;
  border-left: 1px solid #EAECF0 !important;
  background: #F2FAF6 !important;
}

/* ── Budget / primary attributes — stacked in right column ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary::before {
  display: none !important;
}

/* Budget amount or "Flexible Budget" label — dominant, green */
body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--apt-rl-green) !important;
  line-height: 1.25 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Status labels ("Flexible Budget", "Open to Offers", "Ready to Start") —
   HivePress renders all of these as one combined --project-badges element.
   Pill shape so it reads as an intentional status tag, not raw text. */
body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute--project-badges {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--apt-rl-green) !important;
  background: var(--apt-rl-green-light) !important;
  border: 1px solid rgba(31, 163, 74, 0.2) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

/* ── Actions area ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__actions--primary {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Make an Offer button — full-width inside right column ── */

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__action--offer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 12px !important;
  background: var(--apt-rl-green) !important;
  color: var(--apt-rl-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: background 0.15s ease !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__action--offer:hover {
  background: var(--apt-rl-green-dark) !important;
  color: var(--apt-rl-white) !important;
}

/* Hide icon; inject visible text label via ::after */
body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__action--offer .hp-icon {
  display: none !important;
}

body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__action--offer::after {
  content: "Make an Offer";
}

/* ============================================================
   SIDEBAR FILTER — CSS-only polish
   ============================================================ */

/* ── Widget card shell — no padding; managed inside ── */
body.hp-template--requests-view-page .hp-widget--listing-filter {
  border-radius: 10px !important;
  border: 1px solid var(--apt-rl-border) !important;
  box-shadow: 0 1px 6px rgba(16, 24, 40, 0.05) !important;
  overflow: hidden !important;
  background: var(--apt-rl-white) !important;
  padding: 0 !important;
}

/* ── "FILTERS" panel title — full-width header band ── */
body.hp-template--requests-view-page .hp-widget--listing-filter::before {
  content: "Filters";
  display: block;
  padding: 12px 20px 11px;
  font-size: 11px;
  font-weight: 700;
  color: var(--apt-rl-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--apt-rl-border-light);
  border-bottom: 1px solid var(--apt-rl-border);
}

/* ── Modal wrapper — ensure no extra chrome ──
   APT-FILTER-UI-2B: added max-width/box-sizing. HivePress core's own
   base rule is .hp-modal{width:380px} (a small, sane popup size), with
   .hp-modal--mobile only swapping to width:auto at min-width:48em (see
   common.min.css). Rendered width is always min(width, max-width), so
   capping max-width here guarantees this panel can never render wider
   than its container — in its normal in-page position above the
   results, or if HivePress's mobile Filter button ever presents it as
   a popup — regardless of which width value is in effect. This is what
   stops the "stretches across the page" state; box-sizing keeps its
   own padding from pushing past that cap. */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-modal {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Form — remove default margins ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form {
  margin: 0 !important;
}

/* ── Fields area — uniform padding ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form__fields {
  padding: 16px 20px 4px !important;
}

/* ── "CATEGORY" section label above the radio list ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form__field--radio::before {
  content: "Category";
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--apt-rl-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── Reset browser list chrome on all radio ULs ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--radio ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Nested category list — slight indent ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--radio > ul > li > ul {
  padding-left: 6px !important;
  margin-top: 2px !important;
}

/* ── List items — minimal gap ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--radio ul li {
  margin-bottom: 1px !important;
}

/* ── Labels — flex row, hover highlight ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--radio ul li label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--apt-rl-text) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
  margin: 0 !important;
}

body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--radio ul li label:hover {
  background: var(--apt-rl-border-light) !important;
}

/* "All Categories" top-level item — slightly bolder */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--radio > ul > li > label {
  font-weight: 600 !important;
}

/* ── Radio inputs — brand accent, tidy top-align ── */
body.hp-template--requests-view-page .hp-widget--listing-filter input[type="radio"] {
  accent-color: var(--apt-rl-green) !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  margin: 2px 0 0 !important;
  vertical-align: top !important;
  cursor: pointer !important;
}

/* ── Form footer — button wrapper ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form__footer {
  padding: 0 20px 18px !important;
}

/* ── Filter button — refined sizing and shadow ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form__button.button-primary {
  width: 100% !important;
  height: 42px !important;
  margin-top: 8px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 1px 4px rgba(31, 163, 74, 0.20) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}

/* ── Filter button colour — brand green ── */
body.hp-template--requests-view-page .hp-form__button.button-primary {
  background-color: var(--apt-rl-green) !important;
  border-color: var(--apt-rl-green) !important;
  color: #ffffff !important;
}

body.hp-template--requests-view-page .hp-form__button.button-primary:hover,
body.hp-template--requests-view-page .hp-form__button.button-primary:focus {
  background-color: var(--apt-rl-green-dark) !important;
  border-color: var(--apt-rl-green-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(31, 163, 74, 0.28) !important;
}

/* Minimap — hidden: no Mapbox tokens, Map View covers this */
body.hp-template--requests-view-page .hp-page__sidebar .hp-map {
  display: none !important;
}

/* ============================================================
   BUDGET RANGE SLIDER — CSS-only polish
   ============================================================ */

/* ── Section separator between category radios and budget ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form__field--number-range {
  border-top: 1px solid var(--apt-rl-border-light);
  margin-top: 16px;
  padding-top: 14px;
}

/* ── "BUDGET" label — strip uppercase, muted caps ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-form__field--number-range .hp-field__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--apt-rl-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 10px !important;
}

/* ── Number inputs — visible border, subtle fill ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .hp-field--number-range input[type="number"] {
  border: 1px solid var(--apt-rl-border) !important;
  background: var(--apt-rl-border-light) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: var(--apt-rl-text) !important;
}

/* ── Slider track ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .ui-slider {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 4px !important;
}

/* ── Slider range fill — brand green ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .ui-slider-range {
  background: var(--apt-rl-green) !important;
}

/* ── Slider handle — circular, green border ── */
body.hp-template--requests-view-page .hp-widget--listing-filter .ui-slider-handle {
  border-color: var(--apt-rl-green) !important;
  border-radius: 50% !important;
}

/* ============================================================
   APT-FILTER-UI-2F — filter panel hidden by default, all widths
   Supersedes the old ARCHIVE-FILTERS-TOP-1A "always-open panel
   above results on desktop" pattern, which was the source of the
   oversized filter block pushing results down. HivePress core
   already hides .hp-widget--listing-filter below 47.99em
   (frontend.min.css) in favour of the Filter button + Fancybox
   modal; this extends that same hidden-by-default state to every
   width, so the compact Filter trigger + modal is now the one
   consistent disclosure pattern everywhere, not just on mobile.
   The widget/modal markup itself is untouched — hiding the
   ancestor .hp-page__sidebar does not prevent Fancybox from still
   finding and cloning #request_filter_modal by id when the Filter
   button is clicked (same mechanism already proven on mobile).
   Content then takes the full row width instead of the old 66%
   two-column split. */
body.hp-template--requests-view-page .hp-page__sidebar {
  display: none !important;
}

body.hp-template--requests-view-page .hp-page__content.hp-col-sm-8 {
  flex-basis: 100%;
  max-width: 100%;
}

/* ── Filter trigger — compact pill, >=48em ──
   Same em-based threshold as the mobile block below (core's own
   .hp-modal--mobile{width:auto} swap), so the button never has a
   width gap at any zoom level. Icon + label, bordered pill — matches
   the visual weight of the /services/ "Filters" disclosure trigger. */
@media (min-width: 48em) {
  body.hp-template--requests-view-page .hp-page__header .hp-button--listing-filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 16px !important;
    background: var(--apt-rl-white) !important;
    border: 1.5px solid var(--apt-rl-border) !important;
    color: var(--apt-rl-text) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.05) !important;
    transition: border-color 0.15s ease, color 0.15s ease !important;
  }

  body.hp-template--requests-view-page .hp-page__header .hp-button--listing-filter:hover {
    border-color: var(--apt-rl-green) !important;
    color: var(--apt-rl-green) !important;
  }

  body.hp-template--requests-view-page .hp-page__header .hp-button--listing-filter .hp-icon {
    font-size: 13px !important;
    color: var(--apt-rl-green) !important;
  }
}

/* ── Minimum page gutter — guarantees content never sits flush
   against the browser edge, independent of the theme's own
   .hp-page margin, which drops to 0 below its container breakpoint. */
body.hp-template--requests-view-page .hp-page {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

body.hp-template--requests-view-page .hp-page__pagination {
  margin-top: 24px;
}

/* ============================================================
   MOBILE — revert cards to vertical layout below 768px

   APT-FILTER-UI-2B: max-width:47.99em matches HivePress core's own
   breakpoint for hiding .hp-widget--listing-filter in its normal
   position in favour of the mobile Filter button + modal
   (frontend.min.css, "max-width:47.99em"). Previously this block used
   max-width:768px, which overlaps by a hair with the desktop block's
   min-width:768px above — at exactly 768px both rulesets could apply
   at once. Using core's own two distinct thresholds (47.99em / 48em)
   instead of one shared px value removes that overlap entirely.
   ============================================================ */

@media ( max-width: 47.99em ) {

  /* Filter button — full-width, AskPerTask green (mobile only; the
     compact desktop pill variant lives in the >=48em block below) */
  body.hp-template--requests-view-page .hp-page__header .hp-button--listing-filter {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    background: var(--apt-rl-green) !important;
    border: 1.5px solid var(--apt-rl-green) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
  }

  body.hp-template--requests-view-page .hp-page__header .hp-button--listing-filter:hover {
    background: var(--apt-rl-green-dark) !important;
    border-color: var(--apt-rl-green-dark) !important;
  }

  /* Hero: stack title/subtitle above toggle on mobile */
  body.hp-template--requests-view-page .apt-requests-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 20px 20px 18px;
    margin-bottom: 1.25rem;
    border-radius: 10px;
  }

  body.hp-template--requests-view-page .apt-hero__title {
    font-size: 1.375rem;
  }

  body.hp-template--requests-view-page .apt-hero__subtitle {
    font-size: 0.875rem;
  }

  /* Card: revert to vertical stack */
  body.hp-template--requests-view-page .hp-listing--view-block {
    flex-direction: column !important;
  }

  /* Image: full-width banner at top of stacked card */
  body.hp-template--requests-view-page .hp-listing--view-block .apt-card-img {
    flex: 0 0 120px !important;
    min-height: 0 !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--apt-rl-border) !important;
  }

  /* Footer: revert tint on mobile — horizontal strip looks cleaner without it */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__footer {
    background: transparent !important;
    border-left: none !important;
    border-top: 1px solid var(--apt-rl-border-light) !important;
  }

  /* Trust strip: compact on mobile */
  body.hp-template--requests-view-page .hp-listing--view-block .apt-req-strip {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }

  /* Content: compact padding */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__content {
    padding: 12px 14px 12px !important;
  }

  /* Excerpt: allow one extra line on narrow screens */
  body.hp-template--requests-view-page .hp-listing--view-block .apt-request-excerpt {
    -webkit-line-clamp: 3;
    margin: 5px 0 8px;
  }

  /* Footer: return below content as horizontal row */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__footer {
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-left: none !important;
    border-top: 1px solid var(--apt-rl-border-light) !important;
    padding: 10px 14px 12px !important;
    gap: 8px !important;
  }

  /* Budget attributes: horizontal wrap in mobile footer */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary {
    flex: 1 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Budget amount: smaller on mobile */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  /* Status labels: compact chip on mobile */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute--project-badges {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--apt-rl-muted) !important;
    background: var(--apt-rl-border-light) !important;
    border: 1px solid var(--apt-rl-border) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    line-height: 1.4 !important;
  }

  /* Actions: horizontal row */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__actions--primary {
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  /* Button: compact tap target on mobile */
  body.hp-template--requests-view-page .hp-listing--view-block .hp-listing__action--offer {
    width: auto !important;
    min-width: 90px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }

}