/**
 * Collection Context - Gallery Filter Companion
 * Shows collection-specific context directly below the filter bar.
 */

.collection-context {
  display: none;
  padding: var(--space-4) 0 var(--space-6);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.collection-context:not([hidden]) {
  display: block;
}

.collection-context__desktop {
  display: none;
}

.collection-context__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.collection-context__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-3);
}

.collection-context__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.collection-context__summary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}

.collection-context__description {
  max-width: 72ch;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-line;
  margin: 0;
}

/* ========================================
   MOBILE COLLECTION DESCRIPTION
   ======================================== */

@media (max-width: 767px) {
  .collection-context {
    padding: var(--space-2) 0 var(--space-4);
    scroll-margin-top: calc(var(--mobile-header-offset, 60px) + var(--space-4));
  }

  .collection-context__desktop {
    display: none;
  }

  .collection-description {
    background: var(--bg-primary);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }

  .collection-description.is-visible {
    opacity: 1;
    max-height: 1000px;
  }

  .collection-description__text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
    letter-spacing: 0.005em;
    margin: 0;
    max-width: 100%;
    white-space: pre-line;
  }

  .collection-description__eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
  }

  .collection-description__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
  }

  .collection-description__text.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .collection-description__text.is-expanded {
    display: block;
    overflow: visible;
  }

  .collection-description__toggle {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: none;
    line-height: inherit;
    letter-spacing: inherit;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  .collection-description__toggle:hover,
  .collection-description__toggle:active {
    color: var(--copper-600);
    text-decoration: none;
  }

  .collection-description__toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .collection-description__text {
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  [data-theme="dark"] .collection-description {
    background: var(--bg-primary);
  }

  [data-theme="dark"] .collection-description__text {
    color: var(--text-secondary);
  }

  [data-theme="dark"] .collection-description__eyebrow {
    color: var(--text-tertiary);
  }

  [data-theme="dark"] .collection-description__title {
    color: var(--text-primary);
  }

  [data-theme="dark"] .collection-description__toggle {
    color: var(--accent-primary);
  }

  [data-theme="dark"] .collection-description__toggle:hover,
  [data-theme="dark"] .collection-description__toggle:active {
    color: var(--copper-300);
  }
}

/* ========================================
   DESKTOP COLLECTION CONTEXT
   ======================================== */

@media (min-width: 768px) {
  .collection-context {
    padding: var(--space-5) 0 var(--space-8);
  }

  .collection-context__desktop {
    display: block;
    padding: var(--space-6);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(245, 236, 228, 0.82) 100%
    );
    box-shadow: 0 10px 30px rgba(26, 24, 22, 0.06);
  }

  .collection-description {
    display: none;
  }

  [data-theme="dark"] .collection-context__desktop {
    background: linear-gradient(
      135deg,
      rgba(26, 24, 22, 0.88) 0%,
      rgba(45, 31, 23, 0.82) 100%
    );
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-description,
  .collection-description__text,
  .collection-description__toggle {
    transition: none !important;
  }
}