/**
 * Template select page (Step 2 of 3).
 * Layout for the meme-template search/filter grid + the random/see-more controls.
 */

/* Header row: step indicator + Random button */
.templates-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.templates-header .step-indicator {
  margin-bottom: 0;
  flex: 1;
}

.templates-header__random {
  flex-shrink: 0;
}

/* Search + chips row */
.templates-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.templates-search {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 23px;
  color: #e2e8f0;
  background: #0c1020;
  border: 1px solid #151b2e;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}

.templates-search::placeholder {
  color: var(--color-text-muted);
}

.templates-search:focus {
  border-color: #e2e8f0;
}

.templates-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.templates-chip {
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  color: #e2e8f0;
  background: transparent;
  border: 1px solid #151b2e;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.templates-chip:hover {
  border-color: #e2e8f0;
}

.templates-chip--active {
  background: #0c2d6e;
  border-color: #0c2d6e;
}

/* Status (loading / empty) */
.templates-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-7) 0;
}

/* Template grid */
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.template-card {
  display: flex;
  flex-direction: column;
  background: #0c1020;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}

.template-card:hover {
  transform: translateY(-2px);
  border-color: #e2e8f0;
}

.template-card--selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f1;
}

.template-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #111526;
  display: block;
}

.template-card__name {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  color: #e2e8f0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* See more pagination */
.templates-see-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.see-more {
  font-family: var(--font-sans);
  font-size: 18px;
  color: #e2e8f0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  transition: opacity 0.15s ease;
}

.see-more:hover {
  opacity: 0.7;
}

/* Mobile layout — stacked header, scrollable chips, 2-column grid */
@media (max-width: 640px) {
  .templates-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .templates-header__random {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .templates-controls {
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  .templates-search {
    padding: 12px 16px;
    font-size: 16px; /* keep at 16px+ so iOS doesn't auto-zoom on focus */
  }

  /* Chips scroll horizontally instead of wrapping, so a long category list
     stays one row on a phone without taking vertical space. */
  .templates-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    padding-bottom: var(--space-2);
  }

  .templates-chips::-webkit-scrollbar {
    display: none; /* WebKit */
  }

  .templates-chip {
    flex-shrink: 0;
    min-height: 36px;
  }

  /* 4-col → 2-col grid; tighter gap for the smaller cards */
  .template-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .template-card__name {
    font-size: 13px;
    padding: var(--space-2) var(--space-3);
  }

  .templates-see-more {
    margin-top: var(--space-5);
  }

  .see-more {
    font-size: 16px;
    min-height: 44px;
  }

  /* Match the rest of the app: page-nav stacks vertically on mobile */
  .page-nav {
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-nav .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}