/* ==========================================================================
   Specials page specific styles
   ========================================================================== */

.specials-hero {
  padding-block: var(--space-2xl) var(--space-lg);
  text-align: center;
  background: linear-gradient(180deg, #FBE0EC, var(--color-cream));
}
.specials-hero h1 { margin-block: 0.4rem var(--space-sm); }
.specials-hero .lead { margin-inline: auto; max-width: 52ch; }

.specials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 700px) {
  .specials-grid { grid-template-columns: 1fr; }
}

.special-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.special-card .card-media { aspect-ratio: 16/10; }
.special-card .card-body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.special-card .limited-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  background: var(--color-tropical);
}

.specials-empty {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-white);
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-lg);
}
.specials-empty .emoji { font-size: 2.5rem; display: block; margin-bottom: var(--space-sm); }