/* Public site v2 — atoms.
   Ported from docs/mockups/PublicDesignSystem/components (Button, Badge,
   RatingBadge, PropertyCard, Avatar, GuestFeedback, HelpfulVote .jsx files).
   Unprefixed (S227-EXEC-1 Seq #13): legacy public/css and this file never
   load on the same page (separate routes/templates), so a defensive ``
   namespace bought nothing — this is the real, final class-name source of
   truth going forward. Requires public-tokens.css loaded first. */

/* Screen-reader-only (S227-EXEC-1 Seq #75) — keeps a real heading in the
   DOM/accessibility tree for correct level order without a redundant
   on-screen duplicate of copy a nearby visible heading already covers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Button */
.btn{font-family:var(--font-sans);font-weight:600;border-radius:var(--radius-pill);border:0.0625rem solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);box-sizing:border-box;text-decoration:none;outline:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(0.97)}
.btn:focus-visible{box-shadow:var(--shadow-focus)}
.btn--sm{padding:0.5625rem 1rem;font-size:0.8125rem;min-height:2.25rem}
.btn--md{padding:0.8125rem 1.25rem;font-size:0.875rem;min-height:2.75rem}
.btn--lg{padding:0.9375rem 1.625rem;font-size:0.9375rem;min-height:3rem}
.btn--primary{background:var(--action-primary);color:var(--text-on-gold)}
.btn--primary:hover:not(:disabled){background:var(--action-primary-hover)}
.btn--secondary{background:var(--action-secondary);color:var(--white)}
.btn--secondary:hover:not(:disabled){background:var(--action-secondary-hover)}
.btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--outline:hover:not(:disabled){background:var(--surface-sunken)}
.btn--outline[aria-current="page"]{background:var(--action-primary);color:var(--text-on-gold);border-color:transparent} /* DA275.6: a link to the page you are on */
.btn--ghost{background:transparent;color:var(--text-primary)}
.btn--ghost:hover:not(:disabled){background:var(--surface-sunken)}
.btn--whatsapp{background:var(--action-whatsapp);color:var(--white)}
.btn--whatsapp:hover:not(:disabled){background:oklch(44% 0.13 152)}
/* On-navy variant (hero outline CTA on a dark panel) */
.btn--outline-on-navy{background:transparent;border-color:var(--text-on-navy);color:var(--text-on-navy)}
.btn--outline-on-navy:hover:not(:disabled){background:color-mix(in oklch, var(--text-on-navy) 10%, transparent)}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:0.1875rem 0.625rem;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:0.75rem;font-weight:600}
.badge--highlight{background:var(--status-highlight-bg);color:var(--status-highlight-fg)}
.badge--success{background:var(--status-success-bg);color:var(--status-success-fg)}
.badge--error{background:var(--status-error-bg);color:var(--status-error-fg)}
.badge--neutral{background:var(--surface-sunken);color:var(--text-secondary)}

/* RatingBadge — static-cosmetic (no Review model backs this, see
   docs/reports/public-website/S227-EXEC-1_home-page-schema-classification.md) */
.rating{display:inline-flex;align-items:center;gap:0.375rem;font-family:var(--font-sans);font-size:0.8125rem;color:var(--text-primary)}
.rating__star{color:var(--gold-500)}
.rating__muted{color:var(--text-muted)}

/* PropertyCard */
.property-card{display:block;text-decoration:none;color:inherit;width:100%;border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-standard);font-family:var(--font-sans)}
.property-card:hover{box-shadow:var(--shadow-elevated)}
.property-card__media{position:relative;aspect-ratio:var(--aspect-video);background:var(--gray-300);display:flex;align-items:flex-start;justify-content:flex-end;padding:0.625rem}
.property-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.property-card__badge{padding:0.1875rem 0.625rem;border-radius:var(--radius-pill);background:var(--status-highlight-bg);color:var(--status-highlight-fg);font-size:0.75rem;font-weight:600}
.property-card__body{padding:0.875rem 1rem}
.property-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.property-card__title{font-family:var(--font-serif);font-size:1.0625rem;color:var(--text-primary);margin:0}
.property-card__rating{font-size:0.8125rem;color:var(--text-secondary);flex:none}
.property-card__location{font-size:0.8125rem;color:var(--text-muted);margin-top:0.25rem}
.property-card__price{font-size:0.875rem;color:var(--text-primary);font-weight:600;margin-top:0.625rem}
.property-card__price-unit{color:var(--text-muted);font-weight:400}

/* Avatar */
.avatar{border-radius:50%;background:var(--terracotta-100);color:var(--terracotta-600);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:600;flex-shrink:0}

/* GuestFeedback (testimonial card) — static-cosmetic */
.feedback-card{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem;width:100%;font-family:var(--font-sans)}
.feedback-card__quote{color:var(--text-secondary);font-size:0.875rem;line-height:var(--lh-loose);margin:0}
.feedback-card__by{display:flex;align-items:center;gap:0.625rem;margin-top:0.25rem}
.feedback-card__name{font-size:0.8125rem;font-weight:600;color:var(--text-primary)}

