/* GoYatchify Listings Grid — all colours/fonts/layout come from --lg-* vars (Settings) */
.gy-lg { background: var(--lg-bg); padding: 64px 0; }
.gy-lg, .gy-lg * { box-sizing: border-box; }
.gy-lg__wrap { max-width: var(--lg-maxw, 1240px); margin: 0 auto; padding: 0 24px; font-family: var(--lg-bfont); color: var(--lg-text); }

/* Heading */
.gy-lg__head { text-align: center; margin-bottom: 28px; }
.gy-lg__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-accent); margin-bottom: 8px; }
.gy-lg__title { font-family: var(--lg-hfont); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; color: var(--lg-heading); margin: 0; }

/* Toolbar */
.gy-lg__bar { background: var(--lg-surface); border: 1px solid var(--lg-border); border-radius: 18px; padding: 18px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.gy-lg__search { position: relative; flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; }
.gy-lg__search svg { position: absolute; left: 14px; color: var(--lg-muted); }
.gy-lg-search { width: 100%; padding: 11px 14px 11px 40px; background: color-mix(in srgb, var(--lg-bg) 60%, transparent); border: 1px solid var(--lg-border); border-radius: 12px; color: var(--lg-text); font-size: 14px; font-family: inherit; }
.gy-lg-search::placeholder { color: var(--lg-muted); }
.gy-lg__controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gy-lg__controls select { appearance: none; -webkit-appearance: none; padding: 11px 34px 11px 14px; background: color-mix(in srgb, var(--lg-bg) 60%, transparent) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e95bb' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--lg-border); border-radius: 12px; color: var(--lg-text); font-size: 14px; font-family: inherit; cursor: pointer; }
.gy-lg__controls select option { background: var(--lg-surface); color: var(--lg-text); }
.gy-lg-search:focus, .gy-lg__controls select:focus { outline: none; border-color: var(--lg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 30%, transparent); }
.gy-lg-reset { display: inline-flex; align-items: center; gap: 6px; padding: 11px 14px; background: color-mix(in srgb, var(--lg-bg) 60%, transparent); border: 1px solid var(--lg-border); border-radius: 12px; color: var(--lg-muted); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: .2s; }
.gy-lg-reset:hover { background: var(--lg-accent); color: var(--lg-accent-ink); border-color: var(--lg-accent); }

/* Stats */
.gy-lg__stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--lg-muted); margin: 16px 2px 30px; }
.gy-lg__stats strong { color: var(--lg-heading); }
.gy-lg__legend { display: inline-flex; gap: 16px; align-items: center; }
.gy-lg__legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot--g { background: #10b981; } .dot--b { background: #3b82f6; }

/* Grid */
.gy-lg__grid { display: grid; grid-template-columns: repeat(var(--lg-cols), 1fr); gap: 24px; }

/* Card */
.gy-lg-card { background: var(--lg-surface); border: 1px solid var(--lg-border); border-radius: var(--lg-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s, border-color .3s; }
.gy-lg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--lg-accent) 40%, var(--lg-border)); }

.gy-lg-card__media { position: relative; aspect-ratio: var(--lg-aspect); background: color-mix(in srgb, var(--lg-bg) 70%, #000); overflow: hidden; }
.gy-lg-card__imglink { display: block; width: 100%; height: 100%; }
.gy-lg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gy-lg-card:hover .gy-lg-card__media img { transform: scale(1.05); }
.gy-lg-card__ph { width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: color-mix(in srgb, var(--lg-accent) 60%, transparent); display: flex; }
.gy-lg-card__ph span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--lg-muted); }

.gy-lg-card__tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 11px; background: white; color: var(--lg-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--lg-border); border-radius: 8px; }
.gy-lg-fav { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 29px; display: flex; align-items: center; justify-content: center; background: white; backdrop-filter: blur(6px); border: 1px solid var(--lg-border); border-radius: 10px; color: #0073ff; cursor: pointer; transition: .2s; }
.gy-lg-fav:hover { color: #0b1f6f; }
.gy-lg-fav.is-fav { color: #0b1f6f; }
.gy-lg-fav.is-fav svg { fill: #0b1f6f; }

.gy-lg-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.gy-lg-card__broker { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.gy-lg-card__broker i { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--lg-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--lg-accent) 40%, transparent); color: var(--lg-accent); flex: 0 0 auto; }
.gy-lg-card__broker span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lg-muted); }

.gy-lg-card__name { font-family: var(--lg-hfont); font-size: var(--lg-title); font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.gy-lg-card__name a { color: var(--lg-heading); text-decoration: none; transition: color .2s; }
.gy-lg-card__name a:hover { color: var(--lg-accent); }
.gy-lg-card__loc { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--lg-muted); margin: 0 0 16px; }

.gy-lg-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--lg-border); border-bottom: 1px solid var(--lg-border); margin-bottom: 16px; }
.gy-lg-card__specs div { display: flex; justify-content: space-between; font-size: 12px; }
.gy-lg-card__specs span { color: var(--lg-muted); }
.gy-lg-card__specs b { color: var(--lg-text); font-weight: 600; }

.gy-lg-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gy-lg-card__price { font-family: var(--lg-hfont); font-size: 18px; font-weight: 700; color: var(--lg-heading); letter-spacing: -.01em; }
.gy-lg-card__cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--lg-accent); border: 1px solid var(--lg-accent); color: #fff !important; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; transition: .2s; }
.gy-lg-card__cta:hover { filter: brightness(.93); color: #fff !important; box-shadow: 0 4px 14px rgba(0,115,255,.3); }
.gy-lg-card__cta svg { stroke: #fff; }

/* Empty */
.gy-lg__empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--lg-border); border-radius: 18px; }
.gy-lg__empty h3 { font-family: var(--lg-hfont); color: var(--lg-heading); margin: 0 0 8px; }
.gy-lg__empty p { color: var(--lg-muted); margin: 0; }

/* Pagination */
.gy-lg__pager { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.gy-lg-pg { min-width: 40px; height: 40px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--lg-border); border-radius: 12px; color: var(--lg-text); font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; transition: .2s; }
.gy-lg-pg:hover:not(:disabled):not(.is-active) { background: color-mix(in srgb, var(--lg-surface) 80%, #000); }
.gy-lg-pg.is-active { background: var(--lg-accent); border-color: var(--lg-accent); color: var(--lg-accent-ink); }
.gy-lg-pg:disabled { opacity: .4; cursor: default; }

@media (max-width: 1024px) { .gy-lg__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .gy-lg__grid { grid-template-columns: 1fr; }
  .gy-lg__bar { flex-direction: column; align-items: stretch; }
  .gy-lg__search { max-width: none; }
  .gy-lg__controls { justify-content: space-between; }
  .gy-lg__controls select { flex: 1 1 auto; }
}