/* Patch: constrain article/category images to card container to match news2 layout */
.news_list .media,
.news_card-media,
.category_card-media {
  overflow: hidden;
  border-radius: 12px;
}
.news_list .media img,
.news_card-media img,
.category_card-media img,
.news_list .media picture img,
.category_card-media picture img {
  display: block;
  width: 100%;
  height: 220px; /* preferred card image height */
  object-fit: cover; /* crop to fill */
}
@media (min-width: 768px) {
  .news_list .media img,
  .news_card-media img,
  .category_card-media img {
    height: 300px;
  }
}

/* Layout: news list grid */
.news_list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 -0.5rem;
}
.news_list-item {
  padding: 0.5rem;
  box-sizing: border-box;
}
/* two columns on md+, single column on small screens */
.news_list-item.col-md-6 { width: 100%; }
@media (min-width: 768px) {
  .news_list-item.col-md-6 { width: calc(50% - 1.25rem); }
}

/* Card wrapper */
.news_list-item_wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(20,24,28,0.06);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.news_list-item_wrapper:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(20,24,28,0.09); }

/* Media area ensures consistent aspect-ratio when possible */
.news_list .media { width: 100%; display:block; }
.news_list .media picture,
.news_list .media img { width: 100%; height: 100%; display:block; }

.main { padding: 1rem 1rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.main_title { font-size: 1.05rem; font-weight:700; color:#10221f; text-decoration:none; display:block; margin:0 0 .25rem; }
.main_preview { color:#495057; font-size:.95rem; margin:0; line-height:1.45; }
.main_metadata { font-size:.85rem; color:#6c757d; margin-bottom:.25rem; }

/* Pagination */
.pagination { list-style:none; padding:0; margin:1rem 0; display:flex; gap:.5rem; flex-wrap:wrap; }
.pagination-page a { display:inline-flex; align-items:center; justify-content:center; padding:.5rem .75rem; background:#fff; border-radius:8px; border:1px solid #e9ecef; color:#10221f; text-decoration:none; }
.pagination-page a[data-current="true"], .pagination-page a:hover { background:#10221f; color:#fff; border-color:#10221f; }

/* Sidebar widgets styling */
.widgets { margin-top: 1rem; }
.widgets .widgets-item { background:#fff; border-radius:10px; padding:1rem; margin-bottom:1rem; box-shadow:0 6px 18px rgba(20,24,28,0.04); }
.widgets-item_header { font-weight:700; margin:0 0 .75rem; font-size:1rem; }
.widgets-item_nav .nav-link { display:inline-block; margin-right:.5rem; padding:.25rem .5rem; color:#10221f; text-decoration:none; }

/* Recent list */
.widgets .list { list-style:none; padding:0; margin:0; }
.widgets .list-item { display:flex; gap:.5rem; align-items:center; padding:.35rem 0; border-bottom:1px dashed rgba(16,34,31,0.04); }
.widgets .list-item:last-child { border-bottom: none; }
.widgets .list-item .preview { width:72px; height:48px; object-fit:cover; border-radius:6px; }
.widgets .list-item .title { font-size:.95rem; font-weight:600; color:#10221f; }
.widgets .list-item .metadata { font-size:.8rem; color:#6c757d; }

/* Mobile-first spacing adjustments */
@media (min-width: 992px) {
  /* Make content column wider and sidebar closer to premium proportion (~450px) */
  .news_wrapper { width: 72%; float:left; }
  /* Force sidebar to a fixed-ish width similar to premium theme (approx 420-480px) */
  .widgets { width: 28%; float:right; max-width:480px; }
  /* For single post layout where we use Bootstrap grid classes, enforce a fixed sidebar and flexible content column
     This aligns with post2 demo where sidebar width is ~420-480px and content fills remaining space */
  .post-content-wrapper .row { display: flex; align-items: flex-start; gap: 2rem; }
  /* Prevent the flex row from wrapping so the sidebar remains to the right of content */
  .post-content-wrapper .row { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: nowrap; }
  /* Ensure .widgets float does not break the single-post flex layout: override floats inside post content wrapper */
  .post-content-wrapper .widgets { float: none; width: auto; max-width: 480px; }

  .post-content-wrapper .row > .col-lg-8 { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 440px); }
  .post-content-wrapper .row > .col-lg-4 { flex: 0 0 440px; max-width: 440px; }

  /* Make sidebar widgets sticky so they visually occupy the same height like premium theme */
  .post-content-wrapper .row > .col-lg-4 { align-self: flex-start; }
  .post-content-wrapper .row > .col-lg-4 .widgets { position: sticky; top: calc(var(--header-height,72px) + 1rem); margin-top:0; }
}

/* Small utility tweaks */
.category_card-title { font-weight:700; font-size:1.1rem; margin:0.5rem 0 0; }
.category_card-excerpt { color:#6c757d; margin:0.5rem 0 0; }

/* Improve accessibility of images when lazy-loading fallback present */
img.lazy { opacity:1; transition:opacity .2s ease; }


/* Single post (post2) styles */
.post-hero-media { position:relative; overflow:hidden; }
.post-hero-img{ width:100%; height:420px; object-fit:cover; display:block; }
.post-hero-overlay{ position:absolute; left:0; right:0; bottom:0; top:0; display:flex; align-items:flex-end; background:linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.6) 100%); }
.post-hero .post-title{ color:#fff; margin:0 0 0.5rem; font-weight:800; }
.post-meta{ color:rgba(255,255,255,0.85); font-size:0.95rem; display:flex; gap:0.5rem; align-items:center; }
.post-meta .dot{ opacity:0.6 }
.reading-time{ color:rgba(255,255,255,0.85); }

.post-content-wrapper { padding:2rem 0; }
.post-content .content-body { color:#111; font-size:1rem; line-height:1.7; }
.author-box { background:#fff; padding:0.75rem 1rem; border-radius:10px; box-shadow:0 6px 18px rgba(20,24,28,0.04); }
.author-avatar img{ border-radius:50%; }

.related-title { font-size:1.1rem; margin-bottom:0.75rem; }
.related-grid { gap:1rem; }
.related-card { width:100%; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 6px 18px rgba(20,24,28,0.04); }
 .related-card { display:flex; flex-direction:column; width:100%; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 6px 18px rgba(20,24,28,0.04); }
 .related-card .related-media img, .related-card .card-img-top { width:100%; height:160px; object-fit:cover; display:block; }
 .related-card .card-body { padding:0.75rem 0.9rem; }
 .related-card .related-title-sm { font-size:1rem; margin:0 0 .4rem; color:var(--brand-color); font-weight:700; }
 .related-card .related-excerpt { margin:0; color:var(--muted); font-size:0.95rem; }

@media (min-width: 768px) {
  .post-hero-img{ height:520px; }
  /* Use three-column related grid on md+ but respect card gaps */
  .related-card { width: calc(33.333% - 0.66rem); }
  .related-grid { gap: 1rem; }
}

/* Prev/Next preview sizing to match post2 demo */
.post-pagination .post-pagi-img img { width:140px; height:96px; object-fit:cover; border-radius:8px; }

/* Cap content column max width so long lines don't span too far (post2-like measure) */
.post-content .content-body { max-width:760px; }

/* post pagination: nicer prev/next previews */
.post-pagination .prev, .post-pagination .next { display:flex; align-items:center; gap:0.75rem; }
.post-pagination .post-pagi-img img { width:120px; height:80px; object-fit:cover; border-radius:8px; }
.post-pagi-title { font-size:1rem; margin:0; }
.post-pagi-name { font-size:0.75rem; color:var(--muted); display:block; }

/* related grid spacing for small gutters */
.related-grid { display:flex; flex-wrap:wrap; gap:1rem; }
.related-grid .related-card { flex: 1 1 calc(33% - 1rem); }
.related-grid .related-card.card { max-width: 100%; }

/* Further refinements for post2-like appearance */
:root{
  --brand-color:#10221f; /* deep teal used across theme */
  --accent:#EFC368; /* warm accent */
  --muted:#6c757d;
}

.post-hero-overlay .container{ padding:2rem 1rem; }

/* Reduce the default spacing before the main content to avoid large white gaps
   Make this mobile-first (smaller on mobile, slightly larger on desktop) */
.site-body-gap {
  /* Make this almost zero by default to match premium theme spacing; allow small increases on larger screens */
  height: 8px !important;
}
@media (min-width: 768px) {
  .site-body-gap { height: 12px !important; }
}
@media (min-width: 1200px) {
  .site-body-gap { height: 24px !important; }
}
.post-hero .post-title{ font-size:2.25rem; line-height:1.02; text-shadow:0 6px 22px rgba(0,0,0,0.48); letter-spacing:-0.5px; }
@media(min-width:768px){ .post-hero .post-title{ font-size:3.6rem; } }

.post-meta { font-size:0.95rem; color:rgba(255,255,255,0.9); }
.post-meta .reading-time{ background:rgba(255,255,255,0.06); padding:.2rem .45rem; border-radius:6px; }

.post-content .content-body{ max-width:760px; margin:1.2rem 0 0; font-size:1.06rem; line-height:1.85; color:var(--brand-color); }
.post-content .content-body p{ margin:1rem 0; }
.post-content .content-body h2{ font-size:1.45rem; margin:1.25rem 0 0.75rem; color:var(--brand-color); }
.post-content .content-body h3{ font-size:1.2rem; margin:1rem 0 0.5rem; }
.post-content .content-body img{ max-width:100%; display:block; margin:1rem 0; border-radius:8px; }
.post-content .content-body blockquote{ border-left:4px solid var(--accent); padding:0.6rem 1rem; background:#faf8f4; color:var(--brand-color); margin:1rem 0; border-radius:6px; }
.post-content .content-body ul, .post-content .content-body ol{ margin:0.8rem 0 0.8rem 1.25rem; }

.author-box{ display:flex; gap:0.8rem; align-items:center; padding:.85rem 1rem; }
.author-name{ font-weight:700; }
.author-bio{ font-size:.92rem; }

.related-title { color:var(--brand-color); font-weight:700; }
.related-card { transition: transform .18s ease, box-shadow .18s ease; }
.related-card:hover { transform: translateY(-6px); box-shadow:0 18px 40px rgba(16,34,31,0.08); }
.related-card .related-media img{ height:140px; }

/* Ensure adequate spacing on container edges */
.post-content-wrapper .container{ padding-left:1rem; padding-right:1rem; }

/* small-screen tweaks */
@media(max-width:767px){
  .post-hero-img{ height:360px; }
  .post-hero-overlay .container{ padding:1rem; }
  .post-hero .post-title{ font-size:1.6rem; }
  .post-content .content-body{ padding-right:0; padding-left:0; }
}

/* Tighten the empty container gap that appears right before the article on some templates
   Reduce vertical padding so hero sits closer to the header. This targets the utility container with
   classes matching Bootstrap padding utilities used across the theme. Mobile-first defaults small. */
.container.py-5.fade-in {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
@media(min-width:768px){
  .container.py-5.fade-in { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Fix mobile side overflow: reduce container paddings and ensure content uses box-sizing */
.post-content-wrapper .container{ padding-left:0.75rem; padding-right:0.75rem; box-sizing:border-box; }
@media(max-width:767px){
  .post-content .content-body{ padding-left:0.5rem; padding-right:0.5rem; box-sizing:border-box; }
  /* Prevent images or long elements from exceeding viewport */
  .post-content .content-body img, .post-content .content-body iframe, .post-content .content-body table{ max-width:100%; width:100%; }
}
@media(min-width:1200px){
  .container.py-5.fade-in { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* Technical summary and progress bars for strain single page */
.technical-summary { margin-top: 1rem; }
.technical-summary .tech-badge { font-weight:600; font-size:.87rem; }
.about_secondary-content_tabs { margin-top:1rem; }
.about_secondary-content_tabs .card { border-radius:10px; }
.progress-bar-compact { height:10px; border-radius:8px; background:#e9ecef; overflow:hidden; }
.progress-bar-compact > .progress-fill { height:100%; display:block; background:linear-gradient(90deg,var(--brand-color), #2e8b73); border-radius:8px; }
.cannabinoid-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.cannabinoid-row .label { min-width:64px; font-weight:700; color:var(--brand-color); }
.cannabinoid-row .value { width:60px; text-align:right; color:#495057; }
.terpene-list td, .terpene-list th { vertical-align:middle; }
.effects-list .tech-badge { font-size:.85rem; padding:.35rem .5rem; border-radius:999px; }

/* Tabs: make active tab prominent and content card-like */
.about_secondary-content_nav .nav-link { cursor:pointer; padding:.6rem 1rem; border-radius:8px; border:1px solid transparent; }
.about_secondary-content_nav .nav-link.active { background:#fff; border-color:#e9ecef; box-shadow:0 8px 20px rgba(20,24,28,0.04); }
.about_secondary-content_tabs .wrapper { background:#fff; border-radius:10px; padding:1rem; box-shadow:0 8px 24px rgba(20,24,28,0.04); }

/* Ensure cards and tables inside tabs look compact and readable */
.about_secondary .card { border:none; }
.about_secondary .card-header { font-weight:700; }
.about_secondary .table-sm td, .about_secondary .table-sm th { padding:.35rem .5rem; }

@media (max-width:767px){
  .about_main { flex-direction:column; gap:1rem; }
  .about_main-slider img { height:auto; }
}

/* Mobile optimizations for strain/product cards on home */
@media (max-width:767px) {
  /* Make the products_list a single-column list with compact card rows */
  .products_list { display:block; }
  .products_list-item { padding:0.375rem 0; }
  .products_list-item .products_list-item_wrapper { flex-direction:row; align-items:center; gap:0.6rem; padding:0.5rem; border-radius:10px; }

  /* Left: fixed thumbnail area */
  .products_list-item .media { flex:0 0 92px; width:92px; height:92px; overflow:hidden; border-radius:8px; }
  .products_list-item .media img { width:100%; height:100%; object-fit:cover; display:block; }

  /* Right: main content stacks vertically but aligned left */
  .products_list-item .main { flex:1 1 auto; align-items:flex-start; padding:0; gap:0.35rem; }
  .products_list-item .main .main_title { font-size:1rem; text-align:left; margin:0; }

  /* Badges: smaller and inline */
  .products_list-item .strain_meta { display:flex; gap:0.5rem; margin:0.25rem 0; }
  .products_list-item .strain-badge { padding:0.22rem 0.45rem; font-size:0.82rem; margin-right:0; }

  /* CTA: place on the right within the content area and increase tappable area */
  .products_list-item .btn--green { font-size:0.95rem; padding:0.45rem 0.75rem; border-radius:8px; }

  /* Ensure entire row is clickable by keeping anchor links full height where applicable */
  .products_list-item a { color:inherit; }

  /* Slight shadow and visual separation for mobile rows */
  .products_list-item .products_list-item_wrapper { box-shadow: 0 6px 18px rgba(16,34,31,0.04); background:#fff; }

  /* Reduce vertical spacing for the promo block to fit mobile view */
  .products_list-promo { margin-top:0.75rem; padding:0.75rem; border-radius:10px; }
}

/* Strain technical page refinements */
.cannabinoid-progress { display:none; } /* hide native progress by default; visible to screen readers via aria */
.tech-details summary { cursor:pointer; list-style:none; font-weight:700; }
.tech-details summary::-webkit-details-marker { display:none; }
.tech-details[open] summary::after { content: ' ▲'; font-weight:600; color:var(--brand-color); }
.tech-details:not([open]) summary::after { content: ' ▼'; font-weight:600; color:var(--muted); }

/* Mobile: keep details closed by default via media query and show a compact CTA */
@media (max-width:767px) {
  .tech-details { max-height: none; }
  /* (no-op) */
  /* sticky CTA: show a small fixed bar at bottom with quick actions */
  .strain-sticky-cta { display:flex; gap:0.5rem; position:fixed; left:0; right:0; bottom:0; padding:0.5rem 1rem; background:linear-gradient(90deg,#fff,#fbfbfb); box-shadow:0 -6px 16px rgba(16,34,31,0.08); align-items:center; z-index:120; }
  .strain-sticky-cta .btn { flex:1 1 auto; }
}

/* Desktop: show larger progress bars visually and hide numeric progress element */
@media (min-width:768px) {
  .cannabinoid-progress { display:none; }
  .cannabinoid-row-compact .bar { height:10px; }
}




/* Refactor-specific: ensure sidebar and hero spacing are neat */
.post-hero { margin-bottom: 1.25rem; }
.post-hero .post-title { font-size: 2rem; margin-top: .25rem; }
.post-content-wrapper .widgets-item { padding: 1rem; }
.widgets-item .widgets-item_header { font-size: 1.05rem; margin-bottom: .5rem; }

/* Make the sidebar content visually compact and readable */
.widgets-item .card { border-radius: 8px; box-shadow: none; border: 1px solid #f1f1f1; }
.widgets-item .card .card-body { padding: .6rem; }

/* Ensure sticky area doesn't overflow on small screens */
@media (max-width: 991px) {
  .post-hero-img{ height:360px; }
  .post-hero .post-title{ font-size:1.6rem; }
  .post-content-wrapper .widgets { position: static; }
}

/* Slight visual emphasis on labels inside technical sidebar */
.technical-summary .label { color: #0f2b28; font-weight: 700; }

/* Safety: ensure footer is visible above page overlays but below fixed UI like modals */
.footer { position: relative; z-index: 30; }
.footer .footer_secondary { z-index: 31; }

/* Compact technical widgets (for strain details) */
.tech-widgets { display:flex; flex-wrap:wrap; gap:0.75rem; }
.tech-widget { background: linear-gradient(180deg, #fff, #fbfbfb); border:1px solid #eef3f1; border-radius:10px; padding:0.75rem; box-shadow:0 8px 20px rgba(16,34,31,0.03); flex:1 1 220px; min-width:200px; }
.tech-widget .widget-title { font-weight:800; color:var(--brand-color); font-size:0.95rem; display:flex; align-items:center; gap:0.5rem; }
.tech-widget .widget-body { margin-top:0.5rem; font-size:0.95rem; color:#23423b; }
.tech-emoji { font-size:1.15rem; line-height:1; }
.tech-small { font-size:0.86rem; color:var(--muted); }

/* compact progress rows */
.cannabinoid-row-compact { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.45rem; }
.cannabinoid-row-compact .label { min-width:56px; font-weight:700; color:var(--brand-color); font-size:0.9rem; }
.cannabinoid-row-compact .bar { flex:1 1 auto; height:8px; background:#eef6f3; border-radius:8px; overflow:hidden; }
.cannabinoid-row-compact .bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--brand-color), #2e8b73); }
.cannabinoid-row-compact .pct { width:40px; text-align:right; font-size:0.85rem; color:#495057; }

/* terpene compact table */
.terpene-compact table { width:100%; border-collapse:collapse; }
.terpene-compact td, .terpene-compact th { padding:0.35rem 0.45rem; }
.terpene-compact th { text-align:left; font-weight:700; color:var(--brand-color); }

/* badges styling for effects/aromas */
.effects-list .badge, .aromas-list .badge { background:linear-gradient(90deg,#dff6ef,#e6f4f0); color:#0f2b28; border:1px solid #d0eae3; }

@media (max-width:767px) {
  .tech-widgets { gap:0.5rem; }
  .tech-widget { flex:1 1 100%; }
}