/* ===================================================================
   DHOLKI — Blog Archive (hero, sidebar, post grid, pagination).
   Rendered by the Dholki Blog Elementor widget. Site header, footer
   and the newsletter CTA are separate widgets — this file only styles
   the blog listing itself.
=================================================================== */

.dholki-blog-root{
  --dholki-blog-accent: #D9612F !important;
  --dholki-blog-accent-dark: #F15F42 !important;
  --dholki-blog-orange: #D9612F;
  --dholki-blog-cream: #FBEDE3;
  --dholki-blog-cream-2: #FDF6F0;
  --dholki-blog-rose-light: #F6E6E9;
  --dholki-blog-border: #F0DDD0;
  --dholki-blog-text: #2B2320;
  --dholki-blog-text-soft: #6b5c56;
  --dholki-blog-gold: #c99a3b;
  --dholki-blog-font-serif: 'Playfair Display', Georgia, serif;
  --dholki-blog-font-sans: 'Poppins', system-ui, sans-serif;
}

.dholki-blog-root,
.dholki-blog-root *{ box-sizing:border-box; }
.dholki-blog-root{
  font-family: var(--dholki-blog-font-sans);
  color: var(--dholki-blog-text);
  background: var(--dholki-blog-cream-2);
}
.dholki-blog-root a{ text-decoration:none; color:inherit; }
.dholki-blog-root ul{ list-style:none; margin:0; padding:0; }
.dholki-blog-root img{ max-width:100%; display:block; }
.dholki-blog-root button{ font-family:inherit; cursor:pointer; }

/* ===================== SEARCH (shared: hero + sidebar) ===================== */
.dholki-blog-search{
  display:flex;
  align-items:center;
  border:1px solid var(--dholki-blog-border);
  border-radius:30px;
  padding:5px 5px 5px 20px;
  background:#fff;
}
.dholki-blog-search input{
  border:none; outline:none; flex:1;
  font-size:14px; font-family:inherit; background:transparent;
  color: var(--dholki-blog-text);
  padding:0;
  box-shadow:unset;
}
.dholki-blog-search input::placeholder{ color: var(--dholki-blog-text-soft); }
.dholki-blog-search button{
  background: var(--dholki-blog-accent) !important;
  border:none !important; color:#fff !important;
  padding:0 !important;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:13px;
  transition: background .15s ease;
}
.dholki-blog-search button:hover{ background: var(--dholki-blog-accent-dark) !important; }

/* ===================== HERO (mobile-only page title) ===================== */
.dholki-blog-hero{
  display:none;
  background: var(--dholki-blog-cream);
  border-bottom:1px solid var(--dholki-blog-border);
  padding:34px 20px 28px;
  text-align:center;
}
.dholki-blog-hero__inner{ max-width:560px; margin:0 auto; }
.dholki-blog-hero__title{
  font-family: var(--dholki-blog-font-serif);
  color: var(--dholki-blog-accent);
  font-size:30px;
  margin:0 0 8px;
}
.dholki-blog-hero__subtitle{
  color: var(--dholki-blog-text-soft);
  font-size:13.5px;
  margin:0 0 20px;
  line-height:1.6;
}
.dholki-blog-search--hero{ margin:0 0 18px; }

.dholki-blog-quickcats{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.dholki-blog-quickcat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:600;
  color: var(--dholki-blog-text);
  width:68px;
}
.dholki-blog-quickcat__icon{
  width:52px; height:52px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--dholki-blog-border);
  display:flex; align-items:center; justify-content:center;
  color: var(--dholki-blog-accent) !important;
  font-size:18px;
  transition: background .15s ease, color .15s ease;
}
.dholki-blog-quickcat:hover .dholki-blog-quickcat__icon{
  background: var(--dholki-blog-accent) !important;
  color:#fff !important;
}

/* ===================== LAYOUT ===================== */
.dholki-blog-main{ max-width:1320px; margin:0 auto; padding:40px 40px 80px; }
.dholki-blog-layout{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:30px;
  align-items:start;
}
.dholki-blog-layout--full{ grid-template-columns:1fr; }
.dholki-blog-layout--reverse{ grid-template-columns:1fr 270px; }
.dholki-blog-layout--reverse .dholki-blog-sidebar{ order:2; }
.dholki-blog-layout--reverse .dholki-blog-content{ order:1; }

/* ===================== SIDEBAR ===================== */
.dholki-blog-box{
  background:#fff;
  border:1px solid var(--dholki-blog-border);
  border-radius:10px;
  padding:22px;
  margin-bottom:22px;
}
.dholki-blog-sidebar-search-box{ padding:10px; }
.dholki-blog-sidebar-search-box .dholki-blog-search{ border:none; padding:0 0 0 10px; }

