/* Recipes block
   A card-grid screen: page header, a large search, and category sections of
   recipe cards. Composed under the console theme. */

.dp-recipes-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-4xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
}

.dp-recipes-desc {
  margin: 0 0 var(--dp-space-6);
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

/* Large search */
.dp-recipes-search {
  position: relative;
  margin-bottom: var(--dp-space-10);
}

.dp-recipes-search input {
  width: 100%;
  height: 3.25rem;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-lg);
  padding: 0 3rem;
}

.dp-recipes-search input::placeholder { color: var(--dp-text-subtle); }

.dp-recipes-search input:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-recipes-search .dp-recipes-search-icon {
  position: absolute;
  left: var(--dp-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dp-text-subtle);
  pointer-events: none;
}

.dp-recipes-search .dp-recipes-search-info {
  position: absolute;
  right: var(--dp-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dp-text-subtle);
}

/* Section */
.dp-recipes-section { margin-top: var(--dp-space-10); }

.dp-recipes-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dp-space-4);
  margin-bottom: var(--dp-space-5);
}

.dp-recipes-section-title {
  font-size: var(--dp-text-2xl);
  font-weight: var(--dp-weight-extrabold);
  color: var(--dp-navy);
}

.dp-recipes-section-title span {
  font-weight: var(--dp-weight-regular);
  color: var(--dp-text-muted);
}

.dp-recipes-seeall {
  color: var(--dp-navy);
  font-weight: var(--dp-weight-semibold);
  font-size: var(--dp-text-base);
  text-decoration: none;
}

.dp-recipes-seeall:hover { color: var(--dp-link); }

/* Cards */
.dp-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--dp-space-5);
}

.dp-recipe-grid[data-compact] {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dp-recipe-card {
  display: flex;
  flex-direction: column;
  padding: var(--dp-space-6);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-xl);
}

.dp-recipe-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  margin-bottom: var(--dp-space-5);
}

.dp-recipe-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface-soft);
  color: var(--dp-brand-purple, var(--dp-navy));
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-extrabold);
}

.dp-recipe-title {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-recipe-desc {
  flex: 1;
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

/* Compact card: title and logo on one row */
.dp-recipe-card[data-compact] { padding: var(--dp-space-5); }

.dp-recipe-card[data-compact] .dp-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
  margin-bottom: var(--dp-space-3);
}

.dp-recipe-card[data-compact] .dp-recipe-title { margin: 0; font-size: var(--dp-text-lg); }

.dp-recipe-card[data-compact] .dp-recipe-logo-tile {
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--dp-text-lg);
  border-radius: var(--dp-radius-md);
}