/* Subtle Gradient design system — plain-CSS ports of the React components, for the vanilla-JS app.
   Requires /ds/styles.css first. Class names mirror the component names:
   Button -> .sg-btn, PillTag -> .sg-pill, Card -> .sg-card, ListingCard -> .sg-listing, NavBar -> .sg-nav, Footer -> .sg-footer */

.sg-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.sg-eyebrow{font:var(--font-micro-cap);letter-spacing:var(--tracking-micro-cap);text-transform:uppercase;color:var(--text-muted)}

/* Button — always pill */
.sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);box-sizing:border-box;min-height:var(--control-min-height);padding:var(--control-pad);margin:0;border-radius:var(--radius-pill);border:1px solid var(--action-primary-bg);background:var(--action-primary-bg);color:var(--action-primary-fg);font:var(--font-button-md);letter-spacing:var(--tracking-button-md);text-decoration:none;white-space:nowrap;cursor:pointer;transition:var(--transition-colors);-webkit-tap-highlight-color:transparent}
.sg-btn:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.sg-btn:active{background:var(--action-primary-bg-press);border-color:var(--action-primary-bg-press)}
.sg-btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.sg-btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg);border-color:var(--action-secondary-border)}
.sg-btn--secondary:hover{background:var(--action-secondary-bg-hover);color:var(--action-secondary-fg-hover);border-color:var(--action-secondary-fg-hover)}
.sg-btn--secondary:active{background:var(--action-secondary-bg-press);color:var(--action-secondary-fg-press);border-color:var(--action-secondary-fg-press)}
.sg-btn--sm{font:var(--font-button-sm);letter-spacing:var(--tracking-button-sm);min-height:34px;padding:6px 14px}
.sg-btn--block{display:flex;width:100%}
.sg-btn[aria-disabled="true"],.sg-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* PillTag */
.sg-pill{display:inline-flex;align-items:center;gap:var(--space-xs);box-sizing:border-box;padding:4px 8px;border-radius:var(--radius-pill);background:var(--tag-soft-bg);color:var(--tag-soft-fg);font:var(--font-micro-cap);letter-spacing:var(--tracking-micro-cap);text-transform:uppercase;white-space:nowrap}
.sg-pill--dark{background:var(--color-navy);color:#fff}

/* Card */
.sg-card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}

/* Nav (transparent over the mesh) */
.sg-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-xl) 0}
.sg-nav__logo img{display:block;height:28px;width:auto}
.sg-nav__links{display:flex;align-items:center;gap:var(--space-xl)}
.sg-nav__link{font:var(--font-body-md);letter-spacing:var(--tracking-body-md);color:var(--text-nav);text-decoration:none}
.sg-nav__link:hover{color:var(--text-body)}
@media (max-width:767px){.sg-nav__link{display:none}.sg-nav__logo img{height:22px}}

/* Hero with gradient mesh */
.sg-hero{position:relative;isolation:isolate;background:var(--gradient-mesh)}

/* Listing card */
.sg-listing{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1);transition:var(--transition-colors),box-shadow 150ms ease;color:var(--text-body)}
.sg-listing:hover{box-shadow:var(--shadow-2)}
.sg-listing__photo{position:relative;aspect-ratio:4/3;background:var(--surface-band) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--color-fog)}
.sg-listing__tag{position:absolute;top:12px;left:12px}
.sg-listing__body{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-lg) var(--space-xl) var(--space-xl);flex:1}
.sg-listing__price{font:var(--font-heading-lg);letter-spacing:var(--tracking-heading-lg);font-feature-settings:var(--features-tabular);color:var(--text-heading)}
.sg-listing__meta{font:var(--font-caption);letter-spacing:var(--tracking-caption);font-feature-settings:var(--features-tabular);color:var(--text-secondary)}
.sg-listing__facts{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-top:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--border-hairline)}

/* Footer (light) */
.sg-footer{border-top:1px solid var(--border-hairline);padding:var(--space-huge) 0 var(--space-xxl);font:var(--font-caption);letter-spacing:var(--tracking-caption);color:var(--text-muted)}
.sg-footer a{color:var(--text-secondary)}
.sg-footer a:hover{color:var(--text-body)}