/* Location groups — the host's venue editor (/listings/groups*), its owner-only preview, the
   group page body (components/location-group/page-body, reused by the public group page) and
   the group chips on My listings.

   Loaded per page through the styles stack, which renders ABOVE app.min.css and the inlined
   redesign tokens — so an override of a shared primitive (.sa-btn) needs a MORE specific
   selector, never just a later one (frontend-client/CLAUDE.md, "Tap-target media queries").
   Colours, type and buttons consume the tokens in public/css/redesign-tokens.css. */

.lg-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    font-family: var(--sa-font-body);
    color: var(--sa-ink);
}

@media (min-width: 768px) {
    .lg-page { padding: 32px 24px 80px; }
}

.lg-page *, .lg-page *::before, .lg-page *::after { box-sizing: border-box; }

/* 44px tap targets on phones; .sa-btn ships 43px (one pixel short). */
.lg-page .sa-btn { min-height: 44px; }
.lg-page .sa-btn--sm { min-height: 36px; padding: 0 12px; font-size: 14px; }

@media (pointer: coarse), (max-width: 767.98px) {
    .lg-page .sa-btn--sm { min-height: 44px; }
}

/* — page head ——————————————————————————————————————————————————————— */
.lg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.lg-head__text { min-width: 0; flex: 1 1 320px; }

.lg-title {
    font-size: clamp(30px, 6vw, 44px);
    overflow-wrap: anywhere;
    margin: 6px 0 8px;
}

.lg-lead {
    margin: 0;
    max-width: 680px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sa-muted);
}

.lg-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.lg-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sa-ink);
    text-decoration: none;
}

.lg-back:hover { color: var(--sa-red); }

/* — notices ———————————————————————————————————————————————————————— */
.lg-alert {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 3px solid var(--sa-red);
    background: #FEF3F2;
    font-size: 13px;
    line-height: 1.5;
}

.lg-alert p { margin: 0; }
.lg-alert__title { font-weight: 600; margin-bottom: 4px !important; }

.lg-note {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--sa-surface);
    box-shadow: inset 0 0 0 1px var(--sa-divider);
    font-size: 13px;
    line-height: 1.5;
}

/* — chips —————————————————————————————————————————————————————————— */
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--sa-surface);
    box-shadow: inset 0 0 0 1px var(--sa-divider-strong);
    color: var(--sa-ink);
    overflow-wrap: anywhere;
}

.lg-chip--ok { background: #ECFDF3; box-shadow: inset 0 0 0 1px #ABEFC6; color: var(--sa-ok); }
.lg-chip--warn { background: #FFFAEB; box-shadow: inset 0 0 0 1px #FEDF89; color: var(--sa-warn); }
.lg-chip--bad { background: #FEF3F2; box-shadow: inset 0 0 0 1px #FECDCA; color: #B42318; }
.lg-chip--ink { background: var(--sa-ink); box-shadow: none; color: #fff; }
.lg-chip--muted { color: var(--sa-muted); }

a.lg-chip { text-decoration: none; }
a.lg-chip:hover { box-shadow: inset 0 0 0 1px var(--sa-ink); }

/* — publication panel —————————————————————————————————————————————— */
.lg-publication {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    margin-bottom: 24px;
    background: var(--sa-surface);
    box-shadow: inset 0 0 0 1px var(--sa-divider);
}

.lg-publication--public { box-shadow: inset 3px 0 0 var(--sa-ok), inset 0 0 0 1px var(--sa-divider); }
.lg-publication--not_eligible { box-shadow: inset 3px 0 0 var(--sa-warn), inset 0 0 0 1px var(--sa-divider); }
.lg-publication--hidden { box-shadow: inset 3px 0 0 #B42318, inset 0 0 0 1px var(--sa-divider); }
.lg-publication p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sa-muted); }

/* — index grid —————————————————————————————————————————————————————— */
.lg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 640px) { .lg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lg-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--sa-divider);
}

.lg-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--sa-divider-strong);
}

.lg-card__media img, .lg-card__media .cdn-image-wrapper { width: 100%; height: 100%; object-fit: cover; display: block; }

.lg-card__media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: var(--sa-muted);
}

.lg-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px; min-width: 0; }

.lg-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.lg-card__meta { margin: 0; font-size: 12px; color: var(--sa-muted); }

.lg-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--sa-divider);
}

.lg-card__actions form { margin: 0; }

.lg-empty {
    padding: 32px 20px;
    text-align: center;
    background: var(--sa-surface);
    box-shadow: inset 0 0 0 1px var(--sa-divider);
}

.lg-empty h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.lg-empty p { margin: 0 auto 16px; max-width: 520px; font-size: 14px; color: var(--sa-muted); }

/* — editor sections ————————————————————————————————————————————————— */
.lg-section {
    margin-bottom: 24px;
    padding: 20px 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--sa-divider);
    scroll-margin-top: calc(var(--sa-header-h, 73px) + 16px);
}

@media (min-width: 768px) { .lg-section { padding: 24px; } }

