/* =========================================================
   La Bien – Page Hero (global inner)
   File: assets/css/pages/page-hero.css
   Prefix: lbn-
   ========================================================= */

.lbn-page-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);

  /* hero yüksekliği: iç sayfalarda daha “kompakt” */
  min-height: clamp(260px, 34vh, 420px);
  background: #0b0c10;
}

.lbn-page-hero__media{
  position:absolute;
  inset:0;
  z-index:0;

  background: center/cover no-repeat;
  transform: scale(1.03);
  filter: brightness(.78) contrast(1.06);
}

.lbn-page-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    radial-gradient(900px 420px at 20% 28%, rgba(0,0,0,.38), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.58) 72%, rgba(0,0,0,.70));
}

.lbn-page-hero__wrap{
  position: relative;
  z-index: 2;

  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(18px, 3.2vw, 34px);
  min-height: clamp(260px, 34vh, 420px);

  display: grid;
  align-content: end;
  gap: 12px;
}

.lbn-page-hero__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lbn-page-hero__crumbs{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;

  font-size: 13.5px;
  color: rgba(255,255,255,.85);
}

.lbn-page-hero__crumbs a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.lbn-page-hero__crumbs a:hover{ text-decoration: underline; }
.lbn-page-hero__crumbs .sep{ opacity:.6; }

.lbn-page-hero__content{
  max-width: min(860px, 96vw);
}

.lbn-page-hero__title{
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3vw + 10px, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 14px 34px rgba(0,0,0,.38);
}

.lbn-page-hero__desc{
  margin: 10px 0 0;
  color: rgba(235,238,244,.92);
  font-size: clamp(14px, 1.05vw + 10px, 18px);
  max-width: 70ch;
}

.lbn-page-hero__actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero içindeki butonlar: main.css’teki .btn sistemini kullanıyoruz */
.lbn-page-hero__actions .btn{
  max-width: 100%;
}

.lbn-page-hero__actions .btn--ghost{
  border-color: rgba(255,255,255,.35);
}

/* Mobil */
@media (max-width: 600px){
  .lbn-page-hero__actions .btn{ width: 100%; }
}