/*
 * Dinamik banner (includes/showcase.php). Blok adı neytraldır ("showcase") — reklam bloklayıcıları banner/ad/sponsor
 * sözlü sinifləri gizlədir. Kənardan-kənara (köhnə dizayn kimi): şəkil bütün en, hündürlük sabit (--showcase-height),
 * object-fit: cover — geniş ekranda kənarlardan kəsilir; mətn 1270px konteynerdə. .showcase--hero — ana səhifə
 * (hündür, üstündə axtarış forması). Telefonda şəkil öz nisbətində (3:2), mətn aşağıda; yuxarı slotda axtarışsız banner
 * telefonda da sabit --banner-height (dizayn kimi, Farhad 2026-10-22). Oxunaqlılıq üçün yüngül qaranlıq
 * keçid + mətn kölgəsi; düymə sarı fonda tünd mətn (9.56:1).
 */
.showcase {
  --showcase-height: var(--banner-height);   /* tokens.css — axtarışsız banner */
  position: relative;
}

.showcase--hero {
  --showcase-height: var(--banner-height-search);
}

.showcase__frame {
  position: relative;
  display: block;
  background: var(--color-surface);
  color: var(--color-on-primary);
  text-decoration: none;
}

.showcase__media {
  display: block;
}

.showcase__image {
  display: block;
  width: 100%;
  height: var(--showcase-height);
  object-fit: cover;
  object-position: center;
}

.showcase__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgb(37 43 66 / 50%) 0%, rgb(37 43 66 / 22%) 40%, rgb(37 43 66 / 0%) 70%);
}

.showcase__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.showcase__title {
  max-width: 22ch;
  font-size: clamp(1.25rem, 2.6vw, 2.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%), 0 2px 12px rgb(0 0 0 / 30%);
}

.showcase__subtitle {
  max-width: 42ch;
  font-size: clamp(var(--text-sm), 1.4vw, var(--text-lg));
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%), 0 2px 12px rgb(0 0 0 / 30%);
}

.showcase__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-xs);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  transition: background-color var(--transition);
}

a.showcase__frame:hover .showcase__cta {
  background: #ffe45c;
}

a.showcase__frame:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* Alçaq yuxarı banner (elan səhifəsi və s.) — dizayn bire-bir (top-banners__title, 2026-10-22): mətn ortada, başlıq
   tünd yarımşəffaf qutuda (26px, qalın; fon 60% — page-hero__title kimi, açıq şəkildə də AA) */
.showcase--top:not(.showcase--hero) .showcase__body {
  align-items: flex-start;
  padding-top: 50px;   /* dizayn: başlıq bannerin yuxarısından 50px */
  background: none;
}

.showcase--top:not(.showcase--hero) .showcase__inner {
  align-items: center;
  text-align: center;
}

.showcase--top:not(.showcase--hero) .showcase__title {
  max-width: min(80%, 900px);
  padding: 2px 20px;
  background: rgb(0 0 0 / 60%);
  font-size: 1.625rem;
  line-height: 1.5;
  text-shadow: none;
}

.showcase--top:not(.showcase--hero) .showcase__subtitle {
  padding: 4px 14px;
  background: rgb(0 0 0 / 60%);
  text-shadow: none;
}

/* Hero (ana səhifə): mətn yuxarıda — aşağı hissənin üstünə axtarış forması çıxır (search.css) */
.showcase--hero .showcase__body {
  align-items: flex-start;
  padding-top: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

/* Telefon: şəkil öz nisbətində (3:2), mətn aşağıda (hero-da — yuxarıda) */
@media (max-width: 575.98px) {
  .showcase__image {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .showcase__body {
    align-items: flex-end;
    padding-bottom: var(--space-md);
    background: linear-gradient(0deg, rgb(37 43 66 / 62%) 0%, rgb(37 43 66 / 28%) 45%, rgb(37 43 66 / 0%) 75%);
  }

  .showcase__cta {
    min-height: 40px;
    padding: 0 var(--space-md);
  }

  .showcase--hero .showcase__body {
    align-items: flex-start;
    padding-top: var(--space-md);
    background: linear-gradient(180deg, rgb(37 43 66 / 62%) 0%, rgb(37 43 66 / 28%) 45%, rgb(37 43 66 / 0%) 75%);
  }

  .showcase--top:not(.showcase--hero) .showcase__image {
    height: var(--showcase-height);
    aspect-ratio: auto;
  }

  .showcase--top:not(.showcase--hero) .showcase__body {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    background: none;
  }

  .showcase--top:not(.showcase--hero) .showcase__title {
    max-width: 100%;
    font-size: 1.25rem;
  }
}