.lg-section[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.lg-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.lg-section__head > div { min-width: 0; flex: 1 1 260px; }
.lg-section__title { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.lg-section__lead { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sa-muted); }

/* — form fields ————————————————————————————————————————————————————— */
.lg-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

@media (min-width: 768px) {
    .lg-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-field--wide { grid-column: 1 / -1; }
}

.lg-field { min-width: 0; }
.lg-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.lg-req { color: var(--sa-red); }

.lg-input, .lg-select, .lg-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--sa-ink);
    background: #fff;
    border: 1px solid var(--sa-divider-strong);
    border-radius: 0;
}

.lg-textarea { min-height: 120px; resize: vertical; }

.lg-input:focus, .lg-select:focus, .lg-textarea:focus {
    outline: 2px solid var(--sa-ink);
    outline-offset: -1px;
}

.lg-input[aria-invalid="true"], .lg-select[aria-invalid="true"], .lg-textarea[aria-invalid="true"] { border-color: #B42318; }

.lg-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--sa-muted); }
.lg-errmsg { margin: 6px 0 0; font-size: 12px; color: #B42318; }

.lg-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Address autocomplete — the shared lwAddressSuggest combobox renders its rows with the
   `lg-suggest__item` class this page passes it. */
.lg-suggest-anchor { position: relative; }

.lg-suggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--sa-divider-strong);
    border-top: 0;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
}

.lg-suggest__item { padding: 12px; font-size: 13px; cursor: pointer; min-height: 44px; }
.lg-suggest__item + .lg-suggest__item { border-top: 1px solid var(--sa-divider); }
.lg-suggest__item:hover, .lg-suggest__item--active { background: var(--sa-surface); }
.lg-suggest__item--empty { color: var(--sa-muted); cursor: default; }
.lg-suggest__item--empty:hover { background: #fff; }
.lg-suggest__item--error, .lg-suggest__item--error:hover { color: #B42318; background: #FEF3F2; cursor: default; }

.lg-status { margin: 6px 0 0; font-size: 12px; color: var(--sa-muted); }
.lg-status[data-tone="ok"] { color: var(--sa-ok); }
.lg-status[data-tone="warn"] { color: var(--sa-warn); }

/* — member rows ————————————————————————————————————————————————————— */
.lg-members { list-style: none; margin: 0; padding: 0; }

.lg-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--sa-divider);
}

.lg-member:first-child { border-top: 0; }

.lg-member__thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 48px;
    overflow: hidden;
    background: var(--sa-divider-strong);
}

.lg-member__thumb img, .lg-member__thumb .cdn-image-wrapper { width: 100%; height: 100%; object-fit: cover; display: block; }

.lg-member__body { flex: 1 1 220px; min-width: 0; }

.lg-member__title {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sa-ink);
    overflow-wrap: anywhere;
    text-decoration: none;
}

a.lg-member__title:hover { text-decoration: underline; }

.lg-member__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.lg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--sa-divider-strong);
    color: var(--sa-ink);
    cursor: pointer;
}

.lg-icon-btn:hover:not(:disabled), .lg-icon-btn:focus-visible { border-color: var(--sa-ink); }
.lg-icon-btn:disabled { opacity: 0.35; cursor: default; }
.lg-icon-btn--danger:hover:not(:disabled) { border-color: #B42318; color: #B42318; }

@media (pointer: coarse), (max-width: 767.98px) {
    .lg-icon-btn { width: 44px; height: 44px; }
}

.lg-text-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--sa-divider-strong);
    color: var(--sa-ink);
    cursor: pointer;
}

.lg-text-btn:hover { border-color: var(--sa-ink); }
.lg-text-btn--danger:hover { border-color: #B42318; color: #B42318; }

@media (pointer: coarse), (max-width: 767.98px) {
    .lg-text-btn { min-height: 44px; }
}

/* — photos ———————————————————————————————————————————————————————— */
.lg-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) { .lg-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lg-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lg-photo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.lg-photo__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--sa-divider-strong);
}

.lg-photo__media img, .lg-photo__media .cdn-image-wrapper { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-photo__badge { position: absolute; top: 8px; left: 8px; }
.lg-photo__actions { display: flex; gap: 6px; }

.lg-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }

/* The file input is visually replaced by its label button but stays focusable. */
.lg-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.lg-upload__input:focus-visible + label { outline: 2px solid var(--sa-ink); outline-offset: 2px; }

