/* assets/css/project-detail.css */
/* Minimalist, brand-aligned project detail styling */

:root{
  --brand-red:#ED1C24;
  --brand-dark:#231F20;
  --brand-gray:#f8f9fa;
  --ink:#1f2937;
  --muted:#6b7280;
}

/* Hero / Cover */
.project-hero{
  background: var(--brand-gray);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.project-hero .cover{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
}
.project-hero .cover img{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* kırpmasız */
  object-position: center;
}

/* Title + meta */
.project-header{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px;
}
.project-title{
  margin:0;
  font-weight:800;
  color:var(--brand-dark);
  line-height:1.2;
}
.project-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  color: var(--muted);
  font-size:.95rem;
}
.project-meta i{ margin-right:4px; }

.badge-outline{
  border:1px solid rgba(35,31,32,.25);
  color:#333;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.8rem;
}
.badge-red{
  background: rgba(237,28,36,.12);
  color:#ED1C24;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.8rem;
}

/* Body */
.project-body{
  color: var(--ink);
  line-height: 1.7;
}
.project-body p{ margin-bottom: .9rem; }
.project-body ul{ margin-bottom: .9rem; }

/* Gallery */
.gallery-title{
  font-weight:700; color:var(--brand-dark);
}
.gallery-grid{
  --gap: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 991.98px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .gallery-grid{ grid-template-columns: 1fr; }
}
.gallery-item{
  position: relative;
  background: var(--brand-gray);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  cursor: zoom-in;
}
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(35,31,32,.12) 100%);
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
@media (hover:hover){
  .gallery-item:hover::after{ opacity:1; }
}
.gallery-item img{
  width:100%; height: 240px;
  object-fit: cover;          /* küçük kartlarda cover daha iyi durur */
  object-position: center;
  display:block;
}

/* Lightbox (bootstrap modal) optional helpers */
.modal .lightbox-img{
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto; height: auto;
  object-fit: contain;
}

/* CTA bottom */
.detail-cta{
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-red));
  color:#fff; border-radius:14px;
  padding: 18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (max-width: 575.98px){
  .detail-cta{ flex-direction:column; text-align:center; }
}
.detail-cta .btn{ border-radius:999px; }



/* === PATCH: no-crop cover (project detail) === */
.project-cover-img,
.project-hero .cover img{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.project-hero .cover{ background:#f6f7f8; }