/* Lock the cascade order before our own `@layer components` block, since this
   file loads before application.css alphabetically. Keep in sync with it. */
@layer tokens, base, components;

@layer components {
  /* Activity show — name first so you know what you're looking at, then the
     photo (when there is one) for the romance, then the practical details. */

  .activityShow__header {
    margin-block: var(--space-lg) var(--content-margin);
  }

  .activityShow__title {
    margin: 0;
  }

  .activityShow__city {
    margin: var(--space-sm) 0 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    letter-spacing: 0.02em;
  }

  .activityShow__photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--content-margin) var(--space-lg);
  }

  /* Lead description ------------------------------------------------- */
  .activityLead {
    margin-block: var(--content-margin) var(--space-lg);
    font-size: 1.125rem;
    line-height: 1.6;
    text-align: center;
    text-wrap: pretty;
  }

  /* Metadata block: labelled rows replace a flat stack of paragraphs. */
  .activityMeta {
    display: grid;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    padding: var(--space-lg) 0;
    border-block: 1px solid var(--color-border);
  }

  /* When the next block draws its own top rule (a flanked Details heading, or
     the agent action bar), let that rule be the divider and drop the metadata
     block's bottom rule to avoid two stacked lines. The custom-link section has
     no rule, so it keeps the separator. Degrades gracefully without :has(). */
  .activityMeta:has(+ h2),
  .activityMeta:has(+ h3),
  .activityMeta:has(+ .agentActions) {
    margin-block-end: 0;
    padding-block-end: 0;
    border-block-end: none;
  }

  .activityMeta__row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--space-md);
    align-items: baseline;
  }

  .activityMeta__label {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
  }

  .activityMeta__value {
    margin: 0;
  }

  .activityMeta__directions {
    margin-left: var(--space-md);
    white-space: nowrap;
  }

  /* Requires-reservation flag: the one detail an agent must never miss, so it
     stands out — but in the brand's "this matters" indigo, not the terracotta
     reserved for destructive actions. Tinted (not solid) to stay distinct from
     the primary button. Never a side-stripe. */
  .activitySignal {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-theme) 14%, var(--color-surface));
    color: var(--color-theme);
    border: 1px solid color-mix(in srgb, var(--color-theme) 35%, var(--color-border));
    font-weight: 400;
  }

  .activityMap {
    margin: var(--space-lg) 0;
  }

  @media (max-width: 30rem) {
    .activityMeta__row {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }

    .activityMeta__directions {
      margin-left: 0;
    }
  }

  /* ===== Activities index ===== */
  /* The toolbar (search, city select, chips) uses the shared `.toolbar`
     component (toolbar.css). */

  .activities-group {
    margin-block: var(--space-lg);
  }

  .activities-group__count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
  }

  .activities-list {
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
  }

  .activities-list__item {
    border-block-end: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  }
  .activities-list__item:last-child {
    border-block-end: 0;
  }

  .activities-list__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    min-height: 44px;
    padding: var(--space-md) var(--space-sm);
    box-sizing: border-box;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .activities-list__link:hover {
    background-color: color-mix(in srgb, var(--color-link) 4%, transparent);
  }
  .activities-list__link:hover .activities-list__name {
    text-decoration: underline;
  }

  .activities-list__emoji {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
  }

  .activities-list__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .activities-list__desc {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .activities-list__flags {
    flex: 0 0 auto;
    display: inline-flex;
    gap: var(--space-sm);
    margin-inline-start: var(--space-sm);
  }

  .activity-flag {
    font-size: 0.95rem;
    line-height: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .activities-list__link {
      transition: none;
    }
  }
}