/* Festival campaign pages.
 *
 * Loaded only on /offers/<slug> and on the admin preview — it is not in
 * base.html, so no other page pays for it (§22).
 *
 * Everything here is built on the tokens already in theme.css. There is no
 * second palette and no second type scale: a campaign page should look like
 * the most confident version of this shop, not like a different site that
 * happens to share a logo.
 */

.fest {
  --fest-ink: #17212B;
  --fest-on-dark: #FFFFFF;
  --fest-dim: rgba(255, 255, 255, 0.78);
  --fest-hero-min: 460px;
  --fest-radius: 18px;
}

/* ---------------------------------------------------------------------------
   Banner
   ---------------------------------------------------------------------------
   Deliberately the same treatment as .hero-slide on the home page: contained,
   20:7, rounded, and shown WHOLE.

   It was a full-bleed dark panel with the title, lede and countdown laid over
   the artwork. Two things were wrong with that. A scrim had to dim the banner
   to keep white text legible, and the copy covered the left third of it -- so
   a finished design (the uploaded one is 6667x2334, exactly 20:7) was being
   used as background texture. And it looked nothing like the rest of the site.

   The banner is now the artwork and the wording sits underneath it, which is
   how the home page has always worked. */
.fest-banner {
  aspect-ratio: 20 / 7;          /* 1600 x 560, the sitewide banner size */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: linear-gradient(135deg, #FCEEDD 0%, #F3F6F7 100%);
}
.fest-banner picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* contain, matching the home carousel: a banner is never cropped, because the
   part that gets cut is always the logo or the price. */
.fest-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Headline: state, title, countdown
   --------------------------------------------------------------------------- */
.fest-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.fest-headline-main {
  min-width: 0;
  flex: 1 1 340px;
}

.fest-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.fest-eyebrow--live {
  background: #DCFCE7;
  border-color: #86EFAC;
  color: #166534;
}
.fest-eyebrow--upcoming {
  background: #FCEEDD;
  border-color: #F5D8B0;
  color: #9A5A19;
}
.fest-eyebrow--expired {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #334155;
}

/* The one animated element on the page, and only while the sale is live. */
.fest-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: festPulse 2s infinite;
}
@keyframes festPulse {
  70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fest-pulse { animation: none; }
}

.fest-title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-text);
  margin: 12px 0 0;
  text-wrap: balance;
}

.fest-lede {
  color: var(--brand-muted);
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 62ch;
}

.fest-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Countdown (§9)
   --------------------------------------------------------------------------- */
.fest-countdown {
  flex: 0 0 auto;
}
.fest-countdown-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-bottom: 8px;
}
.fest-clock {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fest-unit {
  min-width: 74px;
  padding: 10px 8px;
  border-radius: 12px;
  text-align: center;
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-soft);
}
.fest-unit-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
  /* Tabular figures alone are not enough -- the glyphs are the same width but
     the box still twitches as digits change, hence the min-width above. */
}
.fest-unit-label {
  display: block;
  margin-top: 6px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-muted);
}
.fest-countdown-note {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--brand-muted);
}

/* ---------------------------------------------------------------------------
   Product grid (§10)
   --------------------------------------------------------------------------- */
.fest-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.fest-section-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.fest-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: var(--fest-radius);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.fest-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(234, 132, 36, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .fest-card, .fest-card:hover { transition: none; transform: none; }
}

.fest-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F3F4F6;
  overflow: hidden;
}
.fest-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fest-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #EA8424, #D2691E);
  box-shadow: 0 4px 12px rgba(234, 132, 36, 0.4);
}

/* Sits over the image rather than replacing the card, so an out-of-stock
   product still reads as the product it is — §6 wants it shown, just not
   shown as buyable. */
.fest-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 249, 250, 0.82);
  backdrop-filter: saturate(0.4);
}
.fest-veil span {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--brand-text);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fest-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-2);
  gap: 6px;
}
.fest-card-brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin: 0;
  min-height: 1em;
}
.fest-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  color: var(--brand-text);
  /* Two lines, then ellipsis: a ragged grid of different card heights is the
     quickest way to make a premium layout look unfinished. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fest-card-name:hover { color: var(--brand-primary); }

.fest-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.fest-price {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--brand-text);
  letter-spacing: -0.02em;
}
.fest-was {
  font-size: 0.88rem;
  color: var(--brand-muted);
  text-decoration: line-through;
}
.fest-save {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand-success);
}

.fest-stock-low {
  font-size: 0.74rem;
  font-weight: 700;
  color: #B45309;
}

.fest-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fest-card-actions .btn { flex: 1; }

.fest-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-text);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.fest-wish.active { color: var(--brand-danger); }

/* Deliberately 2 across on mobile (§10) — one huge card per row means
   scrolling past four products to see five. */
.fest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .fest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .fest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Empty / expired states (§11, §12)
   --------------------------------------------------------------------------- */
.fest-state {
  text-align: center;
  padding: var(--space-6) var(--space-2);
  max-width: 620px;
  margin: 0 auto;
}
.fest-state i {
  font-size: 3rem;
  color: var(--brand-muted);
  opacity: 0.55;
}
.fest-state h2 {
  margin-top: var(--space-2);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
}
.fest-state p {
  color: var(--brand-muted);
  margin-top: 10px;
}
.fest-state-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Other campaigns
   --------------------------------------------------------------------------- */
.fest-other {
  display: block;
  height: 100%;
  padding: var(--space-2);
  border-radius: var(--fest-radius);
  border: 1px solid var(--brand-border);
  background: var(--brand-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fest-other:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-soft);
  color: inherit;
}
.fest-other-name {
  font-weight: 700;
  margin: 6px 0 4px;
}
.fest-other-dates {
  font-size: 0.8rem;
  color: var(--brand-muted);
}

/* ---------------------------------------------------------------------------
   Sticky mobile CTA (§26)
   --------------------------------------------------------------------------- */
.fest-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--brand-border);
  box-shadow: 0 -6px 20px rgba(31, 41, 55, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.fest-sticky-text {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}
.fest-sticky-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--brand-muted);
}
@media (min-width: 768px) {
  .fest-sticky { display: none; }
}

.fest-whatsapp {
  --bs-btn-bg: #25D366;
  --bs-btn-border-color: #25D366;
  --bs-btn-hover-bg: #1DA851;
  --bs-btn-hover-border-color: #1DA851;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* ---------------------------------------------------------------------------
   Preview banner (§19) — admin only, never on the live page
   --------------------------------------------------------------------------- */
.fest-preview-bar {
  background: #17212B;
  color: #fff;
  text-align: center;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.fest-preview-bar .badge { vertical-align: 1px; }