/* =====================================================
   SM Real – main.css
   CSS bổ sung cho các trang nội dung
   ===================================================== */

/* ── Archive / Listing Pages ── */
.archive-header {
  background: var(--c-ink);
  padding: 6rem 0 3rem;
  color: var(--c-warm-white);
}
.archive-header h1 { color: var(--c-warm-white); margin-bottom: 0.5rem; }
.archive-header p  { color: rgba(255,255,255,.7); font-size: 1.05rem; }

.archive-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--c-sand);
  margin-bottom: 2rem;
}
.archive-count {
  font-size: .9rem;
  color: var(--c-ink-light);
}
.archive-count strong { color: #0D1B3E; }

/* ── Filter Sidebar ── */
.archive-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.filter-sidebar {
  background: var(--c-warm-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}
.filter-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #0D1B3E;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--c-gold);
}
.filter-group { margin-bottom: 1.25rem; }
.filter-group label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-pale);
  display: block;
  margin-bottom: .5rem;
}

@media (max-width: 900px) {
  .archive-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }
}

/* ── Pagination ── */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  transition: all 0.25s ease;
  border: 1.5px solid var(--c-sand);
  color: var(--c-ink-mid);
}
.pagination a:hover { border-color: var(--c-gold); color: var(--c-gold); }
.pagination .current { background: #0D1B3E; color: var(--c-warm-white); border-color: #0D1B3E; }

/* ── Single Project Page ── */
.project-sections { padding: 3rem 0; }

.project-overview {
  background: var(--c-warm-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  padding: 2rem;
  margin-bottom: 2rem;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.overview-item {
  padding: 1rem;
  background: var(--c-cream);
  border-radius: 8px;
}
.overview-item-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink-pale);
  margin-bottom: .35rem;
}
.overview-item-value {
  font-size: .975rem;
  font-weight: 700;
  color: #0D1B3E;
}

/* ── Amenities ── */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  background: var(--c-cream);
  border-radius: 12px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: #0D1B3E;
  border: 1px solid var(--c-sand);
  transition: all 0.25s ease;
}
.amenity-item:hover {
  border-color: var(--c-gold);
  background: var(--c-gold-pale);
}
.amenity-icon { font-size: 1.75rem; }

@media (max-width: 768px) {
  .amenities-grid { grid-template-columns: repeat(3, 1fr); }
  .overview-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Project Gallery ── */
.project-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: .75rem;
  border-radius: 16px;
  overflow: hidden;
}
.project-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.4s ease;
}
.project-gallery img:hover { transform: scale(1.03); }
.project-gallery img:first-child { grid-row: span 2; }

@media (max-width: 640px) {
  .project-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .project-gallery img:first-child { grid-row: auto; }
}

/* ── Contact Form Box ── */
.contact-form-box {
  background: var(--c-warm-white);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 2rem;
  border-top: 4px solid var(--c-gold);
}
.contact-form-box h3 {
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
  color: #0D1B3E;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Sticky sidebar (single page) ── */
.single-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}
.single-sidebar { position: sticky; top: 90px; }

@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr; }
  .single-sidebar { position: static; }
}

/* ── Related Posts / Projects ── */
.related-section { padding: 3rem 0; border-top: 1px solid var(--c-sand); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }

/* ── Blog / Post Single ── */
.post-header {
  background: var(--c-ink);
  padding: 6rem 0 3rem;
  color: var(--c-warm-white);
}
.post-header h1 { color: var(--c-warm-white); max-width: 800px; }
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  margin-top: 1rem;
}
.post-meta a { color: var(--c-gold); }

