/* =========================================================
   Stores CSS
   Romm Coffee — store network grid (Contact page).

   Works with:
   - Pages/Contact.cshtml  (#stores section)
   - Models/RommBrand.cs   (location data)
   - wwwroot/css/design-tokens.css
========================================================= */

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-5, 1.5rem);
  margin-top: var(--space-8, 3rem);
}

.store-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5, 1.5rem);

  background: var(--color-surface, #fff9f2);
  border: 1px solid var(--color-border, #e7d8c8);
  border-radius: var(--radius-lg, 1rem);

  transition:
    transform var(--transition-base, 220ms ease),
    box-shadow var(--transition-base, 220ms ease),
    border-color var(--transition-base, 220ms ease);
}

.store-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent, #d6a85a);
  box-shadow: var(--shadow-md, 0 12px 28px rgba(42, 28, 20, 0.12));
}

.store-card-city {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary, #8b5e3c);
}

.store-card-name {
  margin: var(--space-2, 0.5rem) 0 var(--space-3, 0.75rem);

  font-family: var(--font-heading);
  font-size: var(--text-lg, 1.25rem);
  line-height: var(--line-snug, 1.3);
  color: var(--color-text, #2a1c14);
}

.store-card-address {
  /* Push the link to the bottom so cards line up on a row. */
  flex: 1 1 auto;
  margin: 0 0 var(--space-4, 1rem);

  font-size: var(--text-sm, 0.875rem);
  line-height: var(--line-relaxed, 1.7);
  color: var(--color-text-muted, #7a6658);
}

/* Yol tarifi + (varsa) şubenin Instagram'ı yan yana. */
.store-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.store-card-link {
  align-self: flex-start;

  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
  color: var(--color-primary, #4b2e1e);

  border-bottom: 1px solid transparent;
  transition:
    color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease);
}

.store-card-link:hover,
.store-card-link:focus-visible {
  color: var(--color-secondary, #8b5e3c);
  border-bottom-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .store-card,
  .store-card:hover {
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Store Strip — home page

   Full-bleed row of portrait store photos with the name and
   hours underneath, mirroring the Instagram strip's header
   (oversized wordmark + hairline).

   Every store is in the row; it scrolls horizontally at all
   widths. Tiles keep a fixed width rather than dividing the
   viewport, so the row always overflows and the swipe is real.

   Markup: Pages/Index.cshtml   (.store-strip)
   Script: wwwroot/js/store-strip.js  (arrow buttons)
========================================================= */

.store-strip {
  padding-block: var(--section-padding-md);
  background: var(--color-background);
}

/* Header shares the Instagram strip's rhythm but stays inside
   the container; only the tile row goes edge to edge. */
.store-strip-head {
  width: min(var(--container-xl), calc(100% - 3rem));
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);

  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}

.store-strip-wordmark {
  flex: 0 0 auto;
  line-height: 1;
  /* Büyük harf kaynakta yazılır, text-transform yok. */
}

.store-strip-brand {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.store-strip-label {
  display: block;
  margin-top: 0.15em;
  padding-left: 1.6em;
  font-family: var(--font-tagline);
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  font-weight: var(--weight-regular);
  color: var(--color-secondary);
}

.store-strip-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border-strong);
}

/* ---------- Arrow controls ---------- */

/* The arrows sit on the rail itself, not in the header: someone
   looking at the tiles has the header well out of view. */
.store-strip-viewport {
  position: relative;
}

.store-strip-nav {
  display: contents;
}

/* No JS / nothing to scroll: the buttons would be dead weight. */
.store-strip-nav[hidden] {
  display: none;
}

.store-strip-arrow {
  position: absolute;
  z-index: 2;

  /* Vertically centred on the photo, not on photo + caption. The
     figure is 2:3, so its centre is 75% of a tile width down. */
  top: calc(min(17rem, max(13rem, 17vw)) * 0.75);
  transform: translateY(-50%);

  display: grid;
  place-items: center;

  width: 3rem;
  height: 3rem;
  padding: 0;

  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;

  transition:
    color var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base),
    opacity var(--transition-base);
}

.store-strip-arrow.is-prev {
  left: clamp(0.5rem, 1.5vw, 1.25rem);
}

.store-strip-arrow.is-next {
  right: clamp(0.5rem, 1.5vw, 1.25rem);
}

.store-strip-arrow svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.store-strip-arrow:hover:not(:disabled) {
  color: var(--color-text-light);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.store-strip-arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.store-strip-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---------- Tile row ---------- */

.store-strip-track {
  display: grid;
  grid-auto-flow: column;
  /* Fixed tile width — the row is meant to overflow and scroll. */
  grid-auto-columns: clamp(13rem, 17vw, 17rem);

  /* Full-bleed: ignore the page container. */
  width: 100%;

  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.store-strip-track::-webkit-scrollbar {
  /* Arrows and swipe carry the affordance; the bar just adds noise. */
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .store-strip-track {
    scroll-behavior: auto;
  }
}

/* The tile is a plain container so the Instagram link can sit
   beside the maps link instead of nested inside it. */
.store-strip-item {
  position: relative;
  scroll-snap-align: start;
}

.store-strip-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Per-store Instagram — corner badge over the photo. */
.store-strip-ig {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;

  display: grid;
  place-items: center;

  width: 2.25rem;
  height: 2.25rem;

  color: var(--color-text-light);
  background: rgba(5, 50, 58, 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);

  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    background var(--transition-base);
}

.store-strip-ig svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.store-strip-item:hover .store-strip-ig,
.store-strip-item:focus-within .store-strip-ig {
  opacity: 1;
  transform: translateY(0);
}

.store-strip-ig:hover {
  background: rgba(5, 50, 58, 0.8);
}

.store-strip-ig:focus-visible {
  outline: 2px solid var(--color-text-light);
  outline-offset: 2px;
}

/* Touch devices never hover — the badge would stay invisible. */
@media (hover: none) {
  .store-strip-ig {
    opacity: 1;
    transform: none;
  }
}

/* Inner elements are spans (an <a> may not wrap block tags),
   so each one is explicitly promoted to block/grid. */
.store-strip-figure {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--color-primary-light);
}

.store-strip-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

/* Placeholder shown until a real photo is set on the Location. */
.store-strip-figure.is-empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg, var(--color-primary) 0%, var(--color-secondary-dark) 100%);
}

.store-strip-placeholder {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.store-strip-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 81, 93, 0.28);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.store-strip-item:hover .store-strip-figure img,
.store-strip-link:focus-visible .store-strip-figure img {
  transform: scale(1.05);
}

.store-strip-item:hover .store-strip-figure::after,
.store-strip-link:focus-visible .store-strip-figure::after {
  opacity: 1;
}

.store-strip-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.store-strip-caption {
  display: block;
  padding: var(--space-5) var(--space-3) 0;
  text-align: center;
}

.store-strip-name {
  display: block;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--line-snug);
  color: var(--color-primary);
}

.store-strip-hours {
  display: block;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.store-strip-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .store-strip-track {
    grid-auto-columns: 34vw;
  }

  /* Keep the arrows on the photo as the tile width changes. */
  .store-strip-arrow {
    top: calc(34vw * 0.75);
  }
}

@media (max-width: 700px) {
  .store-strip-track {
    grid-auto-columns: 62vw;
  }

  .store-strip-head {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .store-strip-rule {
    order: 3;
    flex-basis: 100%;
  }

  /* Touch already swipes; the buttons only eat space here. */
  .store-strip-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-strip-figure img {
    transition: none;
  }

  .store-strip-item:hover .store-strip-figure img,
  .store-strip-link:focus-visible .store-strip-figure img {
    transform: none;
  }
}