/* ═══════════════════════════════════════════════════════════
   blog-carousel.css  —  Sahihli Blog Carousel + Mini Strip
   ═══════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────── */
.bc-section {
  max-width: 900px;
  margin: 3rem auto 0;
  padding: 0 1rem 2rem;
}

/* ── Header row ──────────────────────────────────────── */
.bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bc-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--foreground, #171717);
}
.bc-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bc-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--border, #e5e5e5);
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--foreground, #171717);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.bc-btn:hover { background: var(--primary,#2563eb); border-color: var(--primary,#2563eb); color:#fff; }
.bc-view-all {
  font-size: 0.85rem; font-weight: 600;
  color: var(--primary, #2563eb); text-decoration: none;
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--primary, #2563eb);
  border-radius: 2rem;
  transition: background 0.2s, color 0.2s; white-space: nowrap;
}
.bc-view-all:hover { background: var(--primary,#2563eb); color:#fff; }

/* ── Track ───────────────────────────────────────────── */
.bc-track-wrap { overflow: hidden; border-radius: 12px; direction: ltr; }
.bc-track { direction: ltr;
  display: flex; gap: 24px;
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

/* ── Card ────────────────────────────────────────────── */
.bc-card {
  flex: 0 0 calc(33.333% - 16px); min-width: 260px;
  background: var(--card,#fff); border: 1px solid var(--border,#e5e5e5);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s;
}
.bc-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.bc-card-img { width:100%; aspect-ratio:16/8; position:relative; overflow:hidden; flex-shrink:0; }
.bc-card-body {
  padding: 1rem 1.1rem 0.6rem; flex:1;
  display:flex; flex-direction:column; gap:0.35rem;
}
.bc-cat { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; }
.bc-title { font-size:0.95rem; font-weight:700; line-height:1.45; color:var(--foreground,#171717); }
.bc-excerpt { font-size:0.82rem; color:var(--muted-foreground,#737373); line-height:1.6; flex:1; }
.bc-card-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.7rem 1.1rem; border-top:1px solid var(--border,#e5e5e5);
  font-size:0.78rem; color:var(--muted-foreground,#737373); background:var(--muted,#f5f5f5);
}
.bc-read-more { color:var(--primary,#2563eb); font-weight:600; }

/* ── Dots ────────────────────────────────────────────── */
.bc-dots { display:flex; justify-content:center; gap:6px; margin-top:1rem; }
.bc-dot {
  width:8px; height:8px; border-radius:50%; border:none;
  background:var(--border,#e5e5e5); cursor:pointer; padding:0;
  transition: background 0.2s, transform 0.2s;
}
.bc-dot.active { background:var(--primary,#2563eb); transform:scale(1.3); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:720px)  { .bc-card { flex:0 0 calc(100% - 2px); min-width:unset; } }
@media (min-width:721px) and (max-width:960px) { .bc-card { flex:0 0 calc(50% - 12px); } }


/* ═══════════════════════════════════════════════════════
   MINI STRIP  —  legal/info pages footer teaser
   ═══════════════════════════════════════════════════════ */
.bms-section {
  max-width: 900px; margin: 0 auto;
  padding: 2rem 1rem 0.5rem;
  border-top: 1px solid var(--border,#e5e5e5);
}
.bms-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.9rem; }
.bms-heading { font-size:0.95rem; font-weight:700; color:var(--foreground,#171717); }
.bms-view-all { font-size:0.8rem; font-weight:600; color:var(--primary,#2563eb); text-decoration:none; }
.bms-view-all:hover { text-decoration:underline; }
.bms-row { display:flex; flex-direction:column; gap:0.6rem; }
.bms-pill {
  display:flex; align-items:center; gap:0.85rem; padding:0.65rem 0.85rem;
  background:var(--card,#fff); border:1px solid var(--border,#e5e5e5);
  border-radius:10px; text-decoration:none; color:inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.bms-pill:hover { box-shadow:0 4px 14px rgba(0,0,0,0.09); transform:translateX(3px); }
.bms-pill-img {
  width:52px; height:36px; border-radius:6px; flex-shrink:0;
  position:relative; overflow:hidden; display:block;
}
.bms-pill-img svg { position:absolute; inset:0; width:100%; height:100%; }
.bms-pill-body { flex:1; display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.bms-cat { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.bms-title { font-size:0.88rem; font-weight:600; line-height:1.35; color:var(--foreground,#171717); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bms-arrow { color:var(--primary,#2563eb); font-size:0.95rem; flex-shrink:0; }
@media (max-width:480px) { .bms-title { white-space:normal; } }
/* SVG card images — loaded from file, fill container like inline SVG did */
.bc-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Related articles carousel (brc-*) */
.brc-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.brc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.brc-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.brc-controls { display: flex; gap: 6px; }
.brc-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.brc-btn:hover { background: var(--muted); }
.brc-track-wrap { overflow: hidden; direction: ltr; }
.brc-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.brc-card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.brc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.brc-card-img {
  width: 100%;
  aspect-ratio: 16/8;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.brc-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brc-card-body {
  padding: 0.85rem 1rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brc-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brc-title {
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}
.brc-footer {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 4px;
}
.brc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
}
.brc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.brc-dot.active { background: var(--primary); transform: scale(1.3); }

@media (max-width: 640px) {
  .brc-card { flex: 0 0 calc(100% - 2px); min-width: unset; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .brc-card { flex: 0 0 calc(50% - 10px); }
}