.dholki-blog-box__title{
  font-family: var(--dholki-blog-font-serif);
  font-size:19px;
  color: var(--dholki-blog-accent);
  margin:0 0 16px;
}

.dholki-blog-cat-list li{ margin-bottom:4px; }
.dholki-blog-cat-list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:6px;
  font-size:14px;
  color: var(--dholki-blog-text) !important;
  transition: background .15s ease, color .15s ease;
}
.dholki-blog-cat-list a em{
  font-style:normal;
  font-size:12.5px;
  color: var(--dholki-blog-text-soft) !important;
}
.dholki-blog-cat-list a:hover,
.dholki-blog-cat-list a.dholki-is-active{
  background: var(--dholki-blog-accent);
  color:#fff !important;
}
.dholki-blog-cat-list a:hover em,
.dholki-blog-cat-list a.dholki-is-active em{ color:#f1d9dd !important; }

.dholki-blog-tag-list{ display:flex; flex-wrap:wrap; gap:9px; }
.dholki-blog-tag-list a{
  background: var(--dholki-blog-rose-light);
  color: var(--dholki-blog-accent-dark) !important;
  font-size:12.5px;
  padding:7px 15px;
  border-radius:20px;
  transition: background .15s ease, color .15s ease;
}
.dholki-blog-tag-list a:hover{ background: var(--dholki-blog-accent); color:#fff !important; }

.dholki-blog-cta{
  background:
    linear-gradient(rgba(61,20,27,.82), rgba(61,20,27,.82)),
    linear-gradient(135deg, var(--dholki-blog-accent), var(--dholki-blog-accent-dark));
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
  padding:32px 24px;
}
.dholki-blog-cta h4{
  font-family: var(--dholki-blog-font-serif);
  color:#fff;
  font-size:19px;
  margin:0 0 8px;
}
.dholki-blog-cta p{ color:#eeddd0; font-size:13.5px; margin:0 0 20px; line-height:1.6; }
.dholki-blog-cta__btn{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  background:#fff !important;
  color: var(--dholki-blog-accent-dark) !important;
  padding:11px 24px;
  border-radius:30px;
  font-size:13.5px;
  font-weight:600;
  transition: background .15s ease, color .15s ease;
}
.dholki-blog-cta__btn:hover{ background: var(--dholki-blog-gold) !important; color:#fff !important; }

/* ===================== AJAX LOADER ===================== */
.dholki-blog-content{ min-width:0; position:relative; }
.dholki-blog-loader{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  z-index:5;
}
.dholki-blog-loader.dholki-is-active{ opacity:1; visibility:visible; }
.dholki-blog-loader__spinner{
  width:42px; height:42px;
  border:3px solid var(--dholki-blog-border);
  border-top-color: var(--dholki-blog-accent);
  border-radius:50%;
  animation: dholki-blog-spin .7s linear infinite;
}
@keyframes dholki-blog-spin{ to{ transform:rotate(360deg); } }

/* ===================== CONTENT HEAD ===================== */
.dholki-blog-content{ min-width:0; }
.dholki-blog-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px;
  flex-wrap:wrap;
  gap:12px;
}
.dholki-blog-head h2{
  font-family: var(--dholki-blog-font-serif);
  color: var(--dholki-blog-accent);
  font-size:24px;
  margin:0;
}
.dholki-blog-head h2 span{
  color: var(--dholki-blog-text-soft);
  font-family: var(--dholki-blog-font-sans);
  font-size:16px;
  font-weight:400;
}
.dholki-blog-sort-form{ display:inline-block; }
.dholki-blog-root .dholki-blog-sort-select{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--dholki-blog-border);
  border-radius:20px;
  padding:9px 34px 9px 18px;
  font-size:13px;
  color: var(--dholki-blog-text-soft);
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%236b5c56" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;
  outline:none;
  cursor:pointer;
}
.dholki-blog-root .dholki-blog-sort-select:focus{ border-color: var(--dholki-blog-accent); }

/* ===================== GRID / CARDS ===================== */
.dholki-blog-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.dholki-blog-card{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--dholki-blog-border);
  display:flex;
  flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.dholki-blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(94,31,43,.14);
}
.dholki-blog-card__media{ position:relative; height:150px; overflow:hidden; background: var(--dholki-blog-cream); }
.dholki-blog-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.dholki-blog-card:hover .dholki-blog-card__media img{ transform:scale(1.08); }
.dholki-blog-card__placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: var(--dholki-blog-border);
  font-size:30px;
}
.dholki-blog-card__cat{
  position:absolute; top:10px; left:10px;
  background: var(--dholki-blog-accent) !important;
  color:#fff !important;
  font-size:10.5px;
  padding:4px 11px;
  border-radius:20px;
  letter-spacing:.02em;
}
.dholki-blog-card__body{ padding:16px 18px 20px; display:flex; flex-direction:column; flex:1; }
.dholki-blog-card__date{
  font-size:12px;
  color: var(--dholki-blog-text-soft);
  display:flex; align-items:center; gap:6px;
  margin-bottom:8px;
}
.dholki-blog-card__body h3{
  font-family: var(--dholki-blog-font-sans);
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  margin:0 0 8px;
}
.dholki-blog-card__body h3 a{ color: var(--dholki-blog-text) !important; }
.dholki-blog-card__body h3 a:hover{ color: var(--dholki-blog-accent) !important; }
.dholki-blog-card__body p{
  font-size:13px;
  color: var(--dholki-blog-text-soft);
  line-height:1.6;
  margin:0 0 14px;
  flex:1;
}
.dholki-blog-read-more{
  font-size:13px;
  color: var(--dholki-blog-accent) !important;
  font-weight:600;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
}
.dholki-blog-read-more i{ transition: transform .2s ease; }
.dholki-blog-card:hover .dholki-blog-read-more i{ transform:translateX(4px); }

