/* ─────────────────────────────────────────
   Marrakech Blog Cards — cards.css
───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@600;700&family=Karla:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

/* ── GRID ── */
.mbc-wrap { width: 100%; }

.mbc-grid {
  display: grid;
  gap: 18px;
}
.mbc-cols-1 .mbc-grid { grid-template-columns: 1fr; }
.mbc-cols-2 .mbc-grid { grid-template-columns: repeat(2, 1fr); }
.mbc-cols-3 .mbc-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
  .mbc-cols-3 .mbc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .mbc-cols-2 .mbc-grid,
  .mbc-cols-3 .mbc-grid { grid-template-columns: 1fr; }
}

/* ── CARD ── */
.mbc-card {
  background:     #f4ede0;
  border:         1.5px solid #e0cebc;
  border-radius:  6px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mbc-card:hover {
  transform:   translateY(-3px);
  border-color: #c84820;
  box-shadow:  0 8px 28px rgba(58, 28, 8, 0.09);
}

/* ── THUMBNAIL ── */
.mbc-thumb {
  position:      relative;
  width:         100%;
  aspect-ratio:  3 / 2;
  background:    #d8c8a8;
  overflow:      hidden;
  border-bottom: 1.5px solid #e0cebc;
  flex-shrink:   0;
}
.mbc-thumb::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, transparent 55%, rgba(58,28,8,0.1));
  pointer-events: none;
}
.mbc-thumb a          { display: block; width: 100%; height: 100%; }
.mbc-thumb-img        { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transition: transform 0.35s ease; }
.mbc-card:hover .mbc-thumb-img { transform: scale(1.04); }

