/*
 * StoreShowcaseItem — Anasayfa "Magazalarimiz" vitrin karti.
 * Spec: specs/anasayfa-magazalarimiz.md #6.4, #7.2, #8.
 *
 * HICBIR renk burada sabitlenmez: hepsi StoreShowcase/styles.css'in
 * tanimladigi --store-* degiskenlerinden, DOM kalitimiyla, fallback'li
 * okunur. Fallback'ler kartin bolum disinda (orn. editor onizlemesinde
 * tek basina) da makul gorunmesini saglar.
 *
 * Kok elemanin sinifi (mh-store-showcase-item) burada tanimlanir; ayni
 * elemanin tasidigi ikinci sinif (mh-store-showcase__card, serit
 * flex-basis'i) StoreShowcase/styles.css icindedir.
 *
 * Oran INLINE aspect-ratio ile VERILMEZ: --store-card-ar degiskeni
 * StoreShowcase'ten kalitimla gelir (CategoryImageItem/components/Card'daki
 * "--card-ar" deseninin ayni mantigi, ama burada inline style bile
 * gerekmiyor cunku deger sabit 3/2 ve DOM kalitimiyla akiyor).
 */

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item:focus-visible {
  outline: 2px solid var(--store-fg, var(--mh-primary));
  outline-offset: 3px;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* Yedek deger bolumdeki ile AYNI: degisken bir sekilde gelmezse kartlar
   * yine ayni oranda kalsin, satirda tek kart farkli yukseklikte durmasin. */
  aspect-ratio: var(--store-card-ar, 3 / 2);
  background: var(--store-media-bg, var(--mh-surface-variant));
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item:hover .mh-store-showcase-item__img {
  transform: scale(1.05);
}

/* Fotograf-metin arasi 0.75rem (TASARIM-DILI: "gorsel-metin arasi"). */
.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.75rem;
  flex: 1 0 auto;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__city {
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--store-fg-muted, var(--mh-on-surface-variant));
}

/* 2 satirda kirpilir + min-height: kisa/uzun isimli kartlarin alt
 * bilgileri hizali dursun (TASARIM-DILI'nin urun karti kuraliyla ayni). */
.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__name {
  margin: 0;
  font-family: var(--mh-font-display);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  min-height: 56px;
  color: var(--store-fg, var(--mh-primary));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__location, .cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__hours {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--store-fg-muted, var(--mh-on-surface-variant));
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__cta-row {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid
    var(--store-hairline, color-mix(in srgb, var(--mh-outline-variant) 30%, transparent));
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mh-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--store-fg, var(--mh-primary));
  transition: opacity 0.2s ease;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item:hover .mh-store-showcase-item__cta {
  opacity: 0.75;
}

.cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__name {
    font-size: 24px;
    line-height: 32px;
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item__img {
    transition: none;
  }

  .cc_t2dowgyg_IhO0nPudwH .mh-store-showcase-item:hover .mh-store-showcase-item__img {
    transform: none;
  }
}