.dholki-blog-empty{
  padding:60px 20px;
  text-align:center;
  color: var(--dholki-blog-text-soft);
}

/* ===================== PAGINATION ===================== */
.dholki-blog-pagination{ margin-top:44px; }
.dholki-blog-pagination ul.page-numbers{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
  background:none; border:none; height:auto;
}
.dholki-blog-pagination li .page-numbers{
  min-width:38px; height:38px; padding:0 6px;
  border-radius:50%;
  border:1px solid var(--dholki-blog-border);
  background:#fff !important;
  color: var(--dholki-blog-text) !important;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dholki-blog-pagination li .page-numbers.current{
  background: var(--dholki-blog-accent) !important;
  border-color: var(--dholki-blog-accent);
  color:#fff !important;
}
.dholki-blog-pagination li .page-numbers:hover:not(.current){ border-color: var(--dholki-blog-accent); }
.dholki-blog-pagination li .page-numbers.dots{ border:none; background:none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1200px){
  .dholki-blog-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:900px){
  .dholki-blog-hero{ display:block; }
  .dholki-blog-main{ padding:0 20px 60px; }
  .dholki-blog-layout,
  .dholki-blog-layout--reverse{ grid-template-columns:1fr; }
  .dholki-blog-layout--reverse .dholki-blog-sidebar,
  .dholki-blog-layout--reverse .dholki-blog-content{ order:initial; }

  .dholki-blog-root .dholki-blog-sidebar{ margin-top:24px; min-width:0; }
  .dholki-blog-root .dholki-blog-box{ min-width:0; }
  .dholki-blog-sidebar-search-box,
  .dholki-blog-cta{ display:none; }

  .dholki-blog-box{ background:transparent; border:none; padding:0; margin-bottom:22px; }
  .dholki-blog-box__title{ display:flex; align-items:center; justify-content:space-between; font-size:17px; }

  .dholki-blog-root .dholki-blog-cat-list{
    display:flex !important;
    flex-flow:row nowrap !important;
    gap:10px;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    max-width:100%;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .dholki-blog-root .dholki-blog-cat-list::-webkit-scrollbar{ display:none; }
  .dholki-blog-root .dholki-blog-cat-list li{ flex:0 0 auto !important; margin:0 !important; }
  .dholki-blog-root .dholki-blog-cat-list a{
    background:#fff;
    border:1px solid var(--dholki-blog-border);
    border-radius:20px;
    padding:9px 16px;
    white-space:nowrap !important;
    gap:8px;
  }

  .dholki-blog-root .dholki-blog-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}

@media (max-width:600px){
  .dholki-blog-hero{ padding:26px 16px 22px; }
  .dholki-blog-hero__title{ font-size:24px; }
  .dholki-blog-root .dholki-blog-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:14px; }
  .dholki-blog-card__media{ height:110px; }
  .dholki-blog-card__body{ padding:12px 12px 14px; }
  .dholki-blog-card__body h3{ font-size:13.5px; }
  .dholki-blog-card__body p{ display:none; }
  .dholki-blog-card__date{ font-size:11px; }
  .dholki-blog-read-more{ font-size:12px; }
  .dholki-blog-quickcats{ gap:12px; }
  .dholki-blog-quickcat{ width:60px; }
  .dholki-blog-quickcat__icon{ width:46px; height:46px; font-size:16px; }
  .dholki-blog-head{ align-items:flex-start; }
}