.mbc-thumb-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  background:      #d8c8a8;
  text-decoration: none;
}
.mbc-thumb-icon { font-size: 24px; color: #b8a888; opacity: 0.5; }

/* Destination label */
.mbc-dest {
  position:       absolute;
  bottom:         8px;
  right:          10px;
  font-family:    'Lexend Exa', sans-serif;
  font-size:      7px;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          #5a3818;
  opacity:        0.45;
  z-index:        1;
}

/* ── BODY ── */
.mbc-body {
  padding:        15px 16px 14px;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

/* ── TAG ── */
.mbc-tag {
  display:         inline-block;
  font-family:     'Karla', sans-serif;
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         3px 9px;
  border-radius:   2px;
  margin-bottom:   0;
  text-decoration: none !important;
  transition:      opacity 0.15s;
  width:           fit-content;
}
.mbc-tag:hover { opacity: 0.85; }

/* ── RULE ── */
.mbc-rule {
  width:         24px;
  height:        2px;
  margin-top:    8px;
  margin-bottom: 10px;
  background:    #c84820;
  flex-shrink:   0;
}

/* ── TITLE ── */
.mbc-title {
  font-family:    'Lexend Exa', sans-serif !important;
  font-size:      13px !important;
  font-weight:    700 !important;
  line-height:    1.2 !important;
  letter-spacing: -0.03em !important;
  margin:         0 0 8px !important;
  padding:        0 !important;
}
.mbc-title a {
  color:           #3a1c08 !important;
  text-decoration: none !important;
  transition:      opacity 0.15s;
}
.mbc-title a:hover { opacity: 0.75; }

/* ── EXCERPT ── */
.mbc-excerpt {
  font-family: 'Karla', sans-serif;
  font-size:   12px;
  font-weight: 300;
  line-height: 1.65;
  color:       #5a3818;
  margin:      0 0 14px;
  flex:        1;
}

/* ── FOOTER ── */
.mbc-card-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-top:      1px solid #e0cebc;
  padding-top:     10px;
  margin-top:      auto;
}

.mbc-meta {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-family: 'Karla', sans-serif;
  font-size:   10px;
  color:       #5a3818;
  opacity:     0.5;
}
.mbc-dot { opacity: 0.4; }

.mbc-readmore {
  font-family:          'Karla', sans-serif;
  font-size:            9px !important;
  font-weight:          700;
  letter-spacing:       0.1em;
  text-transform:       uppercase;
  color:                #c84820 !important;
  text-decoration:      underline !important;
  text-underline-offset: 2px;
  transition:           opacity 0.15s;
  white-space:          nowrap;
}
.mbc-readmore:hover { opacity: 0.75; }

/* ── EMPTY ── */
.mbc-empty {
  grid-column: 1 / -1;
  padding:     48px 24px;
  text-align:  center;
  font-family: 'Karla', sans-serif;
  font-size:   14px;
  font-weight: 300;
  font-style:  italic;
  color:       #5a3818;
  opacity:     0.5;
}

/* ── LOAD MORE ── */
.mbc-loadmore-wrap {
  display:         flex;
  justify-content: center;
  margin-top:      32px;
}
.mbc-loadmore-btn {
  font-family:    'Karla', sans-serif;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        11px 32px;
  border-radius:  4px;
  border:         2px solid #c84820;
  background:     transparent;
  color:          #c84820;
  cursor:         pointer;
  transition:     background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mbc-loadmore-btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}
.mbc-loadmore-btn .mbc-spinner {
  display:      inline-block;
  width:        12px;
  height:       12px;
  border:       2px solid currentColor;
  border-top:   2px solid transparent;
  border-radius: 50%;
  animation:    mbc-spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes mbc-spin { to { transform: rotate(360deg); } }

/* ── CARD ENTRY ANIMATION ── */
.mbc-card {
  animation: mbc-rise 0.32s ease both;
}
@keyframes mbc-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mbc-card:nth-child(1) { animation-delay: 0.00s; }
.mbc-card:nth-child(2) { animation-delay: 0.05s; }
.mbc-card:nth-child(3) { animation-delay: 0.10s; }
.mbc-card:nth-child(4) { animation-delay: 0.15s; }
.mbc-card:nth-child(5) { animation-delay: 0.20s; }
.mbc-card:nth-child(6) { animation-delay: 0.25s; }
.mbc-card:nth-child(7) { animation-delay: 0.30s; }
.mbc-card:nth-child(8) { animation-delay: 0.35s; }
.mbc-card:nth-child(9) { animation-delay: 0.40s; }
.mbc-card.mbc-new      { animation: mbc-rise 0.28s ease both; animation-delay: 0s !important; }

/* ─────────────────────────────────────────
   HORIZONTAL LAYOUT (Variant 3)
───────────────────────────────────────── */
.vcbc-card-horizontal {
  flex-direction: row !important;
  align-items:    stretch;
}

/* Narrow image strip */
.vcbc-card-horizontal .vcbc-thumb-h {
  width:         100px;
  min-width:     100px;
  aspect-ratio:  unset !important;
  height:        auto;
  border-bottom: none !important;
  border-right:  1.5px solid #e0cebc;
  flex-shrink:   0;
  position:      relative;
  overflow:      hidden;
}
.vcbc-card-horizontal .vcbc-thumb-h a {
  display:  block;
  width:    100%;
  height:   100%;
  position: absolute;
  inset:    0;
}
.vcbc-card-horizontal .vcbc-thumb-h .mbc-thumb-img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  object-position: center center;
  position:     absolute;
  inset:        0;
}
.vcbc-card-horizontal .vcbc-thumb-h .mbc-thumb-placeholder {
  position: absolute;
  inset:    0;
}
/* Number label on horizontal */
.vcbc-card-horizontal .vcbc-thumb-h::before {
  content:        attr(data-num);
  position:       absolute;
  top:            8px;
  left:           0; right: 0;
  text-align:     center;
  font-family:    'Lexend Exa', sans-serif;
  font-size:      10px;
  font-weight:    700;
  z-index:        2;
  pointer-events: none;
}

/* Body sits beside image */
.vcbc-card-horizontal .mbc-body {
  flex:          1;
  min-width:     0;
  display:       flex;
  flex-direction: column;
  justify-content: space-between;
  padding:       14px 15px 13px;
}

/* Tag in horizontal — inherits .mbc-tag styles; only adjust margin */
.vcbc-card-horizontal .mbc-tag {
  margin-bottom: 8px;
}

/* Rule narrower in horizontal */
.vcbc-card-horizontal .mbc-rule {
  width:        20px;
  margin-bottom: 7px;
}

/* Title slightly smaller */
.vcbc-card-horizontal .mbc-title {
  font-size: 12px !important;
  margin-bottom: 5px !important;
}

/* Excerpt smaller */
.vcbc-card-horizontal .mbc-excerpt {
  font-size:   11px;
  margin-bottom: 10px;
}

/* Responsive — stack on mobile */
@media (max-width: 480px) {
  .vcbc-card-horizontal {
    flex-direction: column !important;
  }
  .vcbc-card-horizontal .vcbc-thumb-h {
    width:       100% !important;
    min-width:   0 !important;
    aspect-ratio: 3 / 2 !important;
    height:      auto !important;
    border-right: none !important;
    border-bottom: 1.5px solid #e0cebc !important;
    position:    relative !important;
  }
  .vcbc-card-horizontal .vcbc-thumb-h a,
  .vcbc-card-horizontal .vcbc-thumb-h .mbc-thumb-img {
    position: relative !important;
    inset:    unset !important;
  }
}