.post-content {
  max-width: 780px;
  font-size: 1.025rem;
  line-height: 1.85;
  color: var(--c-ink-mid);
}
.post-content h2 { color: #0D1B3E; margin: 2rem 0 1rem; font-size: 1.5rem; }
.post-content h3 { color: #0D1B3E; margin: 1.5rem 0 .75rem; font-size: 1.25rem; }
.post-content p  { margin-bottom: 1.25rem; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content li { margin-bottom: .5rem; }
.post-content img { border-radius: 12px; margin: 1.5rem 0; }
.post-content a  { color: #0D1B3E; text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--c-gold); }
.post-content blockquote {
  border-left: 4px solid var(--c-gold);
  padding: 1rem 1.5rem;
  background: var(--c-gold-pale);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--c-ink-mid);
  margin: 1.5rem 0;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.post-content th { background: #0D1B3E; color: var(--c-warm-white); padding: .75rem 1rem; text-align: left; }
.post-content td { padding: .75rem 1rem; border-bottom: 1px solid var(--c-sand); }
.post-content tr:nth-child(even) td { background: var(--c-cream); }

/* ── Table of Contents ── */
.toc-box {
  background: var(--c-cream);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--c-sand);
  margin-bottom: 2rem;
}
.toc-box h4 { font-size: 1rem; margin-bottom: 1rem; color: #0D1B3E; }
.toc-list { counter-reset: toc; }
.toc-list li { counter-increment: toc; padding: .4rem 0; border-bottom: 1px solid var(--c-sand); }
.toc-list li:last-child { border-bottom: none; }
.toc-list a { font-size: .9rem; color: #0D1B3E; }
.toc-list a:hover { color: var(--c-gold); }

/* ── Ký gửi Page ── */
.consign-page-hero {
  background: linear-gradient(135deg, var(--c-ink), #0D1B3E);
  padding: 6rem 0 4rem;
  color: var(--c-warm-white);
  text-align: center;
}
.consign-page-hero h1 { color: var(--c-warm-white); margin-bottom: 1rem; }
.consign-page-hero p  { color: rgba(255,255,255,.75); max-width: 620px; margin: 0 auto; }

.consign-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: steps;
}
.step-item {
  text-align: center;
  padding: 2rem 1.25rem;
  background: var(--c-warm-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  position: relative;
  counter-increment: steps;
}
.step-item::before {
  content: counter(steps);
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background: var(--c-gold);
  color: var(--c-ink);
  font-weight: 700;
  font-size: .9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 32px;
}
.step-icon { font-size: 2rem; margin-bottom: 1rem; }
.step-title { font-size: 1rem; font-weight: 700; color: #0D1B3E; margin-bottom: .5rem; }
.step-desc  { font-size: .875rem; color: var(--c-ink-light); }

@media (max-width: 768px) {
  .consign-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .consign-steps { grid-template-columns: 1fr; }
}

/* ── Khu vực page ── */
.area-hero {
  background: var(--c-ink);
  padding: 6rem 0 3rem;
  color: var(--c-warm-white);
}
.area-hero h1 { color: var(--c-warm-white); }
.area-highlight {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.area-highlight-item {
  text-align: center;
  padding: 1.25rem;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
}
.area-highlight-num  { font-size: 1.5rem; font-weight: 700; color: var(--c-gold); font-family: var(--f-display); }
.area-highlight-label{ font-size: .8rem; color: rgba(255,255,255,.6); }

@media (max-width: 640px) { .area-highlight { grid-template-columns: 1fr 1fr; } }

/* ── 404 Page ── */
.not-found-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
}
.not-found-code {
  font-size: 6rem;
  font-weight: 700;
  color: var(--c-gold);
  font-family: var(--f-display);
  line-height: 1;
  margin-bottom: 1rem;
}

/* ── Print styles ── */
@media print {
  .site-header, .mobile-cta-bar, .floating-buttons, footer { display: none !important; }
  body { padding: 0 !important; }
}

/* ── Trang Ký Gửi ── */
.consign-steps { counter-reset: steps; }
.step-item {
  text-align:center; padding:2rem 1.25rem;
  background:#fff; border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.10); position:relative;
  counter-increment:steps;
}
.step-item::before {
  content:counter(steps);
  position:absolute; top:-1rem; left:50%; transform:translateX(-50%);
  width:32px; height:32px; background:var(--c-gold); color:var(--c-ink);
  font-weight:700; font-size:.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:32px;
}
.step-icon { font-size:2rem; margin-bottom:1rem; }
.step-title { font-size:1rem; font-weight:700; color:#0D1B3E; margin-bottom:.5rem; }
.step-desc  { font-size:.875rem; color:var(--c-ink-light); }

@media (max-width:768px) {
  .consign-steps { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:480px) {
  .consign-steps { grid-template-columns:1fr !important; }
}

/* ── Backward compat: old listing-card classes → new styles ── */
.listing-card {
  display: flex;
  background: var(--c-warm-white);
  border-bottom: 1px solid var(--c-sand);
  transition: background var(--dur-fast);
  text-decoration: none;
  color: inherit;
}
.listing-card:hover { background: var(--c-cream); }
.listing-card-img {
  flex-shrink: 0; width: 200px; overflow: hidden; position: relative;
}
.listing-card-img img { width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease); }
.listing-card:hover .listing-card-img img { transform: scale(1.05); }
.listing-card-body {
  flex:1;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;
}
.listing-card-project {
  font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-gold);margin-bottom:.35rem;
}
.listing-card-title {
  font-family:var(--f-display);font-weight:300;font-size:1.1rem;
  color:var(--c-ink);line-height:1.25;margin-bottom:.65rem;
}
.listing-card-details {
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.78rem;color:var(--c-ink-light);
  margin-bottom:.65rem;
}
.listing-detail {
  display:flex;align-items:center;gap:.3rem;
}
.listing-card-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding-top:.75rem;border-top:1px solid var(--c-sand);
}
.listing-price {
  font-family:var(--f-display);font-size:1.3rem;font-weight:300;color:var(--c-ink);
}
.listing-cta { display:flex;gap:.4rem; }

/* ── project-card old class ── */
.project-card { background:var(--c-warm-white);overflow:hidden;transition:all var(--dur-base); }
.project-card:hover { transform:translateY(-3px); }
.project-card-img { position:relative;overflow:hidden;aspect-ratio:4/3; }
.project-card-img img { width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease); }
.project-card:hover .project-card-img img { transform:scale(1.06); }
.project-card-badge { position:absolute;top:.75rem;left:.75rem; }
.project-card-body { padding:1.25rem; }
.project-card-title { font-family:var(--f-display);font-size:1.1rem;font-weight:300;color:var(--c-ink);margin-bottom:.4rem; }
.project-card-location { font-size:.75rem;color:var(--c-ink-pale);margin-bottom:.9rem; }
.project-prices { display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.85rem;background:var(--c-cream);margin-bottom:1rem; }
.project-price-item label { font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink-pale);display:block;margin-bottom:.2rem; }
.project-price-value { font-size:.9rem;font-weight:500;color:var(--c-ink); }

/* ── card old class ── */
.card { background:var(--c-warm-white);border:1px solid var(--c-sand);overflow:hidden;transition:all var(--dur-base); }
.card:hover { transform:translateY(-3px); }
.card-img { position:relative;overflow:hidden;aspect-ratio:4/3; }
.card-img img { width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease); }
.card:hover .card-img img { transform:scale(1.05); }
.card-body { padding:1.25rem; }
.card-title { font-family:var(--f-display);font-weight:300;font-size:1.05rem;color:var(--c-ink);margin-bottom:.4rem; }

/* ── prop-info old ── */
.prop-info { display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.8rem;color:var(--c-ink-light); }
.prop-info-item { display:flex;align-items:center;gap:.3rem; }
.prop-info-item svg { width:14px;height:14px;color:var(--c-gold); }

/* ── section header old ── */
.section-header { text-align:center;margin-bottom:var(--sp-lg); }
.section-label { font-size:.65rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);display:inline-block;margin-bottom:.65rem; }
.section-title { font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,3.5vw,3rem);color:var(--c-ink);letter-spacing:-.02em;line-height:1.1; }
.section-subtitle { font-size:.9rem;color:var(--c-ink-light);max-width:560px;margin:.75rem auto 0; }

/* ── faq old ── */
.faq-item { border-bottom:1px solid var(--c-sand); }
.faq-question {
  width:100%;background:none;border:none;text-align:left;
  padding:1.1rem 0;font-size:.9rem;font-weight:400;color:var(--c-ink);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color var(--dur-fast);letter-spacing:.01em;
}
.faq-question:hover { color:var(--c-gold); }
.faq-question.active { color:var(--c-gold); }
.faq-icon { width:18px;height:18px;flex-shrink:0;transition:transform var(--dur-base); }
.faq-question.active .faq-icon { transform:rotate(45deg); }
.faq-answer { display:none;padding:.25rem 0 1.1rem;font-size:.875rem;color:var(--c-ink-light);line-height:1.8; }

/* ── btn old classes ── */
.btn-primary { background:var(--c-ink);color:var(--c-warm-white);border-color:var(--c-ink); }
.btn-primary:hover { background:var(--c-gold);border-color:var(--c-gold); }
.btn-navy { background:var(--c-ink);color:var(--c-warm-white);border-color:var(--c-ink); }
.btn-navy:hover { background:var(--c-ink-mid);border-color:var(--c-ink-mid); }
.btn-block { display:flex;width:100%;justify-content:center; }
.btn-lg { padding:1rem 2.75rem;font-size:.78rem; }
.btn-sm { padding:.55rem 1.25rem;font-size:.68rem; }

/* ── Filter sidebar new style ── */
.archive-layout { display:grid;grid-template-columns:260px 1fr;gap:3rem;align-items:start; }
.filter-sidebar {
  background:var(--c-cream);border:1px solid var(--c-sand);padding:2rem;
  position:sticky;top:90px;
}
.filter-heading {
  font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-ink-pale);padding-bottom:.9rem;border-bottom:1px solid var(--c-sand);margin-bottom:1.25rem;
  display:flex;align-items:center;justify-content:space-between;
}
.filter-group { margin-bottom:1.25rem; }
.filter-group label { font-size:.58rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-pale);display:block;margin-bottom:.4rem; }

