/* ==========================================================
   components.css — পুনর্ব্যবহারযোগ্য UI কম্পোনেন্ট
   ========================================================== */

/* ---------- সেকশন শিরোনাম (লাল বার সহ) ---------- */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.4;
}

.section-title::before {
  content: "";
  flex: none;
  width: 5px;
  height: 1.2em;
  background: var(--c-primary);
  border-radius: 2px;
}

/* ---------- টাইপোগ্রাফি ক্লাস ---------- */
.title-2xl { font-size: var(--fs-2xl); line-height: 1.4; }
.title-xl  { font-size: var(--fs-xl);  line-height: 1.45; }
.title-lg  { font-size: var(--fs-lg);  line-height: 1.5; }
.title-md  { font-size: var(--fs-md);  line-height: 1.55; }
.title-sm  { font-size: var(--fs-sm);  line-height: 1.6; }

.meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ---------- ছবির ফ্রেম (লেআউট শিফট রোধ করে) ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--9x16 { aspect-ratio: 9 / 16; }

/* ---------- নিউজ কার্ড ---------- */
.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.news-card__title {
  font-weight: 700;
  line-height: 1.55;
}

.news-card:hover .news-card__title {
  color: var(--c-primary);
}

.news-card--row {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}

.news-card--row .media {
  flex: 0 0 38%;
  max-width: 140px;
}

.card {
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.card--pad {
  padding: var(--sp-4);
}

/* ---------- বাটন ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px; /* টাচ-ফ্রেন্ডলি */
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn--primary {
  color: #fff;
  background: var(--c-primary);
}

.btn--primary:hover {
  color: #fff;
  background: var(--c-primary-dark);
}

.btn--outline {
  color: var(--c-primary);
  background: transparent;
  border-color: var(--c-primary);
}

.btn--outline:hover {
  color: #fff;
  background: var(--c-primary);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- ব্যাজ ---------- */
.badge {
  display: inline-block;
  padding: 0.1rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  background: var(--c-primary);
  border-radius: 999px;
}

.badge--soft {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

/* ---------- ফর্ম ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--c-primary);
}