.lg-progress { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lg-progress:empty { display: none; }
.lg-progress__row { font-size: 12px; min-width: 0; }
.lg-progress__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-progress__bar { height: 4px; margin-top: 4px; background: var(--sa-divider); }
.lg-progress__fill { height: 100%; width: 0; background: var(--sa-ink); transition: width 0.2s ease; }
.lg-progress__row[data-state="error"] { color: #B42318; }
.lg-progress__row[data-state="error"] .lg-progress__fill { background: #B42318; }

/* — pickers (Bootstrap modals) ——————————————————————————————————————— */
.lg-picker { list-style: none; margin: 0; padding: 0; }

.lg-picker__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 0;
    border-top: 1px solid var(--sa-divider);
    cursor: pointer;
}

.lg-picker__row:first-child { border-top: 0; }
.lg-picker__row input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--sa-ink); }
.lg-picker__row[data-disabled="1"] { cursor: default; opacity: 0.6; }
.lg-picker__text { min-width: 0; flex: 1; }
.lg-picker__title { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.lg-picker__meta { display: block; font-size: 12px; color: var(--sa-muted); }

/* — preview banner ——————————————————————————————————————————————————— */
.lg-preview-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--sa-ink);
    color: #fff;
    font-size: 13px;
}

.lg-preview-banner p { margin: 0; min-width: 0; flex: 1 1 280px; }

/* — group page body (shared with the public group page) ———————————————— */
.lg-body { min-width: 0; }
.lg-body__head { margin-bottom: 20px; }
.lg-body__name { font-size: clamp(32px, 7vw, 56px); overflow-wrap: anywhere; margin: 6px 0 8px; }
.lg-body__place { margin: 0; font-size: 14px; color: var(--sa-muted); }

.lg-body__cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--sa-divider-strong);
}

.lg-body__cover img, .lg-body__cover .cdn-image-wrapper { width: 100%; height: 100%; object-fit: cover; display: block; }

.lg-body__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

@media (min-width: 768px) { .lg-body__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lg-body__gallery li { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sa-divider-strong); }
.lg-body__gallery img, .lg-body__gallery .cdn-image-wrapper { width: 100%; height: 100%; object-fit: cover; display: block; }

.lg-body__description {
    max-width: 760px;
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.lg-body__spaces-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.lg-body__spaces-count { margin: 0 0 16px; font-size: 13px; color: var(--sa-muted); }

.lg-body__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 576px) { .lg-body__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .lg-body__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* — My listings strip ————————————————————————————————————————————————— */
.lg-listing-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--sa-divider);
    background: #fff;
    font-size: 12px;
}

.lg-listing-strip__label { font-weight: 600; color: var(--sa-muted); }
.lg-listing-tab-chips { margin-top: 6px; }

/* — public group page (pages/location-groups/show) ——————————————————————— */
.lg-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--sa-muted);
}

.lg-crumbs a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.lg-crumbs a:hover { color: var(--sa-red); }
.lg-crumbs__current { color: var(--sa-ink); min-width: 0; overflow-wrap: anywhere; }

/* WCAG 2.2 target size on phones: grow the hit area, not the visible text. */
@media (pointer: coarse), (max-width: 767.98px) {
    .lg-crumbs a { min-height: 44px; }
}

.lg-body__host { margin: 4px 0 0; font-size: 14px; color: var(--sa-ink); }
.lg-body__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.lg-body__actions-lead { margin: 0; min-width: 0; flex: 1 1 220px; font-size: 13px; color: var(--sa-muted); }

.lg-area { margin: 40px 0 0; }
.lg-area__place { margin: 4px 0 0; font-size: 14px; }
.lg-area__note { margin: 4px 0 0; font-size: 12px; color: var(--sa-muted); }

.lg-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 40px 0 0;
    padding: 20px;
    background: var(--sa-ink);
    color: #fff;
}

.lg-cta-band__lead { margin: 0; min-width: 0; flex: 1 1 260px; font-size: 15px; }

/* — inquiry modal (components/location-group/inquiry-modal) ————————————————
   The <form> sits between .modal-content and .modal-body; `display: contents` keeps .modal-body
   a DIRECT flex child, or app.min.css's phone bottom-sheet scroll contract goes inert
   (.claude/rules/frontend-client-mobile-overlays.md). Scoped to this modal by id. */
#lg-inquiry-modal .lg-inquiry__form { display: contents; }
#lg-inquiry-modal .modal-body { display: grid; gap: 16px; font-family: var(--sa-font-body); color: var(--sa-ink); }
#lg-inquiry-modal .modal-body > [data-lg-inquiry-fields] { display: grid; gap: 16px; min-width: 0; }
#lg-inquiry-modal .modal-body > [hidden] { display: none; }
#lg-inquiry-modal .sa-btn { min-height: 44px; }

.lg-inquiry__spaces { min-width: 0; margin: 0; padding: 0; border: 0; }
.lg-inquiry__spaces .lg-picker { max-height: 260px; overflow-y: auto; }
.lg-optional { font-weight: 400; color: var(--sa-muted); }
.lg-inquiry__privacy { margin: 0; }
.lg-inquiry__done { outline: none; }
.lg-inquiry__done-title { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.lg-inquiry__reference { margin: 8px 0 0; font-size: 14px; }

/* Spam traps (frontend-client/CLAUDE.md, "Contact-form spam filtering"). */
.lg-inquiry .form-hp1 { position: absolute; left: -9999px; top: -9999px; }
.lg-inquiry .form-hp2 { opacity: 0; height: 0; overflow: hidden; position: absolute; }