/* =========================================================
   Σελίδα προσφορών — prosfores.html

   Ξεχωριστή σελίδα για την κατηγορία «Προσφορά 7,99€» (απαίτηση
   πελάτη, 2026-08-29). Δανείζεται σχεδόν τα πάντα από το menu.css
   (.menu-page-header, .pizza-card, .menu-notes) ώστε οι κάρτες να
   είναι κατά λέξη ίδιες με του μενού· εδώ ζουν μόνο τα δύο πράγματα
   που δεν υπάρχουν εκεί: η κόκκινη ταινία τιμής και το πλέγμα χωρίς
   sidebar (η σελίδα έχει μία μόνο κατηγορία, άρα δεν χρειάζεται tabs).

   Το menu.css φορτώνεται ΠΡΙΝ από αυτό το αρχείο — βλ. prosfores.html.
   ========================================================= */

/* Σφραγίδα τιμής. Επαναλαμβάνει το offer badge του hero (ίδιο κόκκινο, ίδιο
   λευκό, ίδιο λεκτικό) ώστε ο επισκέπτης που έρχεται από την αρχική να
   αναγνωρίσει ότι έφτασε στη σωστή σελίδα.

   ΓΙΑΤΙ pill και όχι πανό πλήρους πλάτους: η τιμή γράφεται ήδη στον <h1>
   δέκα pixel πιο πάνω. Ένα πανό στο ύψος του τίτλου έκανε τη σελίδα να λέει
   δύο φορές το ίδιο πράγμα, με το δεύτερο πιο δυνατά από το πρώτο. Ως
   σφραγίδα, η επανάληψη διαβάζεται ως σήμανση αντί για επικεφαλίδα. */
.offers-stamp{
  width: fit-content;
  margin: 0 auto 2.75rem;
  padding: .6rem 1.6rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--greek); font-weight: 800; font-size: 1.35rem;
  line-height: 1; letter-spacing: .01em;
}

.offers-layout{
  max-width: 85rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Ίδιο πλέγμα με το .menu-category__grid του μενού. Δεν το ξαναχρησιμο-
   ποιούμε αυτούσιο γιατί εκείνο κουβαλά και το padding-bottom της
   κατηγορίας, που εδώ δεν έχει νόημα (δεν ακολουθεί άλλη κατηγορία). */
.offers-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}

/* Πίσω στο πλήρες μενού — ίδιο σχήμα με το .dishes__cta της αρχικής. */
.offers-back{
  display: block; width: fit-content;
  margin: 3rem auto 0;
  padding: .9rem 2rem;
  border: 1px solid var(--red-ink); border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: var(--red-ink);
  transition: background .18s ease, color .18s ease;
}
.offers-back:hover, .offers-back:focus-visible{
  background: var(--red); color: var(--white);
}

@media (max-width: 900px){
  .offers-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .offers-grid{ grid-template-columns: 1fr; }
  .offers-layout{ padding-left: 1.1rem; padding-right: 1.1rem; }
  .offers-stamp{ margin-bottom: 2rem; font-size: 1.2rem; }
}