/* ── Price table ── */
.price-table { width:100%;border-collapse:collapse;font-size:.85rem; }
.price-table th { background:var(--c-ink);color:var(--c-warm-white);padding:.75rem 1rem;text-align:left;font-weight:500;font-size:.78rem;letter-spacing:.04em; }
.price-table td { padding:.75rem 1rem;border-bottom:1px solid var(--c-sand);color:var(--c-ink-light); }
.price-table tr:nth-child(even) td { background:var(--c-cream); }
.price-table tr:hover td { background:var(--c-gold-pale); }

/* ── Amenities ── */
.amenities-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem; }
.amenity-item {
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:1.25rem 1rem;background:var(--c-cream);border:1px solid var(--c-sand);
  text-align:center;font-size:.78rem;font-weight:400;color:var(--c-ink);
  transition:all var(--dur-fast);
}
.amenity-item:hover { background:var(--c-warm-white);border-color:var(--c-gold); }
.amenity-icon { font-size:1.5rem; }

/* ── Pagination ── */
.pagination { display:flex;justify-content:center;gap:.35rem;margin-top:2.5rem;flex-wrap:wrap; }
.pagination a, .pagination span {
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;font-size:.8rem;font-weight:400;
  border:1px solid var(--c-sand);color:var(--c-ink-light);
  transition:all var(--dur-fast);
}
.pagination a:hover { border-color:var(--c-ink);color:var(--c-ink); }
.pagination .current { background:var(--c-ink);color:var(--c-warm-white);border-color:var(--c-ink); }

