/* Google Font – Alexandria */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@700&display=swap');

/* Wrapper */
.bein-post-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1576 / 700;
  overflow: hidden;

  /* container query units için */
  container-type: inline-size;
}

/* Link wrapper */
.bein-post-cover__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Image */
.bein-post-cover__img {
  position: relative;
  z-index: 1; /* custom.css'e uyum: image 1 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   Theme / Custom overlay stacking fix
   - custom.css:
     img z=1
     glass ::before z=2
     badge ::after z=3
   - we need title overlay above all => z=4+
   ========================================= */

/* Sadece glass shine katmanını kontrol et (badge'e dokunma!) */
.card .card-image.card-image-overlay::before {
  z-index: 2; /* custom.css ile aynı */
}

/* NOT: ::after rozet; blog.css burada ASLA override etmez. */

/* Overlay container (title) */
.bein-post-cover.is-default-cover .bein-post-cover__overlay {
  position: absolute;
  inset: 0;

  z-index: 4; /* badge (3) üstü, her zaman görünür */

  display: grid;
  place-items: center;
  text-align: center;

  pointer-events: none;

  /* Photoshop safe margins hissi */
  padding-inline: 6.1%;  /* 1576’da ~96px */
  padding-block: 6.0%;
}

/* ===== TITLE (Photoshop 85px reference) =====
   85px / 1576px = 0.05395 of container width
   container query unit: 1cqw = container width / 100
   => 100cqw * 0.05395
*/
.bein-post-cover.is-default-cover .bein-post-cover__title {
  font-family: 'Alexandria', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;

  /* Photoshop match scaling (container-based) */
  font-size: calc(100cqw * 0.05395);

  line-height: 1.08;

  max-width: 100%;
  margin: 0;

  color: #ffffff;

  text-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.35);

  /* 2-3 satır kontrollü */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ---- Fallback (container query unit desteklemeyen tarayıcılar) ---- */
@supports not (font-size: 1cqw) {
  .bein-post-cover.is-default-cover .bein-post-cover__title {
    font-size: clamp(28px, 5.4vw, 60px);
  }
}

/* Küçük ekranlarda optik merkez düzeltmesi */
@media (max-width: 768px) {
  .bein-post-cover.is-default-cover .bein-post-cover__title {
    transform: translateY(-2px);
    line-height: 1.10;
  }
}