/* =========================================================
   blog-cards.css | Flora.Guru
   Styles for blog engine card output (blog-helpers.php).
   Engine outputs: .blog-cards > .col-sm-6.col-lg-4 > article.blog-card
   Load AFTER mainlanding.css. Do NOT load blog.css or blog-wow.css.
   ========================================================= */

/* ---- Grid: override bootstrap with CSS Grid ---- */
.blog-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.blog-cards > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  display: flex;
}
@media (max-width: 900px) {
  .blog-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .blog-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Card ---- */
.blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(60,52,40,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(60,52,40,.07);
  transition: transform .26s ease, box-shadow .26s ease;
  text-align: left;
}
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(60,52,40,.13);
}

/* ---- Cover ---- */
.blog-card-img-wrap {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-warm, #EDE2D0);
}
.blog-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }

/* ---- Body ---- */
.blog-card-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 20px;
}
.blog-card-meta {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.blog-card-cat {
  display: inline-block;
  padding: 4px 12px; border-radius: 999px;
  background: var(--cream-warm, #EDE2D0);
  color: var(--olive, #6B7A4F);
  font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.blog-card-cat:hover { background: var(--wine, #6B1822); color: #fff; }
.blog-card-date { color: var(--muted, #8C8070); font-size: 13px; }

.blog-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.2px;
  margin: 0 0 12px;
}
.blog-card-title a { color: var(--ink, #1C1810); text-decoration: none; transition: color .2s; }
.blog-card-title a:hover { color: var(--wine, #6B1822); }

.blog-card-excerpt {
  font-size: 14px; line-height: 1.65;
  color: var(--muted, #8C8070);
  margin: 0 0 20px;
}
.blog-card-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid rgba(60,52,40,.08);
}
.blog-card-reading { font-size: 12px; color: var(--muted, #8C8070); white-space: nowrap; }

/* Engine outputs .btn.btn-sm.btn-primary */
.blog-card-footer .btn,
.blog-card-footer a.btn.btn-sm.btn-primary {
  display: inline-flex; align-items: center;
  padding: 9px 20px; border: 0; border-radius: 999px;
  background: var(--wine, #6B1822); color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .2s, transform .2s;
}
.blog-card-footer .btn:hover,
.blog-card-footer a.btn.btn-sm.btn-primary:hover {
  background: #4A1018; transform: translateY(-1px); color: #fff;
}

/* ---- Pagination ---- */
.blog-pagination {
  display: flex; align-items: center;
  justify-content: center; gap: 18px;
  margin-top: 52px; flex-wrap: wrap;
}
.blog-pagination-info { color: var(--muted, #8C8070); font-size: 14px; }
.blog-pagination .btn,
.blog-pagination a.btn.btn-sm.btn-outline,
.blog-pagination-btn {
  display: inline-flex; align-items: center;
  padding: 10px 24px;
  border: 1.5px solid var(--wine, #6B1822); border-radius: 999px;
  background: transparent; color: var(--wine, #6B1822);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .2s, color .2s;
}
.blog-pagination .btn:hover,
.blog-pagination a.btn.btn-sm.btn-outline:hover,
.blog-pagination-btn:hover { background: var(--wine, #6B1822); color: #fff; }

/* ---- Breadcrumbs hero (engine outputs section.breadcrumbs-custom.bg-image) ---- */
section.breadcrumbs-custom.bg-image {
  padding: 80px 0 70px;
  background:
    linear-gradient(170deg, rgba(28,24,16,.65) 0%, rgba(107,24,34,.72) 100%),
    url('https://flora.guru/images/landing/head-office-after0-1920x1080.webp') center / cover no-repeat;
  text-align: center;
}
section.breadcrumbs-custom.bg-image .container { position: relative; z-index: 2; }
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(30px, 4.5vw, 52px); font-weight: 600;
  color: #fff; line-height: 1.14;
  margin: 0 auto 18px; max-width: 860px;
}
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-path {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 12px; margin: 0; padding: 0; list-style: none; font-size: 14px;
}
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-path li { color: rgba(255,255,255,.75); }
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-path li + li::before {
  content: "/"; margin-right: 12px; color: rgba(255,255,255,.4);
}
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-path a {
  color: rgba(255,255,255,.88); text-decoration: none;
}
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-path a:hover { color: #fff; }
section.breadcrumbs-custom.bg-image .breadcrumbs-custom-path li.active { color: #fff; }

/* ---- Posts section ---- */
section.section.bg-default { background: var(--cream, #F5EDE3); }
.blog-subtitle {
  max-width: 680px; margin: 0 auto 42px;
  color: var(--muted, #8C8070); font-size: 17px; line-height: 1.65; text-align: center;
}

/* ---- Empty state ---- */
.blog-empty-wrap { padding: 60px 0; text-align: center; }
.blog-empty { color: var(--muted, #8C8070); font-size: 18px; }

/* =========================================================
   Extra SEO blocks appended after engine output
   ========================================================= */
.blog-extra-section { padding: 80px 0; }
.blog-extra-section.bg-warm { background: var(--cream-warm, #EDE2D0); }
.blog-extra-section.bg-dark  { background: var(--cream-dark, #E8DBC8); }

.blog-extra-head { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.blog-extra-eyebrow {
  display: inline-block; margin-bottom: 12px;
  color: var(--olive, #6B7A4F); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
.blog-extra-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 600;
  line-height: 1.2; color: var(--ink, #1C1810); margin: 0 0 14px;
}
.blog-extra-head h2 .accent { color: var(--wine, #6B1822); }
.blog-extra-head p { color: var(--muted, #8C8070); font-size: 16px; line-height: 1.65; margin: 0; }

/* Categories */
.blog-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.blog-cat-card {
  display: flex; flex-direction: column;
  padding: 26px 24px; background: #fff;
  border: 1px solid rgba(60,52,40,.10); border-radius: 14px;
  text-decoration: none;
  transition: transform .24s, box-shadow .24s, border-color .24s;
}
.blog-cat-card:hover {
  transform: translateY(-4px); border-color: var(--wine, #6B1822);
  box-shadow: 0 10px 32px rgba(60,52,40,.12);
}
.blog-cat-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px; font-weight: 600; line-height: 1.3;
  color: var(--ink, #1C1810); margin-bottom: 8px;
}
.blog-cat-desc { color: var(--muted, #8C8070); font-size: 13px; line-height: 1.55; }
.blog-cat-count { margin-top: 14px; color: var(--wine, #6B1822); font-size: 12px; font-weight: 700; }

/* Tag cloud */
.blog-tag-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.blog-tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 1px solid rgba(60,52,40,.12);
  border-radius: 999px; background: #fff; color: var(--ink, #1C1810);
  font-size: 13px; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.blog-tag-pill span { color: var(--muted, #8C8070); font-size: 11px; }
.blog-tag-pill:hover { background: var(--wine, #6B1822); border-color: var(--wine, #6B1822); color: #fff; }
.blog-tag-pill:hover span { color: rgba(255,255,255,.75); }

/* Service photo cards */
.blog-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.blog-svc-card {
  position: relative; display: flex; align-items: flex-end;
  min-height: 250px; padding: 24px; border-radius: 16px;
  background-size: cover; background-position: center;
  overflow: hidden; text-decoration: none; isolation: isolate;
}
.blog-svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,24,16,.15) 30%, rgba(28,24,16,.80) 100%);
  transition: background .28s;
}
.blog-svc-card:hover::after {
  background: linear-gradient(180deg, rgba(107,24,34,.28) 20%, rgba(107,24,34,.86) 100%);
}
.blog-svc-inner { display: flex; flex-direction: column; }
.blog-svc-tag {
  display: inline-block; margin-bottom: 8px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.blog-svc-title {
  color: #fff; font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600; line-height: 1.28;
}
.blog-svc-meta { margin-top: 5px; color: rgba(255,255,255,.78); font-size: 13px; }

/* CTA band */
.blog-cta-band {
  padding: 72px 0;
  background: linear-gradient(135deg, #6B1822 0%, #4A1018 100%);
  text-align: center;
}
.blog-cta-band h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 3vw, 38px); font-weight: 600; line-height: 1.22;
  color: #fff; max-width: 720px; margin: 0 auto 14px;
}
.blog-cta-band p {
  max-width: 580px; margin: 0 auto 28px;
  color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.65;
}
.blog-cta-btn {
  display: inline-flex; align-items: center;
  padding: 15px 36px; border-radius: 999px;
  background: #fff; color: var(--wine, #6B1822);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background .22s, color .22s, transform .22s;
}
.blog-cta-btn:hover { background: var(--gold, #C9A24A); color: #fff; transform: translateY(-2px); }

/* SEO text */
.blog-seo-text { max-width: 780px; margin: 0 auto; }
.blog-seo-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; line-height: 1.22;
  color: var(--ink, #1C1810); margin: 0 0 18px;
}
.blog-seo-text p { color: var(--muted, #8C8070); font-size: 15px; line-height: 1.74; margin: 0 0 16px; }
.blog-seo-text a { color: var(--wine, #6B1822); font-weight: 600; }
.blog-seo-text a:hover { color: #4A1018; }

@media (max-width: 720px) {
  section.breadcrumbs-custom.bg-image { padding: 56px 0 46px; }
  .blog-extra-section { padding: 56px 0; }
  .blog-cta-band { padding: 52px 0; }
  .blog-pagination { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card-img, .blog-cat-card,
  .blog-svc-card::after, .blog-cta-btn { transition: none; }
  .blog-card:hover { transform: none; }
  .blog-card:hover .blog-card-img { transform: none; }
  .blog-cat-card:hover { transform: none; }
  .blog-cta-btn:hover { transform: none; }
}