/* PM-03 C2: 生活布告栏 (Listings). Uses the shared design tokens from
   styles.css only; no global overrides. Mobile first. */

.listings-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.listings-page__heading {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.listings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 0.625rem;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.listings-button[hidden] {
  display: none;
}

.listings-button:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listings-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.listings-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.listings-button--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.listings-button--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  color: #ffffff;
}

.listings-button--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.listings-button--danger:hover:not(:disabled) {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-hover);
  color: var(--color-danger-hover);
}

/* Tabs */
.listings-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.listings-tabs[hidden] {
  display: none;
}

.listings-tabs::-webkit-scrollbar {
  display: none;
}

.listings-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.listings-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listings-tab--active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.listings-tab--active:hover {
  color: #ffffff;
}

.listings-note {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

/* Status */
.listings-status {
  padding: var(--space-6) 0;
  color: var(--color-text-secondary);
  text-align: center;
}

.listings-status[hidden] {
  display: none;
}

.listings-status--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-error);
}

/* Grid of cards */
.listings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  list-style: none;
}

.listings-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-6);
}

.listing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
}

.listing-card--link {
  height: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-card--link:hover,
.listing-card--link:focus-visible {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.listing-card--ended {
  opacity: 0.72;
}

.listing-card__badges,
.listing-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.listing-card__title {
  font-size: var(--font-size-card-title);
  font-weight: 600;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.listing-card__summary {
  font-weight: 600;
  color: var(--color-text);
}

.listing-card__meta {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

.listing-badge,
.listing-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-label);
  font-weight: 600;
}

.listing-badge {
  background: var(--color-primary-light);
  color: var(--color-primary-active);
}

.listing-badge--secondhand { background: #fdebd9; color: #8a4213; }
.listing-badge--volunteer { background: #e3f4ea; color: #1f6b43; }
.listing-badge--part_time { background: #ece6fb; color: #5a32a8; }

.listing-status-badge--active { background: var(--color-success-bg); color: var(--color-success); }
.listing-status-badge--closed,
.listing-status-badge--expired { background: var(--color-surface-subtle); color: #475569; }
.listing-status-badge--sold { background: #1e293b; color: #ffffff; }

/* Detail */
.listing-detail {
  max-width: var(--reading-width);
}

.listings-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.listings-back::before {
  content: "←";
  margin-right: 0.375rem;
}

.listing-detail__card {
  gap: var(--space-4);
  padding: var(--space-6);
}

.listing-detail__card[hidden] {
  display: none;
}

.listing-detail__title {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 700;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.listing-detail__meta {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

.listing-banner {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
}

.listing-banner[hidden] {
  display: none;
}

.listing-banner p:first-child {
  font-weight: 600;
}

.listing-banner--sold {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
}

.listing-banner__sub {
  margin-top: var(--space-1);
  font-size: var(--font-size-meta);
  opacity: 0.85;
}

.listing-facts {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
}

.listing-facts:empty {
  display: none;
}

.listing-facts dt {
  color: var(--color-text-secondary);
}

.listing-facts dd {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.listing-detail__section {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.listing-detail__section[hidden] {
  display: none;
}

.listing-detail__section-title {
  font-size: 1.0625rem;
  font-weight: 700;
}

.listing-detail__description {
  line-height: var(--line-height-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.listing-contact__message {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.listing-contact__message[hidden] {
  display: none;
}

.listing-contact__message--warn {
  color: var(--color-warning);
}

.listing-contact__list {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.listing-contact__list[hidden] {
  display: none;
}

.listing-contact__list dt {
  color: var(--color-text-secondary);
}

.listing-contact__list dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.listing-contact__list a {
  color: var(--color-primary);
}

.listing-contact__copy {
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-label);
  cursor: pointer;
}

.listing-contact__hint {
  font-size: var(--font-size-label);
  color: var(--color-text-secondary);
}

.listing-owner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.listing-confirm {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.listing-confirm[hidden],
.listing-owner__message[hidden] {
  display: none;
}

.listing-owner__message {
  color: var(--color-error);
  font-size: 0.9375rem;
}

/* Form */
.listings-form-page__inner {
  max-width: 40rem;
}

.listing-form {
  display: grid;
  gap: var(--space-2);
}

.listing-form[hidden],
.listing-form__section[hidden],
.listing-form [data-field][hidden] {
  display: none;
}

.listing-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.listing-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.listing-type-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
}

.listing-type-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  font-weight: 600;
}

.listing-type-option:has(input:disabled) {
  cursor: not-allowed;
}

.listing-type-option input {
  accent-color: var(--color-primary);
}

.listing-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-4);
}

.listing-form__hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-label);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.listing-form__hint[hidden],
.listing-form .form-error[hidden] {
  display: none;
}

.listing-form__contacts {
  padding: var(--space-4) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm);
}

.listing-form__expiry {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.listing-form__expiry--warn {
  color: var(--color-warning);
  font-weight: 600;
}

.listing-form__result {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.listing-form__result[hidden] {
  display: none;
}

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

  .listing-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-type-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .listings-page .ui-page__content:not(.listing-detail) {
    max-width: var(--home-content-width);
  }

  .listings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .listing-detail__card {
    padding: var(--space-4);
  }

  .listing-facts,
  .listing-contact__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .listing-facts dd,
  .listing-contact__list dd {
    margin-bottom: var(--space-2);
  }
}