/* HelpfulVote — static-cosmetic, no vote persists server-side */
.helpful{display:flex;align-items:center;gap:0.625rem;font-family:var(--font-sans)}
.helpful__question{font-size:0.8125rem;color:var(--text-muted)}
.vote-btn{display:flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;border-radius:var(--radius-pill);border:0.0625rem solid var(--border-default);background:var(--surface-card);cursor:pointer;font-family:var(--font-sans);font-size:0.8125rem;color:var(--text-primary)}
.vote-btn:hover{background:var(--surface-sunken)}
.vote-btn[aria-pressed="true"]{border-color:var(--border-strong);background:var(--surface-sunken)}
.vote-btn[aria-pressed="true"] svg{fill:var(--action-primary);stroke:var(--action-primary)}

/* Surface helpers used directly by page layout */
.surface-card{background:var(--surface-card);border:0.0625rem solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.container{max-width:75rem;margin:0 auto}

/* ListingCard (Listing Grid v2, S227-EXEC-1 Seq #12) — a distinct card
   variant from property-card: ported from Listing Grid.dc.html's own
   card shape (full-bleed photo, spec-chip row, price+CTA footer, no
   locality-badge photo overlay). Deliberately not a modification of
   property-card, which Home's build already depends on. */
.listing-card{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;font-family:var(--font-sans)}
.listing-card__media{position:relative;aspect-ratio:var(--aspect-video);background:var(--gray-300)}
.listing-card__media img{width:100%;height:100%;object-fit:cover;display:block}
/* BT-272.1: caption on a stand-in image (type master photo / brand placeholder) so it never poses as the unit's own photo. */
.pd-hero__media{position:relative}
.photo-fallback-label{position:absolute;left:0.5rem;bottom:0.5rem;max-width:calc(100% - 1rem);padding:0.1875rem 0.5rem;border-radius:var(--radius-pill);background:color-mix(in oklch,var(--navy-900) 80%,transparent);color:var(--white);font-family:var(--font-sans);font-size:0.6875rem;font-weight:600;line-height:1.3;pointer-events:none}
.listing-card__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.listing-card__title{font-family:var(--font-serif);font-size:1.0625rem;margin:0 0 var(--space-1)}
.listing-card__location{font-size:var(--text-caption);color:var(--text-muted)}
.listing-card__location--pending{font-style:italic}
.listing-card__specs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.listing-card__footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-2)}
.listing-card__price{font-size:var(--text-body);font-weight:600;color:var(--text-primary)}
.listing-card__price-unit{color:var(--text-muted);font-weight:400}
.listing-card__link{font-weight:600;font-size:var(--text-body-sm);white-space:nowrap;text-decoration:none}

/* NavToggle (S231-EXEC-4) — icon-only hamburger/close button for a collapsing
   nav. Hidden by default; the page stylesheet reveals it at the breakpoint
   where its nav collapses (public.css, header block). On-navy colours: it
   lives on the navy header. Icon swaps on aria-expanded, so the visual state
   can never disagree with the announced state. 2.75rem = 44px touch target. */
.nav-toggle{display:none;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;margin:0 calc(-1 * var(--space-2)) 0 0;padding:0;background:transparent;border:0;border-radius:var(--radius-md);color:var(--text-on-navy);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-toggle:hover{background:color-mix(in oklch, var(--text-on-navy) 10%, transparent)}
.nav-toggle:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.nav-toggle svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* display is set ONLY on the two icon classes, never on the bare `svg` rule:
   an earlier `.nav-toggle svg{display:block}` (0,1,1) out-ranked
   `.nav-toggle__close{display:none}` (0,1,0), so both icons rendered while closed. */
.nav-toggle__open{display:block}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

/* S251 BT-183: environment banner (shared partial
   static/shared/partials/env-banner.css) mapped to this stack's own tokens.
   The public site is light-only. Contrast --text-primary on --gold-100:
   14.8:1. */
:root{--env-banner-bg:var(--gold-100);--env-banner-fg:var(--text-primary);--env-banner-accent:var(--gold-500)}
/* Horizontal scroller (DA275.6): the Calendar family's .h-scroller in public tokens, for the Help chapter strip. */
.h-scroller{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.h-scroller__track{display:flex;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.h-scroller__track::-webkit-scrollbar{display:none}
.h-scroller__nav{width:2rem;height:2rem;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:0.0625rem solid var(--border-default);background:var(--surface-card);color:var(--text-muted);font-size:1.125rem;cursor:pointer}
.h-scroller__nav:hover{background:var(--surface-sunken);color:var(--text-primary)}
.h-scroller__nav:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.h-scroller__nav[hidden]{display:none}