/* ── Badge reused ── */
.badge-gold    { background:var(--c-gold-pale);color:var(--c-gold); }
.badge-navy    { background:var(--c-ink);color:var(--c-warm-white); }
.badge-green   { background:#ECFDF5;color:#065F46; }
.badge-red     { background:#FEF2F2;color:#991B1B; }
.badge-orange  { background:#FEF3C7;color:#92400E; }

/* ── Grid helpers ── */
.grid   { display:grid;gap:1.25rem; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

@media(max-width:900px){
  .archive-layout{grid-template-columns:1fr;}
  .filter-sidebar{position:static;}
  .amenities-grid{grid-template-columns:repeat(3,1fr);}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .listing-card{flex-direction:column;}
  .listing-card-img{width:100%;height:200px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .amenities-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Archive page spacing ── */
.section-sm { padding:var(--sp-2xl) 0; }

/* ── Project grid v2 responsive ── */
@media (max-width: 1100px) {
  .projects-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pj-card:first-child { grid-row: span 1; aspect-ratio: 4/5; }
  .pj-card:first-child .pj-name { font-size: clamp(1.4rem,2.8vw,1.8rem); }
}
@media (max-width: 640px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .pj-card { aspect-ratio: 3/2; }
  .pj-card:first-child { aspect-ratio: 3/2; grid-row: span 1; }
  .pj-watermark { display: none; }
  .pj-prices { opacity: 1; transform: translateY(0); }
}

/* ── Hero navy light version ── */
/* Khi không có ảnh nền – gradient navy đẹp */
.hero-no-img {
  background: linear-gradient(
    135deg,
    #0B1F3A 0%,
    #132E52 50%,
    #0B1F3A 100%
  );
}

/* ════════════════════════════════════════
   ARCHIVE PAGES – Design nhất quán
════════════════════════════════════════ */
.archive-count strong { color: var(--c-ink); }
.archive-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-sand);
  margin-bottom: 1.75rem;
  font-size: .82rem;
  color: var(--c-ink-light);
}

/* Filter sidebar button */
#applyFilters {
  background: var(--c-ink) !important;
  color: var(--c-warm-white) !important;
  border-color: var(--c-ink) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .68rem;
  transition: background .2s;
}
#applyFilters:hover { background: var(--c-gold) !important; border-color: var(--c-gold) !important; }

/* View toggle buttons */
.view-btn {
  padding: .4rem .75rem;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
  transition: all .2s;
  line-height: 1;
}
.view-btn.active { background: var(--c-ink) !important; color: #fff !important; }

/* Active filter tags */
.smr-ftag {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--c-ink); color: var(--c-warm-white);
  font-size: .68rem; font-weight: 500; padding: .22rem .65rem;
  letter-spacing: .06em;
}
.smr-ftag button {
  background: none; border: none;
  color: rgba(255,255,255,.55); cursor: pointer; font-size: .82rem;
}

/* Skeleton loading */
@keyframes smrSkel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════
   SINGLE POST (Blog)
════════════════════════════════════════ */
.post-header {
  background: var(--c-ink);
  padding: 8rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.post-header h1 { color: var(--c-warm-white); max-width: 800px; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  color: rgba(255,255,255,.5); font-size: .78rem; margin-top: 1rem;
}
.post-meta a { color: var(--c-gold); }
.post-content {
  font-size: 1rem; line-height: 1.85; color: var(--c-ink-mid);
  max-width: 780px;
}
.post-content h2 { color: var(--c-ink); margin: 2.5rem 0 1rem; }
.post-content h3 { color: var(--c-ink); margin: 2rem 0 .75rem; }
.post-content p  { margin-bottom: 1.25rem; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content li { margin-bottom: .5rem; }
.post-content img { border-radius: 4px; margin: 1.5rem 0; }
.post-content a   { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--c-gold); }
.post-content blockquote {
  border-left: 3px solid var(--c-gold);
  padding: 1rem 1.5rem; background: var(--c-gold-pale);
  font-style: italic; color: var(--c-ink-light); margin: 1.5rem 0;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.post-content th { background: var(--c-ink); color: var(--c-warm-white); padding: .75rem 1rem; text-align: left; font-weight: 500; }
.post-content td { padding: .75rem 1rem; border-bottom: 1px solid var(--c-sand); }
.post-content tr:nth-child(even) td { background: var(--c-cream); }

/* ════════════════════════════════════════
   SINGLE LAYOUT
════════════════════════════════════════ */
.single-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}
.single-sidebar {
  position: sticky;
  top: 90px;
}
@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr; }
  .single-sidebar { position: static; }
}

/* ════════════════════════════════════════
   CONTACT FORM BOX
════════════════════════════════════════ */
.contact-form-box {
  background: var(--c-warm-white);
  border: 1px solid var(--c-sand);
  padding: 2rem;
}
.contact-form-box h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--c-ink);
  margin-bottom: .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ════════════════════════════════════════
   404 PAGE
════════════════════════════════════════ */
.not-found-page {
  min-height: 60vh; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 4rem 1rem;
}
.not-found-code {
  font-size: 7rem; font-weight: 300;
  color: var(--c-gold); font-family: var(--f-display);
  line-height: 1; margin-bottom: 1rem;
}

/* ════════════════════════════════════════
   TOOLS PAGE
════════════════════════════════════════ */
.tool-tab {
  flex: 1;
  padding: 1rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: .875rem;
  font-family: var(--f-body);
  transition: all .2s ease;
}
.tool-tab.active {
  background: var(--c-ink) !important;
  color: var(--c-warm-white) !important;
}
.tool-panel { display: block; }