/* ================================================================
   RPC — BLOG DETAIL + SERVICE DETAIL PAGES (shared sidebar)
   ================================================================ */

/* BLOG DETAIL */
.blog-detail-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.blog-detail-img { border-radius: 34px 34px 34px 8px; border: 4px solid var(--gold); overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-md); background: var(--bg-section); }
.blog-detail-img img { width: 100%; height: auto; max-height: 520px; display: block; object-fit: contain; }
.blog-meta-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--bg-section); border: 2px solid var(--border-mid); border-radius: var(--radius-xl); padding: 10px 20px; margin-bottom: 24px; width: fit-content; }
.blog-meta-bar span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-body); font-family: var(--font-ui); font-weight: 700; }
.blog-meta-bar span i { color: var(--primary); font-size: 13px; }
.blog-meta-bar .meta-divider { width: 1px; height: 14px; background: var(--border-mid); }
.blog-detail-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--text-dark); margin-bottom: 28px; line-height: 1.3; }
.blog-sidebar { position: sticky; top: 100px; }

.sidebar-card { background: var(--bg-light); border-radius: 26px 26px 26px 8px; padding: 28px 24px; margin-bottom: 24px; border: 3px solid var(--accent-light); }
.sidebar-card h5 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 3px dashed var(--gold); display: flex; align-items: center; gap: 8px; }
.sidebar-card h5::before { content: '★'; color: var(--gold); font-size: 14px; }

.recent-post-item { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--border-mid); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.recent-post-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.recent-post-item:hover { transform: translateX(6px); }
.recent-post-item img { width: 64px; height: 56px; object-fit: cover; border-radius: 14px 14px 14px 4px; border: 2px solid var(--primary-light); flex-shrink: 0; }
.recent-post-item .rp-title { font-size: 13px; font-weight: 700; color: var(--text-dark); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.recent-post-item:hover .rp-title { color: var(--primary); }
.recent-post-item .rp-date { font-size: 11px; color: var(--text-muted); font-family: var(--font-ui); }

.sidebar-booking-card { background: linear-gradient(155deg, var(--primary) 0%, var(--primary-dark) 100%); border: 4px solid var(--gold); border-radius: 30px 30px 30px 8px; padding: 30px 26px; position: relative; overflow: visible; }
.sidebar-booking-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(234,179,8,0.3) 0%, rgba(234,179,8,0) 70%); pointer-events: none; }
.sidebar-booking-card::after {
  content: '★';
  position: absolute;
  top: -16px;
  left: -14px;
  width: 38px;
  height: 38px;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transform: rotate(-14deg);
  z-index: 2;
}
.sidebar-booking-card .icon-circle { position: relative; z-index: 1; width: 48px; height: 48px; background: var(--gold); color: var(--primary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px; border: 3px solid #fff; }
.sidebar-booking-card h5 { position: relative; z-index: 1; color: #fff; border-bottom: none; font-family: var(--font-display); font-style: normal; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.sidebar-booking-card p { position: relative; z-index: 1; font-size: 13.5px; color: rgba(255,255,255,0.75); margin-bottom: 20px; line-height: 1.6; }
.sidebar-booking-card .btn-rpc { position: relative; z-index: 1; width: 100%; justify-content: center; }

.sidebar-card-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar-card-list a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-xl); font-size: 14px; color: var(--text-body); background: transparent; font-weight: 600; transition: all 0.25s; }
.sidebar-card-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .sidebar-card-list a:hover { background: var(--bg-section); color: var(--primary); padding-left: 18px; } }
.sidebar-card-list a:active { background: var(--bg-section); color: var(--primary); }
.sidebar-card-list a.active-link { background: var(--primary); color: #fff; font-weight: 700; }

/* ================================================================
   ABSOLUTE FINAL FIX — .blog-detail-wrap MUST stack on mobile.
   This file redefines it unconditionally at the top (no media
   query), which was overriding common.css's collapse rule since
   this file loads after common.css. Must stay LAST in file.
   ================================================================ */
@media (max-width: 1024px) {
  .blog-detail-wrap { grid-template-columns: 1fr !important; gap: 32px !important; }
  .blog-sidebar { position: static !important; top: auto !important; }
}
@media (max-width: 480px) {
  .blog-detail-title { font-size: 1.5rem !important; }
  .blog-meta-bar { padding: 8px 14px !important; gap: 10px !important; }
  .sidebar-card { padding: 20px 16px !important; }
  .sidebar-booking-card { padding: 22px 18px !important; }
}