/* ==========================================================================
   Locations list (/locations/): page layer on top of template.css + sloppy.css
   ========================================================================== */

/* ---------- Header ---------- */
.locations-header_subtitle { max-width: 28rem; margin-top: 1.5rem; }
.locations-header_subtitle p, .locations-list_info p { text-wrap: pretty; }
/* Keep the heading on two lines ("Τα μαγαζιά / μας") in the narrow text column at every desktop width. */
@media screen and (min-width: 992px) {
  .section_locations-header h1 { font-size: min(9rem, 8.8vw); }
  .locations-header_content { max-width: 37rem; }
}

/* Static 2x2 collage of the shop maps: sits in the template's rounded "video" box. */
.locations-header_video-wrap.loc-collage {
  aspect-ratio: auto;
  position: relative;
  align-self: start;
  border: 2px solid var(--ink);
  background-color: var(--paper);
  box-shadow: 0.5rem 0.5rem 0 var(--ink);
}
.loc-collage_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.loc-collage_item { display: block; margin: 0; padding: 0; }
.loc-collage_tile {
  display: block;
  position: relative;
  /* 30/19 instead of the maps' 3/2: crops the baked-in credit line at the bottom of every tile
     (the big rounded corner would cut it); one credit for the whole collage is set below. */
  aspect-ratio: 30 / 19;
  overflow: clip;
  background-color: var(--ink);
}
.loc-collage_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 0.5s ease;
}
.loc-collage_label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: 0.45rem 0.9rem 0.3rem;
  border: 2px solid var(--ink);
  border-radius: 9rem;
  background-color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--_typography---font-family--primary);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.loc-collage_tile:hover .loc-collage_img { transform: scale(1.06); }
.loc-collage_tile:hover .loc-collage_label,
.loc-collage_tile:focus-visible .loc-collage_label { background-color: var(--brand); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.loc-collage_tile:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* top-right: the labels own the bottom of the tiles, at every width */
.loc-collage_credit {
  position: absolute;
  top: 0.55rem;
  right: 2.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background-color: rgba(22, 21, 21, 0.7);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.625rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.loc-collage_credit:hover { color: #fff; text-decoration: underline; }

/* ---------- List ---------- */
/* 4 shops: 2 x 2 instead of the template's 3 columns. */
.section_locations-list .locations-list_list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-row-gap: 4.5rem;
}
.locations-list_item { display: flex; scroll-margin-top: 2rem; }
/* equal-height cards per row, with the buttons on one line even when a name or address wraps */
.locations-list_block { height: 100%; }

/* The maps are 3:2 and carry their credit line bottom-right: show them whole, and let the template's
   scroll zoom (IX2 "Image scale") grow from that corner so the credit never leaves the frame. */
.locations-list_img-wrap { aspect-ratio: 3 / 2; background-color: var(--ink); }
.locations-list_img { inset: 0; transform-origin: 100% 100%; }

.loc-card_head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.loc-card_chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.loc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 9rem;
  background-color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}
.loc-chip.is-new {
  background-color: var(--brand);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--_typography---font-family--detail);
  font-weight: 700;
  transform: rotate(-5deg);
}

.locations-list_content { width: 100%; }
.locations-list_info { align-items: flex-start; grid-column-gap: 0.5rem; }
.locations-list_info > .icon-height-small { flex: none; width: 2rem; height: 2rem; }
.locations-list_info > p { padding-top: 0.2rem; }
.loc-card_zip { white-space: nowrap; }
.loc-card_tel { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.loc-card_tel:hover { color: var(--brand-deep); }

.loc-card_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: auto; }
.loc-card_map {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.1rem;
  border-bottom: 2px solid var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s, border-color 0.2s;
}
.loc-card_map:hover { color: var(--brand-deep); border-color: var(--brand-deep); }

@media (prefers-reduced-motion: reduce) {
  .loc-collage_img, .loc-collage_label { transition: none; }
  .loc-collage_tile:hover .loc-collage_img { transform: none; }
}

/* ---------- Tablet ---------- */
@media screen and (max-width: 991px) {
  .locations-header_video-wrap.loc-collage { box-shadow: 0.35rem 0.35rem 0 var(--ink); }
  .loc-collage_label { left: 0.75rem; bottom: 0.75rem; font-size: 1.25rem; padding: 0.35rem 0.7rem 0.22rem; box-shadow: 2px 2px 0 var(--ink); }
  .loc-collage_credit { top: 0.4rem; right: 1.25rem; }
  .section_locations-list .locations-list_list { grid-row-gap: 3.5rem; }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 767px) {
  /* header: text first, collage full width below (the template keeps two columns down to 480px) */
  .locations-header_component { display: flex; flex-flow: column; }
  .locations-header_content, .locations-header_subtitle { max-width: none; }
  .locations-header_subtitle { margin-top: 1.25rem; }
  .section_locations-list .locations-list_list { grid-template-columns: minmax(0, 1fr); grid-row-gap: 3rem; }
  .locations-list_block { grid-row-gap: 1.25rem; }
  .loc-collage_label { left: 0.5rem; bottom: 0.5rem; font-size: 1.125rem; }
  .loc-collage_credit { top: 0.3rem; right: 0.9rem; font-size: 0.5625rem; }
}

/* "Δες τα όλα" jumps to #list: on phones/tablets the header is sticky, so the anchor sits one header-height above the section */
.section_locations-list { position: relative; }
.loc-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media screen and (max-width: 991px) { .loc-anchor { top: -5.5rem; } .locations-list_item { scroll-margin-top: 7rem; } }
@media screen and (max-width: 479px) { .loc-anchor { top: -5rem; } .locations-list_item { scroll-margin-top: 6.5rem; } }