/* =========================================================
   Contact page — reuses css/style.css for :root tokens, the
   .section/.section__eyebrow/.section__title/.contact__list/
   .contact__row primitives (already built + verified for the
   homepage's own Find Us section) and the shared footer. This
   file only adds what doesn't exist yet: the page hero, the
   phone buttons, the delivery-area pills and the map card.
   ========================================================= */

.contact-hero{
  padding: calc(var(--nav-height) + 3.5rem) 1.5rem 2rem;
  text-align: center;
}
.contact-hero .section__title{ margin: 0 auto .75rem; }
/* κλάση, όχι γενικό "p" selector: ένα bare ".contact-hero p" έπιανε και το
   <p class="section__eyebrow"> από πάνω του (ίδιο tag) και το παρέκαμπτε —
   .contact-hero p (0,1,1) > .section__eyebrow (0,1,0) στο cascade, οπότε το
   eyebrow έβγαινε σε Manrope/ink αντί για Anton/κόκκινο. */
.contact-hero__lede{
  margin: 0 auto; max-width: 34ch;
  font-family: var(--greek); font-weight: 500; font-size: 1.05rem; color: var(--ink);
}

.contact-status{
  display: inline-block; margin-top: 1.25rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  background: var(--beige);
  font-family: var(--latin); font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}

.contact-layout{
  display: grid; gap: 2rem;
  max-width: 85rem; margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

.contact-info{
  background: var(--beige);
  border-radius: .75rem;
  padding: 2rem;
}

/* Το ζεύγος τηλεφώνων είναι το κοινό .phones/.phone του style.css — εδώ
   μόνο η απόσταση από το περιεχόμενο που ακολουθεί. */
.contact-phones{ margin-bottom: 1.75rem; }

.contact-info .contact__list{ margin: 0 0 1.75rem; }

.contact-delivery{ margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.contact-delivery h2{
  margin: 0 0 1rem;
  font-family: var(--greek); font-weight: 800; font-size: 1.3rem; color: var(--ink);
}
.contact-delivery__list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
  font-family: var(--greek); font-weight: 600; font-size: .92rem; color: var(--ink);
}
.contact-delivery__list li{
  background: var(--white); border: 1px solid var(--rule);
  padding: .45rem 1rem; border-radius: 999px;
}

.contact-map{
  border-radius: .75rem; overflow: hidden;
  border: 1px solid var(--rule);
  min-height: 22rem;
}
.contact-map iframe{ display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }

@media (min-width: 900px){
  .contact-layout{ grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .contact-map{ min-height: 0; }
}

@media (max-width: 480px){
  .contact-hero{ padding-top: calc(var(--nav-height) + 2.5rem); }
  .contact-info{ padding: 1.5rem; }
}