/* ==========================================================================
   Home page: additions on top of template.css + sloppy.css
   ========================================================================== */

/* ---------- Hero ---------- */
/* Only the first rotating line is the page <h1>; the other two are <p> with the same look. */
.home-header_heading {
  margin: 0;
  font-family: var(--_typography---h1--font-family);
  font-weight: var(--_typography---h1--font-weight);
  line-height: var(--_typography---h1--line-height);
  letter-spacing: 0;
  text-transform: uppercase;
  filter: url(#sl-rough);
}
/* The rotating lines are absolutely stacked on the first one: keep them on the same two-line grid. */
.home-header_heading._2,
.home-header_heading._3 { width: 100%; }

/* The template's inline start transforms for photos 2 and 3 are invalid CSS ("translate3d(51vw, null, 0)"), so until
   the interaction engine starts they would sit full-size on top of photo 1. Same values, as a stylesheet fallback
   (the engine's inline styles take over as soon as it runs). */
.home-header_image-wrap._2 { transform: translate3d(51vw, 0, 0) scale3d(0.55, 0.55, 1); }
.home-header_image-wrap._3 { transform: translate3d(65vw, 0, 0) scale3d(0.55, 0.55, 1); }

@media screen and (min-width: 992px) {
  /* 20vh in the template; also cap by width so two lines always fit on narrow-but-tall windows. */
  .home-header_heading { font-size: min(20vh, 13vw); }
  /* Sofia Sans sits lower in its line box than the template face: let the photo only touch the last line, as in the template. */
  .home-header_images { margin-top: -1vh; }
  /* Same idea for the photo and the button pinned to its right edge (template: 42vh / -62vh):
     on windows taller than wide they would otherwise run off the sides. */
  .home-header_image-wrap { height: min(42vh, 38vw); }
  .home-header_button-wrap { margin-right: calc(-1 * min(62vh, 56vw)); }
}

/* ---------- About teaser ---------- */
.section_home-about h2 { text-wrap: balance; }
@media screen and (max-width: 479px) {
  /* The scroll interaction starts the front photo 3rem up-left: keep it clear of the button. */
  .home-about_images { margin-top: 1.5rem; }
}

/* ---------- Menu teaser ---------- */
.home-menu_price {
  color: var(--brand);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.home-menu_meta { color: #a9a6a0; font-size: 0.8125rem; line-height: 1.3; }
.section_home-menu .menu_name { overflow-wrap: break-word; }
.section_home-menu .menu_infos { min-width: 0; }

/* Cards of a row share their height: the card content fills the card, so the buttons line up. */
.section_home-menu .menu_item.w-dyn-item,
.section_home-menu .menu_block { height: 100%; }
.section_home-menu .menu_block-content { flex: 1 1 auto; align-self: stretch; }
.section_home-menu .menu_img { align-self: start; }

/* Picture slot: one shape for every card (Sloppy's own photos, the stock photos and the chalk tile): 4:3.
   Sloppy's photos are 16:9 with the product in the middle; a square slot cuts the ends off the long sandwich sandwiches
   and their plates, 4:3 keeps the whole plate / board with a little marble around it. */
.section_home-menu .menu_img { aspect-ratio: 4 / 3; }
.home-menu_pic {
  position: relative;
  overflow: hidden;
  background-color: #232121;
}
.home-menu_pic-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* hairline that separates the dark photos from the ink card (same line as the chalk tile) */
.home-menu_pic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
/* Sloppy's own photos leave a wide empty margin around the product: come a little closer (the widest board still fits). */
.home-menu_pic-img.is-own { transform: scale(1.1); }
/* Portrait stock photos: keep the burger / hot dog itself inside the 4:3 window. */
.home-menu_pic-img.is-burger-loaded { object-position: 50% 30%; }
.home-menu_pic-img.is-burger-apron { object-position: 50% 32%; }
.home-menu_pic-img.is-burger-hand { object-position: 50% 52%; }

/* Card layout from 480px up: picture on top across the whole card, texts below (the template's own tablet card).
   Beside the text, as in the template's desktop card, the wide photos would be thumbnails. */
@media screen and (min-width: 992px) {
  .section_home-menu .menu_block { padding: 1.25rem; }
  .section_home-menu .menu_block-content { display: flex; flex-flow: column; gap: 1rem; }
}
@media screen and (min-width: 480px) {
  .section_home-menu .menu_infos { flex: 1 1 auto; align-self: stretch; }
}
@media screen and (min-width: 1280px) {
  /* wide cards: name / price on the left, the button in the bottom-right corner */
  .section_home-menu .menu_infos { flex-flow: row; align-items: flex-end; gap: 0.75rem; }
  .section_home-menu .menu_texts { flex: 1 1 auto; min-width: 0; align-self: flex-start; }
  .section_home-menu .button-icon_component { flex: none; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .section_home-menu .menu_name { font-size: 1.125rem; }
}

/* Photo-less card tile: a small "chalkboard" with the category's chalk icon. */
.home-menu_tile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #232121;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(25, 179, 138, 0.22), rgba(25, 179, 138, 0) 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.home-menu_tile-icon {
  width: 58%;
  height: 58%;
  object-fit: contain;
  transform: rotate(-8deg);
  opacity: 0.95;
}
.home-menu_tile-icon.is-skewer { width: 74%; height: 74%; }
/* the hot dog is a wide, flat drawing: a little larger so it carries the same weight as the others */
.home-menu_tile-icon.is-hotdog { width: 66%; height: 66%; }
/* the leaf is one of the teal icons for light backgrounds: turn it chalk-white */
.home-menu_tile-icon.is-leaf { width: 66%; height: 66%; filter: brightness(0) invert(1); }
.menu_item:nth-child(even) > .menu_block .home-menu_tile-icon { transform: rotate(7deg); }
.menu_item:nth-child(3n) > .menu_block .home-menu_tile-icon { transform: rotate(-2deg) scale(1.06); }

@media screen and (max-width: 767px) {
  /* Four tabs don't fit in one row on phones: 2 x 2 instead of the template's sideways scroll. */
  .section_home-menu .menu_tabs-menu {
    grid-template-columns: 1fr 1fr;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
}

/* Card grid: tracks may shrink below their content (prices never wrap), and small tablets / large phones
   get two columns instead of three cramped ones. */
@media screen and (min-width: 480px) {
  .section_home-menu .menu_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .section_home-menu .menu_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-menu_more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  text-align: center;
}
/* On the ink background the template's black hard shadow disappears: use the white one of the hero button. */
.home-menu_more .button {
  border-color: var(--ink);
  box-shadow: 6px 6px 0 0 #fff;
}
.home-menu_more .button:hover { box-shadow: 2px 2px 0 0 #fff; }
.home-menu_note {
  max-width: 32rem;
  color: #a9a6a0;
  font-size: 0.875rem;
}

/* ---------- Shops (stands where the template had its testimonials) ---------- */
.section_shops {
  position: relative;
  background-color: var(--brand);
  color: var(--ink);
}
.shops_component {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shops_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
/* Script label on teal: ink text with a white offset copy (the template's two-layer label). */
.section_shops .label_text { color: var(--ink); }
.section_shops .label_text._2 { color: #fff; transform: translate(2px, 2px) rotate(-3deg); }
.shops_heading {
  font-size: var(--_typography---h3--font-size);
  line-height: 0.82;
}
.shops_intro { max-width: 34rem; }

.shops_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}
.shops_card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  background-color: #fff;
  border: 2px solid var(--ink);
  border-radius: 1.75rem;
  box-shadow: 0.35rem 0.35rem 0 var(--ink);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.shops_card:nth-child(even) { background-color: var(--paper); }

.shops_card-head { display: flex; flex-direction: column; gap: 0.75rem; }
.shops_chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.shops_chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem 0.25rem;
  border: 1.5px solid var(--ink);
  border-radius: 9rem;
  background-color: var(--brand-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
}
.shops_chip.is-new { background-color: var(--ink); color: #fff; }
.shops_name {
  margin: 0;
  font-family: var(--_typography---font-family--primary);
  font-size: 3rem;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.shops_meta,
.shops_features { margin: 0; padding: 0; list-style: none; }
.shops_meta {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed rgba(22, 21, 21, 0.4);
  font-weight: 500;
  line-height: 1.3;
}
.shops_meta-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.shops_meta-row > :last-child { padding-top: 0.2rem; min-width: 0; }
.shops_nowrap { white-space: nowrap; }
.shops_meta-icon {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--ink);
}
.shops_meta-icon img,
.shops_meta-icon svg { width: 1.125rem; height: 1.125rem; }
.shops_phone {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--brand);
  text-underline-offset: 3px;
}
.shops_phone:hover { text-decoration-color: var(--ink); }

.shops_features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.shops_features li { position: relative; padding-left: 1.15rem; }
.shops_features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background-color: var(--brand);
}

.shops_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.shops_btn {
  flex: 1 1 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 0.9rem 0.4rem;
  border: 2px solid var(--ink);
  border-radius: 9rem;
  background-color: #fff;
  box-shadow: 3px 3px 0 0 var(--ink);
  color: var(--ink);
  font-family: var(--_typography---font-family--primary);
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.shops_btn.is-primary { background-color: var(--brand); }
.shops_btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink); }
.shops_phone:focus-visible,
.shops_btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Four in a row with a slight alternating tilt: wide screens only; cards straighten on hover like the template's. */
@media screen and (min-width: 1280px) {
  .shops_card:nth-child(odd) { transform: rotate(-1deg); }
  .shops_card:nth-child(even) { transform: rotate(1deg) translateY(1rem); }
  .shops_card:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
}
@media screen and (min-width: 1440px) {
  .shops_list { gap: 2rem; }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  /* four narrower cards: tighten the padding and the two buttons so they stay on one row */
  .shops_card { padding: 1.5rem 1.25rem 1.25rem; }
  .shops_name { font-size: 2.75rem; }
  .shops_actions { gap: 0.5rem; }
  .shops_btn { padding: 0.55rem 0.7rem 0.35rem; font-size: 1.1875rem; }
}
@media screen and (max-width: 1279px) {
  .shops_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
  .shops_card { box-shadow: 0.25rem 0.25rem 0 var(--ink); border-radius: 1.5rem; }
  .shops_list { margin-top: 2.5rem; gap: 1.25rem; }
}
@media screen and (max-width: 639px) {
  .shops_list { grid-template-columns: minmax(0, 1fr); }
  .shops_card { padding: 1.5rem 1.25rem 1.25rem; }
  .shops_name { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shops_card, .shops_btn { transition: none; }
}

/* ---------- CTA ---------- */
/* Desktop: "να μας / βρεις" breaks in two lines next to the centred photo. Tablet and phone: one row of words. */
.cta_heading { white-space: nowrap; }
.cta_main-content .heading-style-h3 { margin-bottom: 0.75rem; }
.cta_main-content .paragraph { text-wrap: balance; font-weight: 500; }
.cta_shop { white-space: nowrap; }
@media screen and (min-width: 992px) {
  /* right-aligned, so the hand-drawn underline (anchored bottom-right) sits under the last word */
  .cta_heading-wrap:last-child .cta_heading { text-align: right; }
}
@media screen and (max-width: 991px) {
  .cta_br { display: none; }
}
/* Tablet: the scroll-driven photo animation only runs on desktop, which left the box sitting on top of the small
   photo and the words. Use the template's stacked phone layout here as well. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .section_cta .hide-mobile-landscape { display: none; }
  .cta_wrapper { height: auto; }
  .cta_sticky { position: static; min-height: 0; padding-top: 6rem; padding-bottom: 6rem; }
  .cta_image-wrap {
    position: relative;
    width: calc(100% - 4.5rem);
    height: auto;
    aspect-ratio: 2.39;
    margin-top: 2rem;
    border-radius: var(--_sizes---border-radius--xxlarge);
  }
  .cta_content { position: relative; display: flex; width: 100%; }
  .cta_block { align-items: stretch; }
  .cta_lottie-1 { width: 13rem; bottom: 2.25rem; left: 6.5rem; }
  .cta_lottie-2 { display: none; }
}

/* very narrow phones: keep a gap between the two CTA words */
@media screen and (max-width: 339px) { .cta_heading { font-size: